claritas-web-framework 8.5.8 → 8.5.9

package/sass/modules/_tooltip.scss

@@ -1,108 +1,108 @@
-@use "sass:color";
-@use "./../variables" as *;
-
-[data-tooltip] {
-  position: relative;
-  cursor: help;
-
-  &::after,
-  &::before {
-    transition:
-      opacity 0.2s ease-in-out,
-      visibility 0.2s ease-in-out;
-    transform: translate3d(0, 0, 0);
-    position: absolute;
-    visibility: hidden;
-    opacity: 0;
-    pointer-events: none;
-    z-index: var(--zindex-tooltip);
-    color: var(--white);
-    text-align: center;
-    font-size: var(--font-size-small);
-    line-height: normal;
-    font-weight: 400;
-  }
-
-  &::before {
-    content: "";
-    border-top: 6px solid hsl(0deg 0% 0% / 75%);
-    border-right: 6px solid transparent;
-    border-bottom: 0 none;
-    border-left: 6px solid transparent;
-    inset: -6px auto auto 50%;
-    margin: 0 0 0 -6px;
-  }
-
-  &::after {
-    background-color: hsl(0deg 0% 0% / 75%);
-    content: attr(data-tooltip);
-    width: auto;
-    min-width: calc(var(--spacer) * 6);
-    padding: 4px 8px;
-    border-radius: 3px;
-    inset: auto auto 100% 50%;
-    transform: translateY(-6px) translateX(-50%);
-  }
-
-  &.tooltip--large {
-    &::after {
-      min-width: calc(var(--spacer) * 16);
-    }
-  }
-
-  &[data-placement="left"] {
-    &::before {
-      border-top: 6px solid transparent;
-      border-right: 0 none;
-      border-bottom: 6px solid transparent;
-      border-left: 6px solid hsl(0deg 0% 0% / 75%);
-      inset: 50% auto auto -6px;
-      margin: -6px 0 0;
-    }
-
-    &::after {
-      inset: 50% 100% auto auto;
-      transform: translateY(-50%) translateX(-6px);
-    }
-  }
-
-  &[data-placement="right"] {
-    &::before {
-      border-top: 6px solid transparent;
-      border-right: 6px solid hsl(0deg 0% 0% / 75%);
-      border-bottom: 6px solid transparent;
-      border-left: 0 none;
-      inset: 50% -6px auto auto;
-      margin: -6px 0 0;
-    }
-
-    &::after {
-      inset: 50% auto auto 100%;
-      transform: translateY(-50%) translateX(6px);
-    }
-  }
-
-  &[data-placement="bottom"] {
-    &::before {
-      border-top: 0 none;
-      border-right: 6px solid transparent;
-      border-bottom: 6px solid hsl(0deg 0% 0% / 75%);
-      border-left: 6px solid transparent;
-      inset: auto auto -6px 50%;
-      margin: 0 0 0 -6px;
-    }
-
-    &::after {
-      inset: 100% auto auto 50%;
-      transform: translateY(6px) translateX(-50%);
-    }
-  }
-
-  &:hover {
-    &::after,
-    &::before {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-}
+@use "sass:color";
+@use "./../variables" as *;
+
+[data-tooltip] {
+  position: relative;
+  cursor: help;
+
+  &::after,
+  &::before {
+    transition:
+      opacity 0.2s ease-in-out,
+      visibility 0.2s ease-in-out;
+    transform: translate3d(0, 0, 0);
+    position: absolute;
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+    z-index: var(--zindex-tooltip);
+    color: var(--white);
+    text-align: center;
+    font-size: var(--font-size-small);
+    line-height: normal;
+    font-weight: 400;
+  }
+
+  &::before {
+    content: "";
+    border-top: 6px solid hsl(0deg 0% 0% / 75%);
+    border-right: 6px solid transparent;
+    border-bottom: 0 none;
+    border-left: 6px solid transparent;
+    inset: -6px auto auto 50%;
+    margin: 0 0 0 -6px;
+  }
+
+  &::after {
+    background-color: hsl(0deg 0% 0% / 75%);
+    content: attr(data-tooltip);
+    width: auto;
+    min-width: calc(var(--spacer) * 6);
+    padding: 4px 8px;
+    border-radius: 3px;
+    inset: auto auto 100% 50%;
+    transform: translateY(-6px) translateX(-50%);
+  }
+
+  &.tooltip--large {
+    &::after {
+      min-width: calc(var(--spacer) * 16);
+    }
+  }
+
+  &[data-placement="left"] {
+    &::before {
+      border-top: 6px solid transparent;
+      border-right: 0 none;
+      border-bottom: 6px solid transparent;
+      border-left: 6px solid hsl(0deg 0% 0% / 75%);
+      inset: 50% auto auto -6px;
+      margin: -6px 0 0;
+    }
+
+    &::after {
+      inset: 50% 100% auto auto;
+      transform: translateY(-50%) translateX(-6px);
+    }
+  }
+
+  &[data-placement="right"] {
+    &::before {
+      border-top: 6px solid transparent;
+      border-right: 6px solid hsl(0deg 0% 0% / 75%);
+      border-bottom: 6px solid transparent;
+      border-left: 0 none;
+      inset: 50% -6px auto auto;
+      margin: -6px 0 0;
+    }
+
+    &::after {
+      inset: 50% auto auto 100%;
+      transform: translateY(-50%) translateX(6px);
+    }
+  }
+
+  &[data-placement="bottom"] {
+    &::before {
+      border-top: 0 none;
+      border-right: 6px solid transparent;
+      border-bottom: 6px solid hsl(0deg 0% 0% / 75%);
+      border-left: 6px solid transparent;
+      inset: auto auto -6px 50%;
+      margin: 0 0 0 -6px;
+    }
+
+    &::after {
+      inset: 100% auto auto 50%;
+      transform: translateY(6px) translateX(-50%);
+    }
+  }
+
+  &:hover {
+    &::after,
+    &::before {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+}

package/sass/modules/form/_checkbox.scss

@@ -1,78 +1,78 @@
-@use "sass:color";
-@use "./../../variables" as *;
-@use "./../../mixins/breakpoints" as *;
-
-.form__control.checkbox {
-  & > * {
-    &: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;
-
-    aspect-ratio: 1;
-    flex-shrink: 0;
-    vertical-align: text-bottom;
-
-    &::before {
-      content: "";
-      position: absolute;
-      margin: auto;
-      inset: 0;
-      overflow: hidden;
-    }
-
-    &:checked {
-      background: var(--input-detail-background);
-
-      &::before {
-        border-right: 2px solid var(--white);
-        border-bottom: 2px solid var(--white);
-        height: 65%;
-        width: 32.5%;
-        transform: rotate(45deg) translateY(-15%) translateX(-15%);
-      }
-
-      &:disabled,
-      &.disabled,
-      &[aria-disabled="true"] {
-        background: var(--input-disabled-detail-background);
-      }
-    }
-
-    &:indeterminate,
-    &[aria-checked="mixed"] {
-      &::before {
-        border: 2px solid var(--white);
-        height: 0;
-        width: 65%;
-      }
-    }
-
-    &.input--small {
-      --input-width: auto;
-      --input-desktop-width: auto;
-    }
-
-    &.input--large {
-      --input-width: auto;
-      --input-desktop-width: auto;
-    }
-
-    @each $key, $value in $all-colors {
-      &.input--#{$key} {
-        &: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.checkbox {
+  & > * {
+    &: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;
+
+    aspect-ratio: 1;
+    flex-shrink: 0;
+    vertical-align: text-bottom;
+
+    &::before {
+      content: "";
+      position: absolute;
+      margin: auto;
+      inset: 0;
+      overflow: hidden;
+    }
+
+    &:checked {
+      background: var(--input-detail-background);
+
+      &::before {
+        border-right: 2px solid var(--white);
+        border-bottom: 2px solid var(--white);
+        height: 65%;
+        width: 32.5%;
+        transform: rotate(45deg) translateY(-15%) translateX(-15%);
+      }
+
+      &:disabled,
+      &.disabled,
+      &[aria-disabled="true"] {
+        background: var(--input-disabled-detail-background);
+      }
+    }
+
+    &:indeterminate,
+    &[aria-checked="mixed"] {
+      &::before {
+        border: 2px solid var(--white);
+        height: 0;
+        width: 65%;
+      }
+    }
+
+    &.input--small {
+      --input-width: auto;
+      --input-desktop-width: auto;
+    }
+
+    &.input--large {
+      --input-width: auto;
+      --input-desktop-width: auto;
+    }
+
+    @each $key, $value in $all-colors {
+      &.input--#{$key} {
+        &:checked {
+          --input-detail-background: var(--#{$key});
+          --input-disabled-detail-background: hsl(from var(--#{$key}) h s l / #{$color-disabled-alpha});
+        }
+      }
+    }
+  }
+}

package/sass/modules/form/_file.scss

@@ -1,149 +1,149 @@
-@use "sass:color";
-@use "./../../variables" as *;
-@use "./../../functions" as *;
-
-.form__control.fancyfile {
-  display: flex;
-  flex-direction: column;
-
-  & input[type="file"] {
-    order: 1;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    inset: 0;
-    opacity: 0;
-
-    & ~ .file--name {
-      order: 999;
-
-      &:not(:empty) {
-        border-right: 1px solid var(--border-color-main);
-        border-bottom: 1px solid var(--border-color-main);
-        border-left: 1px solid var(--border-color-main);
-        border-bottom-right-radius: var(--border-radius-medium);
-        border-bottom-left-radius: var(--border-radius-medium);
-        padding: $input-padding-y $input-padding-x;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        text-align: center;
-        transition: $form-transition;
-      }
-
-      &:empty {
-        & ~ .form__label {
-          border-bottom-right-radius: var(--border-radius-medium);
-          border-bottom-left-radius: var(--border-radius-medium);
-        }
-      }
-    }
-
-    & ~ .form__label {
-      order: 2;
-      cursor: pointer;
-      width: 100%;
-      display: block;
-      position: relative;
-      margin-bottom: 0;
-      text-align: center;
-      padding: var(--spacer) var(--spacer) calc(var(--spacer) * 3);
-      border: 1px solid var(--border-color-main);
-      border-top-left-radius: var(--border-radius-medium);
-      border-top-right-radius: var(--border-radius-medium);
-      background-color: var(--gray-1);
-      transition: $form-transition;
-
-      &::after {
-        content: "";
-        position: absolute;
-        width: calc(var(--spacer) * 2);
-        height: calc(var(--spacer) * 2);
-        top: auto;
-        left: 50%;
-        bottom: calc(var(--spacer) * 0.5);
-        transform: translateX(-50%);
-        margin: 0;
-        background-size: calc(var(--spacer) * 2) auto;
-        background-image: escape-svg($form-file-indicator);
-        transition:
-          background-image 0.15s ease-in-out,
-          $form-transition;
-      }
-    }
-
-    &:hover {
-      & ~ .form__label {
-        border-color: var(--input-hover-border-color);
-        background-color: var(--gray-2);
-
-        &::after {
-          background-image: escape-svg($form-file-indicator-hover);
-        }
-      }
-
-      & ~ .file--name {
-        &:not(:empty) {
-          border-color: var(--input-hover-border-color);
-        }
-      }
-    }
-
-    @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%);
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-input[type="file"] {
-  cursor: pointer;
-
-  &::-webkit-file-upload-button,
-  &::file-selector-button {
-    background-color: var(--light);
-    padding: $input-padding-y $input-padding-x;
-    margin: calc($input-padding-y * -1) $input-padding-x calc($input-padding-y * -1) calc($input-padding-x * -1);
-    -webkit-margin-end: $input-padding-x;
-    margin-inline-end: $input-padding-x;
-    color: var(--body-color);
-    pointer-events: none;
-    border-color: var(--border-color-main);
-    border-style: solid;
-    border-width: 0;
-    border-inline-end-width: 1px;
-    border-right-width: 1px;
-    border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
-    transition: $form-transition;
-  }
-
-  &:hover {
-    &:not(:disabled, [readonly]) {
-      &::-webkit-file-upload-button,
-      &::file-selector-button {
-        background-color: var(--gray-2);
-      }
-    }
-  }
-}
+@use "sass:color";
+@use "./../../variables" as *;
+@use "./../../functions" as *;
+
+.form__control.fancyfile {
+  display: flex;
+  flex-direction: column;
+
+  & input[type="file"] {
+    order: 1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    inset: 0;
+    opacity: 0;
+
+    & ~ .file--name {
+      order: 999;
+
+      &:not(:empty) {
+        border-right: 1px solid var(--border-color-main);
+        border-bottom: 1px solid var(--border-color-main);
+        border-left: 1px solid var(--border-color-main);
+        border-bottom-right-radius: var(--border-radius-medium);
+        border-bottom-left-radius: var(--border-radius-medium);
+        padding: $input-padding-y $input-padding-x;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-align: center;
+        transition: $form-transition;
+      }
+
+      &:empty {
+        & ~ .form__label {
+          border-bottom-right-radius: var(--border-radius-medium);
+          border-bottom-left-radius: var(--border-radius-medium);
+        }
+      }
+    }
+
+    & ~ .form__label {
+      order: 2;
+      cursor: pointer;
+      width: 100%;
+      display: block;
+      position: relative;
+      margin-bottom: 0;
+      text-align: center;
+      padding: var(--spacer) var(--spacer) calc(var(--spacer) * 3);
+      border: 1px solid var(--border-color-main);
+      border-top-left-radius: var(--border-radius-medium);
+      border-top-right-radius: var(--border-radius-medium);
+      background-color: var(--gray-1);
+      transition: $form-transition;
+
+      &::after {
+        content: "";
+        position: absolute;
+        width: calc(var(--spacer) * 2);
+        height: calc(var(--spacer) * 2);
+        top: auto;
+        left: 50%;
+        bottom: calc(var(--spacer) * 0.5);
+        transform: translateX(-50%);
+        margin: 0;
+        background-size: calc(var(--spacer) * 2) auto;
+        background-image: escape-svg($form-file-indicator);
+        transition:
+          background-image 0.15s ease-in-out,
+          $form-transition;
+      }
+    }
+
+    &:hover {
+      & ~ .form__label {
+        border-color: var(--input-hover-border-color);
+        background-color: var(--gray-2);
+
+        &::after {
+          background-image: escape-svg($form-file-indicator-hover);
+        }
+      }
+
+      & ~ .file--name {
+        &:not(:empty) {
+          border-color: var(--input-hover-border-color);
+        }
+      }
+    }
+
+    @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%);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+input[type="file"] {
+  cursor: pointer;
+
+  &::-webkit-file-upload-button,
+  &::file-selector-button {
+    background-color: var(--light);
+    padding: $input-padding-y $input-padding-x;
+    margin: calc($input-padding-y * -1) $input-padding-x calc($input-padding-y * -1) calc($input-padding-x * -1);
+    -webkit-margin-end: $input-padding-x;
+    margin-inline-end: $input-padding-x;
+    color: var(--body-color);
+    pointer-events: none;
+    border-color: var(--border-color-main);
+    border-style: solid;
+    border-width: 0;
+    border-inline-end-width: 1px;
+    border-right-width: 1px;
+    border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
+    transition: $form-transition;
+  }
+
+  &:hover {
+    &:not(:disabled, [readonly]) {
+      &::-webkit-file-upload-button,
+      &::file-selector-button {
+        background-color: var(--gray-2);
+      }
+    }
+  }
+}