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

package/content/Detail/DetailView.scss

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

package/content/DropDown/DropDownView.scss

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

package/content/Menu/MenuItemView.scss

@@ -1,3 +1,5 @@
+@use "../../scss/variables" as vars;
+
 :root {
     --color-menu-item: #323232;
     --color-border: rgba(0, 0, 0, 0.1);
@@ -8,6 +10,8 @@
     --color-border: rgba(255, 255, 255, 0.1);
   }
 
+  $icon-size: 20px;
+
   $color-menu-item: var(--color-menu-item);
   $color-border: var(--color-border);
 
@@ -28,8 +32,8 @@
 
     &__label {
         color: $color-menu-item;
-        font-size: $font-size-xs;
-        line-height: $line-height-xs;
+        font-size: vars.$font-size-xs;
+        line-height: vars.$line-height-xs;
     }
 
     &__icon {
@@ -54,7 +58,7 @@
     }
 
     &:hover {
-        background-color: $gray;
+        background-color: vars.$gray;
     }
 
     &_hasBorder{

package/content/Menu/MenuView.scss

@@ -1,20 +1,23 @@
+@use "../../scss/variables" as vars;
+
 :root {
     --color-icon: #323232;
-  }
-  
-  html[data-theme="dark"] { 
+}
+
+html[data-theme="dark"] {
     --color-icon: #ffffff;
-  }
+}
 
-  $color-icon: var(--color-icon);
+$color-icon: var(--color-icon);
 
 .MenuView {
     width: 248px;
     padding: 0;
     border: none;
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-    
-    &::before, &::after {
+
+    &::before,
+    &::after {
         content: none;
     }
 
@@ -25,19 +28,19 @@
 
     &__icon {
         display: inline-flex;
-        
+
         svg {
             stroke: $color-icon;
-            width: $icon-size-lg;
-            height: $icon-size-lg;
+            width: vars.$icon-size-lg;
+            height: vars.$icon-size-lg;
         }
 
         svg rect {
-           fill : $color-icon;
+            fill: $color-icon;
         }
 
         svg > * {
-            stroke:inherit;
+            stroke: inherit;
         }
     }
-}
+}

package/form/AutoCompleteField/AutoCompleteFieldView.scss

