mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-02-25 01:12:57 +01:00
85 lines
3.2 KiB
SCSS
85 lines
3.2 KiB
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;
|
|
}
|
|
} |