@steroidsjs/bootstrap 3.0.0-beta.55 → 3.0.0-beta.57

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,4 +1,5 @@
 @import "button";
 @import "typography";
 @import "scroll";
-@import "customMixins";
+@import "customMixins";
+@import "date";