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

package/form/RadioField/RadioFieldView.scss

@@ -1,3 +1,5 @@
+@use "../../scss/variables" as vars;
+
 :root {
     --radio-hover-color: #651fff;
 }
@@ -14,11 +16,11 @@ $radio-hover-color: var(--radio-hover-color);
 
     $root: &;
 
-    font-family: $font-family-nunito;
-    color: $text-color;
+    font-family: vars.$font-family-nunito;
+    color: vars.$text-color;
     line-height: 24px;
     font-weight: 400;
-    font-size: $font-size-sm;
+    font-size: vars.$font-size-sm;
 
     &__ellipse {
         position: absolute;
@@ -28,8 +30,8 @@ $radio-hover-color: var(--radio-hover-color);
         display: inline-block;
         width: 12px;
         height: 12px;
-        background-color: $primary;
-        border-radius: $radius-circle;
+        background-color: vars.$primary;
+        border-radius: vars.$radius-circle;
         opacity: 0;
         pointer-events: none;
     }
@@ -58,8 +60,8 @@ $radio-hover-color: var(--radio-hover-color);
         display: inline-block;
         width: 24px;
         height: 24px;
-        border-radius: $radius-circle;
-        border: 1px solid $element-border-color;
+        border-radius: vars.$radius-circle;
+        border: 1px solid vars.$element-border-color;
         margin-right: 8px;
         cursor: pointer;
 
@@ -75,8 +77,8 @@ $radio-hover-color: var(--radio-hover-color);
         position: absolute;
         top: 0;
         left: 0;
-        border: 4px solid $primary-light;
-        border-radius: $radius-circle;
+        border: 4px solid vars.$primary-light;
+        border-radius: vars.$radius-circle;
         pointer-events: none;
         opacity: 0;
 
@@ -86,11 +88,11 @@ $radio-hover-color: var(--radio-hover-color);
     }
 
     &__input:not(:disabled):not(:checked):hover + &__label::before {
-        border-color: $element-border-color-hover;
+        border-color: vars.$element-border-color-hover;
     }
 
     &__input:not(:disabled):not(:checked):active + &__label::before {
-        border-color: $primary;
+        border-color: vars.$primary;
     }
 
     &__input:not(:disabled):focus + &__label::after {
@@ -102,14 +104,14 @@ $radio-hover-color: var(--radio-hover-color);
     }
 
     &__input:checked + &__label::before {
-        border: 1px solid $primary;
+        border: 1px solid vars.$primary;
     }
     &__input:checked + &__label &__ellipse {
         opacity: 1;
     }
 
     &__input:not(:disabled):checked:hover + &__label::before {
-        border-color: $primary-dark;
+        border-color: vars.$primary-dark;
     }
 
     &__input:not(:disabled):checked:hover + &__label &__ellipse {
@@ -118,21 +120,21 @@ $radio-hover-color: var(--radio-hover-color);
     }
 
     &__input:not(:disabled):checked:active + &__label::before {
-        border-color: $primary-light;
+        border-color: vars.$primary-light;
     }
 
     &__input:not(:disabled):checked:active + &__label &__ellipse {
         opacity: 1;
-        background-color: $primary-light;
+        background-color: vars.$primary-light;
     }
 
     &__input:disabled + &__label {
         cursor: not-allowed;
-        color: $element-placeholder-color;
+        color: vars.$element-placeholder-color;
 
         &::before {
             cursor: not-allowed;
-            background-color: $element-background-color-disabled;
+            background-color: vars.$element-background-color-disabled;
         }
     }
 
@@ -140,19 +142,19 @@ $radio-hover-color: var(--radio-hover-color);
         cursor: not-allowed;
 
         background-color: transparent;
-        border-color: $element-background-color-disabled;
+        border-color: vars.$element-background-color-disabled;
     }
 
     &__input:disabled:checked + &__label &__ellipse {
-        background-color: $element-background-color-disabled;
+        background-color: vars.$element-background-color-disabled;
     }
 
     &_hasError {
         #{$root}__input:not(:disabled):not(:checked) + #{$root}__label {
-            color: $danger;
+            color: vars.$danger;
 
             &::before {
-                border-color: $danger;
+                border-color: vars.$danger;
             }
         }
     }
