154 lines
2.2 KiB
SCSS
154 lines
2.2 KiB
SCSS
@import 'constants';
|
|
|
|
@keyframes popup-show{
|
|
from{ transform: translateX(-50%) translateY(-50%) scale(.8); }
|
|
to{ transform: translateX(-50%) translateY(-50%) scale(1); }
|
|
}
|
|
|
|
@keyframes filter-show{
|
|
from{ opacity: 0; }
|
|
to{ opacity: 1; }
|
|
}
|
|
|
|
|
|
/* (0) Popup Filter Background
|
|
---------------------------------------------------------*/
|
|
#popup-filter-background{
|
|
display: block;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
z-index: 700;
|
|
|
|
background-color: rgba(0,0,0,.8);
|
|
|
|
transition: opacity .2s ease-in-out;
|
|
animation: filter-show .2s ease-in-out;
|
|
}
|
|
|
|
|
|
/* (1) Popup box
|
|
---------------------------------------------------------*/
|
|
.popup{
|
|
display: flex;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 440px;
|
|
min-height: 200px;
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
border-radius: 5px / 5px;
|
|
|
|
background-color: #36393f;
|
|
|
|
overflow: hidden;
|
|
|
|
z-index: 800;
|
|
|
|
transform: translateX(-50%) translateY(-50%) scale(1);
|
|
|
|
transition: transform .2s ease-in-out;
|
|
animation: popup-show .2s ease-in-out;
|
|
|
|
}
|
|
|
|
|
|
/* (2) Popup HEADER
|
|
---------------------------------------------------------*/
|
|
.popup > .header{
|
|
|
|
display: block;
|
|
|
|
margin: 1em 1.3em;
|
|
|
|
font-size: .9em;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
|
|
strong{
|
|
color: $main;
|
|
text-transform: none;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
/* (3) Popup BODY
|
|
---------------------------------------------------------*/
|
|
.popup > .body{
|
|
|
|
flex: 1;
|
|
|
|
display: flex;
|
|
|
|
margin: 0 1.2em;
|
|
padding-bottom: 1em;
|
|
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
flex-wrap: nowrap;
|
|
|
|
|
|
a{
|
|
display: inline-block;
|
|
font-size: .8em;
|
|
color: #aaa;
|
|
|
|
cursor: pointer;
|
|
|
|
&:after{ content: none; }
|
|
|
|
&:hover{
|
|
text-decoration: underline;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
strong{
|
|
color: darken($main,5%);
|
|
}
|
|
|
|
}
|
|
|
|
|
|
/* (4) Popup Footer
|
|
---------------------------------------------------------*/
|
|
.popup > .footer{
|
|
|
|
display: flex;
|
|
position: relative;
|
|
|
|
padding: 1.2em 1em;
|
|
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
|
|
background-color: #2f3136;
|
|
|
|
& > button:first-child{
|
|
|
|
margin: 0 2em;
|
|
|
|
border: 0;
|
|
background-color: transparent;
|
|
|
|
color: #fff;
|
|
font-size: .8em;
|
|
font-weight: normal;
|
|
|
|
&:hover{ text-decoration: underline; }
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
}
|