claritas-web-framework 8.1.2 → 8.3.0

package/sass/mixins/_container.scss

@@ -14,9 +14,7 @@
 }
 
 @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $breakpoints) {
-
   @each $breakpoint, $container-max-width in $max-widths {
-
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       max-width: $container-max-width;
     }

package/sass/mixins/_grid.scss

@@ -36,19 +36,16 @@
   flex-shrink: 0;
   width: 100%;
   max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
-  padding-right: calc(var(--gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
-  padding-left: calc(var(--gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
+  padding-right: calc(var(--gutter-x) * 0.5);
+  padding-left: calc(var(--gutter-x) * 0.5);
   margin-top: var(--gutter-y);
 }
 
 @mixin make-col($size: false, $columns: $grid-columns) {
-
   @if $size {
     flex: 0 0 auto;
     width: math.percentage(math.div($size, $columns));
-  }
-
- @else {
+  } @else {
     flex: 1 1 0;
     max-width: 100%;
   }
@@ -75,7 +72,6 @@
 // style grid.
 
 @mixin row-cols($count) {
-
   > * {
     flex: 0 0 auto;
     width: math.div(100%, $count);
@@ -87,41 +83,33 @@
 // any value of `$grid-columns`.
 
 @mixin make-grid-columns($columns: $grid-columns, $breakpoints: $breakpoints) {
-
   @each $breakpoint in map.keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       .col-#{$infix},
       .col {
-
         @include make-col-fit;
       }
 
       .col-#{$infix}-auto {
-
         @include make-col-auto;
       }
 
       .col-#{$infix}-fit {
-
         @include make-col-fit;
       }
 
       @if $columns > 0 {
-
         @for $i from 1 through $columns {
           .col-#{$infix}-#{$i} {
-
             @include make-col($i, $columns);
           }
         }
 
         @for $i from 0 through ($columns - 1) {
-
           @if not($infix == "" and $i == 0) {
             .offset-#{$infix}-#{$i} {
-
               @include make-col-offset($i, $columns);
             }
           }
@@ -147,14 +135,11 @@
 }
 
 @mixin make-cssgrid($columns: $grid-columns, $breakpoints: $breakpoints) {
-
   @each $breakpoint in map.keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 
     @include media-breakpoint-up($breakpoint, $breakpoints) {
-
       @if $columns > 0 {
-
         @for $i from 1 through $columns {
           .g-col-#{$infix}-#{$i} {
             grid-column: auto / span $i;

package/sass/mixins/_group.scss

@@ -10,15 +10,12 @@
 
   @if $enable-margins {
     margin-bottom: var(--spacer);
-  }
-
- @else {
+  } @else {
     margin-bottom: 0;
   }
 }
 
 @mixin make-group-column($gap: calc(var(--spacer) * 0.5)) {
-
   @include make-group;
 
   align-items: stretch;
@@ -27,7 +24,6 @@
 }
 
 @mixin make-group-row($gap: calc(var(--spacer) * 0.5)) {
-
   @include make-group;
 
   gap: $gap;
@@ -37,7 +33,6 @@
   gap: 0;
 
   & > * {
-
     &:not(:last-child) {
       border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
@@ -59,7 +54,6 @@
   gap: 0;
 
   & > #{$selector} {
-
     &:not(:last-child) {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;

package/sass/mixins/_list.scss

@@ -9,15 +9,12 @@
 
   @if $enable-margins {
     margin-bottom: var(--spacer);
-  }
-
- @else {
+  } @else {
     margin-bottom: 0;
   }
 }
 
 @mixin make-list-inline($gap: calc(var(--spacer) * 0.5)) {
-
   @include make-group-row($gap);
 
   @include make-list-unstyled;

package/sass/mixins/_screenReader.scss

@@ -10,7 +10,6 @@
 
   &:active,
   &:focus {
-
     @if $focusable {
       position: static;
       width: auto;

package/sass/modules/_alert.scss

@@ -25,9 +25,7 @@
 
   @if $enable-margins {
     margin-bottom: var(--spacer);
-  }
-
- @else {
+  } @else {
     margin-bottom: 0;
   }
 
@@ -39,7 +37,6 @@
   }
 
   & > * {
-
     &:last-child {
       margin-bottom: 0;
     }

package/sass/modules/_breadcrumbs.scss

@@ -19,7 +19,6 @@
     position: relative;
 
     &:not(:last-child) {
-
       &::after {
         content: "";
         position: absolute;

package/sass/modules/_button.scss

@@ -139,12 +139,10 @@
   }
 
   &.button--link {
-
     @include button-variant-link("primary");
   }
 
   &.button--unstyled {
-
     @include button-variant-unstyled("body-color");
   }
 
@@ -160,32 +158,26 @@
 }
 
 .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);
     }
   }

package/sass/modules/_card.scss

@@ -28,14 +28,11 @@
 
   @if $enable-margins {
     margin-bottom: var(--spacer);
-  }
-
- @else {
+  } @else {
     margin-bottom: 0;
   }
 
   & > * {
-
     &:first-child {
       border-top-left-radius: calc(var(--card-border-radius) - 1px);
       border-top-right-radius: calc(var(--card-border-radius) - 1px);
@@ -90,7 +87,6 @@
 }
 
 details.card {
-
   & .card--header {
     border-bottom-color: transparent;
 
@@ -100,7 +96,6 @@ details.card {
   }
 
   &[open] {
-
     & .card--header {
       border-bottom-color: var(--card-border-color);
     }
@@ -108,11 +103,9 @@ details.card {
 }
 
 .cards {
-
   @include make-group-column;
 
   &.cards--grouped {
-
     @include make-grouped-column;
   }
 }

package/sass/modules/_details.scss

@@ -3,12 +3,11 @@
 @use "./../mixins/caret" as *;
 
 details {
+  transition: $details-transition;
 
   @if $enable-margins {
     margin-bottom: var(--spacer);
-  }
-
- @else {
+  } @else {
     margin-bottom: 0;
   }
 
@@ -43,9 +42,9 @@ details {
 
   &[open] {
     height: auto;
+    overflow: clip;
 
     & summary {
-
       @include make-caret-up($left: true, $color: "primary");
     }
   }

package/sass/modules/_dropdown.scss

@@ -11,7 +11,6 @@
   &[data-active="true"],
   &:focus,
   &:hover {
-
     & .nav {
       display: flex;
     }

package/sass/modules/_form.scss

@@ -206,7 +206,6 @@ progress,
 .form--span,
 .input--div,
 .input--editor {
-
   @extend %input;
 }
 
@@ -246,7 +245,6 @@ progress,
     }
 
     &.stacked {
-
       & .form--label {
         order: -1;
       }

package/sass/modules/_loader.scss

@@ -8,7 +8,6 @@
   vertical-align: middle;
 
   &.loader--ring {
-
     & span {
       box-sizing: border-box;
       display: block;
@@ -74,7 +73,6 @@
     height: calc(var(--spacer) * 2);
 
     &.loader--ring {
-
       & span {
         width: calc(var(--spacer) * 2);
         height: calc(var(--spacer) * 2);
@@ -87,7 +85,6 @@
       height: var(--spacer);
 
       & span {
-
         &:nth-child(1) {
           left: calc(var(--spacer) * 0.25);
         }
@@ -108,9 +105,7 @@
   }
 
   &.loader--small {
-
     &.loader--ellipsis {
-
       & span {
         width: calc(var(--spacer) * 0.25);
         height: calc(var(--spacer) * 0.25);
@@ -138,7 +133,6 @@
 }
 
 @keyframes ring {
-
   0% {
     transform: rotate(0deg);
   }
@@ -149,7 +143,6 @@
 }
 
 @keyframes ellipsis1 {
-
   0% {
     transform: scale(0);
   }
@@ -160,7 +153,6 @@
 }
 
 @keyframes ellipsis2 {
-
   0% {
     transform: translate(0, 0);
   }
@@ -171,7 +163,6 @@
 }
 
 @keyframes ellipsis3 {
-
   0% {
     transform: scale(1);
   }
@@ -182,7 +173,6 @@
 }
 
 @keyframes ellipsis2-small {
-
   0% {
     transform: translate(0, 0);
   }

package/sass/modules/_pill.scss

@@ -53,18 +53,15 @@
 }
 
 .pills {
-
   @include make-group-row;
 
   & .pill {
-
     &:empty {
       align-self: stretch;
     }
   }
 
   &.pills--grouped {
-
     @include make-grouped-row(".pill");
   }
 }

package/sass/modules/_tabs.scss

@@ -10,9 +10,7 @@
 
   @if $enable-margins {
     margin-bottom: var(--spacer);
-  }
-
- @else {
+  } @else {
     margin-bottom: 0;
   }
 
@@ -73,9 +71,7 @@
   }
 
   &.card {
-
     & .nav--tabs {
-
       & .nav--item {
         --nav-item-border-radius: 0;
         --nav-item-active-background: hsl(var(--body-color-h) var(--body-color-s) 95%);

package/sass/modules/_tag.scss

@@ -65,18 +65,15 @@
 }
 
 .tags {
-
   @include make-group-row;
 
   & .tag {
-
     &:empty {
       align-self: stretch;
     }
   }
 
   &.tags--grouped {
-
     @include make-grouped-row(".tag");
   }
 }

package/sass/modules/_tile.scss

@@ -32,14 +32,11 @@
 
   @if $enable-margins {
     margin-bottom: var(--spacer);
-  }
-
- @else {
+  } @else {
     margin-bottom: 0;
   }
 
   & > * {
-
     &:first-child {
       border-top-left-radius: calc(var(--tile-border-radius) - 1px);
       border-top-right-radius: calc(var(--tile-border-radius) - 1px);
@@ -94,11 +91,9 @@
 }
 
 .tiles {
-
   @include make-group-column;
 
   &.tiles--grouped {
-
     @include make-grouped-column;
   }
 }

package/sass/modules/_tooltip.scss

@@ -46,14 +46,12 @@
   }
 
   &.tooltip--large {
-
     &::after {
       min-width: calc(var(--spacer) * 16);
     }
   }
 
   &[data-placement="left"] {
-
     &::before {
       border-top: 6px solid transparent;
       border-right: 0 none;
@@ -70,7 +68,6 @@
   }
 
   &[data-placement="right"] {
-
     &::before {
       border-top: 6px solid transparent;
       border-right: 6px solid hsl(0deg 0% 0% / 75%);
@@ -87,7 +84,6 @@
   }
 
   &[data-placement="bottom"] {
-
     &::before {
       border-top: 0 none;
       border-right: 6px solid transparent;
@@ -104,7 +100,6 @@
   }
 
   &:hover {
-
     &::after,
     &::before {
       visibility: visible;

package/sass/modules/form/_checkbox.scss

@@ -5,9 +5,7 @@
 @use "./../../mixins/breakpoints" as *;
 
 .form--control-checkbox {
-
   & > * {
-
     &:not(:last-child) {
       margin-right: var(--spacer);
 
@@ -53,7 +51,6 @@
 
     &:indeterminate,
     &[aria-checked="mixed"] {
-
       &::before {
         border: 2px solid var(--white);
         height: 0;
@@ -73,7 +70,6 @@
 
     @each $key, $value in $all-colors {
       &.input--#{$key} {
-
         &:checked {
           --input-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
           --input-disabled-detail-background: hsl(

package/sass/modules/form/_file.scss

@@ -34,7 +34,6 @@
       }
 
       &:empty {
-
         & ~ .form--label {
           border-bottom-right-radius: var(--border-radius-medium);
           border-bottom-left-radius: var(--border-radius-medium);
@@ -76,7 +75,6 @@
     }
 
     &:hover {
-
       & ~ .form--label {
         border-color: var(--input-hover-border-color);
         background-color: var(--gray-2);
@@ -87,7 +85,6 @@
       }
 
       & ~ .file--name {
-
         &:not(:empty) {
           border-color: var(--input-hover-border-color);
         }
@@ -96,26 +93,22 @@
 
     @each $key, $value in $theme-colors {
       &.input--#{$key} {
-
         & ~ .form--label {
           border-color: $value;
         }
 
         & ~ .file--name {
-
           &:not(:empty) {
             border-color: $value;
           }
         }
 
         &:hover {
-
           & ~ .form--label {
             border-color: color.mix(black, $value, 25%);
           }
 
           & ~ .file--name {
-
             &:not(:empty) {
               border-color: color.mix(black, $value, 25%);
             }
@@ -148,9 +141,7 @@ input[type="file"] {
   }
 
   &:hover {
-
     &:not(:disabled, [readonly]) {
-
       &::-webkit-file-upload-button,
       &::file-selector-button {
         background-color: var(--gray-2);

package/sass/modules/form/_formFieldGroup.scss

@@ -26,7 +26,6 @@
     }
 
     &:first-child {
-
       & * {
         --input-border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
         --input-small-border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
@@ -43,7 +42,6 @@
     }
 
     &:last-child {
-
       & * {
         --input-border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
         --input-small-border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;

package/sass/modules/form/_progress.scss

@@ -36,7 +36,6 @@ progress {
 
   @each $key, $value in $theme-colors {
     &.input--#{$key} {
-
       &::-webkit-progress-bar {
         background-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 5%);
       }

package/sass/modules/form/_radio.scss

@@ -7,9 +7,7 @@
 @use "./../../mixins/breakpoints" as *;
 
 .form--control-radio {
-
   & > * {
-
     &:not(:last-child) {
       margin-right: var(--spacer);
 
@@ -52,7 +50,6 @@
 
     @each $key, $value in $theme-colors {
       &.input--#{$key} {
-
         &:checked {
           --input-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
           --input-disabled-detail-background: hsl(

package/sass/modules/form/_switch.scss

@@ -14,7 +14,6 @@
 
   &[disabled],
   &:disabled {
-
     + .button {
       pointer-events: none;
       filter: none;
@@ -24,7 +23,6 @@
 }
 
 .switches {
-
   @include make-group-row;
 
   &.switches--grouped {
@@ -32,7 +30,6 @@
     flex-wrap: nowrap;
 
     & > .button {
-
       &:not(:last-child) {
         border-bottom-right-radius: 0;
         border-top-right-radius: 0;

package/sass/modules/form/_toggle.scss

@@ -5,9 +5,7 @@
 @use "./../../mixins/breakpoints" as *;
 
 .form--control-toggle {
-
   & > * {
-
     &:not(:last-child) {
       margin-right: var(--spacer);