216 lines
3.3 KiB
SCSS
216 lines
3.3 KiB
SCSS
@import 'constants';
|
|
|
|
|
|
/* (1) Popup box
|
|
---------------------------------------------------------*/
|
|
.popup{
|
|
display: flex;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 440px;
|
|
min-height: 200px;
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
border-radius: 5px / 5px;
|
|
|
|
box-shadow: 0 0 0 100vw rgba(0,0,0,.8);
|
|
|
|
background-color: #36393f;
|
|
|
|
overflow: hidden;
|
|
|
|
z-index: 800;
|
|
|
|
transform: translateX(-50%) translateY(-50%);
|
|
|
|
}
|
|
|
|
|
|
/* (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%);}
|
|
}
|
|
}
|