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

package/layout/Sidebar/SidebarView.scss

@@ -1,3 +1,5 @@
+@use "../../scss/variables" as vars;
+
 :root {
     --sidebar-text-color: #00000099;
     --sidebar-text-hover-color: #312c3a;
@@ -47,7 +49,7 @@ $sidebar-badge-border-color: var(--sidebar-badge-border-color);
     padding: 8px;
     max-width: 72px;
     transition: max-width 250ms ease-in-out;
-    background-color: $element-background-color;
+    background-color: vars.$element-background-color;
 
     &__header {
         margin-bottom: 80px;
@@ -55,9 +57,9 @@ $sidebar-badge-border-color: var(--sidebar-badge-border-color);
 
     .ButtonView .ButtonView__link .ButtonView__text {
         color: $sidebar-text-color;
-        font-size: $font-size-14;
-        font-weight: $font-weight-sm;
-        line-height: $line-height-18;
+        font-size: vars.$font-size-sm;
+        font-weight: vars.$font-weight-sm;
+        line-height: vars.$line-height-sm;
         transition: color 150ms ease-in-out;
         opacity: 0;
     }
@@ -92,12 +94,12 @@ $sidebar-badge-border-color: var(--sidebar-badge-border-color);
             &-item {
                 position: relative;
                 width: 100%;
-                border-radius: $radius-large;
+                border-radius: vars.$radius-large;
 
                 svg path,
                 rect,
                 circle {
-                    stroke: $icon-color;
+                    stroke: vars.$icon-color;
                 }
 
                 transition: background-color 150ms ease-in-out;
@@ -241,7 +243,7 @@ $sidebar-badge-border-color: var(--sidebar-badge-border-color);
     }
 
     &__footer {
-        border-top: 1px solid $element-border-color;
+        border-top: 1px solid vars.$element-border-color;
     }
 
     &__trigger {

package/layout/Skeleton/SkeletonView.scss

@@ -1,6 +1,8 @@
+@use "../../scss/variables" as vars;
+
 .SkeletonView{
   $root: &;
-  background-color: $grey-darker;
+  background-color: vars.$grey-darker;
   border-radius: 4px;
   position: relative;
   overflow: hidden;
@@ -35,13 +37,13 @@
 
     @keyframes pulse {
       0% {
-        background-color: $grey-darker;
+        background-color: vars.$grey-darker;
       }
       50% {
-        background-color: $grey-light;
+        background-color: vars.$grey-light;
       }
       100% {
-        background-color: $grey-darker;
+        background-color: vars.$grey-darker;
       }
     }
 
@@ -54,7 +56,7 @@
         content: "";
         position: absolute;
         transform: translateX(-100%);
-        background: linear-gradient(90deg, transparent, rgba($grey-light, 0.3), transparent);
+        background: linear-gradient(90deg, transparent, rgba(vars.$grey-light, 0.3), transparent);
         animation: wave-animation 1.6s linear 0.5s infinite;
       }
     }

package/layout/Tooltip/TooltipView.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use "../../scss/variables" as vars;
 
 $tooltip-arrow-width: 10px;
 $tooltip-arrow-height: 10px;
@@ -121,7 +122,7 @@ $tooltip-background-color: rgba(65, 65, 65, 0.95);
   }
 
   &__content{
-    color: $white;
+    color: vars.$white;
     font-size: 14px;
     line-height: 24px;
   }

package/list/Empty/EmptyView.scss

@@ -1,6 +1,7 @@
+@use "../../scss/variables" as vars;
 
 .EmptyView {
   text-align: center;
   padding: 20px;
-  color: $text-color;
+  color: vars.$text-color;
 }

package/list/FlexGrid/FlexGridView.scss

@@ -1,3 +1,6 @@
+@use "../../scss/variables" as vars;
+
+
 $justifyValues: center, end, start, stretch, flex-start, flex-end, left, right, space-between, space-around, space-evenly;
 $alignValues: center, end, start, stretch, flex-start, flex-end;
 $directionValues: column-reverse column row-reverse row;
@@ -44,13 +47,13 @@ $colMaxValue: 12;
     @include col(col, $root);
     @include col(offset, $root, margin-inline-start);
 
-    @media (max-width: $desktop-width) {
+    @media (max-width: vars.$desktop-width) {
       @include col(lg, $root);
     }
-    @media (max-width: $tablet-width) {
+    @media (max-width: vars.$tablet-width) {
       @include col(md, $root);
     }
-    @media (max-width: $mobile-width) {
+    @media (max-width: vars.$mobile-width) {
       @include col(sm, $root);
     }
   }

package/list/Grid/GridView.scss

@@ -1,3 +1,5 @@
+@use "../../scss/variables" as vars;
+
 :root {
     --grid-header-background-color: var(--light-gray);
     --grid-border-color: var(--gray);
@@ -33,16 +35,16 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
         border-spacing: 0;
         border-collapse: separate;
         border: 1px solid $grid-border-color;
-        border-radius: $radius-large;
+        border-radius: vars.$radius-large;
         margin: 24px 0;
 
         th,
         td {
-            color: $text-color;
+            color: vars.$text-color;
             background-color: $grid-td-background-color;
         }
         th {
-            font-weight: $font-weight-lg;
+            font-weight: vars.$font-weight-lg;
             background-color: $grid-header-background-color;
         }
 
@@ -61,20 +63,20 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
 
         thead > tr > th {
             &:first-child {
-                border-top-left-radius: $radius-large;
+                border-top-left-radius: vars.$radius-large;
             }
             &:last-child {
-                border-top-right-radius: $radius-large;
+                border-top-right-radius: vars.$radius-large;
             }
         }
 
         tbody > tr:last-child > td {
             &:first-child {
-                border-bottom-left-radius: $radius-large;
+                border-bottom-left-radius: vars.$radius-large;
             }
 
             &:last-child {
-                border-bottom-right-radius: $radius-large;
+                border-bottom-right-radius: vars.$radius-large;
             }
         }
     }
@@ -88,8 +90,8 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
     &_size {
         &_lg {
             #{$root}__table {
-                font-size: $font-size-lg;
-                line-height: $line-height-lg;
+                font-size: vars.$font-size-lg;
+                line-height: vars.$line-height-lg;
             }
 
             th,
@@ -100,8 +102,8 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
 
         &_md {
             #{$root}__table {
-                font-size: $font-size-base;
-                line-height: $line-height-base;
+                font-size: vars.$font-size-base;
+                line-height: vars.$line-height-base;
             }
 
             th,
@@ -112,8 +114,8 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
 
         &_sm {
             #{$root}__table {
-                font-size: $font-size-sm;
-                line-height: $line-height-sm;
+                font-size: vars.$font-size-sm;
+                line-height: vars.$line-height-sm;
             }
 
             th,

package/list/Grid/views/ContentColumnView/ContentColumnView.scss

@@ -1,3 +1,5 @@
+@use "../../../../scss/variables" as vars;
+
 :root {
     --grid-icon-color: #323232;
 }
@@ -26,7 +28,7 @@ $grid-icon-color: var(--grid-icon-color);
     }
 
     &__subtitle {
-        color: $element-placeholder-color;
+        color: vars.$element-placeholder-color;
     }
 
     &__picture {
@@ -53,8 +55,8 @@ $grid-icon-color: var(--grid-icon-color);
     &_size {
         &_lg {
             #{$root}__subtitle {
-                font-size: $font-size-base;
-                line-height: $line-height-base;
+                font-size: vars.$font-size-base;
+                line-height: vars.$line-height-base;
             }
 
             #{$root}__avatar-wrapper {
@@ -65,15 +67,15 @@ $grid-icon-color: var(--grid-icon-color);
 
         &_md {
             #{$root}__subtitle {
-                font-size: $font-size-sm;
-                line-height: $line-height-sm;
+                font-size: vars.$font-size-sm;
+                line-height: vars.$line-height-sm;
             }
         }
 
         &_sm {
             #{$root}__subtitle {
-                font-size: $font-size-xs;
-                line-height: $line-height-xs;
+                font-size: vars.$font-size-xs;
+                line-height: vars.$line-height-xs;
             }
         }
     }

package/list/Grid/views/DiagramColumnView/DiagramColumnView.scss

@@ -1,4 +1,4 @@
-@import "style/variables";
+@use "../../../../scss/variables" as vars;
 
 .DiagramColumnView {
     $root: &;
@@ -40,10 +40,10 @@
     }
 
     &__diagram {
-        font-weight: $font-weight-lg;
-        font-size: $font-size-xs;
-        line-height: $line-height-xs;
-        color: $text-color;
+        font-weight: vars.$font-weight-lg;
+        font-size: vars.$font-size-xs;
+        line-height: vars.$line-height-xs;
+        color: vars.$text-color;
         width: 100%;
     }
 
@@ -66,7 +66,7 @@
                 top: 0;
 
                 &_color {
-                    @each $color, $color-map in $diagram-colors {
+                    @each $color, $color-map in vars.$diagram-colors {
                         &_#{$color} {
                             background-color: map-get($color-map, color-themed);
                             border-right: 1px solid map-get($color-map, color);
@@ -105,7 +105,7 @@
                 bottom: 0;
 
                 &_color {
-                    @each $color, $color-map in $diagram-colors {
+                    @each $color, $color-map in vars.$diagram-colors {
                         &_#{$color} {
                             background-color: map-get($color-map, color-themed);
                             border-top: 1px solid map-get($color-map, color);
@@ -133,10 +133,10 @@
             #{$root}__subtitle {
                 margin: 0 auto;
 
-                font-weight: $font-weight-sm;
-                font-size: $font-size-base;
-                line-height: $line-height-base;
-                color: $element-placeholder-color;
+                font-weight: vars.$font-weight-sm;
+                font-size: vars.$font-size-base;
+                line-height: vars.$line-height-base;
+                color: vars.$element-placeholder-color;
             }
         }
 
@@ -150,7 +150,7 @@
                 border-radius: 100%;
 
                 &_color {
-                    @each $color, $color-map in $diagram-colors {
+                    @each $color, $color-map in vars.$diagram-colors {
                         &_#{$color} {
                             border: 2px solid map-get($color-map, color);
                         }

package/list/List/ListView.scss

@@ -1,5 +1,7 @@
+@use "../../scss/variables" as vars;
+
 .ListView {
-    color: $text-color;
+    color: vars.$text-color;
 
     .FormView {
         margin-bottom: 10px;

package/list/Pagination/PaginationButtonView.scss

@@ -1,3 +1,5 @@
+@use "../../scss/variables" as vars;
+
 :root {
     --pagination-border-color: var(--gray);
     --pagination-hover-background-color: $white;
@@ -25,7 +27,7 @@ $pagination-background-color-disabled: var(--pagination-background-color-disable
 
     display: flex;
     flex-flow: row nowrap;
-    color: $text-color;
+    color: vars.$text-color;
 
     &_size {
         &_lg {
@@ -33,7 +35,7 @@ $pagination-background-color-disabled: var(--pagination-background-color-disable
             #{$root}__page {
                 &-button {
                     padding: 12px 18px;
-                    font-size: $font-size-lg;
+                    font-size: vars.$font-size-lg;
                     line-height: 24px;
 
                     &_hasIcon {
@@ -71,7 +73,7 @@ $pagination-background-color-disabled: var(--pagination-background-color-disable
             #{$root}__page {
                 &-button {
                     padding: 8px 14px;
-                    font-size: $font-size-base;
+                    font-size: vars.$font-size-base;
                     line-height: 24px;
 
                     &_hasIcon {
@@ -109,7 +111,7 @@ $pagination-background-color-disabled: var(--pagination-background-color-disable
             #{$root}__page {
                 &-button {
                     padding: 4px 12px;
-                    font-size: $font-size-sm;
+                    font-size: vars.$font-size-sm;
                     line-height: 25px;
 
                     &_hasIcon {
@@ -151,7 +153,7 @@ $pagination-background-color-disabled: var(--pagination-background-color-disable
         display: inline-block;
         cursor: pointer;
 
-        background-color: $element-background-color;
+        background-color: vars.$element-background-color;
         border: 1px solid $pagination-border-color;
         border-right: none;
 
@@ -165,7 +167,7 @@ $pagination-background-color-disabled: var(--pagination-background-color-disable
             height: 100%;
             pointer-events: none;
             border-radius: inherit;
-            border: 4px solid $light-gray;
+            border: 4px solid vars.$light-gray;
             opacity: 0;
         }
 
@@ -174,12 +176,12 @@ $pagination-background-color-disabled: var(--pagination-background-color-disable
         }
 
         &_active {
-            background-color: $primary;
-            color: $white;
+            background-color: vars.$primary;
+            color: vars.$white;
         }
 
         &_hasIcon:not(#{$pageRoot}_disabled):active {
-            background-color: $primary;
+            background-color: vars.$primary;
 
             #{$pageRoot}-icon {
                 path {
@@ -189,7 +191,7 @@ $pagination-background-color-disabled: var(--pagination-background-color-disable
         }
 
         &:not(#{$pageRoot}_disabled):not(#{$pageRoot}_active):hover {
-            border-color: $element-border-color-hover;
+            border-color: vars.$element-border-color-hover;
             background-color: $pagination-hover-background-color;
         }
 
@@ -244,8 +246,8 @@ $pagination-background-color-disabled: var(--pagination-background-color-disable
         }
 
         &_disabled {
-            background-color: $element-background-color-disabled;
-            color: $element-placeholder-color-disabled;
+            background-color: vars.$element-background-color-disabled;
+            color: vars.$element-placeholder-color-disabled;
 
             cursor: not-allowed;
 
@@ -256,7 +258,7 @@ $pagination-background-color-disabled: var(--pagination-background-color-disable
             #{$pageRoot}-icon {
                 pointer-events: none;
                 path {
-                    stroke: $element-placeholder-color-disabled;
+                    stroke: vars.$element-placeholder-color-disabled;
                 }
             }
         }

package/list/Steps/StepItemView.scss

@@ -1,3 +1,4 @@
+@use "../../scss/variables" as vars;
 
 .StepItemView{
   $root: &;
@@ -14,31 +15,31 @@
   }
 
   &__icon{
-    background-color: rgba($white, .2);
+    background-color: rgba(vars.$white, .2);
     padding: 5px;
     border-radius: 10px;
   }
 
   &_wait{
     #{$root}__icon{
-      background-color: $grey-darker;
+      background-color: vars.$grey-darker;
       svg{
-        fill: $white;
+        fill:vars.$white;
       }
     }
 
     #{$root}__title, #{$root}__subtitle, #{$root}__description{
-      color: $grey-darker;
+      color: vars.$grey-darker;
     }
 
     #{$root}__divider{
-      border-top-color: $grey-darker;
+      border-top-color: vars.$grey-darker;
     }
   }
 
   &_active{
     #{$root}__body{
-      background-color: $primary;
+      background-color: vars.$primary;
     }
 
     #{$root}__icon svg{
@@ -50,13 +51,13 @@
     }
 
     #{$root}__divider{
-      border-top-color: $primary;
+      border-top-color: vars.$primary;
     }
   }
 
   &_finish{
     #{$root}__body{
-      background-color: $success;
+      background-color: vars.$success;
     }
 
     #{$root}__icon svg{
@@ -68,13 +69,13 @@
     }
 
     #{$root}__divider{
-      border-top-color: $success;
+      border-top-color: vars.$success;
     }
   }
 
   &_error{
     #{$root}__body{
-      background-color: $danger;
+      background-color: vars.$danger;
     }
 
     #{$root}__icon svg{
@@ -86,7 +87,7 @@
     }
 
     #{$root}__divider{
-      border-top-color: $danger;
+      border-top-color: vars.$danger;
     }
   }
 
@@ -115,7 +116,7 @@
   &__icon{
     margin-right: 5px;
 
-    color: $white;
+    color: vars.$white;
     font-size: 12px;
     font-weight: 500;
 

package/list/Steps/StepsView.scss

@@ -1,3 +1,5 @@
+@use "../../scss/variables" as vars;
+
 .StepsView{
   width: 100%;
   min-height: 96px;
@@ -6,7 +8,7 @@
   justify-content: center;
   align-items: center;
   flex-shrink: 1;
-  background: $secondary-light;
+  background: vars.$secondary-light;
   overflow: auto;
   padding: 5px;
 

package/modal/Modal/ModalView.scss

@@ -1,9 +1,11 @@
-:root { 
-    --modal-background-color:  #FFFFFF;
+@use "../../scss/variables" as vars;
+
+:root {
+    --modal-background-color: #ffffff;
 }
 
 html[data-theme="dark"] {
-    --modal-background-color:  #272A37;
+    --modal-background-color: #272a37;
 }
 
 $modal-background-color: var(--modal-background-color);
@@ -29,15 +31,15 @@ $modal-background-color: var(--modal-background-color);
         margin: auto;
         overflow: visible;
         background-color: $modal-background-color;
-        color: $text-color;
+        color: vars.$text-color;
         box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 
         &_size {
             &_lg {
                 border-radius: 16px;
 
-                font-size: $font-size-lg;
-                line-height: $line-height-lg;
+                font-size: vars.$font-size-lg;
+                line-height: vars.$line-height-lg;
 
                 #{$root}__header {
                     padding: 24px;
@@ -47,15 +49,15 @@ $modal-background-color: var(--modal-background-color);
                     padding: 24px;
                 }
 
-                #{$root}__footer { 
+                #{$root}__footer {
                     padding: 24px;
                 }
             }
             &_md {
-                border-radius: $radius-large;
+                border-radius: vars.$radius-large;
 
-                font-size: $font-size-base;
-                line-height: $line-height-base;
+                font-size: vars.$font-size-base;
+                line-height: vars.$line-height-base;
 
                 #{$root}__header {
                     padding: 21px 20px;
@@ -65,15 +67,15 @@ $modal-background-color: var(--modal-background-color);
                     padding: 20px;
                 }
 
-                #{$root}__footer { 
+                #{$root}__footer {
                     padding: 20px;
                 }
             }
             &_sm {
-                border-radius: $radius-small;
+                border-radius: vars.$radius-small;
 
-                font-size: $font-size-sm;
-                line-height: $line-height-sm;
+                font-size: vars.$font-size-sm;
+                line-height: vars.$line-height-sm;
 
                 #{$root}__header {
                     padding: 19px 16px;
@@ -83,7 +85,7 @@ $modal-background-color: var(--modal-background-color);
                     padding: 16px;
                 }
 
-                #{$root}__footer { 
+                #{$root}__footer {
                     padding: 16px;
                 }
             }
@@ -104,7 +106,7 @@ $modal-background-color: var(--modal-background-color);
     &__title {
         font-size: inherit;
         line-height: inherit;
-        font-weight: $font-weight-lg;
+        font-weight: vars.$font-weight-lg;
     }
 
     &__close {
@@ -114,7 +116,7 @@ $modal-background-color: var(--modal-background-color);
 
         svg {
             path {
-                stroke: $text-color;
+                stroke: vars.$text-color;
             }
         }
     }

package/nav/Breadcrubms/BreadcrumbsView.scss

@@ -1,4 +1,4 @@
-
+@use "../../scss/variables" as vars;
 
 :root {
   --last-link-color: rgba(0, 0, 0, 0.3);;
@@ -19,11 +19,11 @@ $last-link-color: var(--last-link-color);
     display: flex;
 
     svg {
-      stroke: $link-color;
+      stroke: vars.$link-color;
     }
 
     svg:hover { 
-      stroke: $link-color-hover;
+      stroke: vars.$link-color-hover;
     }
 
     svg path, svg circle {
@@ -52,7 +52,7 @@ $last-link-color: var(--last-link-color);
       content: $breadcrumb-item-separator;
       display: inline-block;
       margin: 0 8px;
-      color: $link-color;
+      color: vars.$link-color;
     }
 
     span {
@@ -61,7 +61,7 @@ $last-link-color: var(--last-link-color);
     }
 
     span:hover {
-      color: $link-color-hover;
+      color: vars.$link-color-hover;
     }
   }
 }