170 lines
No EOL
2.7 KiB
SCSS
170 lines
No EOL
2.7 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;
|
|
margin-top: 0;
|
|
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-child, .form__legend + .form__label { margin-top: 0; }
|
|
}
|
|
|
|
.form__input {
|
|
border: 1px solid $c-main;
|
|
background-color: $c-main-lightest;
|
|
|
|
@include hover;
|
|
}
|
|
|
|
.form__select {
|
|
@extend .form__input;
|
|
}
|
|
|
|
.form__input--file {
|
|
border: 1px solid $c-main;
|
|
@include hover($bg: false);
|
|
padding: 5px;
|
|
|
|
&::file-selector-button {
|
|
@extend %btn;
|
|
}
|
|
}
|
|
|
|
.form__input--search {
|
|
@extend .form__input;
|
|
width: 60%;
|
|
display: block;
|
|
margin: 0 auto;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form__checkbox {
|
|
@extend .form__label;
|
|
}
|
|
|
|
.form__input--checkbox {
|
|
appearance: none;
|
|
background-color: $c-main-lightest;
|
|
margin: 0;
|
|
margin-top: 5px;
|
|
margin-right: 5px;
|
|
font: inherit;
|
|
color: $c-main;
|
|
width: 15px !important;
|
|
height: 15px;
|
|
border: 1px solid $c-main;
|
|
display: inline-grid;
|
|
place-content: center;
|
|
|
|
&::before {
|
|
content: '';
|
|
width: 9px;
|
|
height: 9px;
|
|
transform: scale(0);
|
|
transition: transform 120ms ease-in-out;
|
|
box-shadow: inset 9px 9px $c-main;
|
|
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
|
|
}
|
|
|
|
&:checked::before {
|
|
transform: scale(1);
|
|
}
|
|
|
|
@include hover;
|
|
}
|
|
|
|
.form__btns {
|
|
@extend .form__label;
|
|
|
|
&:first-of-type { margin-top: 20px; }
|
|
}
|
|
|
|
.form__btn {
|
|
@extend %btn;
|
|
}
|
|
|
|
.form__error {
|
|
color: $c-red;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------------- &TABLES ---- */
|
|
|
|
.table {
|
|
margin: 0 auto;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.table tr, .table td, .table th {
|
|
border: 1px solid $c-main;
|
|
}
|
|
|
|
.table td {
|
|
min-width: 30px;
|
|
}
|
|
|
|
.table__thead {
|
|
font-weight: normal;
|
|
background-color: $c-main-light;
|
|
border-color: $c-main;
|
|
color: $c-main;
|
|
}
|
|
|
|
.table__thead th {
|
|
@extend .table__thead;
|
|
padding: 5px;
|
|
}
|
|
|
|
.table__tbody td {
|
|
text-align: center;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.table__tbody img {
|
|
max-height: 50px;
|
|
margin: auto;
|
|
} |