claritas-web-framework 8.5.8 → 8.5.91

package/sass/modules/form/_select.scss

@@ -1,22 +1,22 @@
-@use "./../../variables" as *;
-@use "./../../functions" as *;
-
-select {
-  padding-right: calc(var(--spacer) * 2);
-  padding-inline-start: calc(var(--spacer) - 3px);
-
-  &:not([multiple]) {
-    background-image: escape-svg($form-select-indicator);
-    background-repeat: no-repeat;
-    background-position: right calc(var(--spacer) * 0.5) center;
-    background-size: var(--spacer) auto;
-  }
-
-  &[multiple] {
-    padding: 0;
-
-    & option {
-      padding: calc(var(--spacer) * 0.5) var(--spacer);
-    }
-  }
-}
+@use "./../../variables" as *;
+@use "./../../functions" as *;
+
+select {
+  padding-right: calc(var(--spacer) * 2);
+  padding-inline-start: calc(var(--spacer) - 3px);
+
+  &:not([multiple]) {
+    background-image: escape-svg($form-select-indicator);
+    background-repeat: no-repeat;
+    background-position: right calc(var(--spacer) * 0.5) center;
+    background-size: var(--spacer) auto;
+  }
+
+  &[multiple] {
+    padding: 0;
+
+    & option {
+      padding: calc(var(--spacer) * 0.5) var(--spacer);
+    }
+  }
+}

package/sass/modules/form/_text.scss

@@ -1,28 +1,28 @@
-@use "sass:color";
-@use "./../../variables" as *;
-
-.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 transparent;
-  --input-hover-box-shadow: 0 0 0 0.125em transparent;
-  --input-focus-box-shadow: 0 0 0 0.125em transparent;
-  --input-active-box-shadow: 0 0 0 0.125em transparent;
-  --input-disabled-box-shadow: 0 0 0 0.125em transparent;
-  --input-border-radius: 0;
-  --input-small-border-radius: 0;
-  --input-large-border-radius: 0;
-  --input-round-border-radius: 0;
-
-  @each $key, $value in $theme-colors {
-    &.input--#{$key} {
-      --input-box-shadow: 0 0 0 0.125em transparent;
-      --input-hover-box-shadow: 0 0 0 0.125em transparent;
-      --input-focus-box-shadow: 0 0 0 0.125em transparent;
-      --input-active-box-shadow: 0 0 0 0.125em transparent;
-      --input-disabled-box-shadow: 0 0 0 0.125em transparent;
-    }
-  }
-}
+@use "sass:color";
+@use "./../../variables" as *;
+
+.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 transparent;
+  --input-hover-box-shadow: 0 0 0 0.125em transparent;
+  --input-focus-box-shadow: 0 0 0 0.125em transparent;
+  --input-active-box-shadow: 0 0 0 0.125em transparent;
+  --input-disabled-box-shadow: 0 0 0 0.125em transparent;
+  --input-border-radius: 0;
+  --input-small-border-radius: 0;
+  --input-large-border-radius: 0;
+  --input-round-border-radius: 0;
+
+  @each $key, $value in $theme-colors {
+    &.input--#{$key} {
+      --input-box-shadow: 0 0 0 0.125em transparent;
+      --input-hover-box-shadow: 0 0 0 0.125em transparent;
+      --input-focus-box-shadow: 0 0 0 0.125em transparent;
+      --input-active-box-shadow: 0 0 0 0.125em transparent;
+      --input-disabled-box-shadow: 0 0 0 0.125em transparent;
+    }
+  }
+}

package/sass/modules/form/_textarea.scss

@@ -1,3 +1,3 @@
-textarea {
-  --input-white-space: normal;
-}
+textarea {
+  --input-white-space: normal;
+}

package/sass/modules/form/_toggle.scss

