discord-client/scss/global.scss

213 lines
3.2 KiB
SCSS
Raw Normal View History

2018-03-22 17:15:57 +00:00
@import 'constants';
/* (1) Form
2018-03-22 17:15:57 +00:00
---------------------------------------------------------*/
.form{
2018-03-22 17:15:57 +00:00
label{
display: block;
2018-03-22 17:15:57 +00:00
margin-top: 2em;
margin-bottom: .7em;
2018-03-22 17:15:57 +00:00
font-size: .7em;
text-transform: uppercase;
letter-spacing: 1px;
& > span{
color: #f04747;
text-transform: none;
&:before{ content: '(' attr(data-err) ')'; }
&:not([data-err]),
&[data-err='']{
color: inherit;
&:before{ content: ''; }
}
}
}
2018-03-22 17:15:57 +00:00
// input
input:not(.flat),
.select-box{
display: block;
2018-03-22 17:15:57 +00:00
padding: .7em 1em;
margin-bottom: .5em;
2018-03-22 17:15:57 +00:00
border: 1px solid #222;
border-radius: 3px / 3px;
2018-03-22 17:15:57 +00:00
background-color: #313339;
2018-03-22 17:15:57 +00:00
color: #fff;
2018-03-22 17:15:57 +00:00
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');
}
}
}
// flat input
input.flat{
display: block;
width: 100%;
padding: .5em 0;
border-radius: 0;
border: none;
border-bottom: 2px solid rgba(192, 192, 192, 0.1);
background-color: transparent;
color: #ddd;
transition: border-color .2s ease-in-out;
&:focus{
border-bottom: 2px solid #ddd;
}
}
button.submit{
padding: .8em 1.5em;
border: 0;
border-radius: 3px / 3px;
background: $main center center no-repeat;
background-size: contain;
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%);}
&.invalid{
$main: #f04747;
background-color: $main;
&:hover{ background-color: darken($main, 5%);}
&:active{ background-color: darken($main, 10%);}
}
&[data-loading='1']{
background-image: url('../asset/svg/loader.svg');
color: transparent;
}
}
}
a{
display: inline-block;
position: relative;
color: #fff;
text-decoration: none;
font-weight: normal;
&:after{
content: '';
display: block;
position: relative;
margin-top: .2em;
width: 0%;
height: 2px;
border-radius: 5px;
background: #fff;
transition: width .1s ease-in-out;
}
&:hover:after{ width: 100%; }
}