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

package/form/SliderField/SliderFieldView.scss

@@ -1,4 +1,4 @@
-@use "../../scss/variables" as vars;
+@use "../../scss/variables";
 
 :root {
     --slider-background: #dbe2e6;
@@ -44,7 +44,7 @@ $slider-dot-active-border-color:  var(--slider-dot-active-border-color);
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     }
     .rc-slider-rail {
-        background-color: vars.$primary;
+        background-color: variables.$primary;
     }
 
     .rc-slider * {
@@ -56,7 +56,7 @@ $slider-dot-active-border-color:  var(--slider-dot-active-border-color);
         left: 0;
         height: 8px;
         border-radius: 6px;
-        background-color: vars.$primary;
+        background-color: variables.$primary;
         z-index: 1;
     }
     .rc-slider-handle {
@@ -67,7 +67,7 @@ $slider-dot-active-border-color:  var(--slider-dot-active-border-color);
         height: 24px;
         cursor: pointer;
         border-radius: 50%;
-        background-color: vars.$primary;
+        background-color: variables.$primary;
         z-index: 2;
         outline: none;
 
@@ -83,7 +83,7 @@ $slider-dot-active-border-color:  var(--slider-dot-active-border-color);
             left: 0;
             right: 0;
             bottom: 0;
-            border: 4px solid vars.$primary-light;
+            border: 4px solid variables.$primary-light;
             transform: translate(-4px, -4px);
             border-radius: 50%;
             pointer-events: none;
@@ -96,7 +96,7 @@ $slider-dot-active-border-color:  var(--slider-dot-active-border-color);
         }
 
         &:active {
-            background-color: vars.$primary-dark;
+            background-color: variables.$primary-dark;
         }
     }
     .rc-slider-mark {
@@ -105,8 +105,8 @@ $slider-dot-active-border-color:  var(--slider-dot-active-border-color);
         top: 20px;
         left: 0;
         width: 100%;
-        font-size: vars.$font-size-xs;
-        line-height: vars.$line-height-xs;
+        font-size: variables.$font-size-xs;
+        line-height: variables.$line-height-xs;
         z-index: 3;
     }
     .rc-slider-mark-text {
@@ -116,9 +116,9 @@ $slider-dot-active-border-color:  var(--slider-dot-active-border-color);
         vertical-align: middle;
         text-align: center;
         cursor: pointer;
-        background-color: vars.$element-background-color;
-        color: vars.$text-color;
-        border: 1px solid vars.$element-border-color;
+        background-color: variables.$element-background-color;
+        color: variables.$text-color;
+        border: 1px solid variables.$element-border-color;
         border-radius: 21px;
     }
     .rc-slider-step {
@@ -333,13 +333,13 @@ $slider-dot-active-border-color:  var(--slider-dot-active-border-color);
     }
     .rc-slider-tooltip-inner {
         padding: 8px;
-        font-size: vars.$font-size-lg;
-        line-height: vars.$line-height-base;
-        color: vars.$text-color;
-        border: 1px solid vars.$gray;
+        font-size: variables.$font-size-lg;
+        line-height: variables.$line-height-base;
+        color: variables.$text-color;
+        border: 1px solid variables.$gray;
         text-align: center;
         text-decoration: none;
-        background-color: vars.$element-background-color;
+        background-color: variables.$element-background-color;
         border-radius: 21px;
     }
 }

package/form/SwitcherField/SwitcherFieldView.scss

@@ -1,5 +1,5 @@
 @use "sass:map";
