WIP

Web/public/scss/grid/_mixins.scss

@@ -1,79 +1,79 @@
-@use 'sass:map';
-@use 'sass:math';
-@use 'variables';
-
-@function bp($name, $breakpoints: variables.$breakpoints) {
-  $min: map.get($breakpoints, $name);
-
-  @return $min;
-}
-
-// Media of at least the minimum breakpoint width.
-@mixin bp-gt($name, $breakpoints: variables.$breakpoints) {
-  $min: bp($name, $breakpoints);
-
-  @if $min {
-    @media (min-width: $min) {
-      @content;
-    }
-  }
-  @else {
-    @content;
-  }
-}
-
-// Media of at most the maximum breakpoint width.
-@mixin bp-lt($name, $breakpoints: variables.$breakpoints) {
-  $max: bp($name, $breakpoints) - 1px;
-
-  @if $max {
-    @media (max-width: $max) {
-      @content;
-    }
-  }
-  @else {
-    @content;
-  }
-}
-
-@mixin make-grid-columns($i: 1, $list: '.col') {
-  @each $breakpoint, $infix in variables.$breakpoint-infixs {
-    $infix: if($infix == '', '', '-#{$infix}');
-
-    @if ($infix != '') {
-      $list: '#{$list}, .col#{$infix}';
-    }
-
-    @for $i from 1 through variables.$grid-columns {
-      $list: '#{$list}, .col#{$infix}-#{$i}';
-    }
-  }
-
-  #{$list} {
-    position: relative;
-    width: 100%;
-    padding-right: variables.$grid-gutter * .5;
-    padding-left: variables.$grid-gutter * .5;
-  }
-}
-
-@mixin loop-grid-columns($columns: $grid-columns, $breakpoint-infix: '') {
-  $infix: if($breakpoint-infix == '', '', '-#{$breakpoint-infix}');
-
-  .col#{$infix} {
-    flex-basis: 0;
-    flex-grow: 1;
-    max-width: 100%;
-  }
-
-  @for $i from 1 through $columns {
-    .col#{$infix}-#{$i} {
-      flex: 0 0 math.percentage(math.div($i, $columns));
-      max-width: math.percentage(math.div($i, $columns));
-    }
-
-    .offset#{$infix}-#{$i} {
-      margin-left: math.percentage(math.div($i, $columns));
-    }
-  }
-}
+@use 'sass:map';
+@use 'sass:math';
+@use 'variables';
+
+@function bp($name, $breakpoints: variables.$breakpoints) {
+  $min: map.get($breakpoints, $name);
+
+  @return $min;
+}
+
+// Media of at least the minimum breakpoint width.
+@mixin bp-gt($name, $breakpoints: variables.$breakpoints) {
+  $min: bp($name, $breakpoints);
+
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  }
+  @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width.
+@mixin bp-lt($name, $breakpoints: variables.$breakpoints) {
+  $max: bp($name, $breakpoints) - 1px;
+
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  }
+  @else {
+    @content;
+  }
+}
+
+@mixin make-grid-columns($i: 1, $list: '.col') {
+  @each $breakpoint, $infix in variables.$breakpoint-infixs {
+    $infix: if($infix == '', '', '-#{$infix}');
+
+    @if ($infix != '') {
+      $list: '#{$list}, .col#{$infix}';
+    }
+
+    @for $i from 1 through variables.$grid-columns {
+      $list: '#{$list}, .col#{$infix}-#{$i}';
+    }
+  }
+
+  #{$list} {
+    position: relative;
+    width: 100%;
+    padding-right: variables.$grid-gutter * .5;
+    padding-left: variables.$grid-gutter * .5;
+  }
+}
+
+@mixin loop-grid-columns($columns: $grid-columns, $breakpoint-infix: '') {
+  $infix: if($breakpoint-infix == '', '', '-#{$breakpoint-infix}');
+
+  .col#{$infix} {
+    flex-basis: 0;
+    flex-grow: 1;
+    max-width: 100%;
+  }
+
+  @for $i from 1 through $columns {
+    .col#{$infix}-#{$i} {
+      flex: 0 0 math.percentage(math.div($i, $columns));
+      max-width: math.percentage(math.div($i, $columns));
+    }
+
+    .offset#{$infix}-#{$i} {
+      margin-left: math.percentage(math.div($i, $columns));
+    }
+  }
+}