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

package/form/TimeField/TimePanelView.scss

@@ -1,3 +1,6 @@
+@use "../../scss/variables";
+@use '../../scss/mixins';
+
 .TimePanelView {
     font-weight: 500;
     user-select: none;
@@ -8,14 +11,14 @@
         align-items: center;
         justify-content: center;
 
-        border-left: 1px solid $border-default;
-        border-bottom: 1px solid $border-default;
+        border-left: 1px solid variables.$border-default;
+        border-bottom: 1px solid variables.$border-default;
     }
 
     &__body {
         display: flex;
         flex-flow: row nowrap;
-        border-radius: $input-border-radius;
+        border-radius: variables.$input-border-radius;
     }
 
     &__column {
@@ -24,7 +27,7 @@
         list-style: none;
         padding: 0;
         margin: 0;
-        @include scrollWrapper(298px, 0, $scroll-thumb-color, $scroll-track-color);
+        @include mixins.scrollWrapper(298px, 0, variables.$scroll-thumb-color, variables.$scroll-track-color);
     }
 
     &__cell {
@@ -32,12 +35,12 @@
         cursor: pointer;
 
         &_selected {
-            background-color: $primary-light;
+            background-color: variables.$primary-light;
         }
 
         transition: background-color 0.1s ease-in;
         &:hover {
-            background-color: $back-disabled;
+            background-color: variables.$back-disabled;
         }
     }
 
@@ -56,23 +59,23 @@
         border: none;
 
         &_now {
-            color: $primary;
+            color: variables.$primary;
             background-color: unset;
 
             transition: color 0.1s ease-in;
             &:hover {
-                color: $primary-dark;
+                color: variables.$primary-dark;
             }
         }
 
         &_ok {
             color: #fff;
             border-radius: 4px;
-            background-color: $primary;
+            background-color: variables.$primary;
 
             transition: background-color 0.1s ease-in;
             &:hover {
-                background-color: $primary-dark;
+                background-color: variables.$primary-dark;
             }
         }
     }

package/form/TimeRangeField/TimeRangeFieldView.scss

