discord-client/webpack/scss/pop-up.scss

246 lines
3.9 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;
}
/* (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;
label{
display: block;
margin-top: 2em;
margin-bottom: .7em;
font-size: .7em;
text-transform: uppercase;
letter-spacing: 1px;
}
input,
.select-box{
display: block;
padding: .7em 1em;
margin-bottom: .5em;
border: 1px solid #222;
border-radius: 3px / 3px;
background-color: #313339;
color: #fff;
transition: border-color .1s ease-in-out;
&:hover{ border-color: #111; }
&:focus{ border-color: #7289da; }
}
.select-box[data-type]{
padding-left: 4em;
cursor: pointer;
transition: background-color .1s ease-in-out,
border-color 0s;
// {1} Trailing icon //
&:before{
content: '';
display: inline-block;
position: absolute;
margin-top: .1em;
margin-left: -1.65em;
width: 1.3em;
height: 1.3em;
background: center center no-repeat;
background-size: auto 80%;
}
// specific images
&[data-type='text']:before{ background-image: url('../asset/svg/dialog.text@active.svg'); }
&[data-type='voice']:before{ background-image: url('../asset/svg/dialog.voice@active.svg'); }
// {2} Checkbox //
&:after{
content: '';
display: block;
position: absolute;
margin-top: -1.4em;
margin-left: -3.4em;
width: 1.3em;
height: 1.3em;
border: 1px solid #888;
border-radius: 3px / 3px;
background: center center no-repeat;
background-size: auto 80%;
}
// {3} Active item //
&[data-selected='1']{
background-color: $main;
border-color: $main;
&:hover{ border-color: $main; }
&:after{
border-color: #fff;
background-color: #fff;
background-image: url('../asset/svg/checked.svg');
}
}
}
}
/* (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;
}
& > button:nth-child(2){
padding: .8em 1.5em;
border: 0;
border-radius: 3px / 3px;
background-color: $main;
color: #fff;
font-size: .8em;
font-weight: normal;
cursor: pointer;
transition: background-color .1s ease-in-out;
&:hover{ background-color: darken($main, 5%);}
&:active{ background-color: darken($main, 10%);}
}
}