75 lines
No EOL
1.2 KiB
SCSS
75 lines
No EOL
1.2 KiB
SCSS
@use 'vars' as *;
|
|
|
|
html { box-sizing: border-box; }
|
|
*, *:before, *:after { box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: $f-main;
|
|
font-size: $f-size;
|
|
background: rgb(243,200,255);
|
|
background: linear-gradient(320deg, rgba(243,200,255,1) 0%, rgba(191,191,255,1) 100%);
|
|
}
|
|
|
|
a {
|
|
color: $c-main;
|
|
transition: color 0.2s;
|
|
|
|
&:hover {
|
|
color: $c-accent;
|
|
transition: color 0.2s;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
font-family: $f-title;
|
|
font-size: $f-size + 30px;
|
|
font-weight: normal;
|
|
margin-left: 40px;
|
|
margin-bottom: 10px;
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
span {
|
|
background: linear-gradient($c-main-light, $c-main-light) 0 80% / 100% 20px no-repeat;
|
|
height: 15px;
|
|
}
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------------- &FORMS ---- */
|
|
|
|
.form__fieldset {
|
|
width: 60%;
|
|
margin: 30px auto;
|
|
border: 1px solid $c-main;
|
|
padding: 20px 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.form__label {
|
|
display: block;
|
|
margin-top: 20px;
|
|
margin-bottom: 5px;
|
|
|
|
&:first-of-type { margin-top: 0; }
|
|
}
|
|
|
|
.form__input {
|
|
border: 1px solid $c-main;
|
|
background-color: $c-main-lightest;
|
|
|
|
@include hover($focus: true);
|
|
}
|
|
|
|
.form__btns {
|
|
@extend .form__label;
|
|
|
|
&:first-of-type { margin-top: 20px; }
|
|
}
|
|
|
|
.form__btn {
|
|
@extend %btn;
|
|
}
|
|
|
|
.form__error {
|
|
color: $c-red;
|
|
} |