@@ -1,9 +1,13 @@
+@use "sass:map";
+@use "../../scss/variables";
+@use '../../scss/mixins';
+
 .TimeRangeFieldView {
     $root: &;
     
-    @include icon-container($root);
+    @include mixins.icon-container($root);
 
-    @include date-range-body($root);
+    @include mixins.date-range-body($root);
 
     &__body {
         > * {
@@ -14,12 +18,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 +31,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 { 
-        background-color: $element-background-color;
+        background-color: variables.$element-background-color;
 
         display: flex;
     }
@@ -66,7 +70,7 @@
                 transform: translateX(-50%);
                 height: 100%;
                 width: 1px;
-                background-color: $date-range-separator-color;
+                background-color: mixins.$date-range-separator-color;
             }
         }
 

package/index.scss

@@ -1,91 +1,92 @@
-@import '~@splidejs/splide/dist/css/splide.min.css';
+@use "sass:meta";
+@use '~@splidejs/splide/dist/css/splide.min.css';
 
-@import './scss/normalize';
-@import './scss/mixins';
-@import './scss/variables';
-@import './scss/animations';
-@import './scss/fonts';
+@include meta.load-css('scss/normalize');
+@include meta.load-css('scss/animations');
+@include meta.load-css('scss/variables');
+@include meta.load-css('scss/mixins');
+@include meta.load-css('scss/fonts');
 
-@import './content/Accordion/AccordionView';
-@import './content/Accordion/AccordionItemView';
-@import './crud/Crud/CrudView';
-@import './content/Alert/AlertView';
-@import './content/Avatar/AvatarView';
-@import './content/Avatar/AvatarGroupView';
-@import './content/Badge/BadgeView';
-@import './content/Calendar/CalendarView';
-@import './content/Calendar/CaptionElement';
-@import './content/Card/CardView';
-@import './content/Detail/DetailView';
-@import './content/DropDown/DropDownView';
-@import './content/Menu/MenuItemView';
-@import './content/Menu/MenuView';
-@import './content/Icon/IconView';
-@import './content/CopyToClipboard/CopyToClipboardView';
-@import './content/Slider//SliderView';
-@import './form/AutoCompleteField/AutoCompleteFieldView';
-@import './form/Button/ButtonView';
-@import './form/CheckboxField/CheckboxFieldView';
-@import './form/CheckboxListField/CheckboxListFieldView';
-@import './form/DateField/DateFieldView';
-@import './form/DateRangeField/DateRangeFieldView';
-@import './form/DateTimeField/DateTimeFieldView';
-@import './form/DateTimeRangeField/DateTimeRangeFieldView';
-@import './form/TimeRangeField//TimeRangeFieldView';
-@import './form/DropDownFieldItem/DropDownFieldItemView';
-@import './form/DropDownField/DropDownFieldView';
-@import './form/FieldLayout/FieldLayoutView';
-@import './form/FieldList/FieldListView';
-@import './form/FieldList/FieldListItemView';
-@import './form/FileField/FileFieldView';
-@import './form/ImageField/ImageFieldView';
-@import './form/FileField/FileFieldItemView';
-@import './form/FieldSet/FieldSetView';
-@import './form/Form/FormView';
-@import './form/HtmlField/HtmlFieldView';
-@import './form/InputField/InputFieldView';
-@import './form/NumberField/NumberFieldView';
-@import './form/PasswordField/PasswordFieldView';
-@import './form/RateField/RateFieldView';
-@import './form/RadioField/RadioFieldView';
-@import './form/RadioListField/RadioListFieldView';
-@import './form/ReCaptchaField/ReCaptchaFieldView';
-@import './form/SliderField/SliderFieldView';
-@import './form/SwitcherField/SwitcherFieldView';
-@import './form/TextField/TextFieldView';
-@import './form/TimeField/TimeFieldView';
-@import './form/TimeField/TimePanelView';
-@import './layout/Header/HeaderView';
-@import './layout/Tooltip/TooltipView';
-@import './layout/Notifications/NotificationsView';
-@import './layout/Notifications/NotificationsItemView';
-@import './layout/Loader/LoaderView';
-@import './layout/ProgressBar/LineProgressBarView';
-@import './layout/ProgressBar/CircleProgressBarView';
-@import './layout/Skeleton/SkeletonView';
-@import './layout/Sidebar/SidebarView';
-@import './list/ControlsColumnView/ControlsColumnView';
-@import './list/CheckboxColumn/CheckboxColumnView';
-@import './list/Empty/EmptyView';
-@import './list/Grid/GridView';
-@import './list/Grid/views/ContentColumnView/ContentColumnView';
-@import './list/FlexGrid/FlexGridView';
-@import './list/List/ListView';
-@import './list/Pagination/PaginationButtonView';
-@import './list/Pagination/PaginationMoreView';
-@import './list/PaginationSize/PaginationSizeView';
-@import './list/Steps/StepsView';
-@import './list/Steps/StepItemView';
-@import './modal/Modal/ModalView';
-@import './nav/Breadcrubms/BreadcrumbsView';
-@import './nav/Controls/ControlsView';
-@import './nav/Nav/NavBarView';
-@import './nav/Nav/NavButtonView';
-@import './nav/Nav/NavIconView';
-@import './nav/Nav/NavLinkView';
-@import './nav/Nav/NavListView';
-@import './nav/Nav/NavTabsView';
-@import './nav/Tree/TreeView';
-@import './nav/ButtonGroup/ButtonGroupView';
-@import './typography/Text/TextView';
-@import './typography/Title/TitleView';
+@include meta.load-css('content/Accordion/AccordionView');
+@include meta.load-css('content/Accordion/AccordionItemView');
+@include meta.load-css('content/Alert/AlertView');
+@include meta.load-css('content/Avatar/AvatarView');
+@include meta.load-css('content/Avatar/AvatarGroupView');
+@include meta.load-css('content/Badge/BadgeView');
+@include meta.load-css('content/Calendar/CalendarView');
+@include meta.load-css('content/Calendar/CaptionElement');
+@include meta.load-css('content/Card/CardView');
+@include meta.load-css('content/Detail/DetailView');
+@include meta.load-css('content/DropDown/DropDownView');
+@include meta.load-css('content/Menu/MenuItemView');
+@include meta.load-css('content/Menu/MenuView');
+@include meta.load-css('content/Icon/IconView');
+@include meta.load-css('content/Slider/SliderView');
+@include meta.load-css('content/CopyToClipboard/CopyToClipboardView');
+@include meta.load-css('crud/Crud/CrudView');
+@include meta.load-css('form/AutoCompleteField/AutoCompleteFieldView');
+@include meta.load-css('form/Button/ButtonView');
+@include meta.load-css('form/CheckboxField/CheckboxFieldView');
+@include meta.load-css('form/CheckboxListField/CheckboxListFieldView');
+@include meta.load-css('form/DateField/DateFieldView');
+@include meta.load-css('form/DateRangeField/DateRangeFieldView');
+@include meta.load-css('form/DateTimeField/DateTimeFieldView');
+@include meta.load-css('form/DateTimeRangeField/DateTimeRangeFieldView');
+@include meta.load-css('form/TimeRangeField/TimeRangeFieldView');
+@include meta.load-css('form/DropDownFieldItem/DropDownFieldItemView');
+@include meta.load-css('form/DropDownField/DropDownFieldView');
+@include meta.load-css('form/FieldLayout/FieldLayoutView');
+@include meta.load-css('form/FieldList/FieldListView');
+@include meta.load-css('form/FieldList/FieldListItemView');
+@include meta.load-css('form/FileField/FileFieldView');
+@include meta.load-css('form/ImageField/ImageFieldView');
+@include meta.load-css('form/FileField/FileFieldItemView');
+@include meta.load-css('form/FieldSet/FieldSetView');
+@include meta.load-css('form/Form/FormView');
+@include meta.load-css('form/HtmlField/HtmlFieldView');
+@include meta.load-css('form/InputField/InputFieldView');
+@include meta.load-css('form/NumberField/NumberFieldView');
+@include meta.load-css('form/PasswordField/PasswordFieldView');
+@include meta.load-css('form/RateField/RateFieldView');
+@include meta.load-css('form/RadioField/RadioFieldView');
+@include meta.load-css('form/RadioListField/RadioListFieldView');
+@include meta.load-css('form/ReCaptchaField/ReCaptchaFieldView');
+@include meta.load-css('form/SliderField/SliderFieldView');
+@include meta.load-css('form/SwitcherField/SwitcherFieldView');
+@include meta.load-css('form/TextField/TextFieldView');
+@include meta.load-css('form/TimeField/TimeFieldView');
+@include meta.load-css('form/TimeField/TimePanelView');
+@include meta.load-css('layout/Header/HeaderView');
+@include meta.load-css('layout/Tooltip/TooltipView');
+@include meta.load-css('layout/Notifications/NotificationsView');
+@include meta.load-css('layout/Notifications/NotificationsItemView');
+@include meta.load-css('layout/Loader/LoaderView');
+@include meta.load-css('layout/ProgressBar/LineProgressBarView');
+@include meta.load-css('layout/ProgressBar/CircleProgressBarView');
+@include meta.load-css('layout/Skeleton/SkeletonView');
+@include meta.load-css('layout/Sidebar/SidebarView');
+@include meta.load-css('list/ControlsColumnView/ControlsColumnView');
+@include meta.load-css('list/CheckboxColumn/CheckboxColumnView');
+@include meta.load-css('list/Empty/EmptyView');
+@include meta.load-css('list/Grid/GridView');
+@include meta.load-css('list/FlexGrid/FlexGridView');
+@include meta.load-css('list/List/ListView');
+@include meta.load-css('list/Grid/views/ContentColumnView/ContentColumnView');
+@include meta.load-css('list/Pagination/PaginationButtonView');
+@include meta.load-css('list/Pagination/PaginationMoreView');
+@include meta.load-css('list/PaginationSize/PaginationSizeView');
+@include meta.load-css('list/Steps/StepsView');
+@include meta.load-css('list/Steps/StepItemView');
+@include meta.load-css('modal/Modal/ModalView');
+@include meta.load-css('nav/Breadcrubms/BreadcrumbsView');
+@include meta.load-css('nav/Controls/ControlsView');
+@include meta.load-css('nav/Nav/NavBarView');
+@include meta.load-css('nav/Nav/NavButtonView');
+@include meta.load-css('nav/Nav/NavIconView');
+@include meta.load-css('nav/Nav/NavLinkView');
+@include meta.load-css('nav/Nav/NavListView');
+@include meta.load-css('nav/Nav/NavTabsView');
+@include meta.load-css('nav/Tree/TreeView');
+@include meta.load-css('nav/ButtonGroup/ButtonGroupView');
+@include meta.load-css('typography/Text/TextView');
+@include meta.load-css('typography/Title/TitleView');

package/layout/Header/HeaderView.scss

@@ -1,9 +1,11 @@
+@use "../../scss/variables";
+
 .HeaderView {
     width: 1000px;
     display: flex;
     align-items: center;
-    background-color: $element-background-color;
-    border-bottom: 1px solid $element-placeholder-color-disabled;
+    background-color: variables.$element-background-color;
+    border-bottom: 1px solid variables.$element-placeholder-color-disabled;
     position: relative;
 
     &_size {
@@ -34,10 +36,10 @@
         }
 
         &-title {
-            color: $text-color;
-            font-weight: $font-weight-lg;
-            font-size: $font-size-base;
-            line-height: $line-height-base;
+            color: variables.$text-color;
+            font-weight: variables.$font-weight-lg;
+            font-size: variables.$font-size-base;
+            line-height: variables.$line-height-base;
         }
     }
 
@@ -64,9 +66,9 @@
 
         &-name.TextView_type_body {
             margin: 0;
-            font-weight: $font-weight-lg;
-            font-size: $font-size-base;
-            line-height: $line-height-base;
+            font-weight: variables.$font-weight-lg;
+            font-size: variables.$font-size-base;
+            line-height: variables.$line-height-base;
 
             @media (max-width: 360px) {
                 display: none;
@@ -96,7 +98,7 @@
             position: absolute;
             top: 100%;
             left: 0;
-            background-color: $white;
+            background-color: variables.$white;
             opacity: 0;
             pointer-events: none;
             transition: opacity 150ms ease-in-out;
@@ -106,7 +108,7 @@
                 pointer-events: all;
             }
             .ButtonView__text {
-                color: $element-placeholder-color;
+                color: variables.$element-placeholder-color;
             }
         }
 
@@ -114,7 +116,7 @@
             width: 24px;
             height: 24px;
             svg path {
-                stroke: $icon-color;
+                stroke: variables.$icon-color;
             }
         }
 
