132 lines
3.3 KiB
SCSS
132 lines
3.3 KiB
SCSS
$include-column-box-sizing: true !default;
|
|
$rfs-breakpoint: 1460px !default;
|
|
$rfs-base-value: 1.6rem !default;
|
|
$rfs-rem-value: 10 !default;
|
|
$grid-columns: 24;
|
|
$grid-gutter-width: 4rem !default;
|
|
$grid-breakpoints: (
|
|
xs: 0,
|
|
sm: 576px,
|
|
md: 768px,
|
|
lg: 992px,
|
|
xl: 1200px,
|
|
xxl: 1400px,
|
|
) !default;
|
|
$container-padding-x: $grid-gutter-width * 0.5 !default;
|
|
$container-max-widths: $grid-breakpoints;
|
|
$gutters: (
|
|
0: 0,
|
|
1: 0.25rem,
|
|
2: 0.5rem,
|
|
3: 1rem,
|
|
4: 1.5rem,
|
|
5: 3rem
|
|
) !default;
|
|
$grid-row-columns: 6 !default;
|
|
$prefix: '' !default;
|
|
|
|
// Шрифты
|
|
$font-family: muller, arial, helvetica, sans-serif;
|
|
$font-size-base: 2rem;
|
|
$line-height-base: 1.6;
|
|
|
|
// Базовые цвета (не зависящие от темы)
|
|
$color-primary: #2638d9;
|
|
$color-danger: #d00820;
|
|
$default-color: #141414;
|
|
|
|
// Другие переменные
|
|
$border-radius: 2px;
|
|
$transition-base: all 0.2s ease-in-out;
|
|
$container-padding-x: $grid-gutter-width * 0.5;
|
|
|
|
// Миксин для media-breakpoint-up
|
|
@mixin media-breakpoint-up($breakpoint, $breakpoints: $grid-breakpoints) {
|
|
$min-width: map-get($breakpoints, $breakpoint);
|
|
|
|
@if $min-width {
|
|
@media (min-width: #{$min-width}) {
|
|
@content;
|
|
}
|
|
} @else {
|
|
@warn "Нет валидного брейкпоинта для '#{$breakpoint}'.";
|
|
}
|
|
}
|
|
|
|
// Миксин для media-breakpoint-down
|
|
@mixin media-breakpoint-down($breakpoint, $breakpoints: $grid-breakpoints) {
|
|
$max-width: map-get($breakpoints, $breakpoint);
|
|
|
|
@if $max-width {
|
|
@media (max-width: #{$max-width - 0.02}) {
|
|
@content;
|
|
}
|
|
} @else {
|
|
@warn "Нет валидного брейкпоинта для '#{$breakpoint}'.";
|
|
}
|
|
}
|
|
|
|
// Миксин для media-breakpoint-between
|
|
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
|
|
$min-width: map-get($breakpoints, $lower);
|
|
$max-width: map-get($breakpoints, $upper);
|
|
|
|
@if $min-width and $max-width {
|
|
@media (min-width: #{$min-width}) and (max-width: #{$max-width - 0.02}) {
|
|
@content;
|
|
}
|
|
} @else {
|
|
@warn "Нет валидных брейкпоинтов для '#{$lower}' или '#{$upper}'.";
|
|
}
|
|
}
|
|
|
|
// Миксин make-container
|
|
@mixin make-container($max-widths: $container-max-widths, $gutter: $grid-gutter-width) {
|
|
width: 100%;
|
|
padding-right: $container-padding-x;
|
|
padding-left: $container-padding-x;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
|
|
@each $breakpoint, $max-width in $max-widths {
|
|
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
|
|
@if $max-width {
|
|
max-width: $max-width;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Миксин make-row
|
|
@mixin make-row($gutter: $grid-gutter-width) {
|
|
--gutter-x: #{$gutter};
|
|
--gutter-y: 0;
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: calc(-1 * var(--gutter-y));
|
|
margin-right: calc(-0.5 * var(--gutter-x));
|
|
margin-left: calc(-0.5 * var(--gutter-x));
|
|
}
|
|
|
|
// Миксин make-col-ready
|
|
@mixin make-col-ready() {
|
|
flex-shrink: 0;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
padding-right: calc(var(--gutter-x) * 0.5);
|
|
padding-left: calc(var(--gutter-x) * 0.5);
|
|
margin-top: var(--gutter-y);
|
|
}
|
|
|
|
// Миксин make-col
|
|
@mixin make-col($size: false, $columns: $grid-columns) {
|
|
@if $size {
|
|
flex: 0 0 auto;
|
|
width: calc(100% * #{calc($size / $columns)});
|
|
} @else {
|
|
flex: 1 1 0;
|
|
max-width: 100%;
|
|
}
|
|
}
|