claritas-web-framework 8.0.53 → 8.1.0

package/sass/modules/_card.scss

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

package/sass/modules/_close.scss

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

package/sass/modules/_details.scss

@@ -1,10 +1,14 @@
 @use "./../variables" as *;
+
 @use "./../mixins/caret" as *;
 
 details {
+
   @if $enable-margins {
     margin-bottom: var(--spacer);
-  } @else {
+  }
+
+ @else {
     margin-bottom: 0;
   }
 
@@ -41,6 +45,7 @@ details {
     height: auto;
 
     & summary {
+
       @include make-caret-up($left: true, $color: "primary");
     }
   }

package/sass/modules/_dialog.scss

@@ -32,6 +32,7 @@
 }
 
 @keyframes open-dialog {
+
   0% {
     opacity: 0;
     transform: translateY(-50vh);

package/sass/modules/_dropdown.scss

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

package/sass/modules/_form.scss

@@ -3,7 +3,9 @@
 @use "rfs/scss" as *;
 
 @use "./../variables" as *;
+
 @use "./../functions" as *;
+
 @use "./../mixins/breakpoints" as *;
 
 ::placeholder {
@@ -27,7 +29,6 @@
   --input-focus-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l));
   --input-active-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l));
   --input-disabled-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / #{$color-disabled-alpha});
-
   --input-border-color: var(--border-color-main);
   --input-hover-border-color: var(--border-color-hover-main);
   --input-focus-border-color: var(--border-color-hover-main);
@@ -35,18 +36,15 @@
   --input-disabled-border-color: hsl(
     var(--border-color-main-h) var(--border-color-main-s) var(--border-color-main-l) / #{$color-disabled-alpha}
   );
-
   --input-background: hsl(var(--body-color-h) var(--body-color-s) 100%);
   --input-hover-background: hsl(var(--body-color-h) var(--body-color-s) 100%);
   --input-focus-background: hsl(var(--body-color-h) var(--body-color-s) 100%);
   --input-active-background: hsl(var(--body-color-h) var(--body-color-s) 100%);
   --input-disabled-background: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 5%);
-
   --input-detail-background: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
   --input-disabled-detail-background: hsl(
     var(--primary-h) var(--primary-s) var(--primary-l) / #{$color-disabled-alpha}
   );
-
   --input-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
   --input-hover-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
   --input-focus-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 20%);
@@ -60,20 +58,16 @@
   --input-small-padding-y: #{$input-small-padding-y};
   --input-large-padding-x: #{$input-large-padding-x};
   --input-large-padding-y: #{$input-large-padding-y};
-
   --input-border-width: 1px;
   --input-border-style: solid;
-
   --input-border-radius: #{$input-border-radius};
   --input-small-border-radius: #{$input-small-border-radius};
   --input-large-border-radius: #{$input-large-border-radius};
   --input-round-border-radius: #{$input-round-border-radius};
-
   --input-font-family: #{$input-font-family};
   --input-font-weight: #{$input-font-weight};
   --input-line-height: #{$input-line-height};
   --input-white-space: #{$input-white-space};
-
   --input-width: 100%;
   --input-height: auto;
   --input-desktop-width: 100%;
@@ -99,6 +93,7 @@
   position: relative;
 
   @include rfs($input-font-size, --input-font-size);