@@ -124,7 +126,7 @@
             display: flex;
             row-gap: 16px;
             align-items: flex-start;
-            background-color: $element-background-color;
+            background-color: variables.$element-background-color;
         }
     }
 

package/layout/Loader/LoaderView.scss

@@ -1,3 +1,6 @@
+@use "../../scss/variables";
+@use '../../scss/mixins';
+
 :root {
   --gradient-color-primary-first: #651FFF;
   --gradient-color-primary-second: #BA9BFF;
@@ -64,9 +67,9 @@ $gradient-color-primary-second: var(--gradient-color-primary-second);
     }
   }
 
-  @each $colorName, $colorMap in $color-themes {
+  @each $colorName, $colorMap in variables.$color-themes {
     &_color_#{$colorName} {
-        @include loader-color($colorMap, $colorName, $root);
+        @include mixins.loader-color($colorMap, $colorName, $root);
     }
   }
 }

package/layout/ProgressBar/CircleProgressBarView.scss

@@ -1,3 +1,5 @@
+@use "../../scss/variables";
+
 .CircleProgressBarView{
   $root: &;
 
@@ -84,31 +86,31 @@
   &_status{
     &_success{
       #{$root}__progressCircle{
-        stroke: $success;
+        stroke: variables.$success;
       }
 
       #{$root}__content{
         svg{
-          fill: $success;
+          fill: variables.$success;
         }
       }
     }
 
     &_exception{
       #{$root}__progressCircle{
-        stroke: $danger;
+        stroke: variables.$danger;
       }
 
       #{$root}__content{
         svg{
-          fill: $danger;
+          fill: variables.$danger;
         }
       }
     }
 
     &_normal{
       #{$root}__progressCircle{
-        stroke: $primary;
+        stroke: variables.$primary;
       }
     }
   }
