claritas-web-framework 8.0.53 → 8.1.0

package/sass/mixins/_breakpoints.scss

@@ -1,4 +1,5 @@
 @use "sass:map";
+
 @use "sass:list";
 
 @use "./../variables" as *;
@@ -15,6 +16,7 @@
 //    md
 //    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
 //    md
+
 @function breakpoint-next($name, $breakpoints: $breakpoints, $breakpoint-names: map.keys($breakpoints)) {
   $n: list.index($breakpoint-names, $name);
 
@@ -24,6 +26,7 @@
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    576px
+
 @function breakpoint-min($name, $breakpoints: $breakpoints) {
   $min: map.get($breakpoints, $name);
 
@@ -38,6 +41,7 @@
 // See https://bugs.webkit.org/show_bug.cgi?id=178261
 //    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    767.98px
+
 @function breakpoint-max($name, $breakpoints: $breakpoints) {
   $next: breakpoint-next($name, $breakpoints);
 
@@ -50,53 +54,71 @@
 //    ""  (Returns a blank string)
 //    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    "-sm"
+
 @function breakpoint-infix($name, $breakpoints: $breakpoints) {
+
   @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
 }
 
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 // Makes the @content apply to the given breakpoint and wider.
+
 @mixin media-breakpoint-up($name, $breakpoints: $breakpoints) {
   $min: breakpoint-min($name, $breakpoints);
 
   @if $min {
+
     @media (min-width: $min) {
       @content;
     }
-  } @else {
+  }
+
+ @else {
     @content;
   }
 }
 
 // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
 // Makes the @content apply to the given breakpoint and narrower.
+
 @mixin media-breakpoint-down($name, $breakpoints: $breakpoints) {
   $max: breakpoint-max($name, $breakpoints);
 
   @if $max {
+
     @media (max-width: $max) {
       @content;
     }
-  } @else {
+  }
+
+ @else {
     @content;
   }
 }
 
 // Media that spans multiple breakpoint widths.
 // Makes the @content apply between the min and max breakpoints
+
 @mixin media-breakpoint-between($lower, $upper, $breakpoints: $breakpoints) {
   $min: breakpoint-min($lower, $breakpoints);
   $max: breakpoint-max($upper, $breakpoints);
 
   @if $min != null and $max != null {
+
     @media (min-width: $min) and (max-width: $max) {
       @content;
     }
-  } @else if $max == null {
+  }
+
+ @else if $max == null {
+
     @include breakpoints.media-breakpoint-up($lower, $breakpoints) {
       @content;
     }
-  } @else if $min == null {
+  }
+
+ @else if $min == null {
+
     @include media-breakpoint-down($upper, $breakpoints) {
       @content;
     }
@@ -106,19 +128,27 @@
 // Media between the breakpoint's minimum and maximum widths.
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+
 @mixin media-breakpoint-only($name, $breakpoints: $breakpoints) {
   $min: breakpoint-min($name, $breakpoints);
   $max: breakpoint-max($name, $breakpoints);
 
   @if $min != null and $max != null {
+
     @media (min-width: $min) and (max-width: $max) {
       @content;
     }
-  } @else if $max == null {
+  }
+
+ @else if $max == null {
+
     @include breakpoints.media-breakpoint-up($name, $breakpoints) {
       @content;
     }
-  } @else if $min == null {
+  }
+
+ @else if $min == null {
+
     @include media-breakpoint-down($name, $breakpoints) {
       @content;
     }

package/sass/mixins/_button.scss

@@ -1,6 +1,7 @@
 @use "sass:color";
 
 @use "./../variables" as *;
+
 @use "./../functions" as *;
 
 @mixin button-variant(
@@ -14,7 +15,6 @@
   --button-focus-color: #{$color};
   --button-active-color: #{$color};
   --button-disabled-color: #{$color-disabled};
-
   --button-border-color: hsl(
     var(--#{$main}-h) var(--#{$main}-s) calc(calc(var(--#{$main}-l) / 100) * #{$border-shade} * 100)
   );
@@ -30,7 +30,6 @@
   --button-disabled-border-color: hsl(
     var(--#{$main}-h) var(--#{$main}-s) calc(calc(var(--#{$main}-l) / 100) * #{$border-shade} * 100) / #{$button-disabled-border-alpha}
   );
-
   --button-background: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l));
   --button-hover-background: hsl(
     var(--#{$main}-h) var(--#{$main}-s) calc(calc(var(--#{$main}-l) / 100) * #{$border-shade} * 100)
@@ -44,7 +43,6 @@
   --button-disabled-background: hsl(
     var(--#{$main}-h) var(--#{$main}-s) calc(calc(var(--#{$main}-l) / 100) * #{$border-shade} * 100) / #{$button-disabled-background-alpha}
   );
-
   --button-box-shadow: 0 0 0 0.125em hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 0%);
   --button-hover-box-shadow: 0 0 0 0.125em hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 0%);
   --button-focus-box-shadow: 0 0 0 0.125em hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 20%);
@@ -65,13 +63,11 @@
   --button-focus-color: #{$color};
   --button-active-color: #{$color};
   --button-disabled-color: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / #{$color-disabled-alpha});
-
   --button-border-color: #{$border-color};
   --button-hover-border-color: #{$border-color};
   --button-focus-border-color: #{$border-color};
   --button-active-border-color: #{$border-color};
   --button-disabled-border-color: #{$border-color-disabled};
-
   --button-background: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 0%);
   --button-hover-background: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l));
   --button-focus-background: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l));
@@ -79,7 +75,6 @@
     var(--#{$main}-h) var(--#{$main}-s) calc(var(--#{$main}-l) - #{$button-hover-background-alpha})
   );
   --button-disabled-background: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 0%);
-
   --button-box-shadow: 0 0 0 0.125em hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 0%);
   --button-hover-box-shadow: 0 0 0 0.125em hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 0%);
   --button-focus-box-shadow: 0 0 0 0.125em hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 20%);