@@ -1,68 +1,68 @@
-@use "sass:color";
-@use "./../../variables" as *;
-@use "./../../mixins/breakpoints" as *;
-
-.form__control.toggle {
-  & > * {
-    &:not(:last-child) {
-      margin-right: var(--spacer);
-
-      @include media-breakpoint-up("desktop") {
-        margin-right: calc(var(--spacer) * 0.5);
-      }
-    }
-  }
-
-  & input[type="checkbox"] {
-    --input-width: auto;
-    --input-desktop-width: auto;
-    --input-padding-x: #{calc(($input-padding-x * 2) + 1px)};
-
-    border-radius: var(--input-round-border-radius);
-    aspect-ratio: 2 / 1;
-    flex-shrink: 0;
-    vertical-align: text-bottom;
-
-    &::before {
-      content: "";
-      position: absolute;
-      margin: auto;
-      inset: 0 50% 0 0;
-      overflow: hidden;
-      border-radius: var(--input-round-border-radius);
-      background: var(--input-border-color);
-      width: 35%;
-      aspect-ratio: 1;
-      transition:
-        left 0.2s,
-        right 0.2s;
-    }
-
-    &:checked {
-      background: var(--input-detail-background);
-
-      &::before {
-        background: var(--white);
-        left: 50%;
-        right: 0;
-      }
-
-      &:disabled,
-      &.disabled,
-      &[aria-disabled="true"] {
-        background: var(--input-disabled-detail-background);
-      }
-    }
-
-    @each $key, $value in $theme-colors {
-      &.input--#{$key} {
-        --input-border-color: hsl(from var(--#{$key}) h s l / #{$color-disabled-alpha});
-
-        &:checked {
-          --input-detail-background: var(--#{$key});
-          --input-disabled-detail-background: hsl(from var(--#{$key}) h s l / #{$color-disabled-alpha});
-        }
-      }
-    }
-  }
-}
+@use "sass:color";
+@use "./../../variables" as *;
+@use "./../../mixins/breakpoints" as *;
+
+.form__control.toggle {
+  & > * {
+    &:not(:last-child) {
+      margin-right: var(--spacer);
+
+      @include media-breakpoint-up("desktop") {
+        margin-right: calc(var(--spacer) * 0.5);
+      }
+    }
+  }
+
+  & input[type="checkbox"] {
+    --input-width: auto;
+    --input-desktop-width: auto;
+    --input-padding-x: #{calc(($input-padding-x * 2) + 1px)};
+
+    border-radius: var(--input-round-border-radius);
+    aspect-ratio: 2 / 1;
+    flex-shrink: 0;
+    vertical-align: text-bottom;
+
+    &::before {
+      content: "";
+      position: absolute;
+      margin: auto;
+      inset: 0 50% 0 0;
+      overflow: hidden;
+      border-radius: var(--input-round-border-radius);
+      background: var(--input-border-color);
+      width: 35%;
+      aspect-ratio: 1;
+      transition:
+        left 0.2s,
+        right 0.2s;
+    }
+
+    &:checked {
+      background: var(--input-detail-background);
+
+      &::before {
+        background: var(--white);
+        left: 50%;
+        right: 0;
+      }
+
+      &:disabled,
+      &.disabled,
+      &[aria-disabled="true"] {
+        background: var(--input-disabled-detail-background);
+      }
+    }
+
+    @each $key, $value in $theme-colors {
+      &.input--#{$key} {
+        --input-border-color: hsl(from var(--#{$key}) h s l / #{$color-disabled-alpha});
+
+        &:checked {
+          --input-detail-background: var(--#{$key});
+          --input-disabled-detail-background: hsl(from var(--#{$key}) h s l / #{$color-disabled-alpha});
+        }
+      }
+    }
+  }
+}

package/sass/utilities/_align.scss

@@ -1,25 +1,25 @@
-@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);
-
-    @each $value in $alignments {
-      .valign-#{$infix}-#{$value} {
-        vertical-align: #{$value} !important;
-      }
-    }
-  }
-}
-
-@media print {
-  @each $value in $alignments {
-    .vertical-align--print-#{$value} {
-      vertical-align: #{$value} !important;
-    }
-  }
-}
+@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);
+
+    @each $value in $alignments {
+      .valign-#{$infix}-#{$value} {
+        vertical-align: #{$value} !important;
+      }
+    }
+  }
+}
+
+@media print {
+  @each $value in $alignments {
+    .vertical-align--print-#{$value} {
+      vertical-align: #{$value} !important;
+    }
+  }
+}

