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

package/nav/ButtonGroup/ButtonGroupView.scss

@@ -1,3 +1,6 @@
+@use "sass:map";
+@use "../../scss/variables" as vars;
+
 :root {
     --button-group-background: #DBE2E6;
     --button-group-separator-color: #CBD5DB;
@@ -18,7 +21,7 @@ $button-group-separator-color: var(--button-group-separator-color);
   background-color: $button-group-background;
 
   $sizes: () !default;
-  $sizes: map-merge(
+  $sizes: map.merge(
       (
           "lg": (
               "border-radius": 16px,
@@ -36,7 +39,7 @@ $button-group-separator-color: var(--button-group-separator-color);
   &_size {
       @each $size, $sizeMap in $sizes {
           &_#{$size} {
-              border-radius: map-get($sizeMap, border-radius);
+              border-radius: map.get($sizeMap, border-radius);
           }
       }
   }
@@ -45,13 +48,13 @@ $button-group-separator-color: var(--button-group-separator-color);
     &_default {
       background-color: transparent;
       border-color: transparent;
-      color: $text-color;
-      transition: opacity $transition-duration ease-in-out;
+      color: vars.$text-color;
+      transition: opacity vars.$transition-duration ease-in-out;
 
       &:hover {
         background-color: transparent;
         border-color: transparent;
-        color: $text-color;
+        color: vars.$text-color;
         opacity: 0.7;
       }
 

package/nav/Nav/NavBarView.scss

@@ -1,7 +1,10 @@
+@use "../../scss/variables" as vars;
+@use '../../scss/mixins';
+
 .NavBarView {
     $root: &;
 
-    color: $text-color;
+    color: vars.$text-color;
 
     &__list {
         display: flex;
@@ -10,13 +13,13 @@
 
         &-item {
             .ButtonView__text {
-                color: $element-placeholder-color;
+                color: vars.$element-placeholder-color;
             }
 
 
             &_active { 
                 .ButtonView__text { 
-                    color: $white;
+                    color: vars.$white;
                 }
             }
 
@@ -29,5 +32,5 @@
         }
     }
 
-    @include navs-sizes($root);
+    @include mixins.navs-sizes($root);
 }

package/nav/Nav/NavIconView.scss

@@ -1,3 +1,5 @@
+@use "../../scss/variables" as vars;
+
 .NavIconView {
     &__list {
         display: flex;
@@ -9,19 +11,19 @@
             display: flex;
             flex-flow: column nowrap;
             align-items: center;
-            color: $text-color;
+            color: vars.$text-color;
             column-gap: 8px;
 
             .ButtonView__text {
-                color: $text-color;
+                color: vars.$text-color;
             }
 
             &_disabled .ButtonView_disabled .ButtonView__link:hover .ButtonView__text {
-               color: $element-placeholder-color-disabled;
+               color: vars.$element-placeholder-color-disabled;
             }
 
             &_disabled .ButtonView_disabled .ButtonView__link .ButtonView__text { 
-                color: $element-placeholder-color-disabled;
+                color: vars.$element-placeholder-color-disabled;
             }
 
             &-nested { 

package/nav/Nav/NavTabsView.scss

@@ -1,35 +1,38 @@
+@use "../../scss/variables" as vars;
+@use '../../scss/mixins';
+
 .NavTabsView {
     $root: &;
 
-    color: $text-color;
+    color: vars.$text-color;
 
     &__list {
         display: inline-flex;
         flex-flow: row nowrap;
         align-items: center;
 
-        border-bottom: 1px solid $element-border-color;
+        border-bottom: 1px solid vars.$element-border-color;
 
         &-item {
             .ButtonView__text {
-                color: $element-placeholder-color;
+                color: vars.$element-placeholder-color;
             }
 
             &_active {
                 .ButtonView__text {
-                    color: $white;
+                    color: vars.$white;
                 }
 
                 .ButtonView {
                     &_size {
                         &_sm {
-                            border-radius: $radius-small $radius-small 0 0;
+                            border-radius: vars.$radius-small vars.$radius-small 0 0;
                         }
                         &_md {
-                            border-radius: $radius-large $radius-large 0 0;
+                            border-radius: vars.$radius-large vars.$radius-large 0 0;
                         }
                         &_lg {
-                            border-radius: $radius-large $radius-large 0 0;
+                            border-radius: vars.$radius-large vars.$radius-large 0 0;
                         }
                     }
                 }
@@ -44,5 +47,5 @@
         }
     }
 
-    @include navs-sizes($root);
+    @include mixins.navs-sizes($root);
 }

package/nav/Tree/TreeView.scss

@@ -1,3 +1,5 @@
+@use "../../scss/variables" as vars;
+
 .TreeView {
     list-style: none;
     margin: 0;
@@ -18,11 +20,11 @@
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
-        background-color: $background-color;
+        background-color: vars.$background-color;
 
         .ButtonView__link {
             .ButtonView__text {
-                color: $text-color;
+                color: vars.$text-color;
             }
         }
 
@@ -37,10 +39,10 @@
         }
     }
     &__item_selected &__item-label {
-        background-color: $secondary;
+        background-color: vars.$secondary;
         &,
         &::before {
-            color: $text-color;
+            color: vars.$text-color;
         }
     }
     &__item-label::before {
@@ -52,7 +54,7 @@
         font-size: 12px;
         font-weight: bold;
         margin-left: 10px;
-        color: $text-color;
+        color: vars.$text-color;
         position: relative;
         top: 1px;
         left: 3px;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.84",
+    "version": "3.0.0-beta.86",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -37,7 +37,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.63",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.64",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",

package/scss/animations/index.scss

@@ -1 +1 @@
-@import "loading";
+@forward "loading";

package/scss/mixins/button.scss

@@ -1,3 +1,6 @@
+@use "sass:map";
+@use "../variables/common/colors";
+
 @mixin svg-color($color) {
     svg {
         path { 
@@ -7,83 +10,83 @@
 }
 
 @mixin button-theme($colorMap, $colorName, $root) {
-    background-color: map-get($colorMap, color);
-    color: map-get($colorMap, text-color);
+    background-color: map.get($colorMap, color);
+    color: map.get($colorMap, text-color);
 
     &:hover {
-        background-color: map-get($colorMap, color-dark);
+        background-color: map.get($colorMap, color-dark);
     }
     &:focus,
     &:focus-visible {
-        box-shadow: 0 0 0 4px map-get($colorMap, color-light), 0 0 0 4px map-get($colorMap, color-light);
+        box-shadow: 0 0 0 4px map.get($colorMap, color-light), 0 0 0 4px map.get($colorMap, color-light);
     }
     &:active {
-        background-color: map-get($colorMap, color-light);
+        background-color: map.get($colorMap, color-light);
     }
 
     &:disabled {
-        background-color: map-get($colorMap, color);
-        color: map-get($colorMap, text-color);
+        background-color: map.get($colorMap, color);
+        color: map.get($colorMap, text-color);
     }
 
     #{$root}__loader { 
         svg {
             path { 
-                stroke: map-get($colorMap, color-light);
+                stroke: map.get($colorMap, color-light);
 
                 @if ($colorName == 'basic' ) {
-                    stroke: map-get($colorMap, color-dark);
+                    stroke: map.get($colorMap, color-dark);
                 }
             }
         }
     }
 
     #{$root}__link {
-        color: map-get($colorMap, color-dark);
+        color: map.get($colorMap, color-dark);
 
         &:hover {
-            color: map-get($colorMap, color-light);
+            color: map.get($colorMap, color-light);
         }
     }
 }
 
 @mixin button-outline-theme($colorMap, $colorName, $root) {
     background-color: transparent;
-    color: map-get($colorMap, color);
-    stroke: map-get($colorMap, color);
-    border: 1px solid map-get($colorMap, color);
+    color: map.get($colorMap, color);
+    stroke: map.get($colorMap, color);
+    border: 1px solid map.get($colorMap, color);
 
-    @include svg-color(map-get($colorMap, text-color));
+    @include svg-color(map.get($colorMap, text-color));
 
     &:hover {
-        @include svg-color(map-get($colorMap, color-dark));
-        color: map-get($colorMap, color-dark);
-        border-color: map-get($colorMap, color-dark);
+        @include svg-color(map.get($colorMap, color-dark));
+        color: map.get($colorMap, color-dark);
+        border-color: map.get($colorMap, color-dark);
     }
     &:focus {
-        box-shadow: 0 0 0 4px map-get($colorMap, color-light), 0 0 0 4px map-get($colorMap, color-light);
+        box-shadow: 0 0 0 4px map.get($colorMap, color-light), 0 0 0 4px map.get($colorMap, color-light);
         border: 1px solid transparent;
     }
     &:active {
-        @include svg-color(map-get($colorMap, color-light));
-        color: map-get($colorMap, color-light);
-        border-color: map-get($colorMap, color-light);
-        stroke: map-get($colorMap, color-light);
+        @include svg-color(map.get($colorMap, color-light));
+        color: map.get($colorMap, color-light);
+        border-color: map.get($colorMap, color-light);
+        stroke: map.get($colorMap, color-light);
         box-shadow: none;
     }
 
     &:disabled {
         background-color: transparent;
-        @include svg-color(map-get($colorMap, color));
-        color: map-get($colorMap, color);
-        border: 1px solid map-get($colorMap, color);
+        @include svg-color(map.get($colorMap, color));
+        color: map.get($colorMap, color);
+        border: 1px solid map.get($colorMap, color);
     }
 
     @if ($colorName == "basic") {
-        color: $text-color;
+        color: colors.$text-color;
     } 
 
     #{$root}__loader { 
-        @include svg-color(map-get($colorMap, color));
+        @include svg-color(map.get($colorMap, color));
     }
 }

package/scss/mixins/customMixins.scss

@@ -1,5 +1,6 @@
+@use "sass:map";
 @mixin loader-color($colorMap, $colorName, $root) {
     svg stop {
-        stop-color: map-get($colorMap, color);
+        stop-color: map.get($colorMap, color);
     }
 }

package/scss/mixins/date.scss

@@ -1,4 +1,5 @@
-@import "../variables/index";
+@use "sass:map";
+@use "../variables/index" as variables;
 
 :root {
     --date-icon-default-color: #cbd5db;
@@ -20,26 +21,26 @@ $date-icon-disabled-color: var(--date-icon-disabled-color);
 $date-range-separator-color: var(--date-range-separator-color);
 
 $date-sizes: () !default;
-$date-sizes: map-merge(
+$date-sizes: map.merge(
     (
         "lg": (
             "padding": 16px 8px,
-            "radius": $radius-large,
-            "font-size": $font-size-lg,
+            "radius": variables.$radius-large,
+            "font-size": variables.$font-size-lg,
             "height": 56px,
             "first-input-width": 96px,
         ),
         "md": (
             "padding": 11px 8px,
-            "radius": $radius-large,
-            "font-size": $font-size-base,
+            "radius": variables.$radius-large,
+            "font-size": variables.$font-size-base,
             "height": 46px,
             "first-input-width": 86px,
         ),
         "sm": (
             "padding": 5px 8px,
-            "radius": $radius-small,
-            "font-size": $font-size-sm,
+            "radius": variables.$radius-small,
+            "font-size": variables.$font-size-sm,
             "height": 34px,
             "first-input-width": 76px,
         ),
@@ -47,6 +48,19 @@ $date-sizes: map-merge(
     $date-sizes
 );
 
+@mixin calendar-button () {
+    padding: 5px 12.5px;
+    border-radius: variables.$radius-small;
+    border: 1px solid variables.$gray;
+    background-color: transparent;
+    background-image: none;
+    box-shadow: none;
+    cursor: pointer;
+    color: variables.$text-color;
+    font-size: variables.$font-size-sm;
+    line-height: variables.$line-height-lg;
+}
+
 @mixin icon-container($root) {
     #{$root}__icon-container {
         position: absolute;
@@ -87,17 +101,17 @@ $date-sizes: map-merge(
         @each $size, $size-map in $date-sizes {
             &_#{$size} {
                 #{$root}__input {
-                    border-radius: map-get($size-map, radius);
-                    padding: map-get($size-map, padding);
+                    border-radius: map.get($size-map, radius);
+                    padding: map.get($size-map, padding);
                     padding-right: 40px;
-                    height: map-get($size-map, height);
+                    height: map.get($size-map, height);
                 }
 
                 #{$root}__body::before {
-                    border-radius: calc(map-get($size-map, radius) + 4px);
+                    border-radius: calc(map.get($size-map, radius) + 4px);
                 }
 
-                font-size: map-get($size-map, font-size);
+                font-size: map.get($size-map, font-size);
             }
         }
     }
@@ -107,26 +121,26 @@ $date-sizes: map-merge(
     &__input {
         width: 100%;
         font-size: inherit;
-        line-height: $line-height-lg;
-        background-color: $element-field-background-color;
-        border: 1px solid $element-border-color;
-        color: $text-color;
+        line-height: variables.$line-height-lg;
+        background-color: variables.$element-field-background-color;
+        border: 1px solid variables.$element-border-color;
+        color: variables.$text-color;
         transition: border-color 150ms ease-in-out;
 
         &:active {
-            border-color: $primary;
+            border-color: variables.$primary;
         }
 
         &::placeholder {
-            color: $element-placeholder-color;
+            color: variables.$element-placeholder-color;
         }
 
         &:disabled {
             border: none;
-            background-color: $element-background-color-disabled;
+            background-color: variables.$element-background-color-disabled;
 
             &::placeholder {
-                color: $element-placeholder-color-disabled;
+                color: variables.$element-placeholder-color-disabled;
             }
         }
     }
@@ -146,7 +160,7 @@ $date-sizes: map-merge(
             width: 100%;
             height: 100%;
             content: "";
-            border: 4px solid $primary-light;
+            border: 4px solid variables.$primary-light;
             transform: translate(-4px, -4px);
             pointer-events: none;
             opacity: 0;
@@ -181,7 +195,7 @@ $date-sizes: map-merge(
 
     &_is-invalid {
         #{$root}__input {
-            border-color: $danger;
+            border-color: variables.$danger;
         }
     }
 }
@@ -192,8 +206,8 @@ $date-sizes: map-merge(
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
-        background-color: $element-field-background-color;
-        color: $text-color;
+        background-color: variables.$element-field-background-color;
+        color: variables.$text-color;
         column-gap: 8px;
 
         > * {
@@ -240,14 +254,14 @@ $date-sizes: map-merge(
         }
 
         &::before {
-            border-color: $element-border-color;
+            border-color: variables.$element-border-color;
         }
 
         &::after {
             width: 100%;
             height: 100%;
             transform: translate(-4px, -4px);
-            border: 4px solid $primary-light;
+            border: 4px solid variables.$primary-light;
             opacity: 0;
         }
     }
@@ -255,7 +269,7 @@ $date-sizes: map-merge(
     //Effects
     //Active
     &__input:active ~ &__effect::before {
-        border-color: $primary;
+        border-color: variables.$primary;
     }
 
     //Focus
@@ -271,12 +285,12 @@ $date-sizes: map-merge(
 
     &_disabled {
         #{$root}__body {
-            background-color: $element-background-color-disabled;
+            background-color: variables.$element-background-color-disabled;
         }
 
         #{$root}__input { 
             &::placeholder { 
-                color: $element-placeholder-color-disabled;
+                color: variables.$element-placeholder-color-disabled;
             }
         }
 
@@ -298,11 +312,11 @@ $date-sizes: map-merge(
 
     &_is-invalid {
         #{$root}__effect::before {
-            border-color: $danger;
+            border-color: variables.$danger;
         }
 
         #{$root}__input:active ~ #{$root}__effect::before {
-            border-color: $danger;
+            border-color: variables.$danger;
         }
     }
 }
@@ -312,22 +326,22 @@ $date-sizes: map-merge(
         @each $size, $size-map in $date-sizes {
             &_#{$size} {
                 #{$root}__body {
-                    padding: map-get($size-map, padding);
-                    border-radius: map-get($size-map, radius);
-                    height: map-get($size-map, height);
+                    padding: map.get($size-map, padding);
+                    border-radius: map.get($size-map, radius);
+                    height: map.get($size-map, height);
 
                     > * {
                         &:nth-child(1) {
-                            width: map-get($size-map, first-input-width);
+                            width: map.get($size-map, first-input-width);
                         }
                     }
                 }
 
                 #{$root}__effect::after {
-                    border-radius: calc(map-get($size-map, radius) + 4px);
+                    border-radius: calc(map.get($size-map, radius) + 4px);
                 }
 
-                font-size: map-get($size-map, font-size);
+                font-size: map.get($size-map, font-size);
             }
         }
     }
@@ -341,7 +355,7 @@ $date-sizes: map-merge(
         color: inherit;
 
         &::placeholder {
-            color: $element-placeholder-color;
+            color: variables.$element-placeholder-color;
         }
     }
 }
@@ -351,7 +365,7 @@ $date-sizes: map-merge(
         position: relative;
         display: flex;
         flex-flow: row nowrap;
-        color: $text-color;
+        color: variables.$text-color;
 
         #{$root}__separator {
             position: relative;
@@ -393,7 +407,7 @@ $date-sizes: map-merge(
 
             .TimePanelView__cell {
                 padding: 0;
-                border-radius: $radius-large;
+                border-radius: variables.$radius-large;
 
                 &-value {
                     padding: 6px 7px;

package/scss/mixins/index.scss

@@ -1,6 +1,6 @@
-@import "button";
-@import "typography";
-@import "scroll";
-@import "customMixins";
-@import "date";
-@import "navs";
+@forward "button";
+@forward "typography";
+@forward "scroll";
+@forward "customMixins";
+@forward "date";
+@forward "navs";

package/scss/mixins/typography.scss

@@ -1,26 +1,29 @@
+@use "sass:map";
+@use "../variables/common/media";
+
 @mixin typography-type($typeMap) {
-  font-family: map-get($typeMap, font-family);
-  font-size: map-get($typeMap, font-size);
-  font-weight: map-get($typeMap, font-weight);
-  line-height: map-get($typeMap, line-height);
-  color: map-get($typeMap, color);
-  text-transform: map-get($typeMap, text-transform);
-  text-decoration: map-get($typeMap, text-decoration);
-  text-align: map-get($typeMap, text-align);
+  font-family: map.get($typeMap, font-family);
+  font-size: map.get($typeMap, font-size);
+  font-weight: map.get($typeMap, font-weight);
+  line-height: map.get($typeMap, line-height);
+  color: map.get($typeMap, color);
+  text-transform: map.get($typeMap, text-transform);
+  text-decoration: map.get($typeMap, text-decoration);
+  text-align: map.get($typeMap, text-align);
 
-  @media (max-width: $tablet-width) {
-    font-size: map-get($typeMap, tablet-font-size);
-    font-weight: map-get($typeMap, tablet-font-weight);
-    line-height: map-get($typeMap, tablet-line-height);
-    text-transform: map-get($typeMap, tablet-text-transform);
-    text-align: map-get($typeMap, tablet-text-align);
+  @media (max-width: media.$tablet-width) {
+    font-size: map.get($typeMap, tablet-font-size);
+    font-weight: map.get($typeMap, tablet-font-weight);
+    line-height: map.get($typeMap, tablet-line-height);
+    text-transform: map.get($typeMap, tablet-text-transform);
+    text-align: map.get($typeMap, tablet-text-align);
   }
 
-  @media (max-width: $mobile-width) {
-    font-size: map-get($typeMap, mobile-font-size);
-    font-weight: map-get($typeMap, mobile-font-weight);
-    line-height: map-get($typeMap, mobile-line-height);
-    text-transform: map-get($typeMap, mobile-text-transform);
-    text-align: map-get($typeMap, mobile-text-align);
+  @media (max-width: media.$mobile-width) {
+    font-size: map.get($typeMap, mobile-font-size);
+    font-weight: map.get($typeMap, mobile-font-weight);
+    line-height: map.get($typeMap, mobile-line-height);
+    text-transform: map.get($typeMap, mobile-text-transform);
+    text-align: map.get($typeMap, mobile-text-align);
   }
 }