@@ -95,13 +90,11 @@
     var(--#{$color}-h) var(--#{$color}-s) calc(var(--#{$color}-l) - #{$link-shade-percentage})
   );
   --button-disabled-color: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / #{$color-disabled-alpha});
-
   --button-border-color: transparent;
   --button-hover-border-color: transparent;
   --button-focus-border-color: transparent;
   --button-active-border-color: transparent;
   --button-disabled-border-color: transparent;
-
   --button-background: transparent;
   --button-hover-background: hsl(
     var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / #{$button-hover-background-alpha}
@@ -113,7 +106,6 @@
     var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / #{$button-hover-background-alpha}
   );
   --button-disabled-background: transparent;
-
   --button-box-shadow: none;
   --button-hover-box-shadow: none;
   --button-focus-box-shadow: none;
@@ -129,34 +121,28 @@
     var(--#{$color}-h) var(--#{$color}-s) calc(var(--#{$color}-l) - #{$link-shade-percentage})
   );
   --button-disabled-color: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / #{$color-disabled-alpha});
-
   --button-border-color: transparent;
   --button-hover-border-color: transparent;
   --button-focus-border-color: transparent;
   --button-active-border-color: transparent;
   --button-disabled-border-color: transparent;
-
   --button-background: transparent;
   --button-hover-background: transparent;
   --button-focus-background: transparent;
   --button-active-background: transparent;
   --button-disabled-background: transparent;
-
   --button-box-shadow: none;
   --button-hover-box-shadow: none;
   --button-focus-box-shadow: none;
   --button-active-box-shadow: none;
   --button-disabled-box-shadow: none;
-
   --button-padding-x: 0;
   --button-padding-y: 0;
   --button-small-padding-x: 0;
   --button-small-padding-y: 0;
   --button-large-padding-x: 0;
   --button-large-padding-y: 0;
-
   --button-hover-text-decoration: underline;
-
   --button-border-radius: 0;
   --button-small-border-radius: 0;
   --button-large-border-radius: 0;

package/sass/mixins/_caret.scss

