@steroidsjs/bootstrap 3.0.0-beta.86 → 3.0.0-beta.87

package/content/Accordion/AccordionItemView.scss

@@ -1,5 +1,5 @@
 @use "sass:map";
-@use "../../scss/variables" as vars;
+@use "../../scss/variables";
 
 :root {
     --accordion-light-background: var(--gray);
@@ -125,7 +125,7 @@ $accordion-chevron-color: var(--accordion-chevron-color);
 
     &_position {
         &_top {
-            border-radius: vars.$radius-large vars.$radius-large 0 0;
+            border-radius: variables.$radius-large variables.$radius-large 0 0;
         }
 
         &_middle {
@@ -133,7 +133,7 @@ $accordion-chevron-color: var(--accordion-chevron-color);
         }
 
         &_bottom {
-            border-radius: 0 0 vars.$radius-large vars.$radius-large;
+            border-radius: 0 0 variables.$radius-large variables.$radius-large;
 
             #{$root}__content {
                 grid-row-start: 1;
@@ -175,7 +175,7 @@ $accordion-chevron-color: var(--accordion-chevron-color);
         width: 24px;
         height: 24px;
         box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
-        border-radius: vars.$radius-small;
+        border-radius: variables.$radius-small;
 
         transform: rotate(0deg);
         transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
@@ -195,7 +195,7 @@ $accordion-chevron-color: var(--accordion-chevron-color);
         padding: 16px;
         align-self: center;
 
-        font-size: vars.$font-size-lg;
+        font-size: variables.$font-size-lg;
         line-height: 24px;
     }
 
@@ -224,7 +224,7 @@ $accordion-chevron-color: var(--accordion-chevron-color);
         overflow: hidden;
         max-height: 0;
         padding: 0 16px;
-        color: vars.$text-color;
+        color: variables.$text-color;
 
         &_visible {
             max-height: 1024px;

package/content/Alert/AlertView.scss

@@ -1,5 +1,5 @@
 @use "sass:map";
-@use "../../scss/variables" as vars;
+@use "../../scss/variables";
 
 :root {
     --alert-text-color: #152536;
@@ -15,24 +15,24 @@ $alert-themes: () !default;
 $alert-themes: map.merge(
     (
         "success": (
-            "background-color": vars.$success-light,
-            "icon-color": vars.$success,
+            "background-color": variables.$success-light,
+            "icon-color": variables.$success,
         ),
         "info": (
-            "background-color": vars.$info-light,
-            "icon-color": vars.$info,
+            "background-color": variables.$info-light,
+            "icon-color": variables.$info,
         ),
         "warning": (
-            "background-color": vars.$warning-light,
-            "icon-color": vars.$warning,
+            "background-color": variables.$warning-light,
+            "icon-color": variables.$warning,
         ),
         "error": (
-            "background-color": vars.$danger-light,
-            "icon-color": vars.$danger,
+            "background-color": variables.$danger-light,
+            "icon-color": variables.$danger,
         ),
         "default": (
-            "background-color": vars.$light-gray,
-            "icon-color": vars.$gray-dark,
+            "background-color": variables.$light-gray,
+            "icon-color": variables.$gray-dark,
         ),
     ),
     $alert-themes
@@ -43,8 +43,8 @@ $alert-themes: map.merge(
 
     position: relative;
     padding: 16px;
-    border-radius: vars.$radius-large;
-    font-family: vars.$font-family-nunito;
+    border-radius: variables.$radius-large;
+    font-family: variables.$font-family-nunito;
 
     &_close-animation {
         animation: hide_slide 0.4s ease-in;
@@ -107,7 +107,7 @@ $alert-themes: map.merge(
     }
 
     &__message {
-        font-size: vars.$font-size-lg;
+        font-size: variables.$font-size-lg;
     }
 
     &__wrapper {
@@ -124,6 +124,6 @@ $alert-themes: map.merge(
     }
 
     &__description {
-        font-size: vars.$font-size-base;
+        font-size: variables.$font-size-base;
     }
 }

package/content/Avatar/AvatarView.scss

@@ -1,4 +1,4 @@
-@use "../../scss/variables" as vars;
+@use "../../scss/variables";
 
 :root {
     --border-width-small: 1px;
@@ -62,7 +62,7 @@ $status-border-color: var(--status-border-color);
                 height: 64px;
                 width: 64px;
                 line-height: 64px;
-                font-size: vars.$font-size-base;
+                font-size: variables.$font-size-base;
             }
             --border-width: var(--border-width-large);
             --status-border-width: var(--status-border-width-large);
@@ -74,7 +74,7 @@ $status-border-color: var(--status-border-color);
                 height: 50px;
                 width: 50px;
                 line-height: 50px;
-                font-size: vars.$font-size-sm;
+                font-size: variables.$font-size-sm;
             }
             --border-width: var(--border-width-medium);
             --status-border-width: var(--status-border-width-medium);
@@ -86,7 +86,7 @@ $status-border-color: var(--status-border-color);
                 height: 32px;
                 width: 32px;
                 line-height: 32px;
-                font-size: vars.$font-size-xs;
+                font-size: variables.$font-size-xs;
             }
             --border-width: var(--border-width-small);
             --status-border-width: var(--status-border-width-small);
@@ -125,17 +125,17 @@ $status-border-color: var(--status-border-color);
             height: var(--status-size);
             z-index: 10;
 
-            color: vars.$success;
+            color: variables.$success;
 
-            border-radius: vars.$radius-circle;
-            background-color: vars.$success;
+            border-radius: variables.$radius-circle;
+            background-color: variables.$success;
 
             border: var(--status-border-width) solid $status-border-color;
         }
     }
 
     &_has-border {
-        @include border(vars.$gradient-blue);
+        @include border(variables.$gradient-blue);
     }
 
     &__body {
@@ -146,12 +146,12 @@ $status-border-color: var(--status-border-color);
         white-space: nowrap;
         vertical-align: middle;
 
-        color: vars.$white;
-        background: vars.$primary;
+        color: variables.$white;
+        background: variables.$primary;
 
         span {
             display: block;
-            font-family: vars.$font-family-nunito;
+            font-family: variables.$font-family-nunito;
             font-weight: 800;
             letter-spacing: 0.1em;
         }

package/content/Badge/BadgeView.scss

@@ -1,4 +1,4 @@
-@use "../../scss/variables" as vars;
+@use "../../scss/variables";
 
 :root {
     --counter-background-color: #ffffff;
@@ -23,9 +23,9 @@ $counter-cross-color: var(--counter-cross-color);
     position: relative;
     width: fit-content;
 
-    font-family: vars.$font-family-nunito;
-    color: vars.$white;
-    font-size: vars.$font-size-xs;
+    font-family: variables.$font-family-nunito;
+    color: variables.$white;
+    font-size: variables.$font-size-xs;
     line-height: 16px;
 
     &__content {
@@ -43,12 +43,12 @@ $counter-cross-color: var(--counter-cross-color);
     }
 
     $badge-types: (
-        "primary": vars.$primary,
-        "secondary": vars.$secondary,
-        "success": vars.$success,
-        "danger": vars.$danger,
-        "warning": vars.$warning,
-        "info": vars.$info,
+        "primary": variables.$primary,
+        "secondary": variables.$secondary,
+        "success": variables.$success,
+        "danger": variables.$danger,
+        "warning": variables.$warning,
+        "info": variables.$info,
     );
 
     @each $type, $color in $badge-types {
@@ -56,7 +56,7 @@ $counter-cross-color: var(--counter-cross-color);
             background-color: $color;
 
             @if ($type == "warning" or $type == "info") {
-                color: vars.$static-text-color;
+                color: variables.$static-text-color;
 
                 #{$root}__close {
                     svg {
@@ -82,11 +82,11 @@ $counter-cross-color: var(--counter-cross-color);
     }
 
     &_squarer {
-        border-radius: vars.$radius-small;
+        border-radius: variables.$radius-small;
     }
 
     &_rounder {
-        border-radius: vars.$radius-xlarge;
+        border-radius: variables.$radius-xlarge;
     }
 
     &_hasClose {
@@ -99,8 +99,8 @@ $counter-cross-color: var(--counter-cross-color);
         border: 1px solid $counter-border-color;
         border-radius: 100px;
 
-        background: vars.$light-gray;
-        color: vars.$text-color;
+        background: variables.$light-gray;
+        color: variables.$text-color;
         padding: 3px 12px;
 
         #{$root}__content {
@@ -119,17 +119,17 @@ $counter-cross-color: var(--counter-cross-color);
 
             margin-right: 4px;
             padding: 0 5.4px;
-            background-color: vars.$white;
+            background-color: variables.$white;
 
-            border-radius: vars.$radius-circle;
+            border-radius: variables.$radius-circle;
             background-color: $counter-background-color;
         }
 
         #{$root}__counter-content {
-            font-weight: vars.$font-weight-sm;
-            font-size: vars.$font-size-xs;
+            font-weight: variables.$font-weight-sm;
+            font-size: variables.$font-size-xs;
             line-height: 16px;
-            color: vars.$text-color;
+            color: variables.$text-color;
         }
 
         #{$root}__close {

package/content/Calendar/CalendarView.scss

@@ -1,4 +1,4 @@
-@use "../../scss/variables" as vars;
+@use "../../scss/variables";
 @use '../../scss/mixins';
 
 :root {
@@ -17,12 +17,12 @@ $calendar-border-color: var(--calendar-border-color);
 .CalendarView {
     $root: &;
 
-    background-color: vars.$element-background-color;
-    border-radius: vars.$radius-large;
+    background-color: variables.$element-background-color;
+    border-radius: variables.$radius-large;
     border: 4px solid $calendar-border-color;
     position: relative;
-    color: vars.$text-color;
-    font-weight: vars.$font-weight-md;
+    color: variables.$text-color;
+    font-weight: variables.$font-weight-md;
     user-select: none;
     padding: 12px;
 
@@ -61,9 +61,9 @@ $calendar-border-color: var(--calendar-border-color);
         color: inherit;
         text-align: center;
         vertical-align: middle;
-        font-size: vars.$font-size-base;
-        line-height: vars.$line-height-base;
-        font-weight: vars.$font-weight-lg;
+        font-size: variables.$font-size-base;
+        line-height: variables.$line-height-base;
+        font-weight: variables.$font-weight-lg;
         text-transform: capitalize;
     }
 
@@ -92,7 +92,7 @@ $calendar-border-color: var(--calendar-border-color);
     .DayPicker-Day {
         position: relative;
         padding: 0;
-        border-radius: vars.$radius-large;
+        border-radius: variables.$radius-large;
 
         vertical-align: middle;
         text-align: center;
@@ -142,14 +142,14 @@ $calendar-border-color: var(--calendar-border-color);
         }
 
         &--outside {
-            color: vars.$element-placeholder-color;
+            color: variables.$element-placeholder-color;
 
         }
 
         &--today {
             #{$root}__day {
-                border: 1px solid vars.$primary;
-                color: vars.$primary;
+                border: 1px solid variables.$primary;
+                color: variables.$primary;
             }
         }
 
@@ -175,12 +175,12 @@ $calendar-border-color: var(--calendar-border-color);
     // Days selection
     // Selected day
     .DayPicker-Day--selected:not(.DayPicker-Day--inRange) {
-        color: vars.$white;
-        background-color: vars.$primary;
+        color: variables.$white;
+        background-color: variables.$primary;
     }
 
     .DayPicker-Day--selected.DayPicker-Day--today .CalendarView__day {
-        color: vars.$white;
+        color: variables.$white;
     }
 
     // Hover
@@ -204,7 +204,7 @@ $calendar-border-color: var(--calendar-border-color);
         width: 34px;
         height: 34px;
         line-height: 30px;
-        border-radius: vars.$radius-large;
+        border-radius: variables.$radius-large;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -213,16 +213,16 @@ $calendar-border-color: var(--calendar-border-color);
     &_ranged {
         .DayPicker-Day {
             &--start {
-                color: vars.$white;
+                color: variables.$white;
 
                 #{$root}__day {
-                    background-color: vars.$primary;
+                    background-color: variables.$primary;
                 }
 
                 &::before {
                     width: 50px;
                     height: 42px;
-                    background-color: vars.$primary-light;
+                    background-color: variables.$primary-light;
                     border-radius: 16px 0px 0px 16px;
                 }
             }
@@ -231,20 +231,20 @@ $calendar-border-color: var(--calendar-border-color);
                 color: #fff;
 
                 #{$root}__day {
-                    background-color: vars.$calendar-primary-color;
+                    background-color: variables.$calendar-primary-color;
                 }
 
                 &::before {
                     width: 46px;
                     height: 42px;
-                    background-color: vars.$primary-light;
+                    background-color: variables.$primary-light;
                     border-radius: 0px 16px 16px 0px;
                 }
             }
 
             &--inRange {
                 &::before {
-                    background-color: vars.$primary-light;
+                    background-color: variables.$primary-light;
                     width: 50px;
                     height: 42px;
                 }
@@ -252,7 +252,7 @@ $calendar-border-color: var(--calendar-border-color);
 
             //Today in range
             &--inRange.DayPicker-Day--selected.DayPicker-Day--today .CalendarView__day {
-                color: vars.$primary;
+                color: variables.$primary;
             }
 
             &--inRange:hover .CalendarView__day {
@@ -263,7 +263,7 @@ $calendar-border-color: var(--calendar-border-color);
             &--outRange {
                 pointer-events: none;
                 &::before {
-                    background-color: vars.$calendar-primary-light-color;
+                    background-color: variables.$calendar-primary-light-color;
                 }
             }
         }

package/content/Calendar/CaptionElement.scss

@@ -1,4 +1,4 @@
-@use "../../scss/variables" as vars;
+@use "../../scss/variables";
 @use '../../scss/mixins';
 
 :root {
@@ -51,14 +51,14 @@ $separator-background-color: var(--separator-background-color);
         cursor: pointer;
         transition: color 0.1s ease-in;
 
-        font-weight: vars.$font-weight-lg;
-        font-size: vars.$font-size-lg;
-        line-height: vars.$line-height-lg;
+        font-weight: variables.$font-weight-lg;
+        font-size: variables.$font-size-lg;
+        line-height: variables.$line-height-lg;
 
         &:hover,
         &:active,
         &:focus {
-            color: vars.$calendar-primary-color;
+            color: variables.$calendar-primary-color;
         }
     }
 
@@ -98,7 +98,7 @@ $separator-background-color: var(--separator-background-color);
         left: 0;
         right: 0;
         bottom: 50px;
-        background-color: vars.$element-background-color;
+        background-color: variables.$element-background-color;
         margin-bottom: 12px;
         max-height: 294px;
 
@@ -120,7 +120,7 @@ $separator-background-color: var(--separator-background-color);
 
         text-align: center;
         background-color: $caption-header-month-background-color;
-        font-weight: vars.$font-weight-lg;
+        font-weight: variables.$font-weight-lg;
 
         &_months {
             position: relative;
@@ -162,7 +162,7 @@ $separator-background-color: var(--separator-background-color);
 
         &-years {
             grid-area: YearsCol;
-            @include mixins.scrollWrapper(294px, 0, vars.$scroll-thumb-color, vars.$scroll-track-color);
+            @include mixins.scrollWrapper(294px, 0, variables.$scroll-thumb-color, variables.$scroll-track-color);
         }
     }
 
@@ -172,19 +172,19 @@ $separator-background-color: var(--separator-background-color);
         }
         display: block;
         width: fit-content;
-        background-color: vars.$element-background-color;
+        background-color: variables.$element-background-color;
         padding: 4px 8px;
         cursor: pointer;
         transition: background-color 0.1s ease-in;
         margin: 0 auto;
-        border-radius: vars.$radius-large;
+        border-radius: variables.$radius-large;
 
         &_selected {
-            background-color: vars.$primary-light;
+            background-color: variables.$primary-light;
         }
 
         &:hover {
-            background-color: vars.$primary-light;
+            background-color: variables.$primary-light;
         }
 
         #{$root}__cell-value {

package/content/Card/CardView.scss

@@ -1,4 +1,4 @@
-@use "../../scss/variables" as vars;
+@use "../../scss/variables";
 
 :root {
     --card-footer-background-color: var(--additional-light-blue);
@@ -15,13 +15,13 @@ $card-dots-color: var(--card-dots-color);
 
 %headTemplate {
     font-weight: 700;
-    font-size: vars.$font-size-lg;
+    font-size: variables.$font-size-lg;
     line-height: 24px;
 }
 
 %subheadTemplate {
     font-weight: 400;
-    font-size: vars.$font-size-xs;
+    font-size: variables.$font-size-xs;
     line-height: 16px;
 }
 
@@ -30,7 +30,7 @@ $card-dots-color: var(--card-dots-color);
     width: 4px;
     height: 4px;
     background-color: $card-dots-color;
-    border-radius: vars.$radius-circle;
+    border-radius: variables.$radius-circle;
 }
 
 .CardView {
@@ -41,10 +41,10 @@ $card-dots-color: var(--card-dots-color);
     overflow: hidden;
     height: fit-content;
 
-    border: 1px solid vars.$element-border-color;
-    border-radius: vars.$radius-large;
-    color: vars.$text-color;
-    background-color: vars.$element-background-color;
+    border: 1px solid variables.$element-border-color;
+    border-radius: variables.$radius-large;
+    color: variables.$text-color;
+    background-color: variables.$element-background-color;
 
     &__header {
         display: flex;
@@ -111,7 +111,7 @@ $card-dots-color: var(--card-dots-color);
         width: 100%;
         height: 227px;
         overflow: hidden;
-        border-radius: vars.$radius-large;
+        border-radius: variables.$radius-large;
 
         img {
             display: block;
@@ -137,7 +137,7 @@ $card-dots-color: var(--card-dots-color);
     }
 
     &__description {
-        font-size: vars.$font-size-base;
+        font-size: variables.$font-size-base;
         line-height: 22px;
     }
 

package/content/Detail/DetailView.scss

@@ -1,4 +1,4 @@
-@use "../../scss/variables" as vars;
+@use "../../scss/variables";
 
 :root {
     --detail-background-color-value: $white;
@@ -14,7 +14,7 @@ $detail-background-color-value: var(--detail-background-color-value);
 $detail-background-color-label: var(--detail-background-color-label);
 
 .DetailView {
-    font-family: vars.$font-family-nunito;
+    font-family: variables.$font-family-nunito;
 
     &__header {
         display: flex;
@@ -24,10 +24,10 @@ $detail-background-color-label: var(--detail-background-color-label);
     }
 
     &__title {
-        color: vars.$black-30;
+        color: variables.$black-30;
         font-size: 56px;
         line-height: 56px;
-        font-weight: vars.$font-weight-lg;
+        font-weight: variables.$font-weight-lg;
     }
 
     &__controls {
@@ -37,7 +37,7 @@ $detail-background-color-label: var(--detail-background-color-label);
     &__table-container {
         display: flex;
         border-radius: 10px;
-        border: 1px solid vars.$gray;
+        border: 1px solid variables.$gray;
         overflow: hidden;
     }
 
@@ -51,33 +51,33 @@ $detail-background-color-label: var(--detail-background-color-label);
     }
 
     &__row:not(:last-child) {
-        border-bottom: 1px solid vars.$gray;
+        border-bottom: 1px solid variables.$gray;
     }
 
     &__label,
     &__value {
         &:not(:last-child) {
-            border-right: 1px solid vars.$gray;
+            border-right: 1px solid variables.$gray;
         }
 
         padding: 12px;
 
-        font-weight: vars.$font-weight-md;
-        font-size: vars.$font-size-sm;
+        font-weight: variables.$font-weight-md;
+        font-size: variables.$font-size-sm;
         line-height: 18px;
-        color: vars.$text-color;
+        color: variables.$text-color;
         background-color: $detail-background-color-value;
         text-align: start;
 
         &_size_md {
             padding: 16px 12px;
-            font-size: vars.$font-size-base;
+            font-size: variables.$font-size-base;
             line-height: 22px;
         }
 
         &_size_lg {
             padding: 18px 12px;
-            font-size: vars.$font-size-lg;
+            font-size: variables.$font-size-lg;
             line-height: 24px;
         }
     }

package/content/DropDown/DropDownView.scss

@@ -1,4 +1,4 @@
-@use "../../scss/variables" as vars;
+@use "../../scss/variables";
 
 :root {
     --dropdown-background: #fff;
@@ -113,7 +113,7 @@ $gap: 12px;
 
     z-index: 1000;
     position: absolute;
-    color: vars.$text-color;
+    color: variables.$text-color;
 
     transform: translate(0, 0);
     opacity: 0;
@@ -122,7 +122,7 @@ $gap: 12px;
     z-index: 4;
     min-width: 200px;
     padding: 12px;
-    border-radius: vars.$radius-large;
+    border-radius: variables.$radius-large;
     background-color: $dropdown-background;
     border: 1px solid $dropdown-border;