@steroidsjs/bootstrap 3.0.0-beta.6 → 3.0.0-beta.61

package/scss/mixins/date.scss

@@ -0,0 +1,397 @@
+:root {
+    --date-icon-default-color: #cbd5db;
+    --date-icon-close-default-color: #323232;
+    --date-icon-disabled-color: rgba(0, 0, 0, 0.1);
+    --date-range-separator-color: rgba(0, 0, 0, 0.1);
+}
+
+html[data-theme="dark"] {
+    --date-icon-default-color: #5b5c6b;
+    --date-icon-close-default-color: #ffffff;
+    --date-icon-disabled-color: rgba(255, 255, 255, 0.1);
+    --date-range-separator-color: rgba(255, 255, 255, 0.1);
+}
+
+$date-icon-default-color: var(--date-icon-default-color);
+$date-icon-close-default-color: var(--date-icon-close-default-color);
+$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(
+    (
+        "lg": (
+            "padding": 16px 8px,
+            "radius": $radius-large,
+            "font-size": $font-size-lg,
+            "height": 56px,
+            "first-input-width": 96px,
+        ),
+        "md": (
+            "padding": 11px 8px,
+            "radius": $radius-large,
+            "font-size": $font-size-base,
+            "height": 46px,
+            "first-input-width": 86px,
+        ),
+        "sm": (
+            "padding": 5px 8px,
+            "radius": $radius-small,
+            "font-size": $font-size-sm,
+            "height": 34px,
+            "first-input-width": 76px,
+        ),
+    ),
+    $date-sizes
+);
+
+@mixin icon-container($root) {
+    #{$root}__icon-container {
+        position: absolute;
+        top: 50%;
+        right: 8px;
+        transform: translateY(-50%);
+        width: 24px;
+        height: 24px;
+
+        > * {
+            display: inline-flex;
+            flex-flow: row nowrap;
+            width: 100%;
+            height: 100%;
+            justify-content: center;
+            align-items: center;
+        }
+
+        #{$root}__date-icon {
+            path,
+            circle {
+                stroke: $date-icon-default-color;
+            }
+        }
+
+        #{$root}__close-icon {
+            cursor: pointer;
+            path,
+            circle {
+                stroke: $date-icon-close-default-color;
+            }
+        }
+    }
+}
+
+@mixin date-default-sizes($root) {
+    &_size {
+        @each $size, $size-map in $date-sizes {
+            &_#{$size} {
+                #{$root}__input {
+                    border-radius: map-get($size-map, radius);
+                    padding: map-get($size-map, padding);
+                    padding-right: 40px;
+                    height: map-get($size-map, height);
+                }
+
+                #{$root}__body::before {
+                    border-radius: calc(map-get($size-map, radius) + 4px);
+                }
+
+                font-size: map-get($size-map, font-size);
+            }
+        }
+    }
+}
+
+@mixin date-default-input() {
+    &__input {
+        width: 100%;
+        font-size: inherit;
+        line-height: $line-height-lg;
+        background-color: $element-background-color;
+        border: 1px solid $border-color;
+        color: $text-color;
+        transition: border-color 150ms ease-in-out;
+
+        &:active {
+            border-color: $primary;
+        }
+
+        &::placeholder {
+            color: $placeholder-color;
+        }
+
+        &:disabled {
+            border: none;
+            background-color: $background-disabled-color;
+        }
+    }
+}
+
+@mixin date-default-body() {
+    &__body {
+        position: relative;
+
+        &::before {
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100%;
+            content: "";
+            border: 4px solid $primary-light;
+            transform: translate(-4px, -4px);
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 150ms ease-in-out;
+        }
+    }
+}
+
+@mixin date-default-effects($root) {
+    &:focus-within:not(:active) {
+        #{$root}__body {
+            &::before {
+                opacity: 1;
+            }
+        }
+
+        #{$root}__input {
+            border-color: transparent;
+        }
+    }
+
+    &_disabled {
+        #{$root}__date-icon {
+            path,
+            circle {
+                stroke: $date-icon-disabled-color;
+            }
+        }
+    }
+
+    &_is-invalid {
+        #{$root}__input {
+            border-color: $danger;
+        }
+    }
+}
+
+@mixin date-range-body($root) {
+    &__body {
+        position: relative;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        background-color: $element-background-color;
+        color: $text-color;
+        column-gap: 8px;
+
+        > * {
+            &:nth-child(1) {
+                width: 91px;
+            }
+
+            &:nth-child(2) {
+                width: 100%;
+                margin-right: 40px;
+            }
+        }
+    }
+}
+
+@mixin date-range-effects($root) {
+    &__effect {
+        position: absolute;
+        display: block;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: inherit;
+        pointer-events: none;
+
+        &::before,
+        &::after {
+            display: block;
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            transition: border-color 150ms ease-in-out, opacity 150ms ease-in-out;
+            opacity: 1;
+            border-radius: inherit;
+            border-width: 1px;
+            border-style: solid;
+            pointer-events: none;
+        }
+
+        &::before {
+            border-color: $border-color;
+        }
+
+        &::after {
+            width: 100%;
+            height: 100%;
+            transform: translate(-4px, -4px);
+            border: 4px solid $primary-light;
+            opacity: 0;
+        }
+    }
+
+    //Effects
+    //Active
+    &__input:active ~ &__effect::before {
+        border-color: $primary;
+    }
+
+    //Focus
+    &__body:focus-within:not(:active) &__effect {
+        &::before {
+            border-color: transparent;
+        }
+
+        &::after {
+            opacity: 1;
+        }
+    }
+
+    &_disabled {
+        #{$root}__body {
+            background-color: $background-disabled-color;
+        }
+
+        #{$root}__effect {
+            opacity: 0;
+        }
+    }
+
+    &_disabled {
+        #{$root}__date-icon {
+            path,
+            circle {
+                stroke: $date-icon-disabled-color;
+            }
+        }
+    }
+
+    &_is-invalid {
+        #{$root}__effect::before {
+            border-color: $danger;
+        }
+
+        #{$root}__input:active ~ #{$root}__effect::before {
+            border-color: $danger;
+        }
+    }
+}
+
+@mixin date-range-sizes($root) {
+    &_size {
+        @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);
+
+                    > * {
+                        &:nth-child(1) {
+                            width: map-get($size-map, first-input-width);
+                        }
+                    }
+                }
+
+                #{$root}__effect::after {
+                    border-radius: calc(map-get($size-map, radius) + 4px);
+                }
+
+                font-size: map-get($size-map, font-size);
+            }
+        }
+    }
+}
+
+@mixin date-range-input() {
+    &__input {
+        border: none;
+        font-size: inherit;
+        background-color: inherit;
+        color: inherit;
+
+        &::placeholder {
+            color: $placeholder-color;
+        }
+    }
+}
+
+
+@mixin date-time-panel($root) {
+    &__panel-container {
+        position: relative;
+        display: flex;
+        flex-flow: row nowrap;
+        color: $text-color;
+
+        #{$root}__separator {
+            position: relative;
+            margin-left: 4px;
+            margin-right: 16px;
+            width: 1px;
+            height: 338px;
+            background-color: $date-range-separator-color;
+            transform: translateY(12px);
+        }
+
+        .TimePanelView__body {
+            column-gap: 2px;
+            width: 68px;
+        }
+
+        .TimePanelView__header {
+            border: none;
+            margin-top: 2px;
+        }
+
+        .TimePanelView__column {
+            height: 298px;
+            row-gap: 2px;
+            border: none;
+
+            &:not(:last-child) {
+                border-right: none;
+            }
+
+            overflow: scroll;
+            scrollbar-width: none;
+            -ms-overflow-style: none;
+
+            &::-webkit-scrollbar {
+                width: 0px;
+                height: 0px;
+            }
+
+            .TimePanelView__cell {
+                padding: 0;
+                border-radius: $radius-large;
+
+                &-value {
+                    padding: 6px 7px;
+                }
+            }
+        }
+
+        .TimePanelView__button_ok {
+            @include calendar-button();
+        }
+
+        .TimePanelView__footer {
+            margin-top: 3px;
+        }
+    }
+}