+
   @include font-size(var(--input-font-size));
 
   @include media-breakpoint-up("desktop") {
@@ -151,6 +146,7 @@
     padding: var(--input-small-padding-y) var(--input-small-padding-x);
 
     @include rfs($input-small-font-size, --input-font-size);
+
     @include font-size(var(--input-font-size));
 
     &:not(.input--rounded) {
@@ -162,6 +158,7 @@
     padding: var(--input-large-padding-y) var(--input-large-padding-x);
 
     @include rfs($input-large-font-size, --input-font-size);
+
     @include font-size(var(--input-font-size));
 
     &:not(.input--rounded) {
@@ -176,7 +173,6 @@
       --input-focus-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
       --input-active-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
       --input-disabled-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / #{$color-disabled-alpha});
-
       --input-border-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
       --input-hover-border-color: hsl(
         var(--#{$key}-h) var(--#{$key}-s) calc(calc(var(--#{$key}-l) / 100) * #{$border-shade-hover} * 100)
@@ -188,13 +184,11 @@
         var(--#{$key}-h) var(--#{$key}-s) calc(calc(var(--#{$key}-l) / 100) * #{$border-shade-hover} * 100)
       );
       --input-disabled-border-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / #{$color-disabled-alpha});
-
       --input-background: hsl(var(--#{$key}-h) var(--#{$key}-s) 100%);
       --input-hover-background: hsl(var(--#{$key}-h) var(--#{$key}-s) 100%);
       --input-focus-background: hsl(var(--#{$key}-h) var(--#{$key}-s) 100%);
       --input-active-background: hsl(var(--#{$key}-h) var(--#{$key}-s) 100%);
       --input-disabled-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 5%);
-
       --input-box-shadow: 0 0 0 0.125em hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 0%);
       --input-hover-box-shadow: 0 0 0 0.125em hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 0%);
       --input-focus-box-shadow: 0 0 0 0.125em hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 20%);
@@ -212,6 +206,7 @@ progress,
 .form--span,
 .input--div,
 .input--editor {
+
   @extend %input;
 }
 
@@ -251,6 +246,7 @@ progress,
     }
 
     &.stacked {
+
       & .form--label {
         order: -1;
       }
@@ -264,7 +260,10 @@ progress,
   --input-focus-background: hsl(var(--body-color-h) var(--body-color-s) 95%);
   --input-active-background: hsl(var(--body-color-h) var(--body-color-s) 95%);
   --input-disabled-background: hsl(var(--body-color-h) var(--body-color-s) 95%);
-
+  --input-border-color: var(--border-color-main);
+  --input-hover-border-color: var(--border-color-main);
+  --input-focus-border-color: var(--border-color-main);
+  --input-active-border-color: var(--border-color-main);
   --input-box-shadow: none;
   --input-hover-box-shadow: none;
   --input-focus-box-shadow: none;

package/sass/modules/_list.scss

@@ -1,21 +1,28 @@
 @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;
   }
 
@@ -25,6 +32,7 @@ dl {
 }
 
 .list--group {
+
   @include make-list-unstyled;
 
   & > li {
@@ -47,6 +55,7 @@ dl {
 }
 
 .list--nested {
+
   @include make-list-unstyled;
 
   & > li {
@@ -56,7 +65,9 @@ dl {
 
     @if $enable-margins {
       margin-bottom: var(--spacer);
-    } @else {
+    }
+
+ @else {
       margin-bottom: 0;
     }
 

package/sass/modules/_loader.scss

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

package/sass/modules/_modal.scss

@@ -30,6 +30,7 @@
 }
 
 @keyframes open-modal {
+
   0% {
     opacity: 0;
     transform: translateY(-50vh);

package/sass/modules/_nav.scss

@@ -1,7 +1,9 @@
 @use "sass:color";
 
 @use "./../variables" as *;
+
 @use "./../mixins/list" as *;
+
 @use "./../mixins/colors" as *;
 
 .nav,
@@ -15,6 +17,7 @@
   @include make-list-unstyled;
 
   & ul {
+
     @include make-list-unstyled;
 
     margin: 0;
@@ -40,10 +43,8 @@
     --nav-item-active-border-color: transparent;
     --nav-item-border-radius: 0;
     --nav-item-line-height: #{$nav-item-line-height};
-
     --nav-item-padding-x: #{$nav-item-padding-x};
     --nav-item-padding-y: #{$nav-item-padding-y};
-
     --nav-item-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l));
     --nav-item-hover-color: hsl(
       var(--body-color-h) var(--body-color-s) calc(var(--body-color-l) - #{$link-shade-percentage})
@@ -58,7 +59,6 @@
       var(--body-color-h) var(--body-color-s) var(--body-color-l) / #{$color-disabled-alpha}
     );
     --nav-label-hover-color: hsl(var(--medium-h) var(--medium-s) var(--medium-l));
-
     --nav-item-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 0%);
     --nav-item-hover-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 30%);
     --nav-item-focus-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 30%);

package/sass/modules/_pill.scss

@@ -3,7 +3,9 @@
 @use "rfs/scss" as *;
 
 @use "./../variables" as *;
+
 @use "./../functions" as *;
+
 @use "./../mixins/group" as *;
 
 .pill {
@@ -19,6 +21,7 @@
   --pill-font-weight: #{$pill-font-weight};
 
   @include rfs($pill-font-size, --pill-font-size);
+
   @include font-size(var(--pill-font-size));
 
   color: var(--pill-color);
@@ -50,15 +53,18 @@
 }
 
 .pills {
+
   @include make-group-row;
 
   & .pill {
+
     &:empty {
       align-self: stretch;
     }
   }
 
   &.pills--grouped {
+
     @include make-grouped-row(".pill");
   }
 }

package/sass/modules/_table.scss

@@ -13,6 +13,7 @@
   }
 
   & thead {
+
     & tr {
       background-color: $table-head-background-color;
 
@@ -23,13 +24,16 @@
   }
 
   & tbody {
+
     & tr {
       background-color: $table-background-color;
     }
   }
 
   & tfoot {
+
     & tr {
+
       & > * {
         border-width: $table-th-border-width 0 $table-cell-border-width 0;
       }
@@ -37,6 +41,7 @@
   }
 
   &.table--small {
+
     & td,
     & th {
       padding: $table-small-cell-padding-y $table-small-cell-padding-x;
@@ -44,13 +49,16 @@
   }
 
   &.table--bordered {
+
     & td,
     & th {
       border-width: $table-cell-border-width;
     }
 
     & thead {
+
       & tr {
+
         & > * {
           border-width: $table-cell-border-width $table-cell-border-width $table-th-border-width
             $table-cell-border-width;
@@ -59,7 +67,9 @@
     }
 
     & tfoot {
+
       & tr {
+
         & > * {
           border-width: $table-th-border-width $table-cell-border-width $table-cell-border-width
             $table-cell-border-width;
@@ -69,8 +79,11 @@
   }
 
   &.table--striped {
+
     & tbody {
+
       & tr {
+
         &:nth-of-type(even) {
           background-color: hsl(var(--dark-h) var(--dark-s) var(--dark-l) / #{$table-striped-background-opacity});
         }
@@ -83,9 +96,13 @@
   }
 
   &.table--hover {
+
     & tbody {
+
       & tr {
+
         &:hover {
+
           & > * {
             background-color: hsl(var(--dark-h) var(--dark-s) var(--dark-l) / #{$table-striped-background-opacity});
           }

package/sass/modules/_tabs.scss

@@ -10,7 +10,9 @@
 
   @if $enable-margins {
     margin-bottom: var(--spacer);
-  } @else {
+  }
+
+ @else {
     margin-bottom: 0;
   }
 
@@ -71,7 +73,9 @@
   }
 
   &.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

@@ -3,8 +3,11 @@
 @use "rfs/scss" as *;
 
 @use "./../variables" as *;
+
 @use "./../functions" as *;
+
 @use "./../mixins/colors" as *;
+
 @use "./../mixins/group" as *;
 
 .tag {
@@ -22,6 +25,7 @@
   --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);
@@ -61,15 +65,18 @@
 }
 
 .tags {
+
   @include make-group-row;
 
   & .tag {
+
     &:empty {
       align-self: stretch;
     }
   }
 
   &.tags--grouped {
+
     @include make-grouped-row(".tag");
   }
 }

package/sass/modules/_tile.scss

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

package/sass/modules/_tooltip.scss

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

package/sass/modules/form/_checkbox.scss

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