package/sass/utilities/_border.scss

@@ -1,59 +1,59 @@
-@use "sass:color";
-@use "./../variables" as *;
-@use "./../mixins" as *;
-
-.border {
-  border-width: 1px !important;
-  border-style: solid !important;
-  border-color: var(--border-color-main) !important;
-}
-
-.border--top,
-.border-top {
-  border-top: 1px solid var(--border-color-main) !important;
-}
-
-.border--right,
-.border-right {
-  border-right: 1px solid var(--border-color-main) !important;
-}
-
-.border--bottom,
-.border-bottom {
-  border-bottom: 1px solid var(--border-color-main) !important;
-}
-
-.border--left,
-.border-left {
-  border-left: 1px solid var(--border-color-main) !important;
-}
-
-.border--none {
-  border: 0 !important;
-}
-
-.border--top-none,
-.border-top--none {
-  border-top: 0 !important;
-}
-
-.border--right-none,
-.border-right--none {
-  border-right: 0 !important;
-}
-
-.border--bottom-none,
-.border-bottom--none {
-  border-bottom: 0 !important;
-}
-
-.border--left-none,
-.border-left--none {
-  border-left: 0 !important;
-}
-
-@each $key, $value in $border-radii {
-  .border-radius--#{$key} {
-    border-radius: #{$value} !important;
-  }
-}
+@use "sass:color";
+@use "./../variables" as *;
+@use "./../mixins" as *;
+
+.border {
+  border-width: 1px !important;
+  border-style: solid !important;
+  border-color: var(--border-color-main) !important;
+}
+
+.border--top,
+.border-top {
+  border-top: 1px solid var(--border-color-main) !important;
+}
+
+.border--right,
+.border-right {
+  border-right: 1px solid var(--border-color-main) !important;
+}
+
+.border--bottom,
+.border-bottom {
+  border-bottom: 1px solid var(--border-color-main) !important;
+}
+
+.border--left,
+.border-left {
+  border-left: 1px solid var(--border-color-main) !important;
+}
+
+.border--none {
+  border: 0 !important;
+}
+
+.border--top-none,
+.border-top--none {
+  border-top: 0 !important;
+}
+
+.border--right-none,
+.border-right--none {
+  border-right: 0 !important;
+}
+
+.border--bottom-none,
+.border-bottom--none {
+  border-bottom: 0 !important;
+}
+
+.border--left-none,
+.border-left--none {
+  border-left: 0 !important;
+}
+
+@each $key, $value in $border-radii {
+  .border-radius--#{$key} {
+    border-radius: #{$value} !important;
+  }
+}

package/sass/utilities/_colors.scss

@@ -1,76 +1,76 @@
-@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,
-    &:focus {
-      color: var(--color-hover) !important;
-    }
-
-    &:disabled,
-    &.disabled {
-      color: var(--color-disabled) !important;
-    }
-  }
-
-  .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,
-    &:focus {
-      color: var(--color-hover) !important;
-    }
-
-    &:disabled,
-    &.disabled {
-      color: var(--color-disabled) !important;
-    }
-  }
-
-  .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;
-  }
-}
+@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,
+    &:focus {
+      color: var(--color-hover) !important;
+    }
+
+    &:disabled,
+    &.disabled {
+      color: var(--color-disabled) !important;
+    }
+  }
+
+  .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,
+    &:focus {
+      color: var(--color-hover) !important;
+    }
+
+    &:disabled,
+    &.disabled {
+      color: var(--color-disabled) !important;
+    }
+  }
+
+  .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,25 +1,25 @@
-@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);
-
-    @each $value in $displays {
-      .display-#{$infix}-#{$value} {
-        display: #{$value} !important;
-      }
-    }
-  }
-}
-
-@media print {
-  @each $value in $displays {
-    .display--print-#{$value} {
-      display: #{$value} !important;
-    }
-  }
-}
+@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);
+
+    @each $value in $displays {
+      .display-#{$infix}-#{$value} {
+        display: #{$value} !important;
+      }
+    }
+  }
+}
+
+@media print {
+  @each $value in $displays {
+    .display--print-#{$value} {
+      display: #{$value} !important;
+    }
+  }
+}