@@ -1,3 +1,6 @@
+@use "../../scss/variables" as vars;
+@use '../../scss/mixins';
+
 :root {
     --autocomplete-hover-color: #f1f5f7;
     --autocomplete-selected-color: #dbe2e6;
@@ -21,9 +24,9 @@ $autocomplete-icon-color: var(--autocomplete-icon-color);
 
     &__input {
         width: 100%;
-        border: 1px solid $element-border-color;
-        background-color: $element-field-background-color;
-        color: $text-color;
+        border: 1px solid vars.$element-border-color;
+        background-color: vars.$element-field-background-color;
+        color: vars.$text-color;
         transition: border-color 150ms ease-in-out;
         font-size: inherit;
         line-height: inherit;
@@ -31,7 +34,7 @@ $autocomplete-icon-color: var(--autocomplete-icon-color);
 
     &_opened {
         #{$root}__input {
-            border-color: $primary;
+            border-color: vars.$primary;
         }
     }
 
@@ -42,26 +45,26 @@ $autocomplete-icon-color: var(--autocomplete-icon-color);
         position: absolute;
         z-index: 9999;
         margin-top: 8px;
-        border-radius: $radius-large;
-        background-color: $element-background-color;
-        border: 1px solid $element-border-color;
+        border-radius: vars.$radius-large;
+        background-color: vars.$element-background-color;
+        border: 1px solid vars.$element-border-color;
         overflow: hidden;
     }
 
     &__list {
         display: flex;
         flex-flow: column nowrap;
-        @include scrollWrapper(240px, 0, $scroll-thumb-color, $scroll-track-color);
+        @include mixins.scrollWrapper(240px, 0, vars.$scroll-thumb-color, vars.$scroll-track-color);
     }
 
     &__item {
         width: 100%;
-        background-color: $element-background-color;
+        background-color: vars.$element-background-color;
         outline: none;
         border: none;
         text-align: left;
 
-        color: $text-color;
+        color: vars.$text-color;
         cursor: pointer;
 
         font-size: inherit;
@@ -102,13 +105,13 @@ $autocomplete-icon-color: var(--autocomplete-icon-color);
     }
 
     &__category {
-        background-color: $element-background-color;
+        background-color: vars.$element-background-color;
         width: 100%;
 
         &__label {
             display: block;
             padding: 12px 8px;
-            color: $element-placeholder-color;
+            color: vars.$element-placeholder-color;
         }
         &__content {
             width: 100%;
@@ -120,23 +123,23 @@ $autocomplete-icon-color: var(--autocomplete-icon-color);
     }
 
     &__nothing {
-        color: $element-placeholder-color;
+        color: vars.$element-placeholder-color;
         width: 100%;
         margin-bottom: 48px;
         padding: 8px 12px;
-        font-size: $font-size-xs;
-        line-height: $line-height-xs;
+        font-size: vars.$font-size-xs;
+        line-height: vars.$line-height-xs;
     }
 
     &_size {
         &_lg {
-            font-size: $font-size-lg;
-            line-height: $line-height-lg;
+            font-size: vars.$font-size-lg;
+            line-height: vars.$line-height-lg;
 
             #{$root}__input {
                 padding: 16px 8px;
-                height: $input-height-lg;
-                border-radius: $radius-large;
+                height: vars.$input-height-lg;
+                border-radius: vars.$radius-large;
             }
 
             #{$root}__item {
@@ -150,20 +153,20 @@ $autocomplete-icon-color: var(--autocomplete-icon-color);
 
                
                 &__label {
-                    font-size: $font-size-base;
-                    line-height: $line-height-base;
+                    font-size: vars.$font-size-base;
+                    line-height: vars.$line-height-base;
                 }
             }
         }
 
         &_md {
-            font-size: $font-size-base;
-            line-height: $line-height-lg;
+            font-size: vars.$font-size-base;
+            line-height: vars.$line-height-lg;
 
             #{$root}__input {
                 padding: 11px 8px;
-                height: $input-height-md;
-                border-radius: $radius-large;
+                height: vars.$input-height-md;
+                border-radius: vars.$radius-large;
             }
 
             #{$root}__item {
@@ -176,20 +179,20 @@ $autocomplete-icon-color: var(--autocomplete-icon-color);
                 }
 
                 &__label {
-                    font-size: $font-size-sm;
-                    line-height: $line-height-sm;
+                    font-size: vars.$font-size-sm;
+                    line-height: vars.$line-height-sm;
                 }
             }
         }
 
         &_sm {
-            font-size: $font-size-sm;
-            line-height: $line-height-lg;
+            font-size: vars.$font-size-sm;
+            line-height: vars.$line-height-lg;
 
             #{$root}__input {
                 padding: 5px 8px;
-                height: $input-height-sm;
-                border-radius: $radius-small;
+                height: vars.$input-height-sm;
+                border-radius: vars.$radius-small;
             }
 
             #{$root}__item {
@@ -202,8 +205,8 @@ $autocomplete-icon-color: var(--autocomplete-icon-color);
                 }
 
                 &__label {
-                    font-size: $font-size-xs;
-                    line-height: $line-height-xs;
+                    font-size: vars.$font-size-xs;
+                    line-height: vars.$line-height-xs;
                 }
             }
         }

package/form/Button/ButtonView.scss

@@ -1,3 +1,6 @@
+@use "../../scss/variables" as vars;
+@use '../../scss/mixins';
+
 $btn-font-weight-sm: 400;
 $btn-font-weight-lg: 800;
 $btn-line-height: 24px;
@@ -7,7 +10,7 @@ $btn-letter-spacing: 0.1em;
     $root: &;
 
     transition-property: color, background-color, border-color, box-shadow;
-    transition-duration: $transition-duration;
+    transition-duration: vars.$transition-duration;
     transition-timing-function: ease-in-out;
 
     display: flex;
