claritas-web-framework 8.5.8 → 8.5.9

package/sass/mixins/_container.scss

@@ -1,21 +1,21 @@
-@use "./../variables" as *;
-@use "./../mixins/breakpoints" as *;
-
-@mixin make-container() {
-  --gutter-x: #{$grid-gutter};
-
-  width: 100%;
-  max-width: 100vw;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: calc(var(--gutter-x) * 0.5);
-  padding-right: calc(var(--gutter-x) * 0.5);
-}
-
-@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $breakpoints) {
-  @each $breakpoint, $container-max-width in $max-widths {
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
-      max-width: $container-max-width;
-    }
-  }
-}
+@use "./../variables" as *;
+@use "./../mixins/breakpoints" as *;
+
+@mixin make-container() {
+  --gutter-x: #{$grid-gutter};
+
+  width: 100%;
+  max-width: 100vw;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: calc(var(--gutter-x) * 0.5);
+  padding-right: calc(var(--gutter-x) * 0.5);
+}
+
+@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $breakpoints) {
+  @each $breakpoint, $container-max-width in $max-widths {
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      max-width: $container-max-width;
+    }
+  }
+}

package/sass/mixins/_gradient.scss

@@ -1,55 +1,55 @@
-@use "sass:color";
-@use "./../variables" as *;
-
-// Horizontal gradient, from left to right
-// Creates two color stops, start and end, by specifying a color and position for each color stop.
-
-@mixin gradient-x($start-color: var(--gray-7), $end-color: var(--gray-8), $start-percent: 0%, $end-percent: 100%) {
-  background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
-}
-
-// Vertical gradient, from top to bottom
-// Creates two color stops, start and end, by specifying a color and position for each color stop.
-
-@mixin gradient-y($start-color: var(--gray-7), $end-color: var(--gray-8), $start-percent: null, $end-percent: null) {
-  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
-}
-
-@mixin gradient-directional($start-color: var(--gray-7), $end-color: var(--gray-8), $deg: 45deg) {
-  background-image: linear-gradient($deg, $start-color, $end-color);
-}
-
-@mixin gradient-x-three-colors(
-  $start-color: var(--blue),
-  $mid-color: var(--purple),
-  $color-stop: 50%,
-  $end-color: var(--red)
-) {
-  background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
-}
-
-@mixin gradient-y-three-colors(
-  $start-color: var(--blue),
-  $mid-color: var(--purple),
-  $color-stop: 50%,
-  $end-color: var(--red)
-) {
-  background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
-}
-
-@mixin gradient-radial($inner-color: var(--gray-7), $outer-color: var(--gray-8)) {
-  background-image: radial-gradient(circle, $inner-color, $outer-color);
-}
-
-@mixin gradient-striped($color: hsl(var(--white) h s l / 15%), $angle: 45deg) {
-  background-image: linear-gradient(
-    $angle,
-    $color 25%,
-    transparent 25%,
-    transparent 50%,
-    $color 50%,
-    $color 75%,
-    transparent 75%,
-    transparent
-  );
-}
+@use "sass:color";
+@use "./../variables" as *;
+
+// Horizontal gradient, from left to right
+// Creates two color stops, start and end, by specifying a color and position for each color stop.
+
+@mixin gradient-x($start-color: var(--gray-7), $end-color: var(--gray-8), $start-percent: 0%, $end-percent: 100%) {
+  background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
+}
+
+// Vertical gradient, from top to bottom
+// Creates two color stops, start and end, by specifying a color and position for each color stop.
+
+@mixin gradient-y($start-color: var(--gray-7), $end-color: var(--gray-8), $start-percent: null, $end-percent: null) {
+  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
+}
+
+@mixin gradient-directional($start-color: var(--gray-7), $end-color: var(--gray-8), $deg: 45deg) {
+  background-image: linear-gradient($deg, $start-color, $end-color);
+}
+
+@mixin gradient-x-three-colors(
+  $start-color: var(--blue),
+  $mid-color: var(--purple),
+  $color-stop: 50%,
+  $end-color: var(--red)
+) {
+  background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
+}
+
+@mixin gradient-y-three-colors(
+  $start-color: var(--blue),
+  $mid-color: var(--purple),
+  $color-stop: 50%,
+  $end-color: var(--red)
+) {
+  background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
+}
+
+@mixin gradient-radial($inner-color: var(--gray-7), $outer-color: var(--gray-8)) {
+  background-image: radial-gradient(circle, $inner-color, $outer-color);
+}
+
+@mixin gradient-striped($color: hsl(var(--white) h s l / 15%), $angle: 45deg) {
+  background-image: linear-gradient(
+    $angle,
+    $color 25%,
+    transparent 25%,
+    transparent 50%,
+    $color 50%,
+    $color 75%,
+    transparent 75%,
+    transparent
+  );
+}