-@use "../../scss/variables" as vars;
+@use "../../scss/variables";
 
 :root {
     --switcher-dot-disabled-color: #dbe2e6;
@@ -40,8 +40,8 @@ $background-color-transition-timing: 150ms;
                     "dotSize": 18px,
                     "dotTranslateDefault": translateY(-50%) translateX(4px),
                     "dotTranslateActive": translateY(-50%) translateX(16px),
-                    "font-size": vars.$font-size-lg,
-                    "line-height": vars.$line-height-lg,
+                    "font-size": variables.$font-size-lg,
+                    "line-height": variables.$line-height-lg,
                 ),
                 "md": (
                     "width": 34px,
@@ -49,8 +49,8 @@ $background-color-transition-timing: 150ms;
                     "dotSize": 14px,
                     "dotTranslateDefault": translateY(-50%) translateX(3px),
                     "dotTranslateActive": translateY(-50%) translateX(15px),
-                    "font-size": vars.$font-size-base,
-                    "line-height": vars.$line-height-base,
+                    "font-size": variables.$font-size-base,
+                    "line-height": variables.$line-height-base,
                 ),
                 "sm": (
                     "width": 28px,
@@ -58,8 +58,8 @@ $background-color-transition-timing: 150ms;
                     "dotSize": 12px,
                     "dotTranslateDefault": translateY(-50%) translateX(2px),
                     "dotTranslateActive": translateY(-50%) translateX(12px),
-                    "font-size": vars.$font-size-sm,
-                    "line-height": vars.$line-height-sm,
+                    "font-size": variables.$font-size-sm,
+                    "line-height": variables.$line-height-sm,
                 ),
             ),
             $sizes
@@ -105,26 +105,26 @@ $background-color-transition-timing: 150ms;
         bottom: 0;
 
         &:checked + #{$root}__slider {
-            background-color: vars.$primary;
+            background-color: variables.$primary;
             border-color: transparent;
 
             &::before {
-                background-color: vars.$white;
+                background-color: variables.$white;
             }
 
             &::after {
-                border-color: vars.$primary-light;
+                border-color: variables.$primary-light;
             }
         }
 
         &:hover:not(:checked):not(:disabled) + #{$root}__slider {
             &::before {
-                background-color: vars.$gray-dark;
+                background-color: variables.$gray-dark;
             }
         }
 
         &:checked:hover + #{$root}__slider {
-            background-color: vars.$primary-dark;
+            background-color: variables.$primary-dark;
         }
 
         &:focus:not(:active) + #{$root}__slider {
@@ -138,7 +138,7 @@ $background-color-transition-timing: 150ms;
         }
 
         &:disabled ~ #{$root}__label {
-            color: vars.$gray;
+            color: variables.$gray;
         }
 
         &:disabled + #{$root}__slider {
@@ -155,7 +155,7 @@ $background-color-transition-timing: 150ms;
         height: 100%;
         position: relative;
         display: inline-block;
-        border: 1px solid vars.$gray;
+        border: 1px solid variables.$gray;
         border-radius: 200px;
         transition: background-color $background-color-transition-timing ease-in-out;
 
@@ -170,7 +170,7 @@ $background-color-transition-timing: 150ms;
             height: calc(100% + 2px);
             width: calc(100% + 2px);
             border-radius: inherit;
-            border: 4px solid vars.$gray;
+            border: 4px solid variables.$gray;
             transform: translateX(-5px) translateY(-5px);
             opacity: 0;
             pointer-events: none;
@@ -181,13 +181,13 @@ $background-color-transition-timing: 150ms;
             content: "";
             display: inline-block;
             top: 50%;
-            border-radius: vars.$radius-circle;
-            background-color: vars.$gray;
+            border-radius: variables.$radius-circle;
+            background-color: variables.$gray;
             transition: transform 100ms ease-in-out, background-color $background-color-transition-timing ease-in-out;
         }
     }
 
     &__label {
-        color: vars.$text-color;
+        color: variables.$text-color;
     }
 }

package/form/TextField/TextFieldView.scss

@@ -1,4 +1,4 @@
-@use "../../scss/variables" as vars;
+@use "../../scss/variables";
 
 :root {
     --text-field-disabled-clear-color: #e5e9eb;
@@ -22,11 +22,11 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
     $root: &;
 
     position: relative;
-    font-family: vars.$font-family-nunito;
+    font-family: variables.$font-family-nunito;
 
     &_hasErrors {
         #{$root}__textarea {
-            border-color: vars.$danger;
+            border-color: variables.$danger;
         }
     }
 
