claritas-web-framework 8.2.0 → 8.3.1

package/sass/modules/_alert.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
-
 @use "./../variables" as *;
 
 .alert {
@@ -25,9 +24,7 @@
 
   @if $enable-margins {
     margin-bottom: var(--spacer);
-  }
-
- @else {
+  } @else {
     margin-bottom: 0;
   }
 
@@ -39,7 +36,6 @@
   }
 
   & > * {
-
     &:last-child {
       margin-bottom: 0;
     }

package/sass/modules/_breadcrumbs.scss

@@ -1,7 +1,5 @@
 @use "./../variables" as *;
-
 @use "./../functions" as *;
-
 @use "./../mixins/list" as *;
 
 .breadcrumbs {
@@ -19,7 +17,6 @@
     position: relative;
 
     &:not(:last-child) {
-
       &::after {
         content: "";
         position: absolute;

package/sass/modules/_button.scss

@@ -1,7 +1,5 @@
-@use "rfs/scss" as *;
-
+@use "./../helpers" as *;
 @use "./../variables" as *;
-
 @use "./../mixins" as *;
 
 .button {
@@ -139,12 +137,10 @@
   }
 
   &.button--link {
-
     @include button-variant-link("primary");
   }
 
   &.button--unstyled {
-
     @include button-variant-unstyled("body-color");
   }
 
@@ -160,32 +156,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

@@ -1,7 +1,5 @@
 @use "sass:color";
-
 @use "./../variables" as *;
-
 @use "./../mixins/group" as *;
 
 .card {
@@ -28,14 +26,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 +85,6 @@
 }
 
 details.card {
-
   & .card--header {
     border-bottom-color: transparent;
 
@@ -100,7 +94,6 @@ details.card {
   }
 
   &[open] {
-
     & .card--header {
       border-bottom-color: var(--card-border-color);
     }
@@ -108,11 +101,9 @@ details.card {
 }
 
 .cards {
-
   @include make-group-column;
 
   &.cards--grouped {
-
     @include make-grouped-column;
   }
 }

package/sass/modules/_close.scss

@@ -1,5 +1,4 @@
 @use "./../variables" as *;
-
 @use "./../functions" as *;
 
 .close {

package/sass/modules/_details.scss

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

package/sass/modules/_dialog.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
-
 @use "./../variables" as *;
 
 .dialog {
@@ -32,7 +31,6 @@
 }
 
 @keyframes open-dialog {
-
   0% {
     opacity: 0;
     transform: translateY(-50vh);

package/sass/modules/_dropdown.scss

@@ -1,5 +1,4 @@
 @use "./../variables" as *;
-
 @use "./../mixins/caret" as *;
 
 .dropdown {
@@ -11,7 +10,6 @@
   &[data-active="true"],
   &:focus,
   &:hover {
-
     & .nav {
       display: flex;
     }

package/sass/modules/_form.scss

@@ -1,11 +1,7 @@
 @use "sass:color";
-
-@use "rfs/scss" as *;
-
+@use "./../helpers" as *;
 @use "./../variables" as *;
-
 @use "./../functions" as *;
-
 @use "./../mixins/breakpoints" as *;
 
 ::placeholder {
@@ -206,7 +202,6 @@ progress,
 .form--span,
 .input--div,
 .input--editor {
-
   @extend %input;
 }
 
@@ -246,7 +241,6 @@ progress,
     }
 
     &.stacked {
-
       & .form--label {
         order: -1;
       }

package/sass/modules/_list.scss

@@ -1,28 +1,20 @@
 @use "sass:color";
-
 @use "./../variables" as *;
-
 @use "./../functions" as *;
-
 @use "./../mixins/list" as *;
 
 .list--unstyled {
-
   @include make-list-unstyled;
 }
 
 .list--inline {
-
   @include make-list-inline;
 }
 
 dl {
-
   @if $enable-margins {
     margin-bottom: var(--spacer);
-  }
-
- @else {
+  } @else {
     margin-bottom: 0;
   }
 
@@ -32,7 +24,6 @@ dl {
 }
 
 .list--group {
-
   @include make-list-unstyled;
 
   & > li {
@@ -55,7 +46,6 @@ dl {
 }
 
 .list--nested {
-
   @include make-list-unstyled;
 
   & > li {
@@ -65,9 +55,7 @@ dl {
 
     @if $enable-margins {
       margin-bottom: var(--spacer);
-    }
-
- @else {
+    } @else {
       margin-bottom: 0;
     }
 

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/_modal.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
-
 @use "./../variables" as *;
 
 .modal {
@@ -30,7 +29,6 @@
 }
 
 @keyframes open-modal {
-
   0% {
     opacity: 0;
     transform: translateY(-50vh);

package/sass/modules/_nav.scss

@@ -1,9 +1,6 @@
 @use "sass:color";
-
 @use "./../variables" as *;
-
 @use "./../mixins/list" as *;
-
 @use "./../mixins/colors" as *;
 
 .nav,
@@ -17,7 +14,6 @@
   @include make-list-unstyled;
 
   & ul {
-
     @include make-list-unstyled;
 
     margin: 0;

package/sass/modules/_pill.scss

@@ -1,11 +1,7 @@
 @use "sass:color";
-
-@use "rfs/scss" as *;
-
+@use "./../helpers" as *;
 @use "./../variables" as *;
-
 @use "./../functions" as *;
-
 @use "./../mixins/group" as *;
 
 .pill {
@@ -53,18 +49,15 @@
 }
 
 .pills {
-
   @include make-group-row;
 
   & .pill {
-
     &:empty {
       align-self: stretch;
     }
   }
 
   &.pills--grouped {
-
     @include make-grouped-row(".pill");
   }
 }

package/sass/modules/_tabs.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
-
 @use "./../variables" as *;
 
 .tabs--wrapper {
@@ -10,9 +9,7 @@
 
   @if $enable-margins {
     margin-bottom: var(--spacer);
-  }
-
- @else {
+  } @else {
     margin-bottom: 0;
   }
 
@@ -73,9 +70,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

@@ -1,13 +1,8 @@
 @use "sass:color";
-
-@use "rfs/scss" as *;
-
+@use "./../helpers" as *;
 @use "./../variables" as *;
-
 @use "./../functions" as *;
-
 @use "./../mixins/colors" as *;
-
 @use "./../mixins/group" as *;
 
 .tag {
@@ -65,18 +60,15 @@
 }
 
 .tags {
-
   @include make-group-row;
 
   & .tag {
-
     &:empty {
       align-self: stretch;
     }
   }
 
   &.tags--grouped {
-
     @include make-grouped-row(".tag");
   }
 }

package/sass/modules/_tile.scss

@@ -1,7 +1,5 @@
 @use "sass:color";
-
 @use "./../variables" as *;
-
 @use "./../mixins/group" as *;
 
 .tile {
@@ -32,14 +30,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 +89,9 @@
 }
 
 .tiles {
-
   @include make-group-column;
 
   &.tiles--grouped {
-
     @include make-grouped-column;
   }
 }

package/sass/modules/_tooltip.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
-
 @use "./../variables" as *;
 
 [data-tooltip] {
@@ -46,14 +45,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 +67,6 @@
   }
 
   &[data-placement="right"] {
-
     &::before {
       border-top: 6px solid transparent;
       border-right: 6px solid hsl(0deg 0% 0% / 75%);
@@ -87,7 +83,6 @@
   }
 
   &[data-placement="bottom"] {
-
     &::before {
       border-top: 0 none;
       border-right: 6px solid transparent;
@@ -104,7 +99,6 @@
   }
 
   &:hover {
-
     &::after,
     &::before {
       visibility: visible;

package/sass/modules/form/_checkbox.scss

@@ -1,13 +1,9 @@
 @use "sass:color";
-
 @use "./../../variables" as *;
-
 @use "./../../mixins/breakpoints" as *;
 
 .form--control-checkbox {
-
   & > * {
-
     &:not(:last-child) {
       margin-right: var(--spacer);
 
@@ -53,7 +49,6 @@
 
     &:indeterminate,
     &[aria-checked="mixed"] {
-
       &::before {
         border: 2px solid var(--white);
         height: 0;
@@ -73,7 +68,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

@@ -1,7 +1,5 @@
 @use "sass:color";
-
 @use "./../../variables" as *;
-
 @use "./../../functions" as *;
 
 .form--control-fancyfile {
@@ -34,7 +32,6 @@
       }
 
       &:empty {
-
         & ~ .form--label {
           border-bottom-right-radius: var(--border-radius-medium);
           border-bottom-left-radius: var(--border-radius-medium);
@@ -76,7 +73,6 @@
     }
 
     &:hover {
-
       & ~ .form--label {
         border-color: var(--input-hover-border-color);
         background-color: var(--gray-2);
@@ -87,7 +83,6 @@
       }
 
       & ~ .file--name {
-
         &:not(:empty) {
           border-color: var(--input-hover-border-color);
         }
@@ -96,26 +91,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 +139,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/_output.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
-
 @use "./../../variables" as *;
 
 output {

package/sass/modules/form/_progress.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
-
 @use "./../../variables" as *;
 
 progress {
@@ -36,7 +35,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%);
       }