130 lines
2.4 KiB
SCSS
130 lines
2.4 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--padding: 0.5em;
|
|
|
|
$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%;
|
|
}
|
|
|
|
&__backdrop {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: $o-modal--backdrop;
|
|
|
|
//Transition Properties
|
|
transition: opacity #{$o-modal--transition};
|
|
opacity: 0;
|
|
}
|
|
|
|
&__box {
|
|
@include t-absolute-center-x-y();
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 95%;
|
|
max-height: 95%;
|
|
|
|
&-inner {
|
|
position: relative;
|
|
@extend %t-flexbox;
|
|
@include t-flex-wrap(wrap);
|
|
@include t-flex-direction(column);
|
|
@include t-align-items(flex-start);
|
|
@include t-align-content(flex-start);
|
|
@extend %t-dp--shadow;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: $o-modal--background;
|
|
|
|
//Transition properties
|
|
transition: all #{$o-modal--transition};
|
|
@include t-scale(0.4);
|
|
opacity: 0;
|
|
}
|
|
|
|
&-body {
|
|
position: relative;
|
|
@include t-flex-grow(1);
|
|
width: 100%;
|
|
|
|
/* Unfortunately flex can only get us half way there */
|
|
&-inner {//Hacks our content so it will never overflow its container.
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
padding: $o-modal--padding;
|
|
}
|
|
}
|
|
|
|
&-footer {
|
|
width: 100%;
|
|
padding: $o-modal--padding;
|
|
}
|
|
}
|
|
|
|
@include t-media-query($s-xsmall-up) {
|
|
&__box {
|
|
width: 800px;
|
|
height: 600px;
|
|
}
|
|
}
|
|
|
|
//Transition related
|
|
&__transition {
|
|
&-container {}//Top level container
|
|
|
|
//Entry animation
|
|
&-enter {
|
|
&-active {}
|
|
&-done {}
|
|
|
|
&-active,&-done {
|
|
.o-modal__backdrop {
|
|
opacity: 1;
|
|
}
|
|
|
|
.o-modal__box-inner {
|
|
@include t-scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
//Exit animation
|
|
&-exit {
|
|
&-active {}
|
|
&-done {
|
|
}
|
|
}
|
|
}
|
|
}
|