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

package/form/DateRangeField/DateRangeFieldView.scss

@@ -1,15 +1,29 @@
+@use "../../scss/variables" as vars;
+@use '../../scss/mixins';
+
+:root {
+    --date-range-separator-color: rgba(0, 0, 0, 0.1);
+}
+
+html[data-theme="dark"] {
+    --date-range-separator-color: rgba(255, 255, 255, 0.1);
+}
+
+$date-range-separator-color: var(--date-range-separator-color);
+
+
 .DateRangeFieldView {
     $root: &;
 
-    @include date-range-body($root);
-    @include icon-container($root);
-    @include date-range-input();
+    @include mixins.date-range-body($root);
+    @include mixins.icon-container($root);
+    @include mixins.date-range-input();
 
-    @include date-range-sizes($root);
+    @include mixins.date-range-sizes($root);
 
     &__split {
-        background: $element-background-color;
-        @include calendar-border();
+        background: vars.$element-background-color;
+        @include mixins.calendar-border();
 
         .DayPicker-Months {
             position: relative;
@@ -32,6 +46,6 @@
         }
     }
 
-    @include date-range-effects($root);
+    @include mixins.date-range-effects($root);
 
 }

package/form/DateTimeField/DateTimeFieldView.scss

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

package/form/DateTimeRangeField/DateTimeRangeFieldView.scss

@@ -1,9 +1,14 @@
+@use "sass:map";
+@use "../../scss/variables" as vars;
+@use '../../scss/mixins';
+
+
 .DateTimeRangeFieldView {
     $root: &;
 
-    @include icon-container($root);
+    @include mixins.icon-container($root);
 
-    @include date-range-body($root);
+    @include mixins.date-range-body($root);
 
     &__body {
         > * {
@@ -14,12 +19,12 @@
     }
 
     &_size {
-        @each $size, $size-map in $date-sizes {
+        @each $size, $size-map in mixins.$date-sizes {
             &_#{$size} {
                 #{$root}__body {
                     #{$root}__input {
                         &:nth-child(1) {
-                            width: calc(map-get($size-map, first-input-width) + 60px);
+                            width: calc(map.get($size-map, first-input-width) + 60px);
                         }
                     }
                 }
@@ -27,16 +32,16 @@
         }
     }
 
-    @include date-range-input();
+    @include mixins.date-range-input();
 
-    @include date-range-sizes($root);
+    @include mixins.date-range-sizes($root);
 
-    @include date-range-effects($root);
+    @include mixins.date-range-effects($root);
 
-    @include date-time-panel($root);
+    @include mixins.date-time-panel($root);
 
     &__dropdown { 
-        @include calendar-border();
-        background-color: $element-background-color;
+        @include mixins.calendar-border();
+        background-color: vars.$element-background-color;
     }
 }

package/form/DropDownField/DropDownFieldView.scss