package/sass/mixins/_grid.scss

@@ -1,156 +1,156 @@
-@use "sass:map";
-@use "sass:math";
-@use "sass:meta";
-@use "./../variables" as *;
-@use "./../mixins/breakpoints" as *;
-
-// Grid system
-// Generate semantic grid columns with these mixins.
-
-@mixin make-row($gutter: $grid-gutter) {
-  --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));
-}
-
-@mixin make-col-ready() {
-  // Add box sizing if only the grid is loaded
-  box-sizing: if(
-    meta.global-variable-exists(include-column-box-sizing) and $include-column-box-sizing,
-    border-box,
-    null
-  );
-
-  // Prevent columns from becoming too narrow when at smaller grid tiers by
-  // always setting `width: 100%;`. This works because we set the width
-  // later on to override this initial width.
-  flex-shrink: 0;
-  width: 100%;
-  max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
-  padding-right: calc(var(--gutter-x) * 0.5);
-  padding-left: calc(var(--gutter-x) * 0.5);
-  margin-top: var(--gutter-y);
-}
-
-@mixin make-col($size: false, $columns: $grid-columns) {
-  @if $size {
-    flex: 0 0 auto;
-    width: math.percentage(math.div($size, $columns));
-  } @else {
-    flex: 1 1 0;
-    max-width: 100%;
-  }
-}
-
-@mixin make-col-auto() {
-  flex: 0 0 auto;
-  width: auto;
-}
-
-@mixin make-col-fit() {
-  flex: 1 0 0%;
-}
-
-@mixin make-col-offset($size, $columns: $grid-columns) {
-  $num: math.div($size, $columns);
-
-  margin-left: if($num == 0, 0, math.percentage($num));
-}
-
-// Row columns
-// Specify on a parent element(e.g., .grid) to force immediate children into NN
-// number of columns. Supports wrapping to new lines, but does not do a Masonry
-// style grid.
-
-@mixin row-cols($count) {
-  > * {
-    flex: 0 0 auto;
-    width: math.div(100%, $count);
-  }
-}
-
-// Framework grid generation
-// Used only by Bootstrap to generate the correct number of grid classes given
-// any value of `$grid-columns`.
-
-@mixin make-grid-columns($columns: $grid-columns, $breakpoints: $breakpoints) {
-  @each $breakpoint in map.keys($breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $breakpoints);
-
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
-      .col-#{$infix},
-      .col {
-        @include make-col-fit;
-      }
-
-      .col-#{$infix}-auto {
-        @include make-col-auto;
-      }
-
-      .col-#{$infix}-fit {
-        @include make-col-fit;
-      }
-
-      @if $columns > 0 {
-        @for $i from 1 through $columns {
-          .col-#{$infix}-#{$i} {
-            @include make-col($i, $columns);
-          }
-        }
-
-        @for $i from 0 through ($columns - 1) {
-          @if not($infix == "" and $i == 0) {
-            .offset-#{$infix}-#{$i} {
-              @include make-col-offset($i, $columns);
-            }
-          }
-        }
-      }
-
-      // Gutters
-      // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
-
-      @each $key, $value in $gutters {
-        .g#{$infix}-#{$key},
-        .gx#{$infix}-#{$key} {
-          --gutter-x: #{$value};
-        }
-
-        .g#{$infix}-#{$key},
-        .gy#{$infix}-#{$key} {
-          --gutter-y: #{$value};
-        }
-      }
-    }
-  }
-}
-
-@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $breakpoints) {
-  @each $breakpoint in map.keys($breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $breakpoints);
-
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
-      @if $columns > 0 {
-        @for $i from 1 through $columns {
-          .g-col-#{$infix}-#{$i} {
-            grid-column: auto / span $i;
-          }
-        }
-
-        // Start with `1` because `0` is an invalid value.
-        // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
-
-        @for $i from 1 through ($columns - 1) {
-          .g-start-#{$infix}-#{$i} {
-            grid-column-start: $i;
-          }
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "./../variables" as *;
+@use "./../mixins/breakpoints" as *;
+
+// Grid system
+// Generate semantic grid columns with these mixins.
+
+@mixin make-row($gutter: $grid-gutter) {
+  --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));
+}
+
+@mixin make-col-ready() {
+  // Add box sizing if only the grid is loaded
+  box-sizing: if(
+    meta.global-variable-exists(include-column-box-sizing) and $include-column-box-sizing,
+    border-box,
+    null
+  );
+
+  // Prevent columns from becoming too narrow when at smaller grid tiers by
+  // always setting `width: 100%;`. This works because we set the width
+  // later on to override this initial width.
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
+  padding-right: calc(var(--gutter-x) * 0.5);
+  padding-left: calc(var(--gutter-x) * 0.5);
+  margin-top: var(--gutter-y);
+}
+
+@mixin make-col($size: false, $columns: $grid-columns) {
+  @if $size {
+    flex: 0 0 auto;
+    width: math.percentage(math.div($size, $columns));
+  } @else {
+    flex: 1 1 0;
+    max-width: 100%;
+  }
+}
+
+@mixin make-col-auto() {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+@mixin make-col-fit() {
+  flex: 1 0 0%;
+}
+
+@mixin make-col-offset($size, $columns: $grid-columns) {
+  $num: math.div($size, $columns);
+
+  margin-left: if($num == 0, 0, math.percentage($num));
+}
+
+// Row columns
+// Specify on a parent element(e.g., .grid) to force immediate children into NN
+// number of columns. Supports wrapping to new lines, but does not do a Masonry
+// style grid.
+
+@mixin row-cols($count) {
+  > * {
+    flex: 0 0 auto;
+    width: math.div(100%, $count);
+  }
+}
+
+// Framework grid generation
+// Used only by Bootstrap to generate the correct number of grid classes given
+// any value of `$grid-columns`.
+
+@mixin make-grid-columns($columns: $grid-columns, $breakpoints: $breakpoints) {
+  @each $breakpoint in map.keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      .col-#{$infix},
+      .col {
+        @include make-col-fit;
+      }
+
+      .col-#{$infix}-auto {
+        @include make-col-auto;
+      }
+
+      .col-#{$infix}-fit {
+        @include make-col-fit;
+      }
+
+      @if $columns > 0 {
+        @for $i from 1 through $columns {
+          .col-#{$infix}-#{$i} {
+            @include make-col($i, $columns);
+          }
+        }
+
+        @for $i from 0 through ($columns - 1) {
+          @if not($infix == "" and $i == 0) {
+            .offset-#{$infix}-#{$i} {
+              @include make-col-offset($i, $columns);
+            }
+          }
+        }
+      }
+
+      // Gutters
+      // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
+
+      @each $key, $value in $gutters {
+        .g#{$infix}-#{$key},
+        .gx#{$infix}-#{$key} {
+          --gutter-x: #{$value};
+        }
+
+        .g#{$infix}-#{$key},
+        .gy#{$infix}-#{$key} {
+          --gutter-y: #{$value};
+        }
+      }
+    }
+  }
+}
+
+@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $breakpoints) {
+  @each $breakpoint in map.keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      @if $columns > 0 {
+        @for $i from 1 through $columns {
+          .g-col-#{$infix}-#{$i} {
+            grid-column: auto / span $i;
+          }
+        }
+
+        // Start with `1` because `0` is an invalid value.
+        // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
+
+        @for $i from 1 through ($columns - 1) {
+          .g-start-#{$infix}-#{$i} {
+            grid-column-start: $i;
+          }
+        }
+      }
+    }
+  }
+}

