111 lines
1.7 KiB
SCSS
111 lines
1.7 KiB
SCSS
/*
|
|
* Modal
|
|
* Popup box designed to alert, or offer a unique interaction method.
|
|
*
|
|
* Dependencies:
|
|
* styles/tools/_absolute-centering.scss
|
|
* styles/tools/_shadow.scss
|
|
* styles/settings/z.scss
|
|
*
|
|
* Version:
|
|
* 1.0.0 - 2018/07/05
|
|
*/
|
|
$o-modal--backdrop: rgba(0, 0, 0, 0.7);
|
|
$o-modal--background: white;
|
|
|
|
$o-modal--transition: 0.2s $s-animation--ease-out;
|
|
|
|
.o-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: $s-z--modal;
|
|
|
|
&__inner {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
&__backdrop {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: $o-modal--backdrop;
|
|
|
|
//Transition Properties
|
|
transition: opacity #{$o-modal--transition};
|
|
opacity: 0;
|
|
}
|
|
|
|
&__box {
|
|
@extend %t-dp--shadow;
|
|
background: $o-modal--background;
|
|
position: relative;
|
|
width: 100%;
|
|
margin: 5em auto;
|
|
|
|
//Transition properties
|
|
transition: all #{$o-modal--transition};
|
|
@include t-scale(0.4);
|
|
opacity: 0;
|
|
|
|
&-heading,
|
|
&-body,
|
|
&-footer {
|
|
padding: 1em;
|
|
}
|
|
}
|
|
|
|
&__title {
|
|
margin: 1em 0 0.5em;
|
|
}
|
|
|
|
|
|
//Media Queries
|
|
@include t-media-query($s-xsmall-up) {
|
|
&__box {
|
|
max-width: 600px;
|
|
|
|
&.is-large {
|
|
max-width: 900px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//Transition related
|
|
&__transition {
|
|
&-container {}//Top level container
|
|
|
|
//Entry animation
|
|
&-enter {
|
|
&-active {}
|
|
&-done {}
|
|
|
|
&-active,&-done {
|
|
.o-modal__backdrop {
|
|
opacity: 1;
|
|
}
|
|
|
|
.o-modal__box {
|
|
@include t-scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
//Exit animation
|
|
&-exit {
|
|
&-active {}
|
|
&-done {
|
|
}
|
|
}
|
|
}
|
|
}
|