diff --git a/src/styles/_grid.scss b/src/styles/_grid.scss
index 91ea986c..147aefa0 100644
--- a/src/styles/_grid.scss
+++ b/src/styles/_grid.scss
@@ -104,12 +104,12 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
@mixin make-col-offset($size, $columns: $grid-columns) {
$num: calc($size / $columns);
- margin-left: if($num == 0, 0, calc(100% * #{$num}));
+ margin-left: if($num ==0, 0, calc(100% * #{$num}));
}
// Миксин row-cols
@mixin row-cols($count) {
- > * {
+ >* {
flex: 0 0 auto;
width: 100% / $count;
}
@@ -118,7 +118,7 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
// Миксин make-grid-columns
@mixin make-grid-columns($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
@each $breakpoint in map-keys($breakpoints) {
- $infix: if($breakpoint == 'xs', '', "-#{$breakpoint}");
+ $infix: if($breakpoint =='xs', '', "-#{$breakpoint}");
@include media-breakpoint-up($breakpoint, $breakpoints) {
// Добавляем класс col-auto
@@ -143,14 +143,31 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
@mixin make-justify-content($breakpoints: $grid-breakpoints) {
@each $breakpoint in map-keys($breakpoints) {
@include media-breakpoint-up($breakpoint, $breakpoints) {
- $infix: if($breakpoint == 'xs', "", "-#{$breakpoint}");
+ $infix: if($breakpoint =='xs', "", "-#{$breakpoint}");
- .#{$prefix}justify-content#{$infix}-start { justify-content: flex-start !important; }
- .#{$prefix}justify-content#{$infix}-end { justify-content: flex-end !important; }
- .#{$prefix}justify-content#{$infix}-center { justify-content: center !important; }
- .#{$prefix}justify-content#{$infix}-between { justify-content: space-between !important; }
- .#{$prefix}justify-content#{$infix}-around { justify-content: space-around !important; }
- .#{$prefix}justify-content#{$infix}-evenly { justify-content: space-evenly !important; }
+ .#{$prefix}justify-content#{$infix}-start {
+ justify-content: flex-start !important;
+ }
+
+ .#{$prefix}justify-content#{$infix}-end {
+ justify-content: flex-end !important;
+ }
+
+ .#{$prefix}justify-content#{$infix}-center {
+ justify-content: center !important;
+ }
+
+ .#{$prefix}justify-content#{$infix}-between {
+ justify-content: space-between !important;
+ }
+
+ .#{$prefix}justify-content#{$infix}-around {
+ justify-content: space-around !important;
+ }
+
+ .#{$prefix}justify-content#{$infix}-evenly {
+ justify-content: space-evenly !important;
+ }
}
}
}
@@ -159,10 +176,12 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
@mixin make-display-classes($breakpoints: $grid-breakpoints) {
@each $breakpoint in map-keys($breakpoints) {
@include media-breakpoint-up($breakpoint, $breakpoints) {
- $infix: if($breakpoint == 'xs', "", "-#{$breakpoint}");
+ $infix: if($breakpoint =='xs', "", "-#{$breakpoint}");
@each $value in $displays {
- .#{$prefix}d#{$infix}-#{$value} { display: $value !important; }
+ .#{$prefix}d#{$infix}-#{$value} {
+ display: $value !important;
+ }
}
}
}
@@ -172,11 +191,48 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
@mixin make-print-display-classes() {
@media print {
@each $value in $displays {
- .#{$prefix}d-print-#{$value} { display: $value !important; }
+ .#{$prefix}d-print-#{$value} {
+ display: $value !important;
+ }
}
}
}
+// Добавляем новый миксин для генерации классов порядка
+@mixin make-order-classes($breakpoints: $grid-breakpoints) {
+ @each $breakpoint in map-keys($breakpoints) {
+ @include media-breakpoint-up($breakpoint, $breakpoints) {
+ $infix: if($breakpoint =='xs', "", "-#{$breakpoint}");
+
+ .order#{$infix}-first {
+ order: -1 !important;
+ }
+
+ .order#{$infix}-last {
+ order: 9999 !important;
+ }
+
+ .order#{$infix}-0 {
+ order: 0 !important;
+ }
+
+ @for $i from 1 through 5 {
+ .order#{$infix}-#{$i} {
+ order: $i !important;
+ }
+ }
+ }
+ }
+}
+
+// Добавляем вызов нового миксина в конец файла
+@include make-grid-columns($grid-columns, $grid-breakpoints);
+@include make-display-classes;
+@include make-print-display-classes;
+@include make-justify-content;
+@include make-order-classes;
+
+
// Генерация классов контейнера и ряда
.container,
.container-fluid {
@@ -189,9 +245,4 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
> * {
@include make-col-ready;
}
-}
-
-@include make-grid-columns($grid-columns, $grid-breakpoints);
-@include make-display-classes;
-@include make-print-display-classes;
-@include make-justify-content;
+}
\ No newline at end of file