claritas-web-framework 8.5.8 → 8.5.9

package/sass/modules/_form.scss

@@ -1,261 +1,261 @@
-@use "sass:color";
-@use "./../helpers" as *;
-@use "./../variables" as *;
-@use "./../functions" as *;
-@use "./../mixins/breakpoints" as *;
-
-::placeholder {
-  color: var(--gray-3);
-}
-
-.form--field {
-  margin-bottom: var(--spacer);
-
-  & .small,
-  & small {
-    color: $medium;
-    display: block;
-    margin-top: calc(var(--spacer) * 0.25);
-  }
-}
-
-%input {
-  --input-color: var(--body-color);
-  --input-hover-color: var(--body-color);
-  --input-focus-color: var(--body-color);
-  --input-active-color: var(--body-color);
-  --input-disabled-color: hsl(from var(--body-color) h s l / #{$color-disabled-alpha});
-  --input-border-color: var(--border-color-main);
-  --input-hover-border-color: var(--border-color-hover-main);
-  --input-focus-border-color: var(--border-color-focus-main);
-  --input-active-border-color: var(--border-color-active-main);
-  --input-disabled-border-color: var(--border-color-disabled-main);
-  --input-background: var(--white);
-  --input-hover-background: var(--white);
-  --input-focus-background: var(--white);
-  --input-active-background: var(--white);
-  --input-disabled-background: hsl(from var(--body-color) h s l / 5%);
-  --input-detail-background: var(--primary);
-  --input-disabled-detail-background: hsl(from var(--primary) h s l / #{$color-disabled-alpha});
-  --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 hsl(from var(--body-color) h s l / 20%);
-  --input-active-box-shadow: 0 0 0 0.125em hsl(from var(--body-color) h s l / 20%);
-  --input-disabled-box-shadow: 0 0 0 0.125em transparent;
-
-  // Static
-  --input-padding-x: #{$input-padding-x};
-  --input-padding-y: #{$input-padding-y};
-  --input-small-padding-x: #{$input-small-padding-x};
-  --input-small-padding-y: #{$input-small-padding-y};
-  --input-large-padding-x: #{$input-large-padding-x};
-  --input-large-padding-y: #{$input-large-padding-y};
-  --input-border-width: 1px;
-  --input-border-style: solid;
-  --input-border-radius: #{$input-border-radius};
-  --input-small-border-radius: #{$input-small-border-radius};
-  --input-large-border-radius: #{$input-large-border-radius};
-  --input-round-border-radius: #{$input-round-border-radius};
-  --input-font-weight: #{$input-font-weight};
-  --input-line-height: #{$input-line-height};
-  --input-white-space: #{$input-white-space};
-  --input-width: 100%;
-  --input-height: auto;
-  --input-desktop-width: 100%;
-  --input-desktop-height: auto;
-
-  color: var(--input-color);
-  border-width: var(--input-border-width);
-  border-style: var(--input-border-style);
-  border-color: var(--input-border-color);
-  background: var(--input-background);
-  box-shadow: var(--input-box-shadow);
-  padding: var(--input-padding-y) var(--input-padding-x);
-  border-radius: var(--input-border-radius);
-  font-weight: var(--input-font-weight);
-  line-height: var(--input-line-height);
-  white-space: var(--input-white-space);
-  width: var(--input-width);
-  height: var(--input-height);
-  display: block;
-  appearance: none;
-  transition: $form-transition;
-  position: relative;
-
-  @include rfs($input-font-size, --input-font-size);
-
-  @include font-size(var(--input-font-size));
-
-  @include media-breakpoint-up("desktop") {
-    height: var(--input-desktop-height);
-    width: var(--input-desktop-width);
-  }
-
-  &:hover {
-    color: var(--input-hover-color);
-    border-color: var(--input-hover-border-color);
-    background: var(--input-hover-background);
-    box-shadow: var(--input-hover-box-shadow);
-  }
-
-  &:focus {
-    color: var(--input-focus-color);
-    border-color: var(--input-focus-border-color);
-    background: var(--input-focus-background);
-    box-shadow: var(--input-focus-box-shadow);
-    outline: 0;
-  }
-
-  &:active {
-    color: var(--input-active-color);
-    border-color: var(--input-active-border-color);
-    background: var(--input-active-background);
-    box-shadow: var(--input-active-box-shadow);
-  }
-
-  &:disabled,
-  &.disabled,
-  fieldset:disabled & {
-    color: var(--input-disabled-color);
-    border-color: var(--input-disabled-border-color);
-    background: var(--input-disabled-background);
-    box-shadow: var(--input-disabled-box-shadow);
-    opacity: 1;
-  }
-
-  &[readonly] {
-    background: var(--input-disabled-background);
-  }
-
-  &.input--rounded {
-    border-radius: var(--input-round-border-radius);
-  }
-
-  &.input--small {
-    padding: var(--input-small-padding-y) var(--input-small-padding-x);
-
-    @include rfs($input-small-font-size, --input-font-size);
-
-    @include font-size(var(--input-font-size));
-
-    &:not(.input--rounded) {
-      border-radius: var(--input-small-border-radius);
-    }
-  }
-
-  &.input--large {
-    padding: var(--input-large-padding-y) var(--input-large-padding-x);
-
-    @include rfs($input-large-font-size, --input-font-size);
-
-    @include font-size(var(--input-font-size));
-
-    &:not(.input--rounded) {
-      border-radius: var(--input-large-border-radius);
-    }
-  }
-
-  @each $key, $value in $all-colors {
-    &.input--#{$key} {
-      --input-color: var(--#{$key});
-      --input-hover-color: var(--#{$key});
-      --input-focus-color: var(--#{$key});
-      --input-active-color: var(--#{$key});
-      --input-disabled-color: hsl(from var(--#{$key}) h s l / #{$color-disabled-alpha});
-      --input-border-color: var(--#{$key});
-      --input-hover-border-color: hsl(color-mix(in oklab, var(--#{$key}), #000 #{$border-shade-percentage}));
-      --input-focus-border-color: hsl(color-mix(in oklab, var(--#{$key}), #000 #{$border-shade-percentage}));
-      --input-active-border-color: hsl(color-mix(in oklab, var(--#{$key}), #000 #{$border-shade-percentage}));
-      --input-disabled-border-color: hsl(from var(--#{$key}) h s l / #{$color-disabled-alpha});
-      --input-background: var(--white);
-      --input-hover-background: var(--white);
-      --input-focus-background: var(--white);
-      --input-active-background: var(--white);
-      --input-disabled-background: hsl(from var(--#{$key}) h s l / 5%);
-      --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 hsl(from var(--#{$key}) h s l / 20%);
-      --input-active-box-shadow: 0 0 0 0.125em hsl(from var(--#{$key}) h s l / 20%);
-      --input-disabled-box-shadow: 0 0 0 0.125em transparent;
-    }
-  }
-}
-
-input,
-textarea,
-output,
-select,
-progress,
-.form__span,
-.form__input {
-  @extend %input;
-}
-
-.form__label {
-  display: $label-display;
-  padding: $label-padding;
-  margin: $label-margin;
-  font-weight: $label-font-weight;
-  text-transform: $label-text-transform;
-  font-size: $label-font-size;
-  color: $label-color;
-  cursor: pointer;
-}
-
-.form__control {
-  box-sizing: border-box;
-  clear: both;
-  position: relative;
-  text-align: left;
-  display: block;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: stretch;
-
-  &.checkbox,
-  &.radio,
-  &.toggle {
-    display: flex;
-
-    &:not(.stacked) {
-      flex-direction: row;
-      align-items: center;
-
-      & .form__label {
-        padding: 0;
-      }
-    }
-
-    &.stacked {
-      & .form__label {
-        order: -1;
-      }
-    }
-  }
-}
-
-.form__span {
-  --input-background: color-mix(in oklab, var(--body-color), #fff 85%);
-  --input-hover-background: color-mix(in oklab, var(--body-color), #fff 85%);
-  --input-focus-background: color-mix(in oklab, var(--body-color), #fff 85%);
-  --input-active-background: color-mix(in oklab, var(--body-color), #fff 85%);
-  --input-disabled-background: color-mix(in oklab, var(--body-color), #fff 85%);
-  --input-border-color: var(--border-color-main);
-  --input-hover-border-color: var(--border-color-main);
-  --input-focus-border-color: var(--border-color-main);
-  --input-active-border-color: var(--border-color-main);
-  --input-box-shadow: none;
-  --input-hover-box-shadow: none;
-  --input-focus-box-shadow: none;
-  --input-active-box-shadow: none;
-  --input-disabled-box-shadow: none;
-
-  align-items: center;
-  display: inline-flex;
-  vertical-align: top;
-  justify-content: center;
-  text-align: center;
-  white-space: nowrap;
-  outline: 0;
-  text-decoration: none;
-}
+@use "sass:color";
+@use "./../helpers" as *;
+@use "./../variables" as *;
+@use "./../functions" as *;
+@use "./../mixins/breakpoints" as *;
+
+::placeholder {
+  color: var(--gray-3);
+}
+
+.form--field {
+  margin-bottom: var(--spacer);
+
+  & .small,
+  & small {
+    color: $medium;
+    display: block;
+    margin-top: calc(var(--spacer) * 0.25);
+  }
+}
+
+%input {
+  --input-color: var(--body-color);
+  --input-hover-color: var(--body-color);
+  --input-focus-color: var(--body-color);
+  --input-active-color: var(--body-color);
+  --input-disabled-color: hsl(from var(--body-color) h s l / #{$color-disabled-alpha});
+  --input-border-color: var(--border-color-main);
+  --input-hover-border-color: var(--border-color-hover-main);
+  --input-focus-border-color: var(--border-color-focus-main);
+  --input-active-border-color: var(--border-color-active-main);
+  --input-disabled-border-color: var(--border-color-disabled-main);
+  --input-background: var(--white);
+  --input-hover-background: var(--white);
+  --input-focus-background: var(--white);
+  --input-active-background: var(--white);
+  --input-disabled-background: hsl(from var(--body-color) h s l / 5%);
+  --input-detail-background: var(--primary);
+  --input-disabled-detail-background: hsl(from var(--primary) h s l / #{$color-disabled-alpha});
+  --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 hsl(from var(--body-color) h s l / 20%);
+  --input-active-box-shadow: 0 0 0 0.125em hsl(from var(--body-color) h s l / 20%);
+  --input-disabled-box-shadow: 0 0 0 0.125em transparent;
+
+  // Static
+  --input-padding-x: #{$input-padding-x};
+  --input-padding-y: #{$input-padding-y};
+  --input-small-padding-x: #{$input-small-padding-x};
+  --input-small-padding-y: #{$input-small-padding-y};
+  --input-large-padding-x: #{$input-large-padding-x};
+  --input-large-padding-y: #{$input-large-padding-y};
+  --input-border-width: 1px;
+  --input-border-style: solid;
+  --input-border-radius: #{$input-border-radius};
+  --input-small-border-radius: #{$input-small-border-radius};
+  --input-large-border-radius: #{$input-large-border-radius};
+  --input-round-border-radius: #{$input-round-border-radius};
+  --input-font-weight: #{$input-font-weight};
+  --input-line-height: #{$input-line-height};
+  --input-white-space: #{$input-white-space};
+  --input-width: 100%;
+  --input-height: auto;
+  --input-desktop-width: 100%;
+  --input-desktop-height: auto;
+
+  color: var(--input-color);
+  border-width: var(--input-border-width);
+  border-style: var(--input-border-style);
+  border-color: var(--input-border-color);
+  background: var(--input-background);
+  box-shadow: var(--input-box-shadow);
+  padding: var(--input-padding-y) var(--input-padding-x);
+  border-radius: var(--input-border-radius);
+  font-weight: var(--input-font-weight);
+  line-height: var(--input-line-height);
+  white-space: var(--input-white-space);
+  width: var(--input-width);
+  height: var(--input-height);
+  display: block;
+  appearance: none;
+  transition: $form-transition;
+  position: relative;
+
+  @include rfs($input-font-size, --input-font-size);
+
+  @include font-size(var(--input-font-size));
+
+  @include media-breakpoint-up("desktop") {
+    height: var(--input-desktop-height);
+    width: var(--input-desktop-width);
+  }
+
+  &:hover {
+    color: var(--input-hover-color);
+    border-color: var(--input-hover-border-color);
+    background: var(--input-hover-background);
+    box-shadow: var(--input-hover-box-shadow);
+  }
+
+  &:focus {
+    color: var(--input-focus-color);
+    border-color: var(--input-focus-border-color);
+    background: var(--input-focus-background);
+    box-shadow: var(--input-focus-box-shadow);
+    outline: 0;
+  }
+
+  &:active {
+    color: var(--input-active-color);
+    border-color: var(--input-active-border-color);
+    background: var(--input-active-background);
+    box-shadow: var(--input-active-box-shadow);
+  }
+
+  &:disabled,
+  &.disabled,
+  fieldset:disabled & {
+    color: var(--input-disabled-color);
+    border-color: var(--input-disabled-border-color);
+    background: var(--input-disabled-background);
+    box-shadow: var(--input-disabled-box-shadow);
+    opacity: 1;
+  }
+
+  &[readonly] {
+    background: var(--input-disabled-background);
+  }
+
+  &.input--rounded {
+    border-radius: var(--input-round-border-radius);
+  }
+
+  &.input--small {
+    padding: var(--input-small-padding-y) var(--input-small-padding-x);
+
+    @include rfs($input-small-font-size, --input-font-size);
+
+    @include font-size(var(--input-font-size));
+
+    &:not(.input--rounded) {
+      border-radius: var(--input-small-border-radius);
+    }
+  }
+
+  &.input--large {
+    padding: var(--input-large-padding-y) var(--input-large-padding-x);
+
+    @include rfs($input-large-font-size, --input-font-size);
+
+    @include font-size(var(--input-font-size));
+
+    &:not(.input--rounded) {
+      border-radius: var(--input-large-border-radius);
+    }
+  }
+
+  @each $key, $value in $all-colors {
+    &.input--#{$key} {
+      --input-color: var(--#{$key});
+      --input-hover-color: var(--#{$key});
+      --input-focus-color: var(--#{$key});
+      --input-active-color: var(--#{$key});
+      --input-disabled-color: hsl(from var(--#{$key}) h s l / #{$color-disabled-alpha});
+      --input-border-color: var(--#{$key});
+      --input-hover-border-color: hsl(color-mix(in oklab, var(--#{$key}), #000 #{$border-shade-percentage}));
+      --input-focus-border-color: hsl(color-mix(in oklab, var(--#{$key}), #000 #{$border-shade-percentage}));
+      --input-active-border-color: hsl(color-mix(in oklab, var(--#{$key}), #000 #{$border-shade-percentage}));
+      --input-disabled-border-color: hsl(from var(--#{$key}) h s l / #{$color-disabled-alpha});
+      --input-background: var(--white);
+      --input-hover-background: var(--white);
+      --input-focus-background: var(--white);
+      --input-active-background: var(--white);
+      --input-disabled-background: hsl(from var(--#{$key}) h s l / 5%);
+      --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 hsl(from var(--#{$key}) h s l / 20%);
+      --input-active-box-shadow: 0 0 0 0.125em hsl(from var(--#{$key}) h s l / 20%);
+      --input-disabled-box-shadow: 0 0 0 0.125em transparent;
+    }
+  }
+}
+
+input,
+textarea,
+output,
+select,
+progress,
+.form__span,
+.form__input {
+  @extend %input;
+}
+
+.form__label {
+  display: $label-display;
+  padding: $label-padding;
+  margin: $label-margin;
+  font-weight: $label-font-weight;
+  text-transform: $label-text-transform;
+  font-size: $label-font-size;
+  color: $label-color;
+  cursor: pointer;
+}
+
+.form__control {
+  box-sizing: border-box;
+  clear: both;
+  position: relative;
+  text-align: left;
+  display: block;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+
+  &.checkbox,
+  &.radio,
+  &.toggle {
+    display: flex;
+
+    &:not(.stacked) {
+      flex-direction: row;
+      align-items: center;
+
+      & .form__label {
+        padding: 0;
+      }
+    }
+
+    &.stacked {
+      & .form__label {
+        order: -1;
+      }
+    }
+  }
+}
+
+.form__span {
+  --input-background: color-mix(in oklab, var(--body-color), #fff 85%);
+  --input-hover-background: color-mix(in oklab, var(--body-color), #fff 85%);
+  --input-focus-background: color-mix(in oklab, var(--body-color), #fff 85%);
+  --input-active-background: color-mix(in oklab, var(--body-color), #fff 85%);
+  --input-disabled-background: color-mix(in oklab, var(--body-color), #fff 85%);
+  --input-border-color: var(--border-color-main);
+  --input-hover-border-color: var(--border-color-main);
+  --input-focus-border-color: var(--border-color-main);
+  --input-active-border-color: var(--border-color-main);
+  --input-box-shadow: none;
+  --input-hover-box-shadow: none;
+  --input-focus-box-shadow: none;
+  --input-active-box-shadow: none;
+  --input-disabled-box-shadow: none;
+
+  align-items: center;
+  display: inline-flex;
+  vertical-align: top;
+  justify-content: center;
+  text-align: center;
+  white-space: nowrap;
+  outline: 0;
+  text-decoration: none;
+}

package/sass/modules/_list.scss

@@ -1,78 +1,78 @@
-@use "sass:color";
-@use "./../variables" as *;
-@use "./../functions" as *;
-@use "./../mixins/list" as *;
-
-.list--unstyled {
-  @include make-list-unstyled;
-}
-
-.list--inline {
-  @include make-list-inline;
-}
-
-dl {
-  $dl-margin-fallback: if($enable-margins, var(--spacer), 0);
-
-  margin-bottom: var(--dl-margin-bottom, #{$dl-margin-fallback});
-
-  & > *:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.list--group {
-  @include make-list-unstyled;
-
-  & > li {
-    border: 1px solid var(--border-color-main);
-    border-bottom-color: transparent;
-    padding: calc((var(--spacer) * 0.625) - 1px) var(--spacer);
-    position: relative;
-
-    &:first-child {
-      border-top-left-radius: var(--border-radius-medium);
-      border-top-right-radius: var(--border-radius-medium);
-    }
-
-    &:last-child {
-      border-bottom: 1px solid var(--border-color-main);
-      border-bottom-left-radius: var(--border-radius-medium);
-      border-bottom-right-radius: var(--border-radius-medium);
-    }
-  }
-}
-
-.list--nested {
-  @include make-list-unstyled;
-
-  & > li {
-    background-color: var(--white);
-    border-radius: var(--border-radius-medium);
-    border: 1px solid var(--border-color-main);
-
-    $li-margin-fallback: if($enable-margins, var(--spacer), 0);
-
-    margin-bottom: var(--li-margin-bottom, #{$li-margin-fallback});
-
-    & .list__item {
-      padding: calc(calc(var(--spacer) * 0.625) - 1px) var(--spacer);
-    }
-
-    & .list--nested {
-      margin-bottom: 0;
-
-      & > li {
-        border-radius: 0;
-        border: 0 none;
-        margin-bottom: 0;
-        background-image: escape-svg($list-nested-indicator);
-        background-size: var(--spacer) auto;
-        background-repeat: no-repeat;
-        background-position: left calc(var(--spacer) * 0.5) top var(--spacer);
-        padding-left: calc(var(--spacer) * 1.5);
-        border-top: 1px solid var(--border-color-main);
-      }
-    }
-  }
-}
+@use "sass:color";
+@use "./../variables" as *;
+@use "./../functions" as *;
+@use "./../mixins/list" as *;
+
+.list--unstyled {
+  @include make-list-unstyled;
+}
+
+.list--inline {
+  @include make-list-inline;
+}
+
+dl {
+  $dl-margin-fallback: if($enable-margins, var(--spacer), 0);
+
+  margin-bottom: var(--dl-margin-bottom, #{$dl-margin-fallback});
+
+  & > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.list--group {
+  @include make-list-unstyled;
+
+  & > li {
+    border: 1px solid var(--border-color-main);
+    border-bottom-color: transparent;
+    padding: calc((var(--spacer) * 0.625) - 1px) var(--spacer);
+    position: relative;
+
+    &:first-child {
+      border-top-left-radius: var(--border-radius-medium);
+      border-top-right-radius: var(--border-radius-medium);
+    }
+
+    &:last-child {
+      border-bottom: 1px solid var(--border-color-main);
+      border-bottom-left-radius: var(--border-radius-medium);
+      border-bottom-right-radius: var(--border-radius-medium);
+    }
+  }
+}
+
+.list--nested {
+  @include make-list-unstyled;
+
+  & > li {
+    background-color: var(--white);
+    border-radius: var(--border-radius-medium);
+    border: 1px solid var(--border-color-main);
+
+    $li-margin-fallback: if($enable-margins, var(--spacer), 0);
+
+    margin-bottom: var(--li-margin-bottom, #{$li-margin-fallback});
+
+    & .list__item {
+      padding: calc(calc(var(--spacer) * 0.625) - 1px) var(--spacer);
+    }
+
+    & .list--nested {
+      margin-bottom: 0;
+
+      & > li {
+        border-radius: 0;
+        border: 0 none;
+        margin-bottom: 0;
+        background-image: escape-svg($list-nested-indicator);
+        background-size: var(--spacer) auto;
+        background-repeat: no-repeat;
+        background-position: left calc(var(--spacer) * 0.5) top var(--spacer);
+        padding-left: calc(var(--spacer) * 1.5);
+        border-top: 1px solid var(--border-color-main);
+      }
+    }
+  }
+}