mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-02 12:00:36 +02:00
Code Issues Releases Wiki Activity
Page: Modals
Pages
Base Buttons Carousel Collapse Documentation Extra utilities and experimental classes Flavors Forms Grid Home Labels and Badges Modals Navigation Navigation: Dropdown Progress Bars Spinners Tables Tabs Utilities and helper classes
Clone
1
Modals
Angelos Chalaris edited this page 2016-09-07 11:18:28 +03:00
Table of Contents

The modal dialog module allows you to create customized modal dialogs with very little effort. In the _modal.scss file, you can find two mixins that can be used to create your own modal dialogs, along with support for a close sign from the utilities module.

Making a modal dialog

To make a modal dialog style, use the make-modal mixin.

Definition

make-modal(	
	$modal-name, 
	$modal-color, 
	$modal-bg-color, 
	$modal-transition-enabled, 					
	$modal-shadow-enabled, 
	$modal-border, 
	$modal-border-radius, 
	$modal-padding, 
	$modal-top-margin, 
	$modal-width)

Parameters

  • $modal-name : The class name for the modal dialog.
  • $modal-color : The text color of the modal dialog.
  • $modal-bg-color : The background color of the modal dialog.
  • $modal-transition-enabled : Determines if a transition style will be applied when the modal changes states. [1]
  • $modal-shadow-enabled : Determines if a shadow should be cast from the modal dialog. [1]
  • $modal-border : The border style of the modal dialog.
  • $modal-border-radius : The border radius of the modal dialog's border.
  • $modal-padding : The padding of the modal dialog's contents.
  • $modal-top-margin : The distance of the modal dialog from the top of the parent container. [2]
  • $modal-width : The width of the modal dialog. [2]

Notes:

  • [1] : The values of $modal-transition-enabled and $modal-shadow-enabled should be enabled or disabled. If an invalid value is supplied, the mixin will act as if it was disabled.
  • [2] : The values of $modal-top-margin and $modal-width should be in percentage (%) values to properly scale on all devices. However, there are no restrictions.

Adding support for a close button

To add support for a close button, use the make-modal-close-support mixin.

Definition

make-modal-close-support(
	$modal-name, 
	$close-name, 
	$modal-padding)

Parameters

  • $modal-name : The class name for the modal dialog. [1]
  • $close-name : The class name for the close sign utility class. [2]
  • $modal-padding : The padding of the close button. [3]

Notes:

  • [1] : The value of $modal-name should match the value specified in the modal dialog's mixin, in order for this to work correctly.
  • [2] : The value of $close-name should match the value specified in the close sign utility's mixin, in order for this to work correctly.
  • [3] : The close button will be placed at the top right of the modal dialog. Its padding should be similar to the value specified for padding in the modal dialog itself, however it could vary based on personal preference.

Remarks

  • Some styling decisions have been hardcoded into the modals module (i.e. shadows and transitions). You can toggle those styles using the provided variables, however, you can entirely change them manually.
  • The z-index of modal dialogs has been set to lower than that of the navigation bar. This is done in order to allow the menu to be displayed in mobile devices even with a modal opened.
  • The first div element of a modal dialog's structure will always act as a container to fill the viewport, so no styling is applied directly to it, except for displaying and transitions.
  • The modal dialog's class is assumed to be applied on a checkbox and the whole structure of the modal must precede any other elements in the HTML page (except possibly for navigation elements) so that it can use the whole viewport for better results. Use inside grids is possible, but not adviced.
  • For the close button to work, it needs to be wrapped in a label referencing the modal dialog's checkbox.

mini.css is a minimal Sass-y responsive mobile-first style-agnostic CSS framework that allows you to build very lightweight pages with minimal effort. It is built using Sass (SCSS), is fully customizable and hopes to allow designers and developers build the webpages they want. The framework is licensed under the MIT license. Contributions and feedback are always welcome.