package/scss/mixins/index.scss

@@ -1,2 +1,5 @@
 @import "button";
-@import "card";
+@import "typography";
+@import "scroll";
+@import "customMixins";
+@import "date";

package/scss/mixins/scroll.scss

@@ -0,0 +1,31 @@
+@mixin custom-scroll($thumbColor, $backgroundColor) {
+    scrollbar-color: $thumbColor $backgroundColor;
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+        width: 4px;
+        height: 4px;
+        border-radius: 3px;
+
+        &:hover {
+            cursor: pointer;
+        }
+    }
+
+    &::-webkit-scrollbar-track {
+        border-radius: 3px;
+        background-color: $backgroundColor;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border-radius: 3px;
+        background-color: $thumbColor;
+    }
+}
+
+@mixin scrollWrapper($maxHeight, $paddingRight: 0, $thumbColor, $backgroundColor) {
+    @include custom-scroll($thumbColor, $backgroundColor);
+    padding-right: $paddingRight;
+    max-height: $maxHeight;
+    overflow: auto;
+}

package/scss/mixins/typography.scss

@@ -0,0 +1,26 @@
+@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);
+
+  @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: $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);
+  }
+}

package/scss/variables/common/colors.scss

@@ -18,67 +18,116 @@
     --warning-dark: #ebd251;
     --warning-light: #fff6c6;
     --graphite: #323232;
