claritas-web-framework 8.5.8 → 8.5.91

package/sass/modules/_tabs.scss

@@ -1,93 +1,88 @@
-@use "sass:color";
-@use "./../variables" as *;
-
-.tabs--wrapper {
-  --tabs-border-width: 1px;
-  --tabs-border-style: solid;
-  --tabs-border-color: var(--border-color-main);
-  --tabs-background: var(--white);
-
-  $tabs-margin-fallback: if($enable-margins, var(--spacer), 0);
-
-  margin-bottom: var(--tabs-margin-bottom, #{$tabs-margin-fallback});
-
-  & .nav--tabs {
-    margin-bottom: 0;
-    z-index: 1;
-    overflow: unset;
-    flex-wrap: nowrap;
-
-    &:not(:empty) {
-      border-bottom: var(--tabs-border-width) var(--tabs-border-style) var(--tabs-border-color);
-    }
-
-    & .nav__item {
-      --nav-item-border-color: var(--tabs-border-color);
-      --nav-item-border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
-      --nav-item-background: var(--tabs-background);
-      --nav-item-active-background: transparent;
-
-      margin-bottom: -1px;
-
-      &:not(:last-child) {
-        margin-right: calc(var(--spacer) * 0.125);
-      }
-
-      &[data-active="true"],
-      &:active,
-      &.active {
-        border-bottom-color: var(--tabs-background);
-      }
-    }
-  }
-
-  & .tabs__body {
-    border-width: var(--tabs-border-width);
-    border-style: var(--tabs-border-style);
-    border-color: transparent var(--tabs-border-color) var(--tabs-border-color);
-    background-color: var(--tabs-background);
-    border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
-    display: none;
-    flex-direction: column;
-    min-width: 0;
-    word-wrap: break-word;
-    width: 100%;
-    position: relative;
-    margin-bottom: var(--spacer);
-    padding: var(--spacer);
-
-    & > *:last-child {
-      margin-bottom: 0;
-    }
-
-    &[data-active="true"],
-    &:active,
-    &.active {
-      display: flex;
-    }
-  }
-
-  &.card {
-    & .nav--tabs {
-      & .nav__item {
-        --nav-item-border-radius: 0;
-        --nav-item-active-background: color-mix(in oklab, var(--body-color), #fff 95%);
-        --nav-item-border-color: transparent var(--tabs-border-color) transparent transparent;
-
-        margin: 0;
-
-        &:first-child {
-          border-top-left-radius: calc(var(--card-border-radius) - 1px);
-        }
-      }
-    }
-
-    & .tabs__body {
-      border: 0 none;
-      padding: var(--spacer);
-      margin: 0;
-      border-bottom-left-radius: calc(var(--border-radius-medium) - 1px);
-      border-bottom-right-radius: calc(var(--border-radius-medium) - 1px);
-    }
-  }
-}
+@use "sass:color";
+@use "./../variables" as *;
+
+.tabs--wrapper {
+  --tabs-border-width: 1px;
+  --tabs-border-style: solid;
+  --tabs-border-color: var(--border-color-main);
+  --tabs-background: var(--white);
+
+  $tabs-margin-fallback: if($enable-margins, var(--spacer), 0);
+
+  margin-bottom: var(--tabs-margin-bottom, #{$tabs-margin-fallback});
+
+  & .nav--tabs {
+    margin-bottom: 0;
+    z-index: 1;
+    overflow: unset;
+    flex-wrap: nowrap;
+
+    &:not(:empty) {
+      border-bottom: var(--tabs-border-width) var(--tabs-border-style) var(--tabs-border-color);
+    }
+
+    & .nav__item {
+      --nav-item-border-color: var(--tabs-border-color);
+      --nav-item-border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
+      --nav-item-background: var(--tabs-background);
+      --nav-item-active-background: transparent;
+
+      margin-bottom: -1px;
+
+      &:not(:last-child) {
+        margin-right: calc(var(--spacer) * 0.125);
+      }
+
+      &[data-active="true"],
+      &[aria-selected="true"],
+      &:active,
+      &.active {
+        border-bottom-color: var(--tabs-background);
+      }
+    }
+  }
+
+  & .tabs__body {
+    border-width: var(--tabs-border-width);
+    border-style: var(--tabs-border-style);
+    border-color: transparent var(--tabs-border-color) var(--tabs-border-color);
+    background-color: var(--tabs-background);
+    border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
+    display: var(--tabs-body-display, flex);
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    width: 100%;
+    position: relative;
+    margin-bottom: var(--spacer);
+    padding: var(--spacer);
+
+    & > *:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &.card {
+    & .nav--tabs {
+      & .nav__item {
+        --nav-item-border-radius: 0;
+        --nav-item-active-background: color-mix(in oklab, var(--body-color), #fff 95%);
+        --nav-item-border-color: transparent var(--tabs-border-color) transparent transparent;
+
+        margin: 0;
+
+        &:first-child {
+          border-top-left-radius: calc(var(--card-border-radius) - 1px);
+        }
+      }
+    }
+
+    & .tabs__body {
+      border: 0 none;
+      padding: var(--spacer);
+      margin: 0;
+      border-bottom-left-radius: calc(var(--border-radius-medium) - 1px);
+      border-bottom-right-radius: calc(var(--border-radius-medium) - 1px);
+    }
+  }
+}

package/sass/modules/_tag.scss

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

package/sass/modules/_tile.scss

@@ -1,101 +1,101 @@
-@use "sass:color";
-@use "./../variables" as *;
-@use "./../mixins/group" as *;
-
-.tile {
-  --tile-background: var(--white);
-  --tile-hover-background: color-mix(in oklab, var(--body-color), #fff 95%);
-  --tile-border-width: 1px;
-  --tile-border-left-width: 4px;
-  --tile-border-left-color: color-mix(in oklab, var(--body-color), #fff 95%);
-  --tile-border-style: solid;
-  --tile-border-color: var(--border-color-main);
-  --tile-border-radius: 0;
-  --tile-header-footer-padding-y: #{$tile-header-footer-padding-y};
-  --tile-header-footer-padding-x: #{$tile-header-footer-padding-x};
-  --tile-body-padding-y: #{$tile-body-padding-y};
-  --tile-body-padding-x: #{$tile-body-padding-x};
-
-  background-color: var(--tile-background);
-  border: var(--tile-border-width) var(--tile-border-style) var(--tile-border-color);
-  border-left-width: var(--tile-border-left-width);
-  border-left-color: var(--tile-border-left-color);
-  border-radius: var(--tile-border-radius);
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  word-wrap: break-word;
-  flex: 1 1 auto;
-  position: relative;
-
-  $tile-margin-fallback: if($enable-margins, var(--spacer), 0);
-
-  margin-bottom: var(--tile-margin-bottom, #{$tile-margin-fallback});
-
-  & > * {
-    &:first-child {
-      border-top-left-radius: calc(var(--tile-border-radius) - 1px);
-      border-top-right-radius: calc(var(--tile-border-radius) - 1px);
-    }
-
-    &:last-child {
-      border-bottom-left-radius: calc(var(--tile-border-radius) - 1px);
-      border-bottom-right-radius: calc(var(--tile-border-radius) - 1px);
-    }
-  }
-
-  & .tile__header,
-  & .tile__footer {
-    display: flex;
-    flex-flow: row wrap;
-    align-items: normal;
-    padding: var(--tile-header-footer-padding-y) var(--tile-header-footer-padding-x);
-
-    & > * {
-      margin-bottom: 0;
-    }
-  }
-
-  & .tile__header {
-    border-bottom: var(--tile-border-width) var(--tile-border-style) var(--tile-border-color);
-  }
-
-  & .tile__footer {
-    margin-top: auto;
-    border-top: var(--tile-border-width) var(--tile-border-style) var(--tile-border-color);
-  }
-
-  & .tile__body {
-    flex: 1 1 auto;
-    width: 100%;
-    padding: var(--tile-body-padding-y) var(--tile-body-padding-x);
-
-    & + .tile__body {
-      border-top: var(--tile-border-width) var(--tile-border-style) var(--tile-border-color);
-    }
-  }
-
-  & .tile__image {
-    flex: 1 0 100%;
-    overflow: hidden;
-
-    & img {
-      width: 100%;
-      height: auto;
-    }
-  }
-}
-
-.tiles {
-  @include make-group-column;
-
-  &.tiles--grouped {
-    @include make-grouped-column;
-  }
-}
-
-@each $key, $value in $all-colors {
-  .tile--#{$key} {
-    --tile-border-left-color: var(--#{$key});
-  }
-}
+@use "sass:color";
+@use "./../variables" as *;
+@use "./../mixins/group" as *;
+
+.tile {
+  --tile-background: var(--white);
+  --tile-hover-background: color-mix(in oklab, var(--body-color), #fff 95%);
+  --tile-border-width: 1px;
+  --tile-border-left-width: 4px;
+  --tile-border-left-color: color-mix(in oklab, var(--body-color), #fff 95%);
+  --tile-border-style: solid;
+  --tile-border-color: var(--border-color-main);
+  --tile-border-radius: 0;
+  --tile-header-footer-padding-y: #{$tile-header-footer-padding-y};
+  --tile-header-footer-padding-x: #{$tile-header-footer-padding-x};
+  --tile-body-padding-y: #{$tile-body-padding-y};
+  --tile-body-padding-x: #{$tile-body-padding-x};
+
+  background-color: var(--tile-background);
+  border: var(--tile-border-width) var(--tile-border-style) var(--tile-border-color);
+  border-left-width: var(--tile-border-left-width);
+  border-left-color: var(--tile-border-left-color);
+  border-radius: var(--tile-border-radius);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  flex: 1 1 auto;
+  position: relative;
+
+  $tile-margin-fallback: if($enable-margins, var(--spacer), 0);
+
+  margin-bottom: var(--tile-margin-bottom, #{$tile-margin-fallback});
+
+  & > * {
+    &:first-child {
+      border-top-left-radius: calc(var(--tile-border-radius) - 1px);
+      border-top-right-radius: calc(var(--tile-border-radius) - 1px);
+    }
+
+    &:last-child {
+      border-bottom-left-radius: calc(var(--tile-border-radius) - 1px);
+      border-bottom-right-radius: calc(var(--tile-border-radius) - 1px);
+    }
+  }
+
+  & .tile__header,
+  & .tile__footer {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: normal;
+    padding: var(--tile-header-footer-padding-y) var(--tile-header-footer-padding-x);
+
+    & > * {
+      margin-bottom: 0;
+    }
+  }
+
+  & .tile__header {
+    border-bottom: var(--tile-border-width) var(--tile-border-style) var(--tile-border-color);
+  }
+
+  & .tile__footer {
+    margin-top: auto;
+    border-top: var(--tile-border-width) var(--tile-border-style) var(--tile-border-color);
+  }
+
+  & .tile__body {
+    flex: 1 1 auto;
+    width: 100%;
+    padding: var(--tile-body-padding-y) var(--tile-body-padding-x);
+
+    & + .tile__body {
+      border-top: var(--tile-border-width) var(--tile-border-style) var(--tile-border-color);
+    }
+  }
+
+  & .tile__image {
+    flex: 1 0 100%;
+    overflow: hidden;
+
+    & img {
+      width: 100%;
+      height: auto;
+    }
+  }
+}
+
+.tiles {
+  @include make-group-column;
+
+  &.tiles--grouped {
+    @include make-grouped-column;
+  }
+}
+
+@each $key, $value in $all-colors {
+  .tile--#{$key} {
+    --tile-border-left-color: var(--#{$key});
+  }
+}