111 lines
2.7 KiB
SCSS
111 lines
2.7 KiB
SCSS
@mixin font($font_name, $file_name, $weight, $style) {
|
|
@font-face {
|
|
font-family: $font_name;
|
|
font-style: #{$style};
|
|
font-weight: #{$weight};
|
|
src:
|
|
url('../fonts/#{$file_name}.woff2') format('woff2'),
|
|
url('../fonts/#{$file_name}.woff') format('woff');
|
|
font-display: swap;
|
|
}
|
|
}
|
|
|
|
@function rem($px) {
|
|
$result: math.div($px, 16) + rem;
|
|
|
|
@return $result;
|
|
}
|
|
|
|
@function em($px, $current: 16) {
|
|
$result: math.div($px, $current) + em;
|
|
|
|
@return $result;
|
|
}
|
|
|
|
@mixin adaptive-value($property, $startSize, $minSize, $keepSize: 0, $widthFrom: $containerWidth, $widthTo: $minWidth) {
|
|
@if $startSize == 0 {
|
|
$startSize: 0.0001;
|
|
}
|
|
|
|
@if $minSize == 0 {
|
|
$minSize: 0.0001;
|
|
}
|
|
|
|
$addSize: math.div($startSize - $minSize, 16);
|
|
|
|
@if $widthFrom == $containerWidth and $maxWidthContainer == 0 {
|
|
$widthFrom: $maxWidth;
|
|
}
|
|
|
|
$widthFromMedia: em($widthFrom);
|
|
$widthToMedia: em($widthTo);
|
|
$slope: math.div(($startSize - $minSize), ($widthFrom - $widthTo));
|
|
$yIntersection: -$widthTo * $slope + $minSize;
|
|
|
|
@if $yIntersection == 0 {
|
|
$yIntersection: 0.0001;
|
|
}
|
|
|
|
$flyValue: #{rem($yIntersection)}' + ' #{$slope * 100}vw;
|
|
$propertyValue: #{'clamp(' rem($minSize) ',' $flyValue ',' rem($startSize) ')'};
|
|
|
|
@if $minSize > $startSize {
|
|
$propertyValue: #{'clamp(' rem($startSize) ',' $flyValue ',' rem($minSize) ')'};
|
|
}
|
|
|
|
@if $keepSize != 1 and $keepSize != 3 {
|
|
@media (min-width: $widthFromMedia) {
|
|
#{$property}: rem($startSize);
|
|
}
|
|
}
|
|
|
|
@media (min-width: $widthToMedia) and (max-width: $widthFromMedia) {
|
|
@supports (#{$property}: $propertyValue) {
|
|
#{$property}: $propertyValue;
|
|
}
|
|
|
|
@supports not (#{$property}: $propertyValue) {
|
|
#{$property}: calc(
|
|
#{rem($minSize)} + #{$addSize} * (100vw - #{rem($widthTo)}) /
|
|
#{math.div($widthFrom, 16) - math.div($widthTo, 16)}
|
|
);
|
|
}
|
|
}
|
|
|
|
@if $keepSize != 1 and $keepSize != 2 {
|
|
@media (max-width: $widthToMedia) {
|
|
#{$property}: rem($minSize);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin image() {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
@mixin hide-scroll() {
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@mixin responsive-video() {
|
|
position: relative;
|
|
aspect-ratio: 16/9;
|
|
overflow: hidden;
|
|
|
|
video,
|
|
iframe,
|
|
object,
|
|
embed {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|