@@ -18,7 +21,7 @@ $btn-letter-spacing: 0.1em;
 
     &_button {
         position: relative;
-        border-radius: $radius-small;
+        border-radius: vars.$radius-small;
         user-select: none;
         border: 3px solid transparent;
 
@@ -27,22 +30,21 @@ $btn-letter-spacing: 0.1em;
         justify-content: center;
         align-items: center;
 
-        font-family: $font-family-nunito;
         font-weight: $btn-font-weight-sm;
-        font-size: $font-size-sm;
+        font-size: vars.$font-size-sm;
         line-height: $btn-line-height;
         outline: none;
     }
 
-    @each $colorName, $colorMap in $color-themes {
+    @each $colorName, $colorMap in vars.$color-themes {
         &_color_#{$colorName} {
-            @include button-theme($colorMap, $colorName, $root);
+            @include mixins.button-theme($colorMap, $colorName, $root);
         }
     }
 
-    @each $colorName, $colorMap in $color-themes {
+    @each $colorName, $colorMap in vars.$color-themes {
         &_outline_#{$colorName} {
-            @include button-outline-theme($colorMap, $colorName, $root);
+            @include mixins.button-outline-theme($colorMap, $colorName, $root);
         }
     }
 
@@ -80,18 +82,18 @@ $btn-letter-spacing: 0.1em;
     &_size {
         &_sm {
             height: 34px;
-            font-size: $font-size-sm;
-            border-radius: $radius-small;
+            font-size: vars.$font-size-sm;
+            border-radius: vars.$radius-small;
         }
         &_md {
             height: 46px;
-            font-size: $font-size-base;
-            border-radius: $radius-large;
+            font-size: vars.$font-size-base;
+            border-radius: vars.$radius-large;
         }
         &_lg {
             height: 56px;
-            font-size: $font-size-lg;
-            border-radius: $radius-large;
+            font-size: vars.$font-size-lg;
+            border-radius: vars.$radius-large;
         }
     }
 
@@ -116,12 +118,12 @@ $btn-letter-spacing: 0.1em;
         align-items: center;
 
         #{$root}__text {
-            color: $link-color;
+            color: vars.$link-color;
         }
 
         &:hover { 
             #{$root}__text { 
-                color: $link-color-hover;
+                color: vars.$link-color-hover;
             }
         }
     }
@@ -138,8 +140,8 @@ $btn-letter-spacing: 0.1em;
     &_failed {
         &,
         &:hover {
-            border-color: $danger;
-            box-shadow: 0 0 1rem rgba($danger, 0.2);
+            border-color: vars.$danger;
+            box-shadow: 0 0 1rem rgba(vars.$danger, 0.2);
         }
     }
 
@@ -158,18 +160,18 @@ $btn-letter-spacing: 0.1em;
         position: relative;
         top: -1px;
         margin-left: 4px;
-        border-radius: $radius-small;
-        font-size: $font-size-xs;
+        border-radius: vars.$radius-small;
+        font-size: vars.$font-size-xs;
         line-height: 16px;
         padding: 3px 5px;
 
         $badge-types: (
-            "primary": $primary,
-            "secondary": $secondary,
-            "success": $success,
-            "danger": $danger,
-            "warning": $warning,
-            "info": $info,
+            "primary": vars.$primary,
+            "secondary": vars.$secondary,
+            "success": vars.$success,
+            "danger": vars.$danger,
+            "warning": vars.$warning,
+            "info": vars.$info,
         );
 
         @each $type, $color in $badge-types {

package/form/CheckboxField/CheckboxFieldView.scss

@@ -1,19 +1,21 @@
+@use "../../scss/variables" as vars;
+
 :root {
     --disabled-text-color: rgba(0, 0, 0, 0.3);
- }
+}
 
- html[data-theme="dark"] { 
+html[data-theme="dark"] {
     --disabled-text-color: rgba(255, 255, 255, 0.3);
- }
+}
 
