Lightweight CSS Framework for Building Apps and Websites
https://crispy-css.com
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
1.9 KiB
85 lines
1.9 KiB
/**
|
|
* components: modal
|
|
*
|
|
* <div class="modal">
|
|
* <div class="panel">
|
|
*
|
|
* </div>
|
|
* </div>
|
|
*
|
|
* @author Björn Hase, Tentakelfabrik
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
|
* @link https://github.com/tentakelfabrik/crispy-css
|
|
*
|
|
*/
|
|
|
|
$crispy__modal__max-width-breakpoints: (
|
|
$crispy__md: 50%
|
|
) !default;
|
|
|
|
$crispy__modal__margin-breakpoints: (
|
|
$crispy__md: 0.75em
|
|
) !default;
|
|
|
|
$crispy__modal__z-index: zIndex('modal') !default;
|
|
|
|
@mixin crispy__modal {
|
|
.modal {
|
|
position: absolute;
|
|
z-index: $crispy__modal__z-index;
|
|
width: 100%;
|
|
|
|
margin: 0;
|
|
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
|
|
// make sure that on smartphones modal uses full width
|
|
@include crispy__media__breakpoints('max-width', $crispy__modal__max-width-breakpoints);
|
|
|
|
&--fixed {
|
|
position: fixed;
|
|
}
|
|
|
|
&--bottom-left, &--top-left, &--center-left {
|
|
left: 0;
|
|
}
|
|
|
|
&--bottom-right, &--top-right, &--center-right {
|
|
right: 0;
|
|
left: unset;
|
|
}
|
|
|
|
&--bottom-left,
|
|
&--top-left,
|
|
&--bottom-right,
|
|
&--top-right,
|
|
&--bottom-center,
|
|
&--top-center,
|
|
&--center-right,
|
|
&--center-left {
|
|
transform: translate(0, 0);
|
|
@include crispy__media__breakpoints('margin', $crispy__modal__margin-breakpoints);
|
|
}
|
|
|
|
&--bottom-left, &--bottom-right, &--bottom-center {
|
|
bottom: 0;
|
|
top: unset;
|
|
}
|
|
|
|
&--center-right, &--center-left {
|
|
transform: translate(0, -50%);
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&--bottom-center, &--top-center {
|
|
transform: translate(-50%, 0);
|
|
}
|
|
|
|
&--top-left, &--top-right, &--top-center {
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|