claritas-web-framework 8.5.7 → 8.5.9

package/sass/modules/_nav.scss

@@ -1,136 +1,136 @@
-@use "sass:color";
-@use "./../variables" as *;
-@use "./../mixins/list" as *;
-@use "./../mixins/colors" as *;
-
-.nav,
-.nav > ul {
-  display: flex;
-  flex-wrap: wrap;
-  list-style: none;
-  align-items: center;
-  position: relative;
-
-  @include make-list-unstyled;
-
-  & ul {
-    @include make-list-unstyled;
-
-    margin: 0;
-  }
-
-  & li {
-    margin: 0;
-    padding: 0;
-
-    & ul {
-      border-left: var(--nav-item-border-width) var(--nav-item-border-style) var(--nav-item-border-color);
-      margin: calc(var(--spacer) * 0.75);
-      padding-left: calc(var(--spacer) * 0.75);
-    }
-  }
-
-  & .nav__label,
-  & .nav__title,
-  & .nav__item {
-    --nav-item-border-width: 1px;
-    --nav-item-border-style: solid;
-    --nav-item-border-color: transparent;
-    --nav-item-active-border-color: transparent;
-    --nav-item-border-radius: 0;
-    --nav-item-line-height: #{$nav-item-line-height};
-    --nav-item-padding-x: #{$nav-item-padding-x};
-    --nav-item-padding-y: #{$nav-item-padding-y};
-    --nav-item-color: var(--body-color);
-    --nav-item-hover-color: color-mix(in oklab, var(--body-color), #000 #{$link-shade-percentage});
-    --nav-item-focus-color: color-mix(in oklab, var(--body-color), #000 #{$link-shade-percentage});
-    --nav-item-active-color: color-mix(in oklab, var(--body-color), #000 #{$link-shade-percentage});
-    --nav-item-disabled-color: hsl(from var(--body-color) h s l / #{$color-disabled-alpha});
-    --nav-label-hover-color: var(--medium);
-    --nav-item-background: hsl(from var(--white) h s l / 0%);
-    --nav-item-hover-background: hsl(from var(--white) h s l / 30%);
-    --nav-item-focus-background: hsl(from var(--white) h s l / 30%);
-    --nav-item-active-background: hsl(from var(--white) h s l / 20%);
-    --nav-item-disabled-background: hsl(from var(--white) h s l / 0%);
-
-    border-width: var(--nav-item-border-width);
-    border-style: var(--nav-item-border-style);
-    border-color: var(--nav-item-border-color);
-    border-radius: var(--nav-item-border-radius);
-    padding: var(--nav-item-padding-y) var(--nav-item-padding-x);
-    color: var(--nav-item-color);
-    background-color: var(--nav-item-background);
-    line-height: var(--nav-item-line-height);
-    white-space: nowrap;
-    display: inline-flex;
-    text-align: center;
-    align-items: center;
-    justify-content: center;
-    vertical-align: middle;
-    flex-shrink: 0;
-  }
-
-  & .nav__label {
-    font-size: var(--font-size-small);
-    font-weight: bolder;
-    color: var(--nav-label-hover-color);
-  }
-
-  & .nav__title {
-    font-family: $headings-font-family;
-    font-style: $headings-font-style;
-    font-weight: $headings-font-weight;
-    color: $headings-color;
-  }
-
-  & .nav__item {
-    text-decoration: none;
-    cursor: pointer;
-    user-select: none;
-    outline: 0;
-    transition: $form-transition;
-
-    &:hover {
-      color: var(--nav-item-hover-color);
-      background: var(--nav-item-hover-background);
-    }
-
-    &:focus-visible {
-      color: var(--nav-item-focus-color);
-      background: var(--nav-item-focus-background);
-    }
-
-    &[data-active="true"],
-    &:active,
-    &.active {
-      color: var(--nav-item-active-color);
-      background: var(--nav-item-active-background);
-
-      &:hover {
-        background: var(--nav-item-hover-background);
-      }
-    }
-
-    &:disabled,
-    &.disabled,
-    fieldset:disabled & {
-      color: var(--nav-item-disabled-color);
-      background: var(--nav-item-disabled-background);
-      pointer-events: none;
-    }
-  }
-
-  &.nav--column,
-  &.nav--column > ul {
-    flex-flow: column nowrap;
-    align-items: stretch;
-
-    & .nav__label,
-    & .nav__title,
-    & .nav__item {
-      text-align: left;
-      justify-content: flex-start;
-      display: flex;
-    }
-  }
-}
+@use "sass:color";
+@use "./../variables" as *;
+@use "./../mixins/list" as *;
+@use "./../mixins/colors" as *;
+
+.nav,
+.nav > ul {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  align-items: center;
+  position: relative;
+
+  @include make-list-unstyled;
+
+  & ul {
+    @include make-list-unstyled;
+
+    margin: 0;
+  }
+
+  & li {
+    margin: 0;
+    padding: 0;
+
+    & ul {
+      border-left: var(--nav-item-border-width) var(--nav-item-border-style) var(--nav-item-border-color);
+      margin: calc(var(--spacer) * 0.75);
+      padding-left: calc(var(--spacer) * 0.75);
+    }
+  }
+
+  & .nav__label,
+  & .nav__title,
+  & .nav__item {
+    --nav-item-border-width: 1px;
+    --nav-item-border-style: solid;
+    --nav-item-border-color: transparent;
+    --nav-item-active-border-color: transparent;
+    --nav-item-border-radius: 0;
+    --nav-item-line-height: #{$nav-item-line-height};
+    --nav-item-padding-x: #{$nav-item-padding-x};
+    --nav-item-padding-y: #{$nav-item-padding-y};
+    --nav-item-color: var(--body-color);
+    --nav-item-hover-color: color-mix(in oklab, var(--body-color), #000 #{$link-shade-percentage});
+    --nav-item-focus-color: color-mix(in oklab, var(--body-color), #000 #{$link-shade-percentage});
+    --nav-item-active-color: color-mix(in oklab, var(--body-color), #000 #{$link-shade-percentage});
+    --nav-item-disabled-color: hsl(from var(--body-color) h s l / #{$color-disabled-alpha});
+    --nav-label-hover-color: var(--medium);
+    --nav-item-background: hsl(from var(--white) h s l / 0%);
+    --nav-item-hover-background: hsl(from var(--white) h s l / 30%);
+    --nav-item-focus-background: hsl(from var(--white) h s l / 30%);
+    --nav-item-active-background: hsl(from var(--white) h s l / 20%);
+    --nav-item-disabled-background: hsl(from var(--white) h s l / 0%);
+
+    border-width: var(--nav-item-border-width);
+    border-style: var(--nav-item-border-style);
+    border-color: var(--nav-item-border-color);
+    border-radius: var(--nav-item-border-radius);
+    padding: var(--nav-item-padding-y) var(--nav-item-padding-x);
+    color: var(--nav-item-color);
+    background-color: var(--nav-item-background);
+    line-height: var(--nav-item-line-height);
+    white-space: nowrap;
+    display: inline-flex;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    flex-shrink: 0;
+  }
+
+  & .nav__label {
+    font-size: var(--font-size-small);
+    font-weight: bolder;
+    color: var(--nav-label-hover-color);
+  }
+
+  & .nav__title {
+    font-style: $headings-font-style;
+    font-weight: $headings-font-weight;
+    color: $headings-color;
+  }
+
+  & .nav__item {
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    outline: 0;
+    transition: $form-transition;
+
+    &:hover {
+      color: var(--nav-item-hover-color);
+      background: var(--nav-item-hover-background);
+    }
+
+    &:focus-visible {
+      color: var(--nav-item-focus-color);
+      background: var(--nav-item-focus-background);
+    }
+
+    &[data-active="true"],
+    &[aria-selected="true"],
+    &:active,
+    &.active {
+      color: var(--nav-item-active-color);
+      background: var(--nav-item-active-background);
+
+      &:hover {
+        background: var(--nav-item-hover-background);
+      }
+    }
+
+    &:disabled,
+    &.disabled,
+    fieldset:disabled & {
+      color: var(--nav-item-disabled-color);
+      background: var(--nav-item-disabled-background);
+      pointer-events: none;
+    }
+  }
+
+  &.nav--column,
+  &.nav--column > ul {
+    flex-flow: column nowrap;
+    align-items: stretch;
+
+    & .nav__label,
+    & .nav__title,
+    & .nav__item {
+      text-align: left;
+      justify-content: flex-start;
+      display: flex;
+    }
+  }
+}

package/sass/modules/_pill.scss

@@ -1,61 +1,61 @@
-@use "sass:color";
-@use "./../helpers" as *;
-@use "./../variables" as *;
-@use "./../functions" as *;
-@use "./../mixins/group" as *;
-
-.pill {
-  --pill-color: var(--body-color);
-  --pill-border-color: var(--border-color-main);
-  --pill-background: var(--white);
-
-  // Static
-  --pill-padding-x: #{$pill-padding-x};
-  --pill-padding-y: #{$pill-padding-y};
-  --pill-border-width: 1px;
-  --pill-border-style: solid;
-  --pill-font-weight: #{$pill-font-weight};
-
-  @include rfs($pill-font-size, --pill-font-size);
-
-  @include font-size(var(--pill-font-size));
-
-  color: var(--pill-color);
-  padding: var(--pill-padding-y) var(--pill-padding-x);
-  border: var(--pill-border-width) var(--pill-border-style) var(--pill-border-color);
-  background: var(--pill-background);
-  font-weight: var(--pill-font-weight);
-  border-radius: var(--border-radius-round);
-  min-width: var(--spacer);
-  line-height: 1;
-  text-decoration: none;
-  white-space: nowrap;
-  display: inline-flex;
-  align-items: center;
-  vertical-align: top;
-  justify-content: center;
-  height: auto;
-  outline: 0;
-}
-
-@each $key, $value in $all-colors {
-  .pill--#{$key} {
-    --pill-color: #{color-flip($key, $value, $pill-color-flip-threshold, $pill-color-flip-l)};
-    --pill-background: var(--#{$key});
-    --pill-border-color: color-mix(in oklab, var(--#{$key}), #000 #{$border-shade-percentage});
-  }
-}
-
-.pills {
-  @include make-group-row;
-
-  & .pill {
-    &:empty {
-      align-self: stretch;
-    }
-  }
-
-  &.pills--grouped {
-    @include make-grouped-row(".pill");
-  }
-}
+@use "sass:color";
+@use "./../helpers" as *;
+@use "./../variables" as *;
+@use "./../functions" as *;
+@use "./../mixins/group" as *;
+
+.pill {
+  --pill-color: var(--body-color);
+  --pill-border-color: var(--border-color-main);
+  --pill-background: var(--white);
+
+  // Static
+  --pill-padding-x: #{$pill-padding-x};
+  --pill-padding-y: #{$pill-padding-y};
+  --pill-border-width: 1px;
+  --pill-border-style: solid;
+  --pill-font-weight: #{$pill-font-weight};
+
+  @include rfs($pill-font-size, --pill-font-size);
+
+  @include font-size(var(--pill-font-size));
+
+  color: var(--pill-color);
+  padding: var(--pill-padding-y) var(--pill-padding-x);
+  border: var(--pill-border-width) var(--pill-border-style) var(--pill-border-color);
+  background: var(--pill-background);
+  font-weight: var(--pill-font-weight);
+  border-radius: var(--border-radius-round);
+  min-width: var(--spacer);
+  line-height: 1;
+  text-decoration: none;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: top;
+  justify-content: center;
+  height: auto;
+  outline: 0;
+}
+
+@each $key, $value in $all-colors {
+  .pill--#{$key} {
+    --pill-color: #{color-flip($key, $value, $pill-color-flip-threshold, $pill-color-flip-l)};
+    --pill-background: var(--#{$key});
+    --pill-border-color: color-mix(in oklab, var(--#{$key}), #000 #{$border-shade-percentage});
+  }
+}
+
+.pills {
+  @include make-group-row;
+
+  & .pill {
+    &:empty {
+      align-self: stretch;
+    }
+  }
+
+  &.pills--grouped {
+    @include make-grouped-row(".pill");
+  }
+}

package/sass/modules/_table.scss

@@ -1,96 +1,96 @@
-@use "./../variables" as *;
-
-.table {
-  width: 100%;
-
-  & td,
-  & th {
-    padding: $table-cell-padding-y $table-cell-padding-x;
-    vertical-align: $table-cell-valign;
-    border-style: $table-cell-border-style;
-    border-color: var(--border-color-main);
-    border-width: 0 0 $table-cell-border-width 0;
-  }
-
-  & thead {
-    & tr {
-      background-color: $table-head-background-color;
-
-      & > * {
-        border-width: 0 0 $table-th-border-width 0;
-      }
-    }
-  }
-
-  & tbody {
-    & tr {
-      background-color: $table-background-color;
-    }
-  }
-
-  & tfoot {
-    & tr {
-      & > * {
-        border-width: $table-th-border-width 0 $table-cell-border-width 0;
-      }
-    }
-  }
-
-  &.table--small {
-    & td,
-    & th {
-      padding: $table-small-cell-padding-y $table-small-cell-padding-x;
-    }
-  }
-
-  &.table--bordered {
-    & td,
-    & th {
-      border-width: $table-cell-border-width;
-    }
-
-    & thead {
-      & tr {
-        & > * {
-          border-width: $table-cell-border-width $table-cell-border-width $table-th-border-width
-            $table-cell-border-width;
-        }
-      }
-    }
-
-    & tfoot {
-      & tr {
-        & > * {
-          border-width: $table-th-border-width $table-cell-border-width $table-cell-border-width
-            $table-cell-border-width;
-        }
-      }
-    }
-  }
-
-  &.table--striped {
-    & tbody {
-      & tr {
-        &:nth-of-type(even) {
-          background-color: hsl(from var(--dark) h s l / #{$table-striped-background-opacity});
-        }
-
-        &:nth-of-type(odd) {
-          background-color: hsl(from var(--light) h s l / #{$table-striped-background-opacity});
-        }
-      }
-    }
-  }
-
-  &.table--hover {
-    & tbody {
-      & tr {
-        &:hover {
-          & > * {
-            background-color: hsl(from var(--dark) h s l / #{$table-striped-background-opacity});
-          }
-        }
-      }
-    }
-  }
-}
+@use "./../variables" as *;
+
+.table {
+  width: 100%;
+
+  & td,
+  & th {
+    padding: $table-cell-padding-y $table-cell-padding-x;
+    vertical-align: $table-cell-valign;
+    border-style: $table-cell-border-style;
+    border-color: var(--border-color-main);
+    border-width: 0 0 $table-cell-border-width 0;
+  }
+
+  & thead {
+    & tr {
+      background-color: $table-head-background-color;
+
+      & > * {
+        border-width: 0 0 $table-th-border-width 0;
+      }
+    }
+  }
+
+  & tbody {
+    & tr {
+      background-color: $table-background-color;
+    }
+  }
+
+  & tfoot {
+    & tr {
+      & > * {
+        border-width: $table-th-border-width 0 $table-cell-border-width 0;
+      }
+    }
+  }
+
+  &.table--small {
+    & td,
+    & th {
+      padding: $table-small-cell-padding-y $table-small-cell-padding-x;
+    }
+  }
+
+  &.table--bordered {
+    & td,
+    & th {
+      border-width: $table-cell-border-width;
+    }
+
+    & thead {
+      & tr {
+        & > * {
+          border-width: $table-cell-border-width $table-cell-border-width $table-th-border-width
+            $table-cell-border-width;
+        }
+      }
+    }
+
+    & tfoot {
+      & tr {
+        & > * {
+          border-width: $table-th-border-width $table-cell-border-width $table-cell-border-width
+            $table-cell-border-width;
+        }
+      }
+    }
+  }
+
+  &.table--striped {
+    & tbody {
+      & tr {
+        &:nth-of-type(even) {
+          background-color: hsl(from var(--dark) h s l / #{$table-striped-background-opacity});
+        }
+
+        &:nth-of-type(odd) {
+          background-color: hsl(from var(--light) h s l / #{$table-striped-background-opacity});
+        }
+      }
+    }
+  }
+
+  &.table--hover {
+    & tbody {
+      & tr {
+        &:hover {
+          & > * {
+            background-color: hsl(from var(--dark) h s l / #{$table-striped-background-opacity});
+          }
+        }
+      }
+    }
+  }
+}