claritas-web-framework 8.5.7 → 8.5.9

package/sass/modules/_card.scss

@@ -1,107 +1,107 @@
-@use "sass:color";
-@use "./../variables" as *;
-@use "./../mixins/group" as *;
-
-.card {
-  --card-background: var(--white);
-  --card-hover-background: color-mix(in oklab, var(--body-color), #fff 95%);
-  --card-border-width: 1px;
-  --card-border-style: solid;
-  --card-border-color: var(--border-color-main);
-  --card-border-radius: var(--border-radius-medium);
-  --card-header-footer-padding-y: #{$card-header-footer-padding-y};
-  --card-header-footer-padding-x: #{$card-header-footer-padding-x};
-  --card-body-padding-y: #{$card-body-padding-y};
-  --card-body-padding-x: #{$card-body-padding-x};
-
-  background-color: var(--card-background);
-  border: var(--card-border-width) var(--card-border-style) var(--card-border-color);
-  border-radius: var(--card-border-radius);
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  word-wrap: break-word;
-  flex: 1 1 auto;
-  position: relative;
-
-  $card-margin-fallback: if($enable-margins, var(--spacer), 0);
-
-  margin-bottom: var(--card-margin-bottom, #{$card-margin-fallback});
-
-  & > * {
-    &:first-child {
-      border-top-left-radius: calc(var(--card-border-radius) - 1px);
-      border-top-right-radius: calc(var(--card-border-radius) - 1px);
-    }
-
-    &:last-child {
-      border-bottom-left-radius: calc(var(--card-border-radius) - 1px);
-      border-bottom-right-radius: calc(var(--card-border-radius) - 1px);
-    }
-  }
-
-  & .card__header,
-  & .card__footer {
-    display: flex;
-    flex-flow: row wrap;
-    align-items: normal;
-    padding: var(--card-header-footer-padding-y) var(--card-header-footer-padding-x);
-
-    & > * {
-      margin-bottom: 0;
-    }
-  }
-
-  & .card__header {
-    border-bottom: var(--card-border-width) var(--card-border-style) var(--card-border-color);
-  }
-
-  & .card__footer {
-    margin-top: auto;
-    border-top: var(--card-border-width) var(--card-border-style) var(--card-border-color);
-  }
-
-  & .card__body {
-    flex: 1 1 auto;
-    width: 100%;
-    padding: var(--card-body-padding-y) var(--card-body-padding-x);
-
-    & + .card__body {
-      border-top: var(--card-border-width) var(--card-border-style) var(--card-border-color);
-    }
-  }
-
-  & .card__image {
-    flex: 1 0 100%;
-    overflow: hidden;
-
-    & img {
-      width: 100%;
-      height: auto;
-    }
-  }
-}
-
-details.card {
-  & .card__header {
-    border-bottom-color: transparent;
-
-    &:hover {
-      background-color: var(--card-hover-background);
-    }
-  }
-
-  &[open] {
-    & .card__header {
-      border-bottom-color: var(--card-border-color);
-    }
-  }
-}
-
-.cards {
-  @include make-group-column;
-
-  &.cards--grouped {
-    @include make-grouped-column;
-  }
-}
+@use "sass:color";
+@use "./../variables" as *;
+@use "./../mixins/group" as *;
+
+.card {
+  --card-background: var(--white);
+  --card-hover-background: color-mix(in oklab, var(--body-color), #fff 95%);
+  --card-border-width: 1px;
+  --card-border-style: solid;
+  --card-border-color: var(--border-color-main);
+  --card-border-radius: var(--border-radius-medium);
+  --card-header-footer-padding-y: #{$card-header-footer-padding-y};
+  --card-header-footer-padding-x: #{$card-header-footer-padding-x};
+  --card-body-padding-y: #{$card-body-padding-y};
+  --card-body-padding-x: #{$card-body-padding-x};
+
+  background-color: var(--card-background);
+  border: var(--card-border-width) var(--card-border-style) var(--card-border-color);
+  border-radius: var(--card-border-radius);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  flex: 1 1 auto;
+  position: relative;
+
+  $card-margin-fallback: if($enable-margins, var(--spacer), 0);
+
+  margin-bottom: var(--card-margin-bottom, #{$card-margin-fallback});
+
+  & > * {
+    &:first-child {
+      border-top-left-radius: calc(var(--card-border-radius) - 1px);
+      border-top-right-radius: calc(var(--card-border-radius) - 1px);
+    }
+
+    &:last-child {
+      border-bottom-left-radius: calc(var(--card-border-radius) - 1px);
+      border-bottom-right-radius: calc(var(--card-border-radius) - 1px);
+    }
+  }
+
+  & .card__header,
+  & .card__footer {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: normal;
+    padding: var(--card-header-footer-padding-y) var(--card-header-footer-padding-x);
+
+    & > * {
+      margin-bottom: 0;
+    }
+  }
+
+  & .card__header {
+    border-bottom: var(--card-border-width) var(--card-border-style) var(--card-border-color);
+  }
+
+  & .card__footer {
+    margin-top: auto;
+    border-top: var(--card-border-width) var(--card-border-style) var(--card-border-color);
+  }
+
+  & .card__body {
+    flex: 1 1 auto;
+    width: 100%;
+    padding: var(--card-body-padding-y) var(--card-body-padding-x);
+
+    & + .card__body {
+      border-top: var(--card-border-width) var(--card-border-style) var(--card-border-color);
+    }
+  }
+
+  & .card__image {
+    flex: 1 0 100%;
+    overflow: hidden;
+
+    & img {
+      width: 100%;
+      height: auto;
+    }
+  }
+}
+
+details.card {
+  & .card__header {
+    border-bottom-color: transparent;
+
+    &:hover {
+      background-color: var(--card-hover-background);
+    }
+  }
+
+  &[open] {
+    & .card__header {
+      border-bottom-color: var(--card-border-color);
+    }
+  }
+}
+
+.cards {
+  @include make-group-column;
+
+  &.cards--grouped {
+    @include make-grouped-column;
+  }
+}

package/sass/modules/_close.scss

@@ -1,59 +1,59 @@
-@use "./../variables" as *;
-@use "./../functions" as *;
-
-.close {
-  --close-border-radius: #{$close-border-radius};
-  --close-height: #{$close-height};
-  --close-small-height: #{$close-small-height};
-  --close-large-height: #{$close-large-height};
-  --close-width: #{$close-width};
-  --close-small-width: #{$close-small-width};
-  --close-large-width: #{$close-large-width};
-  --close-background-color: #{$close-background-color};
-  --close-hover-background-color: #{$close-hover-background-color};
-  --close-light-background-color: #{$close-background-color-light};
-  --close-light-hover-background-color: #{$close-hover-background-color-light};
-  --close-background-image: #{escape-svg($close-indicator)};
-  --close-hover-background-image: #{escape-svg($close-hover-indicator)};
-  --close-light-background-image: #{escape-svg($close-indicator-light)};
-  --close-light-hover-background-image: #{escape-svg($close-hover-indicator-light)};
-
-  border-radius: var(--close-border-radius);
-  height: var(--close-height);
-  width: var(--close-width);
-  background-color: var(--close-background-color);
-  background-image: var(--close-background-image);
-  background-size: 50% auto;
-  background-repeat: no-repeat;
-  background-position: center;
-  padding: 0;
-  border-color: transparent;
-  position: relative;
-  vertical-align: text-bottom;
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--close-hover-background-color);
-    background-image: var(--close-hover-background-image);
-  }
-
-  &.close--large {
-    height: var(--close-large-width);
-    width: var(--close-large-width);
-  }
-
-  &.close--small {
-    height: var(--close-small-width);
-    width: var(--close-small-width);
-  }
-
-  &.close--light {
-    background-color: var(--close-light-background-color);
-    background-image: var(--close-light-background-image);
-
-    &:hover {
-      background-color: var(--close-light-hover-background-color);
-      background-image: var(--close-light-hover-background-image);
-    }
-  }
-}
+@use "./../variables" as *;
+@use "./../functions" as *;
+
+.close {
+  --close-border-radius: #{$close-border-radius};
+  --close-height: #{$close-height};
+  --close-small-height: #{$close-small-height};
+  --close-large-height: #{$close-large-height};
+  --close-width: #{$close-width};
+  --close-small-width: #{$close-small-width};
+  --close-large-width: #{$close-large-width};
+  --close-background-color: #{$close-background-color};
+  --close-hover-background-color: #{$close-hover-background-color};
+  --close-light-background-color: #{$close-background-color-light};
+  --close-light-hover-background-color: #{$close-hover-background-color-light};
+  --close-background-image: #{escape-svg($close-indicator)};
+  --close-hover-background-image: #{escape-svg($close-hover-indicator)};
+  --close-light-background-image: #{escape-svg($close-indicator-light)};
+  --close-light-hover-background-image: #{escape-svg($close-hover-indicator-light)};
+
+  border-radius: var(--close-border-radius);
+  height: var(--close-height);
+  width: var(--close-width);
+  background-color: var(--close-background-color);
+  background-image: var(--close-background-image);
+  background-size: 50% auto;
+  background-repeat: no-repeat;
+  background-position: center;
+  padding: 0;
+  border-color: transparent;
+  position: relative;
+  vertical-align: text-bottom;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--close-hover-background-color);
+    background-image: var(--close-hover-background-image);
+  }
+
+  &.close--large {
+    height: var(--close-large-width);
+    width: var(--close-large-width);
+  }
+
+  &.close--small {
+    height: var(--close-small-width);
+    width: var(--close-small-width);
+  }
+
+  &.close--light {
+    background-color: var(--close-light-background-color);
+    background-image: var(--close-light-background-image);
+
+    &:hover {
+      background-color: var(--close-light-hover-background-color);
+      background-image: var(--close-light-hover-background-image);
+    }
+  }
+}

