@finqu/cool 1.2.29 → 2.0.2

package/scss/_grid.scss

@@ -1,35 +1,215 @@
-// Grid
-// ---------------------------------------------------------------------------------------------------------------
-
-.container {
-    @include make-container();
-    @include make-container-max-widths();
-}
-
-.container-fluid {
-    @include make-container();
-}
-
-.container-content {
-    position: relative;
-    @include make-container-content();
-}
-
-.row {
-    @include make-row();
-}
-
-// Remove the negative margin from default .row, then the horizontal padding
-// from all immediate children columns (to prevent runaway style inheritance).
-.no-gutters {
-    margin-right: 0;
-    margin-left: 0;
-
-    > .col,
-    > [class*="col-"] {
-        padding-right: 0;
-        padding-left: 0;
-    }
-}
-
-@include make-grid-columns();
+@use "variables" as *;
+@use "sass:map";
+@use "sass:math";
+/* Grid ========================================================================== */
+@layer layout {
+    .container {
+        width: 100%;
+        padding-right: var(--cool-grid-gutter-x);
+        padding-left: var(--cool-grid-gutter-x);
+        margin-right: auto;
+        margin-left: auto;
+
+        @each $breakpoint, $container-max-width in $container-max-widths {
+            @include media-breakpoint-up($breakpoint) {
+                max-width: $container-max-width;
+            }
+        }
+    }
+
+    .container-fluid {
+        width: 100%;
+        padding-right: var(--cool-grid-gutter-x);
+        padding-left: var(--cool-grid-gutter-x);
+        margin-right: auto;
+        margin-left: auto;
+        max-width: 100%;
+    }
+
+    .container-content {
+        position: relative;
+        width: 100%;
+        max-width: var(--cool-container-content-max-width);
+        padding-right: var(--cool-grid-gutter-x);
+        padding-left: var(--cool-grid-gutter-x);
+        margin-right: auto;
+        margin-left: auto;
+    }
+
+    .row {
+        display: flex;
+        flex-wrap: wrap;
+        margin-right: calc(var(--cool-grid-gutter-x) * -0.5);
+        margin-left: calc(var(--cool-grid-gutter-x) * -0.5);
+    }
+
+    .no-gutters {
+        margin-right: 0;
+        margin-left: 0;
+
+        > .col,
+        > [class*="col-"] {
+            padding-right: 0;
+            padding-left: 0;
+        }
+    }
+
+    .col,
+    [class*="col-"] {
+        position: relative;
+        width: 100%;
+        padding-right: calc(var(--cool-grid-gutter-x) * 0.5);
+        padding-left: calc(var(--cool-grid-gutter-x) * 0.5);
+    }
+
+    .col {
+        flex-basis: 0;
+        flex-grow: 1;
+        max-width: 100%;
+    }
+
+    .col-auto {
+        flex: 0 0 auto;
+        width: auto;
+        max-width: 100%;
+    }
+
+    @for $i from 1 through $grid-columns {
+        .col-#{$i} {
+            flex: 0 0 math.percentage(math.div($i, $grid-columns));
+            max-width: math.percentage(math.div($i, $grid-columns));
+        }
+    }
+
+    .order-first {
+        order: -1;
+    }
+
+    .order-last {
+        order: $grid-columns + 1;
+    }
+
+    @for $i from 0 through $grid-columns {
+        .order-#{$i} {
+            order: $i;
+        }
+    }
+
+    @for $i from 1 through ($grid-columns - 1) {
+        .offset-#{$i} {
+            margin-left: math.percentage(math.div($i, $grid-columns));
+        }
+    }
+
+    @each $breakpoint in map.keys($grid-breakpoints) {
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        @if $breakpoint !=xs {
+            @include media-breakpoint-up($breakpoint) {
+                .col#{$infix} {
+                    flex-basis: 0;
+                    flex-grow: 1;
+                    max-width: 100%;
+                }
+
+                .col#{$infix}-auto {
+                    flex: 0 0 auto;
+                    width: auto;
+                    max-width: 100%;
+                }
+
+                @for $i from 1 through $grid-columns {
+                    .col#{$infix}-#{$i} {
+                        flex: 0 0 math.percentage(math.div($i, $grid-columns));
+                        max-width: math.percentage(math.div($i, $grid-columns));
+                    }
+                }
+
+                .order#{$infix}-first {
+                    order: -1;
+                }
+
+                .order#{$infix}-last {
+                    order: $grid-columns + 1;
+                }
+
+                @for $i from 0 through $grid-columns {
+                    .order#{$infix}-#{$i} {
+                        order: $i;
+                    }
+                }
+
+                @for $i from 0 through ($grid-columns - 1) {
+                    @if not($infix == "" and $i == 0) {
+                        .offset#{$infix}-#{$i} {
+                            @if $i == 0 {
+                                margin-left: 0;
+                            } @else {
+                                margin-left: math.percentage(math.div($i, $grid-columns));
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    @for $i from 1 through 6 {
+        .row-cols-#{$i} {
+            > * {
+                flex: 0 0 math.percentage(math.div(1, $i));
+                max-width: math.percentage(math.div(1, $i));
+            }
+        }
+    }
+
+    @each $breakpoint in map.keys($grid-breakpoints) {
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        @if $breakpoint !=xs {
+            @include media-breakpoint-up($breakpoint) {
+                @for $i from 1 through 6 {
+                    .row-cols#{$infix}-#{$i} {
+                        > * {
+                            flex: 0 0 math.percentage(math.div(1, $i));
+                            max-width: math.percentage(math.div(1, $i));
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    @each $breakpoint in map.keys($grid-breakpoints) {
+        @include media-breakpoint-up($breakpoint) {
+            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+            @for $i from 0 through 6 {
+                .g#{$infix}-#{$i},
+                .gx#{$infix}-#{$i} {
+                    --cool-grid-gutter-x: #{calc(var(--cool-spacer) * $i)};
+                }
+
+                .g#{$infix}-#{$i},
+                .gy#{$infix}-#{$i} {
+                    --cool-grid-gutter-y: #{calc(var(--cool-spacer) * $i)};
+                }
+            }
+        }
+    }
+
+    @for $i from 0 through 6 {
+        .g-#{$i} {
+            --cool-grid-gutter-x: #{calc(var(--cool-spacer) * $i)};
+            --cool-grid-gutter-y: #{calc(var(--cool-spacer) * $i)};
+        }
+
+        .gx-#{$i} {
+            --cool-grid-gutter-x: #{calc(var(--cool-spacer) * $i)};
+        }
+
+        .gy-#{$i} {
+            --cool-grid-gutter-y: #{calc(var(--cool-spacer) * $i)};
+        }
+    }
+}