@@ -1,3 +1,7 @@
+@use "sass:map";
+@use "../../scss/variables" as vars;
+@use '../../scss/mixins';
+
 :root {
     --basic-color: #eef1f2;
     --basic-focus-color: #f5f8fa;
@@ -18,8 +22,8 @@ html[data-theme="dark"] {
     --basic-color: #333646;
     --basic-focus-color: #adaab3;
     --basic-active-color: #4e4f57;
-    --chevron-background-color: #16171B;
-    --chevron-background-color-outline: #191B1F;
+    --chevron-background-color: #16171b;
+    --chevron-background-color-outline: #191b1f;
     --chevron-inner-color: #ffffff;
     --drop-down-border-color: #595959;
     --search-color: #adacac;
@@ -45,64 +49,64 @@ $drop-down-item-select-background-color: var(--drop-down-item-select-background-
 $drop-down-item-hover-background-color: var(--drop-down-item-hover-background-color);
 
 $drop-down-color-themes: () !default;
-$drop-down-color-themes: map-merge(
+$drop-down-color-themes: map.merge(
     (
         "basic": (
             "background-color": $basic-color,
-            "hover-color": $element-border-color-hover,
+            "hover-color": vars.$element-border-color-hover,
             "focus-color": $basic-focus-color,
-            "active-color": $basic-active-color,
+            "active-color": $basic-active-color
         ),
         "primary": (
-            "background-color": $primary,
-            "hover-color": $primary-dark,
-            "focus-color": $primary-light,
-            "active-color": $primary-dark,
+            "background-color": vars.$primary,
+            "hover-color": vars.$primary-dark,
+            "focus-color": vars.$primary-light,
+            "active-color": vars.$primary-dark
         ),
         "secondary": (
-            "background-color": $secondary,
-            "hover-color": $secondary-dark,
-            "focus-color": $secondary-light,
-            "active-color": $secondary-dark,
+            "background-color": vars.$secondary,
+            "hover-color": vars.$secondary-dark,
+            "focus-color": vars.$secondary-light,
+            "active-color": vars.$secondary-dark
         ),
         "warning": (
-            "background-color": $warning,
-            "hover-color": $warning-dark,
-            "focus-color": $warning-light,
-            "active-color": $warning-dark,
+            "background-color": vars.$warning,
+            "hover-color": vars.$warning-dark,
+            "focus-color": vars.$warning-light,
+            "active-color": vars.$warning-dark
         ),
         "danger": (
-            "background-color": $danger,
-            "hover-color": $danger-dark,
-            "focus-color": $danger-light,
-            "active-color": $danger-dark,
+            "background-color": vars.$danger,
+            "hover-color": vars.$danger-dark,
+            "focus-color": vars.$danger-light,
+            "active-color": vars.$danger-dark
         ),
         "info": (
-            "background-color": $info,
-            "hover-color": $info-dark,
-            "focus-color": $info-light,
-            "active-color": $info-dark,
+            "background-color": vars.$info,
+            "hover-color": vars.$info-dark,
+            "focus-color": vars.$info-light,
+            "active-color": vars.$info-dark
         ),
         "success": (
-            "background-color": $success,
-            "hover-color": $success-dark,
-            "focus-color": $success-light,
-            "active-color": $success-dark,
-        ),
+            "background-color": vars.$success,
+            "hover-color": vars.$success-dark,
+            "focus-color": vars.$success-light,
+            "active-color": vars.$success-dark
+        )
     ),
     $drop-down-color-themes
 );
 
 @mixin dropDownTheme($colorMap, $root, $colorType) {
-    background-color: map-get($colorMap, background-color);
-    color: $text-color;
+    background-color: map.get($colorMap, background-color);
+    color: vars.$text-color;
 
     &::before {
-        border-color: map-get($colorMap, focus-color);
+        border-color: map.get($colorMap, focus-color);
     }
 
     &:not(:focus):hover {
-        background-color: map-get($colorMap, hover-color);
+        background-color: map.get($colorMap, hover-color);
     }
 
     &:not(:active):focus-within {
@@ -112,7 +116,7 @@ $drop-down-color-themes: map-merge(
     }
 
     &:active {
-        background-color: map-get($colorMap, hover-color);
+        background-color: map.get($colorMap, hover-color);
     }
 
     #{$root}__icon-chevron {
@@ -130,7 +134,7 @@ $drop-down-color-themes: map-merge(
         color: #ffffff;
 
         @if ($colorType == "basic") {
-            color: $text-color;
+            color: vars.$text-color;
         }
 
         @if ($colorType == "warning" or $colorType == "info") {
@@ -140,16 +144,16 @@ $drop-down-color-themes: map-merge(
 }
 
 @mixin dropDownOutlineTheme($colorMap, $root) {
-    background-color: $element-field-background-color;
-    border: 1px solid map-get($colorMap, background-color);
-    color: $text-color;
+    background-color: vars.$element-field-background-color;
+    border: 1px solid map.get($colorMap, background-color);
+    color: vars.$text-color;
 
     &::before {
-        border-color: map-get($colorMap, focus-color);
+        border-color: map.get($colorMap, focus-color);
     }
 
     &:not(:focus):hover {
-        border-color: map-get($colorMap, active-color);
+        border-color: map.get($colorMap, active-color);
     }
 
     &:not(:active):focus-within {
@@ -160,7 +164,7 @@ $drop-down-color-themes: map-merge(
     }
 
     &:active {
-        border-color: map-get($colorMap, active-color);
+        border-color: map.get($colorMap, active-color);
     }
 
     #{$root}__icon-chevron {
@@ -198,35 +202,35 @@ $drop-down-color-themes: map-merge(
     }
 
     $sizes: () !default;
-    $sizes: map-merge(
+    $sizes: map.merge(
         (
             "lg": (
-                "border-radius": $radius-large,
-                "height": $input-height-lg,
+                "border-radius": vars.$radius-large,
+                "height": vars.$input-height-lg,
                 "beforeTransform": translateX(-4px) translateY(-4px),
                 "beforeRadius": 16px,
                 "selectedItemsPadding": 16px,
-                "font-size": $font-size-lg,
-                "line-height": 24px,
+                "font-size": vars.$font-size-lg,
+                "line-height": 24px
             ),
             "md": (
-                "border-radius": $radius-large,
-                "height": $input-height-md,
+                "border-radius": vars.$radius-large,
+                "height": vars.$input-height-md,
                 "beforeTransform": translateX(-4px) translateY(-4px),
                 "beforeRadius": 16px,
                 "selectedItemsPadding": 12px,
-                "font-size": $font-size-base,
-                "line-height": 22px,
+                "font-size": vars.$font-size-base,
+                "line-height": 22px
             ),
             "sm": (
-                "border-radius": $radius-small,
-                "height": $input-height-sm,
+                "border-radius": vars.$radius-small,
+                "height": vars.$input-height-sm,
                 "beforeTransform": translateX(-4px) translateY(-4px),
                 "beforeRadius": 12px,
                 "selectedItemsPadding": 8px,
-                "font-size": $font-size-sm,
-                "line-height": 18px,
-            ),
+                "font-size": vars.$font-size-sm,
+                "line-height": 18px
+            )
         ),
         $sizes
     );
@@ -234,25 +238,25 @@ $drop-down-color-themes: map-merge(
     &_size {
         @each $size, $sizeMap in $sizes {
             &_#{$size} {
-                border-radius: map-get($sizeMap, border-radius);
-                height: map-get($sizeMap, height);
+                border-radius: map.get($sizeMap, border-radius);
+                height: map.get($sizeMap, height);
 
                 &::before {
-                    transform: map-get($sizeMap, beforeTransform);
-                    border-radius: map-get($sizeMap, beforeRadius);
+                    transform: map.get($sizeMap, beforeTransform);
+                    border-radius: map.get($sizeMap, beforeRadius);
                 }
 
                 #{$root}__selected-items {
-                    padding-top: map-get($sizeMap, selectedItemsPadding);
-                    padding-bottom: map-get($sizeMap, selectedItemsPadding);
+                    padding-top: map.get($sizeMap, selectedItemsPadding);
+                    padding-bottom: map.get($sizeMap, selectedItemsPadding);
                 }
 
                 #{$root}__icon-chevron {
-                    height: map-get($sizeMap, height);
+                    height: map.get($sizeMap, height);
                 }
 
-                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);
             }
         }
     }
@@ -308,14 +312,14 @@ $drop-down-color-themes: map-merge(
         top: calc(100% + 8px);
         left: 0;
 
-        background-color: $element-background-color;
+        background-color: vars.$element-background-color;
 
         border: 1px solid $drop-down-border-color;
         overflow: hidden;
         border-radius: 12px;
 
         &-list {
-            @include scrollWrapper(240px, 0, $scroll-thumb-color, $scroll-track-color);
+            @include mixins.scrollWrapper(240px, 0, vars.$scroll-thumb-color, vars.$scroll-track-color);
         }
     }
 
@@ -345,14 +349,12 @@ $drop-down-color-themes: map-merge(
                 #{$searchRoot}-input {
                     padding: 5px 4px;
                     padding-left: 32px;
-
                 }
             }
             &_sm {
                 #{$searchRoot}-input {
                     padding: 5px 8px;
                     padding-left: 32px;
-
                 }
             }
         }
@@ -362,12 +364,12 @@ $drop-down-color-themes: map-merge(
             border-radius: 6px;
             outline: none;
 
-            font-size: $font-size-base;
+            font-size: vars.$font-size-base;
             font-weight: 400;
             line-height: 22px;
-            border: 1px solid $element-border-color;
+            border: 1px solid vars.$element-border-color;
 
-            color: $text-color;
+            color: vars.$text-color;
             background-color: $search-background-color;
 
             &:hover {
@@ -421,4 +423,4 @@ $drop-down-color-themes: map-merge(
             stroke-width: 1.5px;
         }
     }
-}
+}

package/form/DropDownFieldItem/DropDownFieldItemView.scss

@@ -1,3 +1,5 @@
+@use "../../scss/variables" as vars;
+
 :root {
     --drop-down-item-hover-background-color: #f5f8fa;
     --drop-down-item-select-background-color: #eef1f2;
@@ -21,7 +23,7 @@ $drop-down-item-hover-background-color: var(--drop-down-item-hover-background-co
 }
 
 %fontProperties {
-    font-size: $font-size-base;
+    font-size: vars.$font-size-base;
     font-weight: 400;
     line-height: 22px;
 }
@@ -41,8 +43,8 @@ $drop-down-item-hover-background-color: var(--drop-down-item-hover-background-co
         position: relative;
         column-gap: 12px;
         align-items: center;
-        background-color: $element-background-color;
-        color: $text-color;
+        background-color: vars.$element-background-color;
+        color: vars.$text-color;
 
         &_size {
             &_lg {
@@ -74,7 +76,7 @@ $drop-down-item-hover-background-color: var(--drop-down-item-hover-background-co
     &__img {
         width: 24px;
         height: 24px;
-        border-radius: $radius-small;
+        border-radius:vars.$radius-small;
         overflow: hidden;
 
         img {
@@ -144,7 +146,7 @@ $drop-down-item-hover-background-color: var(--drop-down-item-hover-background-co
                 border: none;
 
                 &_visible {
-                    border-bottom: 1px solid $element-border-color;
+                    border-bottom: 1px solid vars.$element-border-color;
                 }
             }
 
@@ -155,7 +157,7 @@ $drop-down-item-hover-background-color: var(--drop-down-item-hover-background-co
                 align-items: center;
 
                 border: none;
-                background-color: $element-background-color;
+                background-color:vars.$element-background-color;
 
                 &:hover {
                     background-color: $drop-down-item-hover-background-color;
@@ -174,15 +176,15 @@ $drop-down-item-hover-background-color: var(--drop-down-item-hover-background-co
             &__icon-chevron {
                 box-shadow: none;
                 svg {
-                    border: 1px solid $element-border-color;
-                    border-radius: $radius-small;
+                    border: 1px solid vars.$element-border-color;
+                    border-radius: vars.$radius-small;
                 }
             }
         }
 
         &_size {
             &_lg {
-                font-size: $font-size-lg;
+                font-size: vars.$font-size-lg;
                 line-height: 24px;
 
                 .AccordionItemView__title-container {
@@ -193,7 +195,7 @@ $drop-down-item-hover-background-color: var(--drop-down-item-hover-background-co
             }
 
             &_md {
-                font-size: $font-size-base;
+                font-size: vars.$font-size-base;
                 line-height: 22px;
 
                 .AccordionItemView__title-container {
@@ -204,7 +206,7 @@ $drop-down-item-hover-background-color: var(--drop-down-item-hover-background-co
             }
 
             &_sm {
-                font-size: $font-size-sm;
+                font-size: vars.$font-size-sm;
                 line-height: 18px;
 
                 .AccordionItemView__title-container {

package/form/FieldLayout/FieldLayoutView.scss

@@ -1,31 +1,33 @@
+@use "../../scss/variables" as vars;
+
 .FieldLayoutView {
     margin-bottom: 1rem;
     $root: &;
-    font-family: $font-family-nunito;
+    font-family: vars.$font-family-nunito;
 
     &__label {
-        font-size: $font-size-sm;
+        font-size: vars.$font-size-sm;
         line-height: 24px;
-        font-weight: $font-weight-sm;
-        color: $text-color;
+        font-weight: vars.$font-weight-sm;
+        color: vars.$text-color;
         margin-bottom: 8px;
 
         &_size {
             &_sm {
-                font-size: $font-size-sm;
+                font-size: vars.$font-size-sm;
             }
             &_md {
-                font-size: $font-size-base;
+                font-size: vars.$font-size-base;
             }
             &_lg {
-                font-size: $font-size-lg;
+                font-size: vars.$font-size-lg;
             }
         }
 
         &_required:after {
             display: inline-block;
             content: "*";
-            color: $danger;
+            color: vars.$danger;
             margin: 0 0 0 3px;
         }
     }
@@ -48,10 +50,10 @@
         margin-top: 4px;
         font-size: 80%;
 
-        color: $text-color;
-        font-size: $font-size-sm;
+        color: vars.$text-color;
+        font-size: vars.$font-size-sm;
         line-height: 16px;
-        font-weight: $font-weight-sm;
+        font-weight: vars.$font-weight-sm;
 
         display: flex;
         align-items: center;
@@ -59,21 +61,21 @@
 
         &_size {
             &_lg {
-                font-size: $font-size-base;
+                font-size: vars.$font-size-base;
                 line-height: 22px;
-                font-weight: $font-weight-sm;
+                font-weight: vars.$font-weight-sm;
             }
 
             &_md {
-                font-size: $font-size-sm;
+                font-size: vars.$font-size-sm;
                 line-height: 18px;
-                font-weight: $font-weight-sm;
+                font-weight: vars.$font-weight-sm;
             }
 
             &_sm {
-                font-size: $font-size-xs;
+                font-size: vars.$font-size-xs;
                 line-height: 16px;
-                font-weight: $font-weight-sm;
+                font-weight: vars.$font-weight-sm;
             }
         }
     }
@@ -91,30 +93,30 @@
             height: 100%;
 
             rect {
-                color: $danger;
+                color: vars.$danger;
             }
         }
     }
 
     &__error-text {
-        color: $danger;
+        color: vars.$danger;
         &_size {
             &_lg {
-                font-size: $font-size-base;
+                font-size: vars.$font-size-base;
                 line-height: 22px;
-                font-weight: $font-weight-sm;
+                font-weight: vars.$font-weight-sm;
             }
 
             &_md {
-                font-size: $font-size-sm;
+                font-size: vars.$font-size-sm;
                 line-height: 18px;
-                font-weight: $font-weight-sm;
+                font-weight: vars.$font-weight-sm;
             }
 
             &_sm {
-                font-size: $font-size-xs;
+                font-size: vars.$font-size-xs;
                 line-height: 16px;
-                font-weight: $font-weight-sm;
+                font-weight: vars.$font-weight-sm;
             }
         }
     }

package/form/FieldList/FieldListItemView.scss

@@ -1,3 +1,5 @@
+@use "../../scss/variables" as vars;
+
 .FieldListItemView {
     &__remove {
         background-color: transparent;
@@ -13,7 +15,7 @@
             fill: #323232;
         }
         path {
-            stroke: $white;
+            stroke: vars.$white;
         }
     }
 }