package/sass/modules/_details.scss

@@ -1,48 +1,48 @@
-@use "./../variables" as *;
-@use "./../mixins/caret" as *;
-
-details {
-  transition: $details-transition;
-
-  $details-margin-fallback: if($enable-margins, var(--spacer), 0);
-
-  margin-bottom: var(--details-margin-bottom, #{$details-margin-fallback});
-
-  & summary {
-    position: relative;
-    list-style: none;
-    padding-left: calc(var(--spacer) * 1.5);
-
-    @include make-caret-down($left: true, $color: "primary");
-
-    &:focus {
-      outline: none;
-    }
-
-    &::marker {
-      color: transparent;
-      display: none;
-    }
-
-    &::-webkit-details-marker {
-      display: none;
-    }
-
-    &.card__header {
-      padding-left: calc(var(--spacer) * 2) !important;
-
-      &::before {
-        left: calc(var(--spacer) * 0.75);
-      }
-    }
-  }
-
-  &[open] {
-    height: auto;
-    overflow: clip;
-
-    & summary {
-      @include make-caret-up($left: true, $color: "primary");
-    }
-  }
-}
+@use "./../variables" as *;
+@use "./../mixins/caret" as *;
+
+details {
+  transition: $details-transition;
+
+  $details-margin-fallback: if($enable-margins, var(--spacer), 0);
+
+  margin-bottom: var(--details-margin-bottom, #{$details-margin-fallback});
+
+  & summary {
+    position: relative;
+    list-style: none;
+    padding-left: calc(var(--spacer) * 1.5);
+
+    @include make-caret-down($left: true, $color: "primary");
+
+    &:focus {
+      outline: none;
+    }
+
+    &::marker {
+      color: transparent;
+      display: none;
+    }
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &.card__header {
+      padding-left: calc(var(--spacer) * 2) !important;
+
+      &::before {
+        left: calc(var(--spacer) * 0.75);
+      }
+    }
+  }
+
+  &[open] {
+    height: auto;
+    overflow: clip;
+
+    & summary {
+      @include make-caret-up($left: true, $color: "primary");
+    }
+  }
+}

package/sass/modules/_dialog.scss

@@ -1,47 +1,47 @@
-@use "sass:color";
-@use "./../variables" as *;
-
-.dialog {
-  padding: var(--spacer);
-  background-color: transparent;
-  border: 0 none;
-  max-width: 100%;
-  max-height: 100%;
-  width: 100%;
-
-  & > * {
-    margin: 0 auto;
-  }
-
-  &::backdrop {
-    background: $modal-open-background;
-    backdrop-filter: blur($modal-background-blur);
-  }
-
-  & .close {
-    position: absolute;
-    right: calc(var(--spacer) * 0.5);
-    top: calc(var(--spacer) * 0.5);
-    z-index: 1;
-  }
-
-  &[open] {
-    animation: open-dialog 0.25s ease normal;
-  }
-}
-
-@keyframes open-dialog {
-  0% {
-    opacity: 0;
-    transform: translateY(-50vh);
-  }
-
-  20% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0%);
-  }
-}
+@use "sass:color";
+@use "./../variables" as *;
+
+.dialog {
+  padding: var(--spacer);
+  background-color: transparent;
+  border: 0 none;
+  max-width: 100%;
+  max-height: 100%;
+  width: 100%;
+
+  & > * {
+    margin: 0 auto;
+  }
+
+  &::backdrop {
+    background: $modal-open-background;
+    backdrop-filter: blur($modal-background-blur);
+  }
+
+  & .close {
+    position: absolute;
+    right: calc(var(--spacer) * 0.5);
+    top: calc(var(--spacer) * 0.5);
+    z-index: 1;
+  }
+
+  &[open] {
+    animation: open-dialog 0.25s ease normal;
+  }
+}
+
+@keyframes open-dialog {
+  0% {
+    opacity: 0;
+    transform: translateY(-50vh);
+  }
+
+  20% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}

