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

package/content/Accordion/AccordionItemView.scss

@@ -1,3 +1,6 @@
+@use "sass:map";
+@use "../../scss/variables" as vars;
+
 :root {
     --accordion-light-background: var(--gray);
     --accordion-intermediate-background: #ffffff;
@@ -14,6 +17,8 @@
     --accordion-chevron-revert-box-shadow: none;
 
     --accordion-content-background: #ffffff;
+    --accordion-text-color: #312c3a;
+    --accordion-content-border: rgba(0, 0, 0, 0.1);
 }
 
 html[data-theme="dark"] {
@@ -32,6 +37,8 @@ html[data-theme="dark"] {
     --accordion-chevron-revert-box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
 
     --accordion-content-background: var(--graphite);
+    --accordion-text-color: #ffffff;
+    --accordion-content-border: rgba(255, 255, 255, 0.1);
 }
 
 $accordion-light-background: var(--accordion-light-background);
@@ -50,19 +57,23 @@ $accordion-chevron-revert-box-shadow: var(--accordion-chevron-revert-box-shadow)
 
 $accordion-content-background: var(--accordion-content-background);
 
+$accordion-text-color: var(--accordion-text-color);
+
+$accordion-content-border: var(--accordion-content-border);
+
 $accordion-themes: () !default;
-$accordion-themes: map-merge(
+$accordion-themes: map.merge(
     (
         "light": (
             "background": $accordion-light-background,
-            "text-color": $text-color,
+            "text-color": $accordion-text-color,
             "chevron-box-shadow": $accordion-chevron-default-box-shadow,
             "chevron-background": $accordion-chevron-light-background,
             "chevron-inner-color": $accordion-chevron-inner-default-color,
         ),
         "intermediate": (
             "background": $accordion-intermediate-background,
-            "text-color": $text-color,
+            "text-color": $accordion-text-color,
             "chevron-box-shadow": $accordion-chevron-default-box-shadow,
             "chevron-background": $accordion-chevron-intermediate-background,
             "chevron-inner-color": $accordion-chevron-inner-default-color,
@@ -92,22 +103,21 @@ $accordion-chevron-color: var(--accordion-chevron-color);
     height: 56px;
     width: 480px;
     height: fit-content;
-    font-family: $font-family-nunito;
 
     @each $theme, $themeProperties in $accordion-themes {
         &_theme_#{$theme} {
             #{$root}__header-container {
-                background-color: map-get($themeProperties, background);
-                color: map-get($themeProperties, text-color);
+                background-color: map.get($themeProperties, background);
+                color: map.get($themeProperties, text-color);
             }
 
             #{$root}__icon-chevron {
-                box-shadow: map-get($themeProperties, chevron-box-shadow);
+                box-shadow: map.get($themeProperties, chevron-box-shadow);
                 rect {
-                    fill: map-get($themeProperties, chevron-background);
+                    fill: map.get($themeProperties, chevron-background);
                 }
                 path {
-                    stroke: map-get($themeProperties, chevron-inner-color);
+                    stroke: map.get($themeProperties, chevron-inner-color);
                 }
             }
         }
@@ -115,7 +125,7 @@ $accordion-chevron-color: var(--accordion-chevron-color);
 
     &_position {
         &_top {
-            border-radius: $radius-large $radius-large 0 0;
+            border-radius: vars.$radius-large vars.$radius-large 0 0;
         }
 
         &_middle {
@@ -123,7 +133,7 @@ $accordion-chevron-color: var(--accordion-chevron-color);
         }
 
         &_bottom {
-            border-radius: 0 0 $radius-large $radius-large;
+            border-radius: 0 0 vars.$radius-large vars.$radius-large;
 
             #{$root}__content {
                 grid-row-start: 1;
@@ -165,7 +175,7 @@ $accordion-chevron-color: var(--accordion-chevron-color);
         width: 24px;
         height: 24px;
         box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
-        border-radius: $radius-small;
+        border-radius: vars.$radius-small;
 
         transform: rotate(0deg);
         transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
@@ -185,7 +195,7 @@ $accordion-chevron-color: var(--accordion-chevron-color);
         padding: 16px;
         align-self: center;
 
-        font-size: $font-size-lg;
+        font-size: vars.$font-size-lg;
         line-height: 24px;
     }
 
@@ -214,7 +224,7 @@ $accordion-chevron-color: var(--accordion-chevron-color);
         overflow: hidden;
         max-height: 0;
         padding: 0 16px;
-        color: $text-color;
+        color: vars.$text-color;
 
         &_visible {
             max-height: 1024px;

package/content/Alert/AlertView.scss

@@ -1,3 +1,6 @@
+@use "sass:map";
+@use "../../scss/variables" as vars;
+
 :root {
     --alert-text-color: #152536;
 }
@@ -9,27 +12,27 @@ html[data-theme="dark"] {
 $alert-text-color: var(--alert-text-color);
 
 $alert-themes: () !default;
-$alert-themes: map-merge(
+$alert-themes: map.merge(
     (
         "success": (
-            "background-color": $success-light,
-            "icon-color": $success,
+            "background-color": vars.$success-light,
+            "icon-color": vars.$success,
         ),
         "info": (
-            "background-color": $info-light,
-            "icon-color": $info,
+            "background-color": vars.$info-light,
+            "icon-color": vars.$info,
         ),
         "warning": (
-            "background-color": $warning-light,
-            "icon-color": $warning,
+            "background-color": vars.$warning-light,
+            "icon-color": vars.$warning,
         ),
         "error": (
-            "background-color": $danger-light,
-            "icon-color": $danger,
+            "background-color": vars.$danger-light,
+            "icon-color": vars.$danger,
         ),
         "default": (
-            "background-color": $light-gray,
-            "icon-color": $gray-dark,
+            "background-color": vars.$light-gray,
+            "icon-color": vars.$gray-dark,
         ),
     ),
     $alert-themes
@@ -40,8 +43,8 @@ $alert-themes: map-merge(
 
     position: relative;
     padding: 16px;
-    border-radius: $radius-large;
-    font-family: $font-family-nunito;
+    border-radius: vars.$radius-large;
+    font-family: vars.$font-family-nunito;
 
     &_close-animation {
         animation: hide_slide 0.4s ease-in;
@@ -93,18 +96,18 @@ $alert-themes: map-merge(
 
     @each $color, $alert-properties in $alert-themes {
         &_#{$color} {
-            background-color: map-get($alert-properties, background-color);
+            background-color: map.get($alert-properties, background-color);
 
             #{$root}__icon_#{$color} { 
                 g > circle:not([fill="white"]), rect { 
-                    fill: map-get($alert-properties, icon-color);
+                    fill: map.get($alert-properties, icon-color);
                 }
             }
         }
     }
 
     &__message {
-        font-size: $font-size-lg;
+        font-size: vars.$font-size-lg;
     }
 
     &__wrapper {
@@ -121,6 +124,6 @@ $alert-themes: map-merge(
     }
 
     &__description {
-        font-size: $font-size-base;
+        font-size: vars.$font-size-base;
     }
 }

package/content/Avatar/AvatarView.scss

@@ -1,3 +1,5 @@
+@use "../../scss/variables" as vars;
+
 :root {
     --border-width-small: 1px;
     --border-width-medium: 2px;
@@ -60,7 +62,7 @@ $status-border-color: var(--status-border-color);
                 height: 64px;
                 width: 64px;
                 line-height: 64px;
-                font-size: $font-size-base;
+                font-size: vars.$font-size-base;
             }
             --border-width: var(--border-width-large);
             --status-border-width: var(--status-border-width-large);
@@ -72,7 +74,7 @@ $status-border-color: var(--status-border-color);
                 height: 50px;
                 width: 50px;
                 line-height: 50px;
-                font-size: $font-size-sm;
+                font-size: vars.$font-size-sm;
             }
             --border-width: var(--border-width-medium);
             --status-border-width: var(--status-border-width-medium);
@@ -84,7 +86,7 @@ $status-border-color: var(--status-border-color);
                 height: 32px;
                 width: 32px;
                 line-height: 32px;
-                font-size: $font-size-xs;
+                font-size: vars.$font-size-xs;
             }
             --border-width: var(--border-width-small);
             --status-border-width: var(--status-border-width-small);
@@ -123,17 +125,17 @@ $status-border-color: var(--status-border-color);
             height: var(--status-size);
             z-index: 10;
 
-            color: $success;
+            color: vars.$success;
 
-            border-radius: $radius-circle;
-            background-color: $success;
+            border-radius: vars.$radius-circle;
+            background-color: vars.$success;
 
             border: var(--status-border-width) solid $status-border-color;
         }
     }
 
     &_has-border {
-        @include border($gradient-blue);
+        @include border(vars.$gradient-blue);
     }
 
     &__body {
@@ -144,12 +146,12 @@ $status-border-color: var(--status-border-color);
         white-space: nowrap;
         vertical-align: middle;
 
-        color: $white;
-        background: $primary;
+        color: vars.$white;
+        background: vars.$primary;
 
         span {
             display: block;
-            font-family: $font-family-nunito;
+            font-family: vars.$font-family-nunito;
             font-weight: 800;
             letter-spacing: 0.1em;
         }

package/content/Badge/BadgeView.scss

@@ -1,3 +1,5 @@
+@use "../../scss/variables" as vars;
+
 :root {
     --counter-background-color: #ffffff;
     --counter-border-color: var(--gray);
@@ -21,9 +23,9 @@ $counter-cross-color: var(--counter-cross-color);
     position: relative;
     width: fit-content;
 
-    font-family: $font-family-nunito;
-    color: $white;
-    font-size: $font-size-xs;
+    font-family: vars.$font-family-nunito;
+    color: vars.$white;
+    font-size: vars.$font-size-xs;
     line-height: 16px;
 
     &__content {
@@ -41,12 +43,12 @@ $counter-cross-color: var(--counter-cross-color);
     }
 
     $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 {
@@ -54,7 +56,7 @@ $counter-cross-color: var(--counter-cross-color);
             background-color: $color;
 
             @if ($type == "warning" or $type == "info") {
-                color: $static-text-color;
+                color: vars.$static-text-color;
 
                 #{$root}__close {
                     svg {
@@ -80,11 +82,11 @@ $counter-cross-color: var(--counter-cross-color);
     }
 
     &_squarer {
-        border-radius: $radius-small;
+        border-radius: vars.$radius-small;
     }
 
     &_rounder {
-        border-radius: $radius-xlarge;
+        border-radius: vars.$radius-xlarge;
     }
 
     &_hasClose {
@@ -97,8 +99,8 @@ $counter-cross-color: var(--counter-cross-color);
         border: 1px solid $counter-border-color;
         border-radius: 100px;
 
-        background: $light-gray;
-        color: $text-color;
+        background: vars.$light-gray;
+        color: vars.$text-color;
         padding: 3px 12px;
 
         #{$root}__content {
@@ -117,17 +119,17 @@ $counter-cross-color: var(--counter-cross-color);
 
             margin-right: 4px;
             padding: 0 5.4px;
-            background-color: $white;
+            background-color: vars.$white;
 
-            border-radius: $radius-circle;
+            border-radius: vars.$radius-circle;
             background-color: $counter-background-color;
         }
 
         #{$root}__counter-content {
-            font-weight: $font-weight-sm;
-            font-size: $font-size-xs;
+            font-weight: vars.$font-weight-sm;
+            font-size: vars.$font-size-xs;
             line-height: 16px;
-            color: $text-color;
+            color: vars.$text-color;
         }
 
         #{$root}__close {

package/content/Calendar/CalendarView.scss

@@ -1,3 +1,6 @@
+@use "../../scss/variables" as vars;
+@use '../../scss/mixins';
+
 :root {
     --day-background-color-hover: rgba(0, 0, 0, 0.1);
     --calendar-border-color: var(--light-gray);
@@ -11,28 +14,15 @@ html[data-theme="dark"] {
 $day-background-color-hover: var(--day-background-color-hover);
 $calendar-border-color: var(--calendar-border-color);
 
-@mixin calendar-button () {
-    padding: 5px 12.5px;
-    border-radius: $radius-small;
-    border: 1px solid $gray;
-    background-color: transparent;
-    background-image: none;
-    box-shadow: none;
-    cursor: pointer;
-    color: $text-color;
-    font-size: $font-size-sm;
-    line-height: $line-height-lg;
-}
-
 .CalendarView {
     $root: &;
 
-    background-color: $element-background-color;
-    border-radius: $radius-large;
+    background-color: vars.$element-background-color;
+    border-radius: vars.$radius-large;
     border: 4px solid $calendar-border-color;
     position: relative;
-    color: $text-color;
-    font-weight: $font-weight-md;
+    color: vars.$text-color;
+    font-weight: vars.$font-weight-md;
     user-select: none;
     padding: 12px;
 
@@ -71,9 +61,9 @@ $calendar-border-color: var(--calendar-border-color);
         color: inherit;
         text-align: center;
         vertical-align: middle;
-        font-size: $font-size-base;
-        line-height: $line-height-base;
-        font-weight: $font-weight-lg;
+        font-size: vars.$font-size-base;
+        line-height: vars.$line-height-base;
+        font-weight: vars.$font-weight-lg;
         text-transform: capitalize;
     }
 
@@ -102,7 +92,7 @@ $calendar-border-color: var(--calendar-border-color);
     .DayPicker-Day {
         position: relative;
         padding: 0;
-        border-radius: $radius-large;
+        border-radius: vars.$radius-large;
 
         vertical-align: middle;
         text-align: center;
@@ -152,14 +142,14 @@ $calendar-border-color: var(--calendar-border-color);
         }
 
         &--outside {
-            color: $element-placeholder-color;
+            color: vars.$element-placeholder-color;
 
         }
 
         &--today {
             #{$root}__day {
-                border: 1px solid $primary;
-                color: $primary;
+                border: 1px solid vars.$primary;
+                color: vars.$primary;
             }
         }
 
@@ -179,18 +169,18 @@ $calendar-border-color: var(--calendar-border-color);
     }
 
     .DayPicker-TodayButton {
-        @include calendar-button();
+        @include mixins.calendar-button();
     }
 
     // Days selection
     // Selected day
     .DayPicker-Day--selected:not(.DayPicker-Day--inRange) {
-        color: $white;
-        background-color: $primary;
+        color: vars.$white;
+        background-color: vars.$primary;
     }
 
     .DayPicker-Day--selected.DayPicker-Day--today .CalendarView__day {
-        color: $white;
+        color: vars.$white;
     }
 
     // Hover
@@ -214,7 +204,7 @@ $calendar-border-color: var(--calendar-border-color);
         width: 34px;
         height: 34px;
         line-height: 30px;
-        border-radius: $radius-large;
+        border-radius: vars.$radius-large;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -223,16 +213,16 @@ $calendar-border-color: var(--calendar-border-color);
     &_ranged {
         .DayPicker-Day {
             &--start {
-                color: $white;
+                color: vars.$white;
 
                 #{$root}__day {
-                    background-color: $primary;
+                    background-color: vars.$primary;
                 }
 
                 &::before {
                     width: 50px;
                     height: 42px;
-                    background-color: $primary-light;
+                    background-color: vars.$primary-light;
                     border-radius: 16px 0px 0px 16px;
                 }
             }
@@ -241,20 +231,20 @@ $calendar-border-color: var(--calendar-border-color);
                 color: #fff;
 
                 #{$root}__day {
-                    background-color: $calendar-primary-color;
+                    background-color: vars.$calendar-primary-color;
                 }
 
                 &::before {
                     width: 46px;
                     height: 42px;
-                    background-color: $primary-light;
+                    background-color: vars.$primary-light;
                     border-radius: 0px 16px 16px 0px;
                 }
             }
 
             &--inRange {
                 &::before {
-                    background-color: $primary-light;
+                    background-color: vars.$primary-light;
                     width: 50px;
                     height: 42px;
                 }
@@ -262,7 +252,7 @@ $calendar-border-color: var(--calendar-border-color);
 
             //Today in range
             &--inRange.DayPicker-Day--selected.DayPicker-Day--today .CalendarView__day {
-                color: $primary;
+                color: vars.$primary;
             }
 
             &--inRange:hover .CalendarView__day {
@@ -273,7 +263,7 @@ $calendar-border-color: var(--calendar-border-color);
             &--outRange {
                 pointer-events: none;
                 &::before {
-                    background-color: $calendar-primary-light-color;
+                    background-color: vars.$calendar-primary-light-color;
                 }
             }
         }

package/content/Calendar/CaptionElement.scss

@@ -1,3 +1,6 @@
+@use "../../scss/variables" as vars;
+@use '../../scss/mixins';
+
 :root {
     --caption-arrow-background-color: #f1f5f7;
     --caption-arrow-color: #323232;
@@ -48,14 +51,14 @@ $separator-background-color: var(--separator-background-color);
         cursor: pointer;
         transition: color 0.1s ease-in;
 
-        font-weight: $font-weight-lg;
-        font-size: $font-size-lg;
-        line-height: $line-height-lg;
+        font-weight: vars.$font-weight-lg;
+        font-size: vars.$font-size-lg;
+        line-height: vars.$line-height-lg;
 
         &:hover,
         &:active,
         &:focus {
-            color: $calendar-primary-color;
+            color: vars.$calendar-primary-color;
         }
     }
 
@@ -95,7 +98,7 @@ $separator-background-color: var(--separator-background-color);
         left: 0;
         right: 0;
         bottom: 50px;
-        background-color: $element-background-color;
+        background-color: vars.$element-background-color;
         margin-bottom: 12px;
         max-height: 294px;
 
@@ -117,7 +120,7 @@ $separator-background-color: var(--separator-background-color);
 
         text-align: center;
         background-color: $caption-header-month-background-color;
-        font-weight: $font-weight-lg;
+        font-weight: vars.$font-weight-lg;
 
         &_months {
             position: relative;
@@ -159,7 +162,7 @@ $separator-background-color: var(--separator-background-color);
 
         &-years {
             grid-area: YearsCol;
-            @include scrollWrapper(294px, 0, $scroll-thumb-color, $scroll-track-color);
+            @include mixins.scrollWrapper(294px, 0, vars.$scroll-thumb-color, vars.$scroll-track-color);
         }
     }
 
@@ -169,19 +172,19 @@ $separator-background-color: var(--separator-background-color);
         }
         display: block;
         width: fit-content;
-        background-color: $element-background-color;
+        background-color: vars.$element-background-color;
         padding: 4px 8px;
         cursor: pointer;
         transition: background-color 0.1s ease-in;
         margin: 0 auto;
-        border-radius: $radius-large;
+        border-radius: vars.$radius-large;
 
         &_selected {
-            background-color: $primary-light;
+            background-color: vars.$primary-light;
         }
 
         &:hover {
-            background-color: $primary-light;
+            background-color: vars.$primary-light;
         }
 
         #{$root}__cell-value {

package/content/Card/CardView.scss

@@ -1,3 +1,5 @@
+@use "../../scss/variables" as vars;
+
 :root {
     --card-footer-background-color: var(--additional-light-blue);
     --card-dots-color: #323232;
@@ -13,13 +15,13 @@ $card-dots-color: var(--card-dots-color);
 
 %headTemplate {
     font-weight: 700;
-    font-size: $font-size-lg;
+    font-size: vars.$font-size-lg;
     line-height: 24px;
 }
 
 %subheadTemplate {
     font-weight: 400;
-    font-size: $font-size-xs;
+    font-size: vars.$font-size-xs;
     line-height: 16px;
 }
 
@@ -28,7 +30,7 @@ $card-dots-color: var(--card-dots-color);
     width: 4px;
     height: 4px;
     background-color: $card-dots-color;
-    border-radius: $radius-circle;
+    border-radius: vars.$radius-circle;
 }
 
 .CardView {
@@ -39,10 +41,10 @@ $card-dots-color: var(--card-dots-color);
     overflow: hidden;
     height: fit-content;
 
-    border: 1px solid $element-border-color;
-    border-radius: $radius-large;
-    color: $text-color;
-    background-color: $element-background-color;
+    border: 1px solid vars.$element-border-color;
+    border-radius: vars.$radius-large;
+    color: vars.$text-color;
+    background-color: vars.$element-background-color;
 
     &__header {
         display: flex;
@@ -109,7 +111,7 @@ $card-dots-color: var(--card-dots-color);
         width: 100%;
         height: 227px;
         overflow: hidden;
-        border-radius: $radius-large;
+        border-radius: vars.$radius-large;
 
         img {
             display: block;
@@ -135,7 +137,7 @@ $card-dots-color: var(--card-dots-color);
     }
 
     &__description {
-        font-size: $font-size-base;
+        font-size: vars.$font-size-base;
         line-height: 22px;
     }