-    --gray-dark: #e1e1e1;
-    --gray: #ededed;
-    --light-gray: #f8f8f8;
+    --gray-dark: #cbd5db;
+    --gray: #dbe2e6;
+    --light-gray: #f1f5f7;
     --dark: #6f6b76;
     --light: #9088a1;
+    --text-color: #312c3a;
+    --background-color: #fff;
+    --is-dark: "false";
+    --border-color: #dbe2e6;
+    --border-color-hover: #e5e9eb;
+    --placeholder-color: rgba(0, 0, 0, 0.3);
+    --placeholder-disabled-color: rgba(0, 0, 0, 0.3);
+    --background-disabled-color: #f1f5f7;
+    --element-background-color: #FFFFFF;
+    --additional-gray-dark: #6F6B76;
+    --additional-gray: #E6E6E6;
+    --additional-light-gray: #F8F8F8;
+    --additional-light: #9088A1;
+    --additional-light-blue: #F9FCFF;
+    --scroll-thumb-color: #e5e9eb;
+    --scroll-track-color: #f5f8fa;
+}
 
-    html[data-theme="dark"] {
-        --primary: #8b57ff;
-        --primary-dark: #6648a7;
-        --primary-light: #ba9bff;
-        --secondary: #9ea8db;
-        --secondary-dark: #616a95;
-        --secondary-light: #bcc3e9;
-        --success: #3cf25a;
-        --success-dark: #34cc4d;
-        --success-light: #74ff8b;
-        --danger: #fc6666;
-        --danger-dark: #dc5858;
-        --danger-light: #ffa1a1;
-        --info: #9ae1f1;
-        --info-dark: #77c4d6;
-        --info-light: #ccf6ff;
-        --warning: #ffe457;
-        --warning-dark: #ebd251;
-        --warning-light: #fff6c8;
-        --graphite: #414141;
-        --gray-dark: #4e4f57;
-        --gray: #5b5c6b;
-        --light-gray: #928b9d;
-        --dark: #6b6477;
-        --light: #b7afc7;
-    }
+html[data-theme="dark"] {
+    --primary: #8b57ff;
+    --primary-dark: #6648a7;
+    --primary-light: #ba9bff;
+    --secondary: #9ea8db;
+    --secondary-dark: #616a95;
+    --secondary-light: #bcc3e9;
+    --success: #3cf25a;
+    --success-dark: #34cc4d;
+    --success-light: #74ff8b;
+    --danger: #fc6666;
+    --danger-dark: #dc5858;
+    --danger-light: #ffa1a1;
+    --info: #9ae1f1;
+    --info-dark: #77c4d6;
+    --info-light: #ccf6ff;
+    --warning: #ffe457;
+    --warning-dark: #ebd251;
+    --warning-light: #fff6c8;
+    --graphite: #414141;
+    --gray-dark: #4e4f57;
+    --gray: #5b5c6b;
+    --light-gray: #928b9d;
+    --dark: #6b6477;
+    --light: #b7afc7;
+    --text-color: #ffffff;
+    --background-color: #323030;
+    --is-dark: "true";
+    --border-color: #5B5C6B;
+    --border-color-hover: #4e4f57;
+    --placeholder-color: rgba(255, 255, 255, 0.3);
+    --placeholder-disabled-color: rgba(255, 255, 255, 0.1);
+    --background-disabled-color: #5b5c6b;
+    --element-background-color: #414141;
+    --additional-gray-dark: #6B6477;
+    --additional-gray: #595959;
+    --additional-light-gray: #4A4B53;
+    --additional-light: #B7AFC7;
+    --additional-light-blue: #DAEAF6;
+    --scroll-thumb-color: #5b5c6b;
+    --scroll-track-color: #444147;
 }
 
 /*
  *  SCSS variables implementation
  */