package/sass/modules/_dropdown.scss

@@ -1,43 +1,44 @@
-@use "./../variables" as *;
-@use "./../mixins/caret" as *;
-
-.dropdown {
-  display: inline-flex;
-  position: relative;
-  vertical-align: top;
-  z-index: var(--zindex-dropdown);
-
-  &[data-active="true"],
-  &:focus,
-  &:hover {
-    & .nav {
-      display: flex;
-    }
-  }
-
-  & .button--dropdown {
-    padding-right: calc($button-padding-x + (var(--spacer) * 0.75));
-
-    @include make-caret-down;
-  }
-
-  & .nav {
-    display: none;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    padding: calc(var(--spacer) * 0.25) 0;
-    background-color: var(--white);
-    border: 1px solid var(--border-color-main);
-    box-shadow: var(--box-shadow-small);
-    border-radius: var(--border-radius-medium);
-    align-items: stretch;
-    min-width: calc(var(--spacer) * 10);
-    flex-flow: column nowrap;
-
-    & .nav__item {
-      text-align: left;
-      justify-content: flex-start;
-    }
-  }
-}
+@use "./../variables" as *;
+@use "./../mixins/caret" as *;
+
+.dropdown {
+  display: inline-flex;
+  position: relative;
+  vertical-align: top;
+  z-index: var(--zindex-dropdown);
+
+  &[data-active="true"],
+  &[aria-selected="true"],
+  &:focus,
+  &:hover {
+    & .nav {
+      display: flex;
+    }
+  }
+
+  & .button--dropdown {
+    padding-right: calc($button-padding-x + (var(--spacer) * 0.75));
+
+    @include make-caret-down;
+  }
+
+  & .nav {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    padding: calc(var(--spacer) * 0.25) 0;
+    background-color: var(--white);
+    border: 1px solid var(--border-color-main);
+    box-shadow: var(--box-shadow-small);
+    border-radius: var(--border-radius-medium);
+    align-items: stretch;
+    min-width: calc(var(--spacer) * 10);
+    flex-flow: column nowrap;
+
+    & .nav__item {
+      text-align: left;
+      justify-content: flex-start;
+    }
+  }
+}