webapp/src/styles/_grid.scss
Untone 470f0439e0
All checks were successful
deploy / testbuild (push) Successful in 2m47s
deploy / Update templates on Mailgun (push) Has been skipped
treeshaked
2024-10-07 01:29:34 +03:00

60 lines
1.5 KiB
SCSS

// Генерация классов контейнера и ряда
.container,
.container-fluid {
@include make-container($container-max-widths, $grid-gutter-width);
}
.row {
@include make-row;
> * {
@include make-col-ready;
}
}
// Генерация только используемых классов колонок
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: if($breakpoint == 'xs', '', "-#{$breakpoint}");
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
.col#{$infix} {
flex: 1 0 0%;
}
.col#{$infix}-auto {
flex: 0 0 auto;
width: auto;
}
@for $i from 1 through $grid-columns {
.col#{$infix}-#{$i} {
@include make-col($i, $grid-columns);
}
}
}
}
// Добавляем только используемые классы display
.d-flex { display: flex !important; }
.d-none { display: none !important; }
// Добавляем только используемый класс justify-content
.justify-content-between { justify-content: space-between !important; }
// Добавляем классы для отступов (gutters)
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: if($breakpoint == 'xs', '', "-#{$breakpoint}");
@include media-breakpoint-up($breakpoint) {
@each $key, $gutter in $gutters {
.g#{$infix}-#{$key},
.gx#{$infix}-#{$key} {
--gutter-x: #{$gutter};
}
.g#{$infix}-#{$key},
.gy#{$infix}-#{$key} {
--gutter-y: #{$gutter};
}
}
}
}