@@ -123,7 +125,7 @@
 
 
     #{$root}__emptyCircle{
-      stroke: $back-disabled;
+      stroke: variables.$back-disabled;
       stroke-dashoffset: 0;
     }
 
@@ -142,7 +144,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: $secondary-dark;
+    color: variables.$secondary-dark;
     font-weight: bold;
     transform: rotate(90deg);
   }

package/layout/ProgressBar/LineProgressBarView.scss

@@ -1,3 +1,5 @@
+@use "../../scss/variables";
+
 .LineProgressBarView{
   $root: &;
 
@@ -35,27 +37,27 @@
   &_status{
     &_success{
       #{$root}__progressLine{
-        background-color: $success;
+        background-color: variables.$success;
       }
 
       svg{
-          fill: $success;
+          fill: variables.$success;
       }
     }
 
     &_exception{
       #{$root}__progressLine{
-        background-color: $danger;
+        background-color: variables.$danger;
       }
 
       svg{
-        fill: $danger;
+        fill: variables.$danger;
       }
     }
 
     &_normal{
       #{$root}__progressLine{
-        background-color: $primary;
+        background-color: variables.$primary;
       }
     }
 
@@ -63,7 +65,7 @@
 
   &__emptyLine{
     position: relative;
-    background-color: $back-disabled;
+    background-color: variables.$back-disabled;
     border-radius: 20px;
   }
 