-$primary: var(--primary) !default;
-$primary-dark: var(--primary-dark) !default;
-$primary-light: var(--primary-light) !default;
-$secondary: var(--secondary) !default;
-$secondary-dark: var(--secondary-dark) !default;
-$secondary-light: var(--secondary-light) !default;
-$success: var(--success) !default;
-$success-dark: var(--success-dark) !default;
-$success-light: var(--success-light) !default;
-$danger: var(--danger) !default;
-$danger-dark: var(--danger-dark) !default;
-$danger-light: var(--danger-light) !default;
-$info: var(--info) !default;
-$info-dark: var(--info-dark) !default;
-$info-light: var(--info-light) !default;
-$warning: var(--warning) !default;
-$warning-dark: var(--warning-dark) !default;
-$warning-light: var(--warning-light) !default;
-$graphite: var(--graphite) !default;
-$gray-dark: var(--gray-dark) !default;
-$gray: var(--gray) !default;
-$light-gray: var(--light-gray) !default;
-$dark: var(--dark) !default;
-$light: var(--light) !default;
+$primary: var(--primary);
+$primary-dark: var(--primary-dark);
+$primary-light: var(--primary-light);
+$secondary: var(--secondary);
+$secondary-dark: var(--secondary-dark);
+$secondary-light: var(--secondary-light);
+$success: var(--success);
+$success-dark: var(--success-dark);
+$success-light: var(--success-light);
+$danger: var(--danger);
+$danger-dark: var(--danger-dark);
+$danger-light: var(--danger-light);
+$info: var(--info);
+$info-dark: var(--info-dark);
+$info-light: var(--info-light);
+$warning: var(--warning);
+$warning-dark: var(--warning-dark);
+$warning-light: var(--warning-light);
+$graphite: var(--graphite);
+$gray-dark: var(--gray-dark);
+$gray: var(--gray);
+$light-gray: var(--light-gray);
+$dark: var(--dark);
+$light: var(--light);
+$text-color: var(--text-color);
+$text-color-revert: var(--text-color-revert);
+$background-color: var(--background-color);
+$is-dark: var(--is-dark);
+$border-color: var(--border-color);
+$border-color-hover: var(--border-color-hover);
+$placeholder-color: var(--placeholder-color);
+$placeholder-disabled-color: var(--placeholder-disabled-color);
+$background-disabled-color: var(--background-disabled-color);
+$element-background-color: var(--element-background-color);
+$additional-gray-dark: var(--additional-gray-dark);
+$additional-gray: var(--additional-gray);
+$additional-light-gray: var(--additional-light-gray);
+$additional-light: var(--additional-light);
+$additional-light-blue: var(--additional-light-blue);
+$scroll-thumb-color: var(--scroll-thumb-color);
+$scroll-track-color: var(--scroll-track-color);
 
 /*
  * Common colors   
@@ -90,16 +139,25 @@ $black-30: rgba(#000, 0.3) !default;
 $black-10: rgba(#000, 0.1) !default;
 $black-4: rgba(#000, 0.04) !default;
 $white: #fff !default;
+$white-60: rgba(#ffffff, 0.6) !default;
+$white-30: rgba(#ffffff, 0.3) !default;
+$white-10: rgba(#ffffff, 0.1) !default;
+$white-4: rgba(#ffffff, 0.04) !default;
 
-$text-color: #312c3a !default;
 $link-color: #2ba3fb !default;
+$link-color-hover: #00c2ff !default;
 
-$gradient-purple: linear-gradient(180deg, #7433FF, #FFA3FD);
-$gradient-red: linear-gradient(180deg, #EB0155, #FFFA80);
+$gradient-blue: linear-gradient(180deg, #651fff, #ba9bff) !default;
 
 $color-themes: () !default;
 $color-themes: map-merge(
     (
+        "basic": (
+            "color": $gray,
+            "color-dark": $gray-dark,
+            "color-light": $light-gray,
+            "text-color": $text-color,
+        ),
         "primary": (
             "color": $primary,
             "color-dark": $primary-dark,
@@ -128,25 +186,17 @@ $color-themes: map-merge(
             "color": $warning,
             "color-dark": $warning-dark,
             "color-light": $warning-light,
-            "text-color": $dark,
+            "text-color": $text-color,
         ),
         "info": (
             "color": $info,
             "color-dark": $info-dark,
             "color-light": $info-light,
-            "text-color": $white,
-        ),
-        "light": (
-            "color": $light,
-            "color-dark": $dark,
-            "color-light": $light,
-            "text-color": $dark,
+            "text-color": $text-color,
         ),
-        "dark": (
-            "color": $dark,
-            "color-dark": $dark,
-            "color-light": $light,
-            "text-color": $white,
+        "link": (
+            "color-dark": $link-color,
+            "color-light": $link-color-hover,
         ),
     ),
     $color-themes

package/scss/variables/common/media.scss

@@ -0,0 +1,2 @@
+$mobile-width: 540px !default;
+$tablet-width: 960px !default;