@@ -44,7 +44,7 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
 
         svg {
             path {
-                stroke: vars.$element-background-color-disabled;
+                stroke: variables.$element-background-color-disabled;
                 stroke-width: 1.5px;
             }
         }
@@ -60,43 +60,43 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
         min-height: 80px;
         height: 80px;
 
-        border-radius: vars.$radius-small;
-        background-color: vars.$element-field-background-color;
+        border-radius: variables.$radius-small;
+        background-color: variables.$element-field-background-color;
 
         padding: 5px 40px 8px 8px;
 
-        font-size: vars.$font-size-sm;
+        font-size: variables.$font-size-sm;
         font-weight: 400;
         line-height: 24px;
         z-index: 2;
         outline: none;
-        color: vars.$text-color;
-        border: 1px solid vars.$element-border-color;
+        color: variables.$text-color;
+        border: 1px solid variables.$element-border-color;
 
         &::placeholder {
-            color: vars.$element-placeholder-color;
+            color: variables.$element-placeholder-color;
         }
 
         &:hover {
-            border-color: vars.$element-border-color-hover;
+            border-color: variables.$element-border-color-hover;
         }
 
         &:focus {
-            border: 4px solid vars.$primary-light;
+            border: 4px solid variables.$primary-light;
         }
 
         &:active {
-            border: 1px solid vars.$primary;
+            border: 1px solid variables.$primary;
         }
 
         &:disabled {
-            background-color: vars.$element-background-color-disabled;
+            background-color: variables.$element-background-color-disabled;
             border: none;
             resize: none;
         }
 
         &:disabled::placeholder {
-            color: vars.$element-placeholder-color-disabled;
+            color: variables.$element-placeholder-color-disabled;
         }
 
         &:disabled + #{$root}__clear {
@@ -117,8 +117,8 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
             #{$root}__textarea {
                 height: 130px;
                 min-height: 130px;
-                border-radius: vars.$radius-large;
-                font-size: vars.$font-size-lg;
+                border-radius: variables.$radius-large;
+                font-size: variables.$font-size-lg;
             }
         }
 
@@ -126,16 +126,16 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
             #{$root}__textarea {
                 height: 100px;
                 min-height: 100px;
-                border-radius: vars.$radius-large;
-                font-size: vars.$font-size-base;
+                border-radius: variables.$radius-large;
+                font-size: variables.$font-size-base;
             }
         }
 
         &_sm {
             #{$root}__textarea {
                 height: 80px;
-                border-radius: vars.$radius-small;
-                font-size: vars.$font-size-sm;
+                border-radius: variables.$radius-small;
+                font-size: variables.$font-size-sm;
             }
         }
     }

package/form/TimeField/TimeFieldView.scss

