claritas-web-framework 8.0.53 → 8.1.0

package/sass/modules/form/_file.scss

@@ -1,6 +1,7 @@
 @use "sass:color";
 
 @use "./../../variables" as *;
+
 @use "./../../functions" as *;
 
 .form--control-fancyfile {
@@ -33,6 +34,7 @@
       }
 
       &:empty {
+
         & ~ .form--label {
           border-bottom-right-radius: var(--border-radius-medium);
           border-bottom-left-radius: var(--border-radius-medium);
@@ -74,6 +76,7 @@
     }
 
     &:hover {
+
       & ~ .form--label {
         border-color: var(--input-hover-border-color);
         background-color: var(--gray-2);
@@ -84,6 +87,7 @@
       }
 
       & ~ .file--name {
+
         &:not(:empty) {
           border-color: var(--input-hover-border-color);
         }
@@ -92,22 +96,26 @@
 
     @each $key, $value in $theme-colors {
       &.input--#{$key} {
+
         & ~ .form--label {
           border-color: $value;
         }
 
         & ~ .file--name {
+
           &:not(:empty) {
             border-color: $value;
           }
         }
 
         &:hover {
+
           & ~ .form--label {
             border-color: color.mix(black, $value, 25%);
           }
 
           & ~ .file--name {
+
             &:not(:empty) {
               border-color: color.mix(black, $value, 25%);
             }
@@ -140,7 +148,9 @@ input[type="file"] {
   }
 
   &:hover {
+
     &:not(:disabled, [readonly]) {
+
       &::-webkit-file-upload-button,
       &::file-selector-button {
         background-color: var(--gray-2);

package/sass/modules/form/_formFieldGroup.scss

@@ -26,11 +26,11 @@
     }
 
     &:first-child {
+
       & * {
         --input-border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
         --input-small-border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
         --input-large-border-radius: var(--border-radius-large) 0 0 var(--border-radius-large);
-
         --button-border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
         --button-small-border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
         --button-large-border-radius: var(--border-radius-large) 0 0 var(--border-radius-large);
@@ -43,11 +43,11 @@
     }
 
     &:last-child {
+
       & * {
         --input-border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
         --input-small-border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
         --input-large-border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0;
-
         --button-border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
         --button-small-border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
         --button-large-border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0;

package/sass/modules/form/_progress.scss

@@ -36,6 +36,7 @@ progress {
 
   @each $key, $value in $theme-colors {
     &.input--#{$key} {
+
       &::-webkit-progress-bar {
         background-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 5%);
       }

package/sass/modules/form/_radio.scss

@@ -1,11 +1,15 @@
 @use "sass:map";
+
 @use "sass:color";
 
 @use "./../../variables" as *;
+
 @use "./../../mixins/breakpoints" as *;
 
 .form--control-radio {
+
   & > * {
+
     &:not(:last-child) {
       margin-right: var(--spacer);
 
@@ -48,6 +52,7 @@
 
     @each $key, $value in $theme-colors {
       &.input--#{$key} {
+
         &:checked {
           --input-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
           --input-disabled-detail-background: hsl(

package/sass/modules/form/_range.scss

@@ -43,15 +43,12 @@ input[type="range"] {
   --input-focus-border-color: transparent;
   --input-active-border-color: transparent;
   --input-disabled-border-color: transparent;
-
   --input-box-shadow: none;
   --input-hover-box-shadow: none;
   --input-focus-box-shadow: none;
   --input-active-box-shadow: none;
   --input-disabled-box-shadow: none;
-
   --input-disabled-background: hsl(var(--body-color-h) var(--body-color-s) 100%);
-
   --input-padding-x: 0;
   --input-small-padding-x: 0;
   --input-large-padding-x: 0;
@@ -59,31 +56,39 @@ input[type="range"] {
   margin: calc(var(--spacer) * 0.5) 0;
 
   &::-moz-range-track {
+
     @include make-track;
   }
 
   &::-webkit-slider-runnable-track {
+
     @include make-track;
   }
 
   &::-moz-range-thumb {
+
     @include make-thumb(false, false);
   }
 
   &::-webkit-slider-thumb {
+
     @include make-thumb(false, false);
   }
 
   &:focus {
+
     &::-webkit-slider-runnable-track {
+
       @include make-track;
     }
 
     &::-moz-range-track {
+
       @include make-track;
     }
 
     &::-webkit-slider-thumb {
+
       @include make-thumb(true, false);
     }
   }
@@ -94,18 +99,22 @@ input[type="range"] {
     --input-disabled-detail-background: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) + 20%));
 
     &::-webkit-slider-runnable-track {
+
       @include make-track;
     }
 
     &::-moz-range-track {
+
       @include make-track;
     }
 
     &::-moz-range-thumb {
+
       @include make-thumb(false, true);
     }
 
     &::-webkit-slider-thumb {
+
       @include make-thumb(false, true);
     }
   }
@@ -115,19 +124,24 @@ input[type="range"] {
       --input-disabled-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) + 20%));
 
       &::-moz-range-thumb {
+
         @include make-thumb(false, false, $value, hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 25%));
       }
 
       &::-webkit-slider-thumb {
+
         @include make-thumb(false, false, $value, hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 25%));
       }
 
       &:focus {
+
         &::-moz-range-thumb {
+
           @include make-thumb(true, false, $value, hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 25%));
         }
 
         &::-webkit-slider-thumb {
+
           @include make-thumb(true, false, $value, hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 25%));
         }
       }
@@ -135,11 +149,14 @@ input[type="range"] {
       &:disabled,
       &.disabled,
       &[aria-disabled="true"] {
+
         &::-moz-range-thumb {
+
           @include make-thumb(false, true, $value, hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 25%));
         }
 
         &::-webkit-slider-thumb {
+
           @include make-thumb(false, true, $value, hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 25%));
         }
       }

package/sass/modules/form/_select.scss

@@ -1,4 +1,5 @@
 @use "./../../variables" as *;
+
 @use "./../../functions" as *;
 
 select {

package/sass/modules/form/_switch.scss

@@ -1,6 +1,7 @@
 @use "sass:color";
 
 @use "./../../variables" as *;
+
 @use "./../../mixins" as *;
 
 .button--switch {
@@ -13,6 +14,7 @@
 
   &[disabled],
   &:disabled {
+
     + .button {
       pointer-events: none;
       filter: none;
@@ -22,6 +24,7 @@
 }
 
 .switches {
+
   @include make-group-row;
 
   &.switches--grouped {
@@ -29,6 +32,7 @@
     flex-wrap: nowrap;
 
     & > .button {
+
       &:not(:last-child) {
         border-bottom-right-radius: 0;
         border-top-right-radius: 0;

package/sass/modules/form/_text.scss

@@ -4,17 +4,14 @@
 
 .input--text {
   --input-border-width: 0 0 1px;
-
   --input-padding-x: 0;
   --input-small-padding-x: 0;
   --input-large-padding-x: 0;
-
   --input-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
   --input-hover-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
   --input-focus-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
   --input-active-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
   --input-disabled-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
-
   --input-border-radius: 0;
   --input-small-border-radius: 0;
   --input-large-border-radius: 0;

package/sass/modules/form/_toggle.scss

@@ -1,10 +1,13 @@
 @use "sass:color";
 
 @use "./../../variables" as *;
+
 @use "./../../mixins/breakpoints" as *;
 
 .form--control-toggle {
+
   & > * {
+
     &:not(:last-child) {
       margin-right: var(--spacer);
 

package/sass/utilities/_align.scss

@@ -1,11 +1,13 @@
 @use "sass:map";
 
 @use "./../variables" as *;
+
 @use "./../mixins/breakpoints" as *;
 
 $alignments: (baseline, top, middle, bottom, text-bottom, text-top) !default;
 
 @each $breakpoint in map.keys($breakpoints) {
+
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 
@@ -18,6 +20,7 @@ $alignments: (baseline, top, middle, bottom, text-bottom, text-top) !default;
 }
 
 @media print {
+
   @each $value in $alignments {
     .vertical-align--print-#{$value} {
       vertical-align: #{$value} !important;

package/sass/utilities/_border.scss

@@ -1,6 +1,7 @@
 @use "sass:color";
 
 @use "./../variables" as *;
+
 @use "./../mixins" as *;
 
 .border {

package/sass/utilities/_colors.scss

@@ -1,15 +1,20 @@
 @use "./../variables" as *;
+
 @use "./../mixins/colors" as *;
 
 @each $key, $value in $all-colors {
   .color--#{$key} {
+
     @include make-color($key);
+
     color: var(--color) !important;
   }
 
   button.color--#{$key},
   a.color--#{$key} {
+
     @include make-color($key);
+
     color: var(--color) !important;
 
     &:hover,
@@ -24,25 +29,33 @@
   }
 
   .background--#{$key} {
+
     @include make-background-color($key);
+
     background-color: var(--background-color) !important;
   }
 
   .border--#{$key} {
+
     @include make-border-color($key);
+
     border-color: var(--border-color) !important;
   }
 }
 
 @each $key, $value in $grays {
   .color--#{$key} {
+
     @include make-color($key);
+
     color: var(--color) !important;
   }
 
   button.color--#{$key},
   a.color--#{$key} {
+
     @include make-color($key);
+
     color: var(--color) !important;
 
     &:hover,
@@ -57,12 +70,16 @@
   }
 
   .background--#{$key} {
+
     @include make-background-color($key);
+
     background-color: var(--background-color) !important;
   }
 
   .border--#{$key} {
+
     @include make-border-color($key);
+
     border-color: var(--border-color) !important;
   }
 }

package/sass/utilities/_display.scss

@@ -1,11 +1,13 @@
 @use "sass:map";
 
 @use "./../variables" as *;
+
 @use "./../mixins/breakpoints" as *;
 
 $displays: (initial, none, inline, inline-block, block, table-row, table-cell, flex, inline-flex, grid) !default;
 
 @each $breakpoint in map.keys($breakpoints) {
+
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 
@@ -18,6 +20,7 @@ $displays: (initial, none, inline, inline-block, block, table-row, table-cell, f
 }
 
 @media print {
+
   @each $value in $displays {
     .display--print-#{$value} {
       display: #{$value} !important;

package/sass/utilities/_flex.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 
 @use "./../variables" as *;
+
 @use "./../mixins/breakpoints" as *;
 
 $flex-directions: (row, column, row-reverse, column-reverse) !default;
@@ -10,6 +11,7 @@ $flex-item-alignments: (auto, flex-start, flex-end, center, baseline, stretch) !
 $flex-content-alignments: (flex-start, flex-end, center, space-between, space-around, stretch) !default;
 
 @each $breakpoint in map.keys($breakpoints) {
+
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 

package/sass/utilities/_float.scss

@@ -1,11 +1,13 @@
 @use "sass:map";
 
 @use "./../variables" as *;
+
 @use "./../mixins/breakpoints" as *;
 
 $floats: (left, right, none) !default;
 
 @each $breakpoint in map.keys($breakpoints) {
+
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 

package/sass/utilities/_order.scss

@@ -1,9 +1,11 @@
 @use "sass:map";
 
 @use "./../variables" as *;
+
 @use "./../mixins/breakpoints" as *;
 
 @each $breakpoint in map.keys($breakpoints) {
+
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 

package/sass/utilities/_overflow.scss

@@ -1,11 +1,13 @@
 @use "sass:map";
 
 @use "./../variables" as *;
+
 @use "./../mixins/breakpoints" as *;
 
 $overflows: (auto, hidden, visible, scroll) !default;
 
 @each $breakpoint in map.keys($breakpoints) {
+
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 

package/sass/utilities/_pointerEvents.scss

@@ -1,11 +1,13 @@
 @use "sass:map";
 
 @use "./../variables" as *;
+
 @use "./../mixins/breakpoints" as *;
 
 $pointer-events: (auto, none) !default;
 
 @each $breakpoint in map.keys($breakpoints) {
+
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 

package/sass/utilities/_position.scss

@@ -1,12 +1,14 @@
 @use "sass:map";
 
 @use "./../variables" as *;
+
 @use "./../mixins/breakpoints" as *;
 
 $positions: (static, relative, absolute, fixed, sticky) !default;
 $position-ints: (0, 25, 50, 75, 100) !default;
 
 @each $breakpoint in map.keys($breakpoints) {
+
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 

package/sass/utilities/_size.scss

@@ -1,7 +1,9 @@
 @use "sass:map";
+
 @use "sass:list";
 
 @use "./../variables" as *;
+
 @use "./../mixins/breakpoints" as *;
 
 @each $key in ("none", "auto") {
@@ -31,6 +33,7 @@
 }
 
 @each $breakpoint in map.keys($breakpoints) {
+
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 

package/sass/utilities/_spacing.scss

@@ -1,9 +1,11 @@
 @use "sass:map";
 
 @use "./../variables" as *;
+
 @use "./../mixins/breakpoints" as *;
 
 @each $breakpoint in map.keys($breakpoints) {
+
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 

package/sass/utilities/_typography.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 
 @use "./../variables" as *;
+
 @use "./../mixins/breakpoints" as *;
 
 @each $key, $value in $font-sizes {
@@ -16,6 +17,7 @@
 }
 
 @each $breakpoint in map.keys($breakpoints) {
+
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 

package/sass/utilities/_visibility.scss

@@ -1,11 +1,13 @@
 @use "sass:map";
 
 @use "./../variables" as *;
+
 @use "./../mixins/breakpoints" as *;
 
 $visibilities: (visible, hidden) !default;
 
 @each $breakpoint in map.keys($breakpoints) {
+
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 

package/sass/utilities/_zIndex.scss

@@ -1,9 +1,11 @@
 @use "sass:map";
 
 @use "./../variables" as *;
+
 @use "./../mixins/breakpoints" as *;
 
 @each $breakpoint in map.keys($breakpoints) {
+
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);