- $disabled-text-color: var(--disabled-text-color);
+$disabled-text-color: var(--disabled-text-color);
 
 .CheckboxFieldView {
     $root: &;
 
     display: inline-flex;
 
-    font-family: $font-family-nunito;
+    font-family: vars.$font-family-nunito;
 
     &__input + &__label {
         display: inline-flex;
@@ -34,8 +36,8 @@
             flex-shrink: 0;
             flex-grow: 0;
 
-            border: 1px solid $gray;
-            border-radius: $radius-small;
+            border: 1px solid vars.$gray;
+            border-radius: vars.$radius-small;
 
             background-repeat: no-repeat;
             background-position: center center;
@@ -56,15 +58,15 @@
             transition: opacity 150ms ease-in-out;
             opacity: 0;
 
-            border-radius: $radius-large;
-            border: 4px solid $primary-light;
+            border-radius: vars.$radius-large;
+            border: 4px solid vars.$primary-light;
         }
 
         &-text {
             margin-left: 8px;
-            color: $text-color;
-            font-size: $font-size-sm;
-            font-weight: $font-weight-md;
+            color: vars.$text-color;
+            font-size: vars.$font-size-sm;
+            font-weight: vars.$font-weight-md;
             transform: translateY(1px);
         }
     }
@@ -81,7 +83,7 @@
 
         //ACTIVE
         &:not(:disabled):not(:checked):active + #{$root}__label::before {
-            border-color: $primary;
+            border-color: vars.$primary;
         }
 
         &:active:checked + #{$root}__label::after {
@@ -89,7 +91,7 @@
         }
 
         &:checked:active + #{$root}__label::before {
-            background-color: $primary-light;
+            background-color: vars.$primary-light;
             border-color: transparent;
         }
 
@@ -100,8 +102,8 @@
 
         //CHECKED
         &:checked + #{$root}__label::before {
-            border-color: $primary;
-            background-color: $primary;
+            border-color: vars.$primary;
+            background-color: vars.$primary;
             background-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.20898 1L3.70898 7L1.20898 4.27273' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
         }
 
@@ -113,13 +115,13 @@
             }
 
             &::before {
-                background: $element-background-color-disabled;
+                background: vars.$element-background-color-disabled;
                 border: none;
             }
         }
 
         &:disabled:checked #{$root}__label::before {
-            background-color: $element-background-color-disabled;
+            background-color: vars.$element-background-color-disabled;
             border-color: none;
             background-image: url("data:image/svg+xml,%3Csvg width='11' height='9' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.8584 1.48401L4.3584 7.48401L1.8584 4.75674' stroke='black' stroke-opacity='0.1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
         }
@@ -131,17 +133,17 @@
                 &::before {
                     width: 24px;
                     height: 24px;
-                    border-radius: $radius-small;
+                    border-radius: vars.$radius-small;
                 }
                 &::after {
                     width: 26px;
                     height: 26px;
-                    border-radius: $radius-large;
+                    border-radius: vars.$radius-large;
                 }
 
                 &-text {
                     margin-left: 12px;
-                    font-size: $font-size-lg;
+                    font-size: vars.$font-size-lg;
                     line-height: 24px;
                 }
             }
@@ -158,13 +160,13 @@
                 &::after {
                     width: 22px;
                     height: 22px;
-                    border-radius: $radius-medium;
+                    border-radius: vars.$radius-medium;
                     transform: translate(-13.5%, -13.5%);
                 }
 
                 &-text {
                     margin-left: 8px;
-                    font-size: $font-size-base;
+                    font-size: vars.$font-size-base;
                     line-height: 22px;
                 }
             }
@@ -181,13 +183,13 @@
                 &::after {
                     width: 18px;
                     height: 18px;
-                    border-radius: $radius-medium;
+                    border-radius: vars.$radius-medium;
                     transform: translate(-15.5%, -15.5%);
                 }
 
                 &-text {
                     margin-left: 8px;
-                    font-size: $font-size-sm;
+                    font-size: vars.$font-size-sm;
                     line-height: 18px;
                 }
             }
@@ -196,10 +198,10 @@
 }
 .has-errors label {
     &::before {
-        border-color: $danger;
+        border-color: vars.$danger;
     }
 
     span {
-        color: $danger;
+        color: vars.$danger;
     }
 }

package/form/DateField/DateFieldView.scss

@@ -1,22 +1,26 @@
+@use "../../scss/variables" as vars;
+@use '../../scss/mixins';
+
+
 .DateFieldView {
     $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();
     }
 }