mini-css/scss/mini-extra/_modal.scss

/*
	Mixin for modal dialogs.
	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.
*/
@mixin 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							){
	.#{$modal-name}{
		display: none;
		& + div{
			z-index: 997;
			position: fixed;
			width: 100%;
    		height: 0;
    		opacity: 0;
    		display: none;
    		@if $modal-transition-enabled == 'enabled'{
    			transition: opacity .3s ease-out;
    		}
			& > div{
				z-index: 998;
				position: relative;
				width: $modal-width;
				color: $modal-color;
				background-color: $modal-bg-color;		
				margin: $modal-top-margin auto 0;			
				padding: $modal-padding;
				border: $modal-border;
				border-radius: $modal-border-radius;
				@if $modal-shadow-enabled == 'enabled'{
    				box-shadow: 0 5px 15px rgba(0,0,0,.5);
    			}			
			}
		}
		&:checked + div{
			height: 100%;
			opacity: 1;	
			display: block;	
			& > label{
				background-color: rgba(0,0,0,.35);					
				position: fixed;
				width: 100%;
    			height: 100%;
    			top: 0;
			}
		}
	}
}
/*
	Mixin for close button support inside of modal dialogs.
	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.
*/
@mixin make-modal-close-support($modal-name, $close-name, $modal-padding){
	.#{$modal-name} + div > div .#{$close-name}{
		position: absolute;
		top: $modal-padding;
		right: $modal-padding;
	}
}