package/sass/mixins/_group.scss

@@ -1,70 +1,70 @@
-@use "./../variables" as *;
-
-@mixin make-group() {
-  margin: 0;
-  display: flex;
-  flex-flow: wrap row;
-  align-items: center;
-  justify-content: flex-start;
-  position: relative;
-
-  $group-margin-fallback: if($enable-margins, var(--spacer), 0);
-
-  margin-bottom: var(--group-margin-bottom, #{$group-margin-fallback});
-}
-
-@mixin make-group-column($gap: calc(var(--spacer) * 0.5)) {
-  @include make-group;
-
-  align-items: stretch;
-  flex-direction: column;
-  gap: $gap;
-}
-
-@mixin make-group-row($gap: calc(var(--spacer) * 0.5)) {
-  @include make-group;
-
-  gap: $gap;
-}
-
-@mixin make-grouped-column() {
-  gap: 0;
-
-  & > * {
-    &:not(:last-child) {
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
-      margin-bottom: 0;
-    }
-
-    &:not(:first-child) {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      margin-top: -1px;
-    }
-  }
-}
-
-@mixin make-grouped-row($element: false) {
-  $selector: if($element, $element, "*");
-
-  flex-wrap: nowrap;
-  gap: 0;
-
-  & > #{$selector} {
-    &:not(:last-child) {
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
-      margin-right: -1px;
-    }
-
-    &:not(:first-child) {
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
-    }
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-}
+@use "./../variables" as *;
+
+@mixin make-group() {
+  margin: 0;
+  display: flex;
+  flex-flow: wrap row;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+
+  $group-margin-fallback: if($enable-margins, var(--spacer), 0);
+
+  margin-bottom: var(--group-margin-bottom, #{$group-margin-fallback});
+}
+
+@mixin make-group-column($gap: calc(var(--spacer) * 0.5)) {
+  @include make-group;
+
+  align-items: stretch;
+  flex-direction: column;
+  gap: $gap;
+}
+
+@mixin make-group-row($gap: calc(var(--spacer) * 0.5)) {
+  @include make-group;
+
+  gap: $gap;
+}
+
+@mixin make-grouped-column() {
+  gap: 0;
+
+  & > * {
+    &:not(:last-child) {
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+      margin-bottom: 0;
+    }
+
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      margin-top: -1px;
+    }
+  }
+}
+
+@mixin make-grouped-row($element: false) {
+  $selector: if($element, $element, "*");
+
+  flex-wrap: nowrap;
+  gap: 0;
+
+  & > #{$selector} {
+    &:not(:last-child) {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      margin-right: -1px;
+    }
+
+    &:not(:first-child) {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}

package/sass/mixins/_list.scss

@@ -1,18 +1,18 @@
-@use "./../variables" as *;
-@use "./../mixins/group" as *;
-
-@mixin make-list-unstyled() {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-
-  $list-margin-fallback: if($enable-margins, var(--spacer), 0);
-
-  margin-bottom: var(--list-margin-bottom, #{$list-margin-fallback});
-}
-
-@mixin make-list-inline($gap: calc(var(--spacer) * 0.5)) {
-  @include make-group-row($gap);
-
-  @include make-list-unstyled;
-}
+@use "./../variables" as *;
+@use "./../mixins/group" as *;
+
+@mixin make-list-unstyled() {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  $list-margin-fallback: if($enable-margins, var(--spacer), 0);
+
+  margin-bottom: var(--list-margin-bottom, #{$list-margin-fallback});
+}
+
+@mixin make-list-inline($gap: calc(var(--spacer) * 0.5)) {
+  @include make-group-row($gap);
+
+  @include make-list-unstyled;
+}