@@ -1,4 +1,4 @@
-@use "../../scss/variables" as vars;
+@use "../../scss/variables";
 @use '../../scss/mixins';
 
 .TimeFieldView {
@@ -16,7 +16,7 @@
     @include mixins.date-default-effects($root);
 
     &__dropdown { 
-        background: vars.$element-background-color;
+        background: variables.$element-background-color;
 
         @include mixins.calendar-border();
     }

package/form/TimeField/TimePanelView.scss

@@ -1,4 +1,4 @@
-@use "../../scss/variables" as vars;
+@use "../../scss/variables";
 @use '../../scss/mixins';
 
 .TimePanelView {
@@ -11,14 +11,14 @@
         align-items: center;
         justify-content: center;
 
-        border-left: 1px solid vars.$border-default;
-        border-bottom: 1px solid vars.$border-default;
+        border-left: 1px solid variables.$border-default;
+        border-bottom: 1px solid variables.$border-default;
     }
 
     &__body {
         display: flex;
         flex-flow: row nowrap;
-        border-radius: vars.$input-border-radius;
+        border-radius: variables.$input-border-radius;
     }
 
     &__column {
@@ -27,7 +27,7 @@
         list-style: none;
         padding: 0;
         margin: 0;
-        @include mixins.scrollWrapper(298px, 0, vars.$scroll-thumb-color, vars.$scroll-track-color);
+        @include mixins.scrollWrapper(298px, 0, variables.$scroll-thumb-color, variables.$scroll-track-color);
     }
 
     &__cell {
@@ -35,12 +35,12 @@
         cursor: pointer;
 
         &_selected {
-            background-color: vars.$primary-light;
+            background-color: variables.$primary-light;
         }
 
         transition: background-color 0.1s ease-in;
         &:hover {
-            background-color: vars.$back-disabled;
+            background-color: variables.$back-disabled;
         }
     }
 
@@ -59,23 +59,23 @@
         border: none;
 
         &_now {
-            color: vars.$primary;
+            color: variables.$primary;
             background-color: unset;
 
             transition: color 0.1s ease-in;
             &:hover {
-                color: vars.$primary-dark;
+                color: variables.$primary-dark;
             }
         }
 
         &_ok {
             color: #fff;
             border-radius: 4px;
-            background-color: vars.$primary;
+            background-color: variables.$primary;
 
             transition: background-color 0.1s ease-in;
             &:hover {
-                background-color: vars.$primary-dark;
+                background-color: variables.$primary-dark;
             }
         }
     }

package/form/TimeRangeField/TimeRangeFieldView.scss

@@ -1,5 +1,5 @@
 @use "sass:map";
-@use "../../scss/variables" as vars;
+@use "../../scss/variables";
 @use '../../scss/mixins';
 
 .TimeRangeFieldView {
@@ -40,7 +40,7 @@
     @include mixins.date-time-panel($root);
 
     &__dropdown { 
-        background-color: vars.$element-background-color;
+        background-color: variables.$element-background-color;
 
         display: flex;
     }

package/layout/Header/HeaderView.scss

@@ -1,11 +1,11 @@
-@use "../../scss/variables" as vars;
+@use "../../scss/variables";
 
 .HeaderView {
     width: 1000px;
     display: flex;
     align-items: center;
-    background-color: vars.$element-background-color;
-    border-bottom: 1px solid vars.$element-placeholder-color-disabled;
+    background-color: variables.$element-background-color;
+    border-bottom: 1px solid variables.$element-placeholder-color-disabled;
     position: relative;
 
     &_size {
@@ -36,10 +36,10 @@
         }
 
         &-title {
-            color: vars.$text-color;
-            font-weight: vars.$font-weight-lg;
-            font-size: vars.$font-size-base;
-            line-height: vars.$line-height-base;
+            color: variables.$text-color;
+            font-weight: variables.$font-weight-lg;
+            font-size: variables.$font-size-base;
+            line-height: variables.$line-height-base;
         }
     }
 
@@ -66,9 +66,9 @@
 
         &-name.TextView_type_body {
             margin: 0;
-            font-weight: vars.$font-weight-lg;
-            font-size: vars.$font-size-base;
-            line-height: vars.$line-height-base;
+            font-weight: variables.$font-weight-lg;
+            font-size: variables.$font-size-base;
+            line-height: variables.$line-height-base;
 
             @media (max-width: 360px) {
                 display: none;
@@ -98,7 +98,7 @@
             position: absolute;
             top: 100%;
             left: 0;
-            background-color: vars.$white;
+            background-color: variables.$white;
             opacity: 0;
             pointer-events: none;
             transition: opacity 150ms ease-in-out;
@@ -108,7 +108,7 @@
                 pointer-events: all;
             }
             .ButtonView__text {
-                color: vars.$element-placeholder-color;
+                color: variables.$element-placeholder-color;
             }
         }
 
@@ -116,7 +116,7 @@
             width: 24px;
             height: 24px;
             svg path {
-                stroke: vars.$icon-color;
+                stroke: variables.$icon-color;
             }
         }
 
