claritas-web-framework 8.5.8 → 8.5.9

package/sass/mixins/_screenReader.scss

@@ -1,22 +1,22 @@
-@mixin make-screen-reader($focusable: true) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-
-  &:active,
-  &:focus {
-    @if $focusable {
-      position: static;
-      width: auto;
-      height: auto;
-      overflow: visible;
-      clip: auto;
-      white-space: normal;
-    }
-  }
-}
+@mixin make-screen-reader($focusable: true) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+
+  &:active,
+  &:focus {
+    @if $focusable {
+      position: static;
+      width: auto;
+      height: auto;
+      overflow: visible;
+      clip: auto;
+      white-space: normal;
+    }
+  }
+}

package/sass/mixins/_wrap.scss

@@ -1,7 +1,7 @@
-@mixin make-wrap-overflow() {
-  display: block;
-  width: 100%;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  position: static !important;
-}
+@mixin make-wrap-overflow() {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  position: static !important;
+}

package/sass/modules/_alert.scss

@@ -1,60 +1,60 @@
-@use "sass:color";
-@use "./../variables" as *;
-
-.alert {
-  --alert-padding-x: var(--spacer);
-  --alert-padding-y: var(--spacer);
-  --alert-border-width: 1px;
-  --alert-border-style: solid;
-  --alert-border-color: var(--border-color-main);
-  --alert-border-radius: var(--border-radius-default);
-  --alert-background: color-mix(in oklab, var(--body-color), #fff #{$alert-background-l});
-  --alert-color: color-mix(in oklab, var(--body-color), #000 #{$alert-color-l});
-  --alert-link-color: color-mix(in oklab, var(--body-color), #000 #{$alert-color-l});
-  --alert-link-hover-color: color-mix(in oklab, var(--body-color), #000 #{$alert-color-l + $link-shade-percentage});
-
-  color: var(--alert-color);
-  border: var(--alert-border-width) var(--alert-border-style) var(--alert-border-color);
-  padding: var(--alert-padding-y) var(--alert-padding-x);
-  border-radius: var(--alert-border-radius);
-  background: var(--alert-background);
-  position: relative;
-
-  $alert-margin-fallback: if($enable-margins, var(--spacer), 0);
-
-  margin-bottom: var(--alert-margin-bottom, #{$alert-margin-fallback});
-
-  @each $key in (1, 2, 3, 4, 5, 6) {
-    h#{$key},
-    .h#{$key} {
-      --color: var(--alert-color);
-    }
-  }
-
-  & > * {
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  & a:not(.button),
-  & .button--unstyled {
-    color: var(--alert-link-color);
-    font-weight: 600;
-
-    &:hover,
-    &:focus {
-      color: var(--alert-link-hover-color);
-    }
-  }
-}
-
-@each $key, $value in $all-colors {
-  .alert--#{$key} {
-    --alert-border-color: color-mix(in oklab, var(--#{$key}), #fff #{$alert-border-l});
-    --alert-background: color-mix(in oklab, var(--#{$key}), #fff #{$alert-background-l});
-    --alert-color: color-mix(in oklab, var(--#{$key}), #000 #{$alert-color-l});
-    --alert-link-color: color-mix(in oklab, var(--#{$key}), #000 #{$alert-color-l});
-    --alert-link-hover-color: color-mix(in oklab, var(--#{$key}), #000 #{$alert-color-l + $link-shade-percentage});
-  }
-}
+@use "sass:color";
+@use "./../variables" as *;
+
+.alert {
+  --alert-padding-x: var(--spacer);
+  --alert-padding-y: var(--spacer);
+  --alert-border-width: 1px;
+  --alert-border-style: solid;
+  --alert-border-color: var(--border-color-main);
+  --alert-border-radius: var(--border-radius-default);
+  --alert-background: color-mix(in oklab, var(--body-color), #fff #{$alert-background-l});
+  --alert-color: color-mix(in oklab, var(--body-color), #000 #{$alert-color-l});
+  --alert-link-color: color-mix(in oklab, var(--body-color), #000 #{$alert-color-l});
+  --alert-link-hover-color: color-mix(in oklab, var(--body-color), #000 #{$alert-color-l + $link-shade-percentage});
+
+  color: var(--alert-color);
+  border: var(--alert-border-width) var(--alert-border-style) var(--alert-border-color);
+  padding: var(--alert-padding-y) var(--alert-padding-x);
+  border-radius: var(--alert-border-radius);
+  background: var(--alert-background);
+  position: relative;
+
+  $alert-margin-fallback: if($enable-margins, var(--spacer), 0);
+
+  margin-bottom: var(--alert-margin-bottom, #{$alert-margin-fallback});
+
+  @each $key in (1, 2, 3, 4, 5, 6) {
+    h#{$key},
+    .h#{$key} {
+      --color: var(--alert-color);
+    }
+  }
+
+  & > * {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  & a:not(.button),
+  & .button--unstyled {
+    color: var(--alert-link-color);
+    font-weight: 600;
+
+    &:hover,
+    &:focus {
+      color: var(--alert-link-hover-color);
+    }
+  }
+}
+
+@each $key, $value in $all-colors {
+  .alert--#{$key} {
+    --alert-border-color: color-mix(in oklab, var(--#{$key}), #fff #{$alert-border-l});
+    --alert-background: color-mix(in oklab, var(--#{$key}), #fff #{$alert-background-l});
+    --alert-color: color-mix(in oklab, var(--#{$key}), #000 #{$alert-color-l});
+    --alert-link-color: color-mix(in oklab, var(--#{$key}), #000 #{$alert-color-l});
+    --alert-link-hover-color: color-mix(in oklab, var(--#{$key}), #000 #{$alert-color-l + $link-shade-percentage});
+  }
+}

package/sass/modules/_breadcrumbs.scss

@@ -1,43 +1,43 @@
-@use "./../variables" as *;
-@use "./../functions" as *;
-@use "./../mixins/list" as *;
-
-.breadcrumbs {
-  --breadcrumb-color: var(--medium);
-  --breadcrumb-hover-color: color-mix(in oklab, var(--medium), #000 #{$link-shade-percentage});
-
-  @include make-list-unstyled;
-
-  display: flex;
-  flex-wrap: wrap;
-  color: var(--breadcrumb-color);
-
-  & li {
-    padding-right: 1em;
-    position: relative;
-
-    &:not(:last-child) {
-      &::after {
-        content: "";
-        position: absolute;
-        width: 1em;
-        height: 0.85em;
-        background-image: escape-svg($breadcrumb-indicator);
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: auto 100%;
-        top: 50%;
-        right: 0;
-        transform: translateY(-50%);
-      }
-    }
-
-    & a {
-      color: var(--breadcrumb-color);
-
-      &:hover {
-        color: var(--breadcrumb-hover-color);
-      }
-    }
-  }
-}
+@use "./../variables" as *;
+@use "./../functions" as *;
+@use "./../mixins/list" as *;
+
+.breadcrumbs {
+  --breadcrumb-color: var(--medium);
+  --breadcrumb-hover-color: color-mix(in oklab, var(--medium), #000 #{$link-shade-percentage});
+
+  @include make-list-unstyled;
+
+  display: flex;
+  flex-wrap: wrap;
+  color: var(--breadcrumb-color);
+
+  & li {
+    padding-right: 1em;
+    position: relative;
+
+    &:not(:last-child) {
+      &::after {
+        content: "";
+        position: absolute;
+        width: 1em;
+        height: 0.85em;
+        background-image: escape-svg($breadcrumb-indicator);
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: auto 100%;
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+      }
+    }
+
+    & a {
+      color: var(--breadcrumb-color);
+
+      &:hover {
+        color: var(--breadcrumb-hover-color);
+      }
+    }
+  }
+}

package/sass/modules/_button.scss

@@ -1,170 +1,170 @@
-@use "./../helpers" as *;
-@use "./../variables" as *;
-@use "./../mixins" as *;
-
-.button {
-  // Changing
-  --button-color: var(--body-color);
-  --button-hover-color: var(--body-color);
-  --button-focus-color: color-mix(in oklab, var(--body-color), #000 #{$link-shade-percentage});
-  --button-active-color: color-mix(in oklab, var(--body-color), #000 #{$link-shade-percentage});
-  --button-disabled-color: hsl(from var(--body-color) h s 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-focus-main);
-  --button-active-border-color: var(--border-color-active-main);
-  --button-disabled-border-color: var(--border-color-disabled-main);
-  --button-background: var(--white);
-  --button-hover-background: var(--white);
-  --button-focus-background: var(--white);
-  --button-active-background: color-mix(in oklab, var(--body-color), #fff 95%);
-  --button-disabled-background: hsl(from var(--white) h s l / #{$color-disabled-alpha});
-  --button-box-shadow: 0 0 0 0.125em transparent;
-  --button-hover-box-shadow: 0 0 0 0.125em transparent;
-  --button-focus-box-shadow: 0 0 0 0.125em hsl(from var(--body-color) h s l / 20%);
-  --button-active-box-shadow: 0 0 0 0.125em hsl(from var(--body-color) h s l / 20%);
-  --button-disabled-box-shadow: 0 0 0 0.125em transparent;
-
-  // Static
-  --button-padding-x: #{$button-padding-x};
-  --button-padding-y: #{$button-padding-y};
-  --button-small-padding-x: #{$button-small-padding-x};
-  --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-weight: #{$button-font-weight};
-  --button-line-height: #{$button-line-height};
-  --button-text-decoration: none;
-  --button-hover-text-decoration: none;
-  --button-white-space: #{$button-white-space};
-
-  @include rfs($button-font-size, --button-font-size);
-
-  @include font-size(var(--button-font-size));
-
-  // Variable references
-  background: var(--button-background);
-  border-radius: var(--button-border-radius);
-  border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
-  box-shadow: var(--button-box-shadow);
-  color: var(--button-color);
-  font-weight: var(--button-font-weight);
-  line-height: var(--button-line-height);
-  padding: var(--button-padding-y) var(--button-padding-x);
-  text-decoration: var(--button-text-decoration);
-  white-space: var(--button-white-space);
-
-  // Defaults
-  display: inline-flex;
-  text-align: center;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  cursor: pointer;
-  user-select: none;
-  outline: 0;
-  transition: $form-transition;
-
-  &.button--rounded {
-    border-radius: var(--button-round-border-radius);
-  }
-
-  &.button--large {
-    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) {
-      border-radius: var(--button-large-border-radius);
-    }
-  }
-
-  &.button--small {
-    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) {
-      border-radius: var(--button-small-border-radius);
-    }
-  }
-
-  &:hover {
-    color: var(--button-hover-color);
-    background: var(--button-hover-background);
-    border-color: var(--button-hover-border-color);
-    box-shadow: var(--button-hover-box-shadow);
-    text-decoration: var(--button-hover-text-decoration);
-  }
-
-  &:focus-visible {
-    color: var(--button-focus-color);
-    background: var(--button-focus-background);
-    border-color: var(--button-focus-border-color);
-    box-shadow: var(--button-focus-box-shadow);
-    z-index: 1;
-  }
-
-  &:first-child:active,
-  &.active,
-  &.show {
-    color: var(--button-active-color);
-    background: var(--button-active-background);
-    border-color: var(--button-active-border-color);
-    box-shadow: var(--button-active-box-shadow);
-  }
-
-  &.button--link {
-    @include button-variant-link("primary");
-  }
-
-  &.button--unstyled {
-    @include button-variant-unstyled("body-color");
-  }
-
-  &:disabled,
-  &.disabled,
-  fieldset:disabled & {
-    color: var(--button-disabled-color);
-    background: var(--button-disabled-background);
-    border-color: var(--button-disabled-border-color);
-    box-shadow: var(--button-disabled-box-shadow);
-    pointer-events: none;
-  }
-}
-
-.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);
-    }
-  }
-}
+@use "./../helpers" as *;
+@use "./../variables" as *;
+@use "./../mixins" as *;
+
+.button {
+  // Changing
+  --button-color: var(--body-color);
+  --button-hover-color: var(--body-color);
+  --button-focus-color: color-mix(in oklab, var(--body-color), #000 #{$link-shade-percentage});
+  --button-active-color: color-mix(in oklab, var(--body-color), #000 #{$link-shade-percentage});
+  --button-disabled-color: hsl(from var(--body-color) h s 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-focus-main);
+  --button-active-border-color: var(--border-color-active-main);
+  --button-disabled-border-color: var(--border-color-disabled-main);
+  --button-background: var(--white);
+  --button-hover-background: var(--white);
+  --button-focus-background: var(--white);
+  --button-active-background: color-mix(in oklab, var(--body-color), #fff 95%);
+  --button-disabled-background: hsl(from var(--white) h s l / #{$color-disabled-alpha});
+  --button-box-shadow: 0 0 0 0.125em transparent;
+  --button-hover-box-shadow: 0 0 0 0.125em transparent;
+  --button-focus-box-shadow: 0 0 0 0.125em hsl(from var(--body-color) h s l / 20%);
+  --button-active-box-shadow: 0 0 0 0.125em hsl(from var(--body-color) h s l / 20%);
+  --button-disabled-box-shadow: 0 0 0 0.125em transparent;
+
+  // Static
+  --button-padding-x: #{$button-padding-x};
+  --button-padding-y: #{$button-padding-y};
+  --button-small-padding-x: #{$button-small-padding-x};
+  --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-weight: #{$button-font-weight};
+  --button-line-height: #{$button-line-height};
+  --button-text-decoration: none;
+  --button-hover-text-decoration: none;
+  --button-white-space: #{$button-white-space};
+
+  @include rfs($button-font-size, --button-font-size);
+
+  @include font-size(var(--button-font-size));
+
+  // Variable references
+  background: var(--button-background);
+  border-radius: var(--button-border-radius);
+  border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
+  box-shadow: var(--button-box-shadow);
+  color: var(--button-color);
+  font-weight: var(--button-font-weight);
+  line-height: var(--button-line-height);
+  padding: var(--button-padding-y) var(--button-padding-x);
+  text-decoration: var(--button-text-decoration);
+  white-space: var(--button-white-space);
+
+  // Defaults
+  display: inline-flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  outline: 0;
+  transition: $form-transition;
+
+  &.button--rounded {
+    border-radius: var(--button-round-border-radius);
+  }
+
+  &.button--large {
+    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) {
+      border-radius: var(--button-large-border-radius);
+    }
+  }
+
+  &.button--small {
+    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) {
+      border-radius: var(--button-small-border-radius);
+    }
+  }
+
+  &:hover {
+    color: var(--button-hover-color);
+    background: var(--button-hover-background);
+    border-color: var(--button-hover-border-color);
+    box-shadow: var(--button-hover-box-shadow);
+    text-decoration: var(--button-hover-text-decoration);
+  }
+
+  &:focus-visible {
+    color: var(--button-focus-color);
+    background: var(--button-focus-background);
+    border-color: var(--button-focus-border-color);
+    box-shadow: var(--button-focus-box-shadow);
+    z-index: 1;
+  }
+
+  &:first-child:active,
+  &.active,
+  &.show {
+    color: var(--button-active-color);
+    background: var(--button-active-background);
+    border-color: var(--button-active-border-color);
+    box-shadow: var(--button-active-box-shadow);
+  }
+
+  &.button--link {
+    @include button-variant-link("primary");
+  }
+
+  &.button--unstyled {
+    @include button-variant-unstyled("body-color");
+  }
+
+  &:disabled,
+  &.disabled,
+  fieldset:disabled & {
+    color: var(--button-disabled-color);
+    background: var(--button-disabled-background);
+    border-color: var(--button-disabled-border-color);
+    box-shadow: var(--button-disabled-box-shadow);
+    pointer-events: none;
+  }
+}
+
+.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);
+    }
+  }
+}