@@ -16,13 +16,16 @@
 
     @if $left {
       left: $position;
-    } @else {
+    }
+
+ @else {
       right: $position;
     }
   }
 }
 
 @mixin make-caret-down($left: false, $color: "body-color", $position: calc(var(--spacer) * 0.5)) {
+
   @include make-caret($left);
 
   &::after {
@@ -32,6 +35,7 @@
 }
 
 @mixin make-caret-up($left: false, $color: "body-color", $position: calc(var(--spacer) * 0.5)) {
+
   @include make-caret($left);
 
   &::after {

package/sass/mixins/_clearfix.scss

@@ -1,4 +1,5 @@
 @mixin clearfix() {
+
   &::after {
     display: block;
     content: "";

package/sass/mixins/_colors.scss

@@ -1,6 +1,7 @@
 @use "sass:color";
 
 @use "./../variables" as *;
+
 @use "./../functions" as *;
 
 @mixin define-color-variables($title, $color) {

package/sass/mixins/_container.scss

@@ -1,4 +1,5 @@
 @use "./../variables" as *;
+
 @use "./../mixins/breakpoints" as *;
 
 @mixin make-container() {
@@ -13,7 +14,9 @@
 }
 
 @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

@@ -4,12 +4,14 @@
 
 // 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: $gray-7, $end-color: $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: $gray-7, $end-color: $gray-8, $start-percent: null, $end-percent: null) {
   background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
 }

package/sass/mixins/_grid.scss

@@ -1,12 +1,16 @@
 @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;
@@ -38,10 +42,13 @@
 }
 
 @mixin make-col($size: false, $columns: $grid-columns) {
+
   @if $size {
     flex: 0 0 auto;
     width: math.percentage(math.div($size, $columns));
-  } @else {
+  }
+
+ @else {
     flex: 1 1 0;
     max-width: 100%;
   }
@@ -66,7 +73,9 @@
 // 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);
@@ -76,34 +85,43 @@
 // 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);
             }
           }
@@ -112,6 +130,7 @@
 
       // 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} {
@@ -128,11 +147,14 @@
 }
 
 @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;
@@ -141,6 +163,7 @@
 
         // 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

@@ -10,12 +10,15 @@
 
   @if $enable-margins {
     margin-bottom: var(--spacer);
-  } @else {
+  }
+
+ @else {
     margin-bottom: 0;
   }
 }
 
 @mixin make-group-column($gap: calc(var(--spacer) * 0.5)) {
+
   @include make-group;
 
   align-items: stretch;
@@ -24,6 +27,7 @@
 }
 
 @mixin make-group-row($gap: calc(var(--spacer) * 0.5)) {
+
   @include make-group;
 
   gap: $gap;
@@ -33,6 +37,7 @@
   gap: 0;
 
   & > * {
+
     &:not(:last-child) {
       border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
@@ -54,6 +59,7 @@
   gap: 0;
 
   & > #{$selector} {
+
     &:not(:last-child) {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;

package/sass/mixins/_list.scss

@@ -1,4 +1,5 @@
 @use "./../variables" as *;
+
 @use "./../mixins/group" as *;
 
 @mixin make-list-unstyled() {
@@ -8,12 +9,16 @@
 
   @if $enable-margins {
     margin-bottom: var(--spacer);
-  } @else {
+  }
+
+ @else {
     margin-bottom: 0;
   }
 }
 
 @mixin make-list-inline($gap: calc(var(--spacer) * 0.5)) {
+
   @include make-group-row($gap);
+
   @include make-list-unstyled;
 }

package/sass/mixins/_screenReader.scss

@@ -10,6 +10,7 @@
 
   &:active,
   &:focus {
+
     @if $focusable {
       position: static;
       width: auto;

package/sass/modules/_alert.scss

@@ -25,7 +25,9 @@
 
   @if $enable-margins {
     margin-bottom: var(--spacer);
-  } @else {
+  }
+
+ @else {
     margin-bottom: 0;
   }
 
@@ -37,6 +39,7 @@
   }
 
   & > * {
+
     &:last-child {
       margin-bottom: 0;
     }

package/sass/modules/_breadcrumbs.scss

@@ -1,5 +1,7 @@
 @use "./../variables" as *;
+
 @use "./../functions" as *;
+
 @use "./../mixins/list" as *;
 
 .breadcrumbs {
@@ -17,6 +19,7 @@
     position: relative;
 
     &:not(:last-child) {
+
       &::after {
         content: "";
         position: absolute;

package/sass/modules/_button.scss

@@ -1,6 +1,7 @@
 @use "rfs/scss" as *;
 
 @use "./../variables" as *;
+
 @use "./../mixins" as *;
 
 .button {
@@ -14,7 +15,6 @@
     var(--body-color-h) var(--body-color-s) calc(var(--body-color-l) - #{$link-shade-percentage})
   );
   --button-disabled-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / #{$color-disabled-alpha});
-
   --button-border-color: var(--border-color-main);
   --button-hover-border-color: var(--border-color-hover-main);
   --button-focus-border-color: var(--border-color-hover-main);
@@ -22,13 +22,11 @@
   --button-disabled-border-color: hsl(
     var(--border-color-main-h) var(--border-color-main-s) var(--border-color-main-l) / #{$color-disabled-alpha}
   );
-
   --button-background: hsl(var(--body-color-h) var(--body-color-s) 100%);
   --button-hover-background: hsl(var(--body-color-h) var(--body-color-s) 100%);
   --button-focus-background: hsl(var(--body-color-h) var(--body-color-s) 100%);
   --button-active-background: hsl(var(--body-color-h) var(--body-color-s) 95%);
   --button-disabled-background: hsl(var(--body-color-h) var(--body-color-s) 100% / #{$color-disabled-alpha});
-
   --button-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
   --button-hover-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
   --button-focus-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 20%);
@@ -42,15 +40,12 @@
   --button-small-padding-y: #{$button-small-padding-y};
   --button-large-padding-x: #{$button-large-padding-x};
   --button-large-padding-y: #{$button-large-padding-y};
-
   --button-border-width: 1px;
   --button-border-style: solid;
-
   --button-border-radius: #{$button-border-radius};
   --button-small-border-radius: #{$button-small-border-radius};
   --button-large-border-radius: #{$button-large-border-radius};
   --button-round-border-radius: #{$button-round-border-radius};
-
   --button-font-family: #{$button-font-family};
   --button-font-weight: #{$button-font-weight};
   --button-line-height: #{$button-line-height};
@@ -59,6 +54,7 @@
   --button-white-space: #{$button-white-space};
 
   @include rfs($button-font-size, --button-font-size);
+
   @include font-size(var(--button-font-size));
 
   // Variable references
@@ -93,6 +89,7 @@
     padding: var(--button-large-padding-y) var(--button-large-padding-x);
 
     @include rfs($button-large-font-size, --button-font-size);
+
     @include font-size(var(--button-font-size));
 
     &:not(.button--rounded) {
@@ -104,6 +101,7 @@
     padding: var(--button-small-padding-y) var(--button-small-padding-x);
 
     @include rfs($button-small-font-size, --button-font-size);
+
     @include font-size(var(--button-font-size));
 
     &:not(.button--rounded) {
@@ -141,10 +139,12 @@
   }
 
   &.button--link {
+
     @include button-variant-link("primary");
   }
 
   &.button--unstyled {
+
     @include button-variant-unstyled("body-color");
   }
 
@@ -160,26 +160,32 @@
 }
 
 .buttons {
+
   @include make-group-row;
 
   &.buttons--grouped {
+
     @include make-grouped-row(".button");
   }
 }
 
 @each $key, $value in $all-colors {
   .button--#{$key} {
+
     @include button-variant($key, $value);
 
     &.button--outline {
+
       @include button-variant-outline($key, $value);
     }
 
     &.button--link {
+
       @include button-variant-link($key);
     }
 
     &.button--unstyled {
+
       @include button-variant-unstyled($key);
     }
   }