claritas-web-framework 8.5.7 → 8.5.9

package/sass/_reboot.scss

@@ -1,265 +1,264 @@
-@use "sass:color";
-@use "./helpers" as *;
-@use "./variables" as *;
-@use "./mixins" as *;
-
-body {
-  font-family: var(--font-family-body);
-  font-size: var(--font-size-body);
-  font-weight: var(--font-weight-body);
-  line-height: var(--line-height-body);
-  color: var(--body-color);
-  text-align: var(--body-text-align);
-  background-color: var(--body-background);
-  text-size-adjust: 100%;
-  -webkit-tap-highlight-color: transparent;
-}
-
-hr {
-  --hr-border-color: var(--border-color-main);
-
-  margin: 1rem 0;
-  border: 0;
-  border-top: 1px solid var(--hr-border-color);
-}
-
-%heading {
-  margin: 0 0 0.5rem;
-  font-family: $headings-font-family;
-  font-style: $headings-font-style;
-  font-weight: $headings-font-weight;
-  line-height: $headings-line-height;
-  color: $headings-color;
-}
-
-h1,
-.h1 {
-  @extend %heading;
-
-  font-size: var(--font-size-1);
-}
-
-h2,
-.h2 {
-  @extend %heading;
-
-  font-size: var(--font-size-2);
-}
-
-h3,
-.h3 {
-  @extend %heading;
-
-  font-size: var(--font-size-3);
-}
-
-h4,
-.h4 {
-  @extend %heading;
-
-  font-size: var(--font-size-4);
-}
-
-h5,
-.h5 {
-  @extend %heading;
-
-  font-size: var(--font-size-5);
-}
-
-h6,
-.h6 {
-  @extend %heading;
-
-  font-size: var(--font-size-6);
-}
-
-p {
-  margin: 0 0 0.5rem;
-}
-
-abbr[title] {
-  cursor: help;
-  text-decoration-skip-ink: none;
-}
-
-address {
-  margin: 0 0 1rem;
-  font-style: normal;
-  line-height: inherit;
-}
-
-ol,
-ul {
-  padding-left: 2rem;
-}
-
-ol,
-ul,
-dl {
-  margin: 0 0 1rem;
-}
-
-ol ol,
-ul ul,
-ol ul,
-ul ol {
-  margin: 0;
-}
-
-dt {
-  font-weight: bolder;
-}
-
-dd {
-  margin-bottom: 0.5rem;
-  margin-left: 0;
-}
-
-a {
-  color: var(--primary);
-  text-decoration: $link-decoration;
-
-  &:hover {
-    color: color-mix(in oklab, var(--primary), #000 #{$link-shade-percentage});
-    text-decoration: $link-hover-decoration;
-  }
-}
-
-a:not([href], [class]) {
-  &,
-  &:hover {
-    color: inherit;
-    text-decoration: none;
-  }
-}
-
-figure {
-  margin: 0 0 1rem;
-}
-
-img,
-svg {
-  vertical-align: middle;
-}
-
-table {
-  caption-side: bottom;
-  border-collapse: collapse;
-}
-
-caption {
-  padding-top: $table-cell-padding-y;
-  padding-bottom: $table-cell-padding-y;
-  color: $table-caption-color;
-  text-align: left;
-}
-
-th {
-  font-weight: $table-th-font-weight;
-  text-align: inherit;
-  text-align: -webkit-match-parent;
-}
-
-thead,
-tbody,
-tfoot,
-tr,
-td,
-th {
-  border-color: inherit;
-  border-style: solid;
-  border-width: 0;
-}
-
-label {
-  display: inline-block;
-}
-
-button {
-  border-radius: 0;
-}
-
-[role="button"] {
-  cursor: pointer;
-}
-
-select {
-  word-wrap: normal;
-
-  &:disabled {
-    opacity: 1;
-  }
-}
-
-[list]:not(
-    [type="date"],
-    [type="datetime-local"],
-    [type="month"],
-    [type="week"],
-    [type="time"]
-  )::-webkit-calendar-picker-indicator {
-  display: none !important;
-}
-
-button:focus:not(:focus-visible) {
-  outline: 0;
-}
-
-textarea {
-  resize: vertical;
-}
-
-fieldset {
-  min-width: 0;
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-legend {
-  float: left;
-  width: 100%;
-  margin: 0 0 0.5rem;
-  font-size: var(--font-size-5);
-  line-height: inherit;
-
-  + * {
-    clear: left;
-  }
-}
-
-::-webkit-datetime-edit-fields-wrapper,
-::-webkit-datetime-edit-text,
-::-webkit-datetime-edit-minute,
-::-webkit-datetime-edit-hour-field,
-::-webkit-datetime-edit-day-field,
-::-webkit-datetime-edit-month-field,
-::-webkit-datetime-edit-year-field {
-  padding: 0;
-}
-
-::-webkit-color-swatch-wrapper {
-  padding: 0;
-}
-
-::file-selector-button {
-  font: inherit;
-  appearance: button;
-}
-
-output {
-  display: inline-block;
-}
-
-iframe {
-  border: 0;
-}
-
-summary {
-  cursor: pointer;
-}
-
-[hidden] {
-  display: none !important;
-}
+@use "sass:color";
+@use "./helpers" as *;
+@use "./variables" as *;
+@use "./mixins" as *;
+
+body {
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-body);
+  line-height: var(--line-height-body);
+  color: var(--body-color);
+  text-align: var(--body-text-align);
+  background-color: var(--body-background);
+  text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+}
+
+hr {
+  --hr-border-color: var(--border-color-main);
+
+  margin: 1rem 0;
+  border: 0;
+  border-top: 1px solid var(--hr-border-color);
+}
+
+%heading {
+  margin: 0 0 0.5rem;
+  font-style: $headings-font-style;
+  font-weight: $headings-font-weight;
+  line-height: $headings-line-height;
+  color: $headings-color;
+}
+
+h1,
+.h1 {
+  @extend %heading;
+
+  font-size: var(--font-size-1);
+}
+
+h2,
+.h2 {
+  @extend %heading;
+
+  font-size: var(--font-size-2);
+}
+
+h3,
+.h3 {
+  @extend %heading;
+
+  font-size: var(--font-size-3);
+}
+
+h4,
+.h4 {
+  @extend %heading;
+
+  font-size: var(--font-size-4);
+}
+
+h5,
+.h5 {
+  @extend %heading;
+
+  font-size: var(--font-size-5);
+}
+
+h6,
+.h6 {
+  @extend %heading;
+
+  font-size: var(--font-size-6);
+}
+
+p {
+  margin: 0 0 0.5rem;
+}
+
+abbr[title] {
+  cursor: help;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin: 0 0 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul {
+  padding-left: 2rem;
+}
+
+ol,
+ul,
+dl {
+  margin: 0 0 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin: 0;
+}
+
+dt {
+  font-weight: bolder;
+}
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-left: 0;
+}
+
+a {
+  color: var(--primary);
+  text-decoration: $link-decoration;
+
+  &:hover {
+    color: color-mix(in oklab, var(--primary), #000 #{$link-shade-percentage});
+    text-decoration: $link-hover-decoration;
+  }
+}
+
+a:not([href], [class]) {
+  &,
+  &:hover {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: $table-cell-padding-y;
+  padding-bottom: $table-cell-padding-y;
+  color: $table-caption-color;
+  text-align: left;
+}
+
+th {
+  font-weight: $table-th-font-weight;
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+label {
+  display: inline-block;
+}
+
+button {
+  border-radius: 0;
+}
+
+[role="button"] {
+  cursor: pointer;
+}
+
+select {
+  word-wrap: normal;
+
+  &:disabled {
+    opacity: 1;
+  }
+}
+
+[list]:not(
+    [type="date"],
+    [type="datetime-local"],
+    [type="month"],
+    [type="week"],
+    [type="time"]
+  )::-webkit-calendar-picker-indicator {
+  display: none !important;
+}
+
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  float: left;
+  width: 100%;
+  margin: 0 0 0.5rem;
+  font-size: var(--font-size-5);
+  line-height: inherit;
+
+  + * {
+    clear: left;
+  }
+}
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
+}
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::file-selector-button {
+  font: inherit;
+  appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+iframe {
+  border: 0;
+}
+
+summary {
+  cursor: pointer;
+}
+
+[hidden] {
+  display: none !important;
+}

package/sass/_root.scss

@@ -1,56 +1,56 @@
-@use "./variables" as *;
-
-:root {
-  interpolate-size: allow-keywords;
-
-  --spacer: #{$spacer};
-  --body-color: #{$body-color};
-  --body-background: #{$body-background};
-  --font-family-body: #{$font-family-base};
-  --font-size-body: #{$font-size-base};
-  --font-size-base: #{$font-size-base};
-  --font-weight-body: #{$font-weight-base};
-  --line-height-body: #{$line-height-base};
-  --body-text-align: #{$body-text-align};
-  --headings-color: #{$headings-color};
-  --box-shadow-small: #{$box-shadow-small};
-  --box-shadow-medium: #{$box-shadow-medium};
-  --box-shadow-large: #{$box-shadow-large};
-  --border-color-main: #{$border-color-main};
-  --border-color-hover-main: #{$border-color-hover-main};
-  --border-color-active-main: #{$border-color-active-main};
-  --border-color-focus-main: #{$border-color-focus-main};
-  --border-color-disabled-main: #{$border-color-disabled-main};
-
-  @if $font-size-root {
-    @include font-size(var(--root-font-size));
-  }
-
-  @each $key, $value in $grays {
-    --#{$key}: #{$value};
-  }
-
-  @each $key, $value in $all-colors {
-    --#{$key}: #{$value};
-  }
-
-  @each $key, $value in $zindexes {
-    --zindex-#{$key}: #{$value};
-  }
-
-  @each $key, $value in $font-sizes {
-    --font-size-#{$key}: #{$value};
-  }
-
-  @each $key, $value in $border-radii {
-    --border-radius-#{$key}: #{$value};
-  }
-
-  @each $name, $value in $breakpoints {
-    --breakpoint-#{$name}: #{$value};
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    scroll-behavior: smooth;
-  }
-}
+@use "./variables" as *;
+
+:root {
+  interpolate-size: allow-keywords;
+
+  --spacer: #{$spacer};
+  --body-color: #{$body-color};
+  --body-background: #{$body-background};
+  --font-family-body: #{$font-family-base};
+  --font-size-body: #{$font-size-base};
+  --font-size-base: #{$font-size-base};
+  --font-weight-body: #{$font-weight-base};
+  --line-height-body: #{$line-height-base};
+  --body-text-align: #{$body-text-align};
+  --headings-color: #{$headings-color};
+  --box-shadow-small: #{$box-shadow-small};
+  --box-shadow-medium: #{$box-shadow-medium};
+  --box-shadow-large: #{$box-shadow-large};
+  --border-color-main: #{$border-color-main};
+  --border-color-hover-main: #{$border-color-hover-main};
+  --border-color-active-main: #{$border-color-active-main};
+  --border-color-focus-main: #{$border-color-focus-main};
+  --border-color-disabled-main: #{$border-color-disabled-main};
+
+  @if $font-size-root {
+    @include font-size(var(--root-font-size));
+  }
+
+  @each $key, $value in $grays {
+    --#{$key}: #{$value};
+  }
+
+  @each $key, $value in $all-colors {
+    --#{$key}: #{$value};
+  }
+
+  @each $key, $value in $zindexes {
+    --zindex-#{$key}: #{$value};
+  }
+
+  @each $key, $value in $font-sizes {
+    --font-size-#{$key}: #{$value};
+  }
+
+  @each $key, $value in $border-radii {
+    --border-radius-#{$key}: #{$value};
+  }
+
+  @each $name, $value in $breakpoints {
+    --breakpoint-#{$name}: #{$value};
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    scroll-behavior: smooth;
+  }
+}

package/sass/_utilities.scss

@@ -1,17 +1,17 @@
-@forward "./utilities/align";
-@forward "./utilities/border";
-@forward "./utilities/colors";
-@forward "./utilities/display";
-@forward "./utilities/flex";
-@forward "./utilities/float";
-@forward "./utilities/order";
-@forward "./utilities/overflow";
-@forward "./utilities/pointerEvents";
-@forward "./utilities/position";
-@forward "./utilities/shadow";
-@forward "./utilities/size";
-@forward "./utilities/spacing";
-@forward "./utilities/translate";
-@forward "./utilities/typography";
-@forward "./utilities/visibility";
-@forward "./utilities/zIndex";
+@forward "./utilities/align";
+@forward "./utilities/border";
+@forward "./utilities/colors";
+@forward "./utilities/display";
+@forward "./utilities/flex";
+@forward "./utilities/float";
+@forward "./utilities/order";
+@forward "./utilities/overflow";
+@forward "./utilities/pointerEvents";
+@forward "./utilities/position";
+@forward "./utilities/shadow";
+@forward "./utilities/size";
+@forward "./utilities/spacing";
+@forward "./utilities/translate";
+@forward "./utilities/typography";
+@forward "./utilities/visibility";
+@forward "./utilities/zIndex";