@@ -126,7 +126,7 @@
             display: flex;
             row-gap: 16px;
             align-items: flex-start;
-            background-color: vars.$element-background-color;
+            background-color: variables.$element-background-color;
         }
     }
 

package/layout/Loader/LoaderView.scss

@@ -1,4 +1,4 @@
-@use "../../scss/variables" as vars;
+@use "../../scss/variables";
 @use '../../scss/mixins';
 
 :root {
@@ -67,7 +67,7 @@ $gradient-color-primary-second: var(--gradient-color-primary-second);
     }
   }
 
-  @each $colorName, $colorMap in vars.$color-themes {
+  @each $colorName, $colorMap in variables.$color-themes {
     &_color_#{$colorName} {
         @include mixins.loader-color($colorMap, $colorName, $root);
     }

package/layout/ProgressBar/CircleProgressBarView.scss

@@ -1,4 +1,4 @@
-@use "../../scss/variables" as vars;
+@use "../../scss/variables";
 
 .CircleProgressBarView{
   $root: &;
@@ -86,31 +86,31 @@
   &_status{
     &_success{
       #{$root}__progressCircle{
-        stroke: vars.$success;
+        stroke: variables.$success;
       }
 
       #{$root}__content{
         svg{
-          fill: vars.$success;
+          fill: variables.$success;
         }
       }
     }
 
     &_exception{
       #{$root}__progressCircle{
-        stroke: vars.$danger;
+        stroke: variables.$danger;
       }
 
       #{$root}__content{
         svg{
-          fill: vars.$danger;
+          fill: variables.$danger;
         }
       }
     }
 
     &_normal{
       #{$root}__progressCircle{
-        stroke: vars.$primary;
+        stroke: variables.$primary;
       }
     }
   }
@@ -125,7 +125,7 @@
 
 
     #{$root}__emptyCircle{
-      stroke: vars.$back-disabled;
+      stroke: variables.$back-disabled;
       stroke-dashoffset: 0;
     }
 
@@ -144,7 +144,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: vars.$secondary-dark;
+    color: variables.$secondary-dark;
     font-weight: bold;
     transform: rotate(90deg);
   }

package/layout/ProgressBar/LineProgressBarView.scss

@@ -1,4 +1,4 @@
-@use "../../scss/variables" as vars;
+@use "../../scss/variables";
 
 .LineProgressBarView{
   $root: &;
@@ -37,27 +37,27 @@
   &_status{
     &_success{
       #{$root}__progressLine{
-        background-color: vars.$success;
+        background-color: variables.$success;
       }
 
       svg{
-          fill: vars.$success;
+          fill: variables.$success;
       }
     }
 
     &_exception{
       #{$root}__progressLine{
-        background-color: vars.$danger;
+        background-color: variables.$danger;
       }
 
       svg{
-        fill: vars.$danger;
+        fill: variables.$danger;
       }
     }
 
     &_normal{
       #{$root}__progressLine{
-        background-color: vars.$primary;
+        background-color: variables.$primary;
       }
     }
 
@@ -65,7 +65,7 @@
 
   &__emptyLine{
     position: relative;
-    background-color: vars.$back-disabled;
+    background-color: variables.$back-disabled;
     border-radius: 20px;
   }
 
@@ -87,7 +87,7 @@
         content: "";
         position: absolute;
         transform: translateX(-100%);
-        background: linear-gradient(90deg, transparent, rgba(vars.$white, 0.5), transparent);
+        background: linear-gradient(90deg, transparent, rgba(variables.$white, 0.5), transparent);
         animation: wave-animation 1.6s linear 0.5s infinite;
     }
 
@@ -111,7 +111,7 @@
   }
 
   &__text{
-    color: vars.$graphite;
+    color: variables.$graphite;
     margin-left: 8px;
   }
 }

package/layout/Sidebar/FooterIcons/FooterIcons.scss

@@ -1,4 +1,4 @@
-@use "style/variables" as vars;
+@use "style/variables";
 
 :root {
     --footer-shrink-icon-color: #626262;