@@ -160,7 +162,7 @@ $radio-hover-color: var(--radio-hover-color);
     &_size {
         &_lg {
             #{$root}__label {
-                font-size: $font-size-lg;
+                font-size: vars.$font-size-lg;
                 line-height: 24px;
 
                 &::before {
@@ -177,7 +179,7 @@ $radio-hover-color: var(--radio-hover-color);
 
         &_md {
             #{$root}__label {
-                font-size: $font-size-base;
+                font-size: vars.$font-size-base;
                 line-height: 22px;
 
                 &::before {
@@ -201,7 +203,7 @@ $radio-hover-color: var(--radio-hover-color);
 
         &_sm {
             #{$root}__label {
-                font-size: $font-size-sm;
+                font-size: vars.$font-size-sm;
                 line-height: 18px;
 
                 &::before {

package/form/RateField/RateFieldView.scss

@@ -1,5 +1,8 @@
+@use "sass:map";
+@use "../../scss/variables" as vars;
+
 $ratefield-sizes: () !default;
-$ratefield-sizes: map-merge(
+$ratefield-sizes: map.merge(
     (
         "sm": (
             "size": 18px,
@@ -17,7 +20,7 @@ $ratefield-sizes: map-merge(
             "size": 24px,
             "badge-gap": 16px,
             "badge-paddings": 4px 8px,
-            "badge-radius": $radius-small,
+            "badge-radius": vars.$radius-small,
         ),
     ),
     $ratefield-sizes
@@ -53,7 +56,7 @@ $ratefield-sizes: map-merge(
 
                 #{$root}__rate-icon {
                     path {
-                        fill: $primary;
+                        fill: vars.$primary;
                     }
                 }
             }
@@ -75,17 +78,17 @@ $ratefield-sizes: map-merge(
     &__rate-icon {
         &.IconView svg {
             path {
-                fill: $gray;
+                fill: vars.$gray;
             }
         }
     }
 
     &__badge {
         display: block;
-        background-color: $primary;
-        color: $white;
-        font-size: $font-size-xs;
-        line-height: $line-height-xs;
+        background-color: vars.$primary;
+        color: vars.$white;
+        font-size: vars.$font-size-xs;
+        line-height: vars.$line-height-xs;
     }
 
     &_size {
@@ -93,21 +96,21 @@ $ratefield-sizes: map-merge(
             &_#{$size} {
                 #{$root}__rate-icon {
                     &.IconView svg {
-                        width: map-get($sizeMap, size);
-                        height: map-get($sizeMap, size);
+                        width: map.get($sizeMap, size);
+                        height: map.get($sizeMap, size);
                     }
                 }
 
                 #{$root}__rate-value-first,
                 #{$root}__rate-value-second {
-                    width: map-get($sizeMap, size);
-                    height: map-get($sizeMap, size);
+                    width: map.get($sizeMap, size);
+                    height: map.get($sizeMap, size);
                 }
 
                 #{$root}__badge {
-                    margin-left: map-get($sizeMap, badge-gap);
-                    padding: map-get($sizeMap, badge-paddings);
-                    border-radius: map-get($sizeMap, badge-radius);
+                    margin-left: map.get($sizeMap, badge-gap);
+                    padding: map.get($sizeMap, badge-paddings);
+                    border-radius: map.get($sizeMap, badge-radius);
                 }
             }
         }
@@ -122,7 +125,7 @@ $ratefield-sizes: map-merge(
         #{$root}__rate-icon {
             &.IconView svg {
                 path {
-                    fill: $light-gray;
+                    fill: vars.$light-gray;
                 }
             }
         }

package/form/SliderField/SliderFieldView.scss

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

package/form/SwitcherField/SwitcherFieldView.scss

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

package/form/TextField/TextFieldView.scss

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

package/form/TimeField/TimeFieldView.scss

@@ -1,24 +1,27 @@
+@use "../../scss/variables" as vars;
+@use '../../scss/mixins';
+
 .TimeFieldView {
     $root: &;
     position: relative;
 
-    @include date-default-input();
+    @include mixins.date-default-input();
 
-    @include date-default-body();
+    @include mixins.date-default-body();
 
-    @include icon-container($root);
+    @include mixins.icon-container($root);
 
-    @include date-default-sizes($root);
+    @include mixins.date-default-sizes($root);
 
-    @include date-default-effects($root);
+    @include mixins.date-default-effects($root);
 
     &__dropdown { 
-        background: $element-background-color;
+        background: vars.$element-background-color;
 
-        @include calendar-border();
+        @include mixins.calendar-border();
     }
 
-    @include date-time-panel($root);
+    @include mixins.date-time-panel($root);
 
     &__panel-container {