@@ -85,7 +87,7 @@
         content: "";
         position: absolute;
         transform: translateX(-100%);
-        background: linear-gradient(90deg, transparent, rgba($white, 0.5), transparent);
+        background: linear-gradient(90deg, transparent, rgba(variables.$white, 0.5), transparent);
         animation: wave-animation 1.6s linear 0.5s infinite;
     }
 
@@ -109,7 +111,7 @@
   }
 
   &__text{
-    color: $graphite;
+    color: variables.$graphite;
     margin-left: 8px;
   }
 }

package/layout/Sidebar/FooterIcons/FooterIcons.scss

@@ -1,4 +1,4 @@
-@import "style/variables";
+@use "style/variables";
 
 :root {
     --footer-shrink-icon-color: #626262;

package/layout/Sidebar/SidebarLogo/SidebarLogo.scss

@@ -1,11 +1,11 @@
-@import "style/variables";
+@use "../../../scss/variables";
 
 .SidebarLogo {
     padding: 19px 12px 8px 12px;
     display: flex;
     flex-flow: row nowrap;
     justify-content: space-between;
-    border-bottom: 1px solid $element-border-color;
+    border-bottom: 1px solid variables.$element-border-color;
 
     &__left {
         display: flex;
@@ -18,10 +18,10 @@
     }
 
     &__label {
-        font-size: $font-size-base;
-        font-weight: $font-weight-lg;
-        line-height: $line-height-base;
-        color: $sidebar-label-color;
+        font-size: variables.$font-size-base;
+        font-weight: variables.$font-weight-lg;
+        line-height: variables.$line-height-base;
+        color: variables.$sidebar-label-color;
         opacity: 0;
         transition: opacity 150ms ease-in-out;
 
@@ -46,7 +46,7 @@
         transition: opacity 150ms ease-in-out;
 
         svg path, rect, circle { 
-            stroke: $icon-color;
+            stroke: variables.$icon-color;
         }
     }
 }

package/layout/Sidebar/SidebarUser/SidebarUser.scss

@@ -1,4 +1,4 @@
-@import "style/variables";
+@use "style/variables";
 
 .SidebarUser {
     display: flex;
@@ -23,10 +23,10 @@
     &__name {
         width: 128px;
 
-        font-size: $font-size-sm;
-        font-weight: $font-weight-sm;
-        line-height: $line-height-sm;
-        color: $sidebar-label-color;
+        font-size: variables.$font-size-sm;
+        font-weight: variables.$font-weight-sm;
+        line-height: variables.$line-height-sm;
+        color: variables.$sidebar-label-color;
         opacity: 0;
         transition: opacity 150ms ease-in-out;
     }