60 lines
1.5 KiB
SCSS
60 lines
1.5 KiB
SCSS
$tabletWidth: 990px;
|
|
$mobileWidth: 768px;
|
|
|
|
@mixin define-color($title, $color) {
|
|
--#{$title}-h: #{hue($color)};
|
|
--#{$title}-l: #{lightness($color)};
|
|
--#{$title}-s: #{saturation($color)};
|
|
--#{$title}-a: #{alpha($color)};
|
|
}
|
|
|
|
@function color($title, $hue: 0deg, $lightness: 0%, $saturation: 0%, $alpha: 0) {
|
|
@return hsla(
|
|
calc(var(--#{$title}-h) + #{$hue}),
|
|
calc(var(--#{$title}-s) + #{$saturation}),
|
|
calc(var(--#{$title}-l) + #{$lightness}),
|
|
calc(var(--#{$title}-a) + #{$alpha})
|
|
);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Roboto";
|
|
src: url("@/assets/fonts/Roboto-Regular.woff2");
|
|
font-weight: normal;
|
|
}
|
|
@font-face {
|
|
font-family: "Roboto";
|
|
src: url("@/assets/fonts/Roboto-Bold.woff2");
|
|
font-weight: bold;
|
|
}
|
|
@font-face {
|
|
font-family: "Montserrat";
|
|
src: url("@/assets/fonts/Montserrat-Regular.woff2");
|
|
font-weight: normal;
|
|
}
|
|
@font-face {
|
|
font-family: "Montserrat";
|
|
src: url("@/assets/fonts/Montserrat-Bold.woff2");
|
|
font-weight: bold;
|
|
}
|
|
|
|
@mixin grey-input {
|
|
padding: 12px 18px;
|
|
background: color("background");
|
|
border: 2px solid color("border");
|
|
color: color("main");
|
|
font-family: "Montserrat", sans-serif;
|
|
font-size: 14px;
|
|
transition: border-color 0.18s ease;
|
|
|
|
&::placeholder {
|
|
font-family: "Montserrat", sans-serif;
|
|
color: color("second");
|
|
}
|
|
|
|
&:focus {
|
|
border-color: color("link");
|
|
outline: none;
|
|
}
|
|
}
|