@steroidsjs/bootstrap 3.0.0-beta.12 → 3.0.0-beta.120

package/scss/mixins/date.scss

@@ -0,0 +1,436 @@
+@use "sass:map";
+@use "../variables/index" as variables;
+
+: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: #333646;
+    --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": variables.$radius-large,
+            "font-size": variables.$font-size-lg,
+            "height": 56px,
+            "first-input-width": 200px,
+        ),
+        "md": (
+            "padding": 11px 8px,
+            "radius": variables.$radius-large,
+            "font-size": variables.$font-size-base,
+            "height": 46px,
+            "first-input-width": 168px,
+        ),
+        "sm": (
+            "padding": 5px 8px,
+            "radius": variables.$radius-small,
+            "font-size": variables.$font-size-sm,
+            "height": 34px,
+            "first-input-width": 142px,
+        ),
+    ),
+    $date-sizes
+);
+
+@mixin calendar-button () {
+    padding: 5px 12.5px;
+    border-radius: variables.$radius-small;
+    border: 1px solid variables.$gray;
+    background-color: transparent;
+    background-image: none;
+    box-shadow: none;
+    cursor: pointer;
+    color: variables.$text-color;
+    font-size: variables.$font-size-sm;
+    line-height: variables.$line-height-lg;
+}
+
+@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: variables.$line-height-lg;
+        background-color: variables.$element-field-background-color;
+        border: 1px solid variables.$element-border-color;
+        color: variables.$text-color;
+        transition: border-color 150ms ease-in-out;
+
+        &:active {
+            border-color: variables.$primary;
+        }
+
+        &::placeholder {
+            color: variables.$element-placeholder-color;
+        }
+
+        &:disabled {
+            border: none;
+            background-color: variables.$element-background-color-disabled;
+
+            &::placeholder {
+                color: variables.$element-placeholder-color-disabled;
+            }
+        }
+    }
+}
+
+@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 variables.$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}__icon-container {
+            #{$root}__date-icon {
+                path,
+                circle {
+                    stroke: $date-icon-disabled-color;
+                }
+            }
+        }
+    }
+
+    &_is-invalid {
+        #{$root}__input {
+            border-color: variables.$danger;
+        }
+    }
+}
+
+@mixin date-range-body($root) {
+    &__body {
+        position: relative;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        background-color: variables.$element-field-background-color;
+        color: variables.$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: variables.$element-border-color;
+        }
+
+        &::after {
+            width: 100%;
+            height: 100%;
+            transform: translate(-4px, -4px);
+            border: 4px solid variables.$primary-light;
+            opacity: 0;
+        }
+    }
+
+    //Effects
+    //Active
+    &__input:active ~ &__effect::before {
+        border-color: variables.$primary;
+    }
+
+    //Focus
+    &__body:focus-within:not(:active) &__effect {
+        &::before {
+            border-color: transparent;
+        }
+
+        &::after {
+            opacity: 1;
+        }
+    }
+
+    &_disabled {
+        #{$root}__body {
+            background-color: variables.$element-background-color-disabled;
+        }
+
+        #{$root}__input { 
+            &::placeholder { 
+                color: variables.$element-placeholder-color-disabled;
+            }
+        }
+
+        #{$root}__effect {
+            opacity: 0;
+        }
+    }
+
+    &_disabled {
+        #{$root}__icon-container {
+            #{$root}__date-icon {
+                path,
+                circle {
+                    stroke: $date-icon-disabled-color;
+                }
+            }
+        }
+    }
+
+    &_is-invalid {
+        #{$root}__effect::before {
+            border-color: variables.$danger;
+        }
+
+        #{$root}__input:active ~ #{$root}__effect::before {
+            border-color: variables.$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: variables.$element-placeholder-color;
+        }
+    }
+}
+
+@mixin date-time-panel($root) {
+    &__panel-container {
+        position: relative;
+        display: flex;
+        flex-flow: row nowrap;
+        color: variables.$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: variables.$radius-large;
+
+                &-value {
+                    padding: 6px 7px;
+                }
+            }
+        }
+
+        .TimePanelView__button_now {
+            @include calendar-button();
+        }
+
+        .TimePanelView__button_ok {
+            @include calendar-button();
+        }
+
+        .TimePanelView__footer {
+            margin-top: 3px;
+        }
+    }
+}
+
+@mixin calendar-border () { 
+    .CalendarView { 
+        border: none;
+    }
+}

package/scss/mixins/index.scss

@@ -1,2 +1,7 @@
-@import "button";
-@import "card";
+@forward "button";
+@forward "typography";
+@forward "scroll";
+@forward "customMixins";
+@forward "date";
+@forward "navs";
+@forward "tooltip";

package/scss/mixins/navs.scss

@@ -0,0 +1,39 @@
+@mixin navs-sizes($root) {
+    &_size {
+        &_lg {
+            .ButtonView__link {
+                padding: 16px;
+            }
+
+            #{$root}__list-item_active {
+                .ButtonView {
+                    padding: 16px;
+                }
+            }
+        }
+
+        &_md {
+            .ButtonView__link {
+                padding: 12px;
+            }
+
+            #{$root}__list-item_active {
+                .ButtonView {
+                    padding: 12px;
+                }
+            }
+        }
+
+        &_sm {
+            .ButtonView__link {
+                padding: 8px;
+            }
+
+            #{$root}__list-item_active {
+                .ButtonView {
+                    padding: 8px;
+                }
+            }
+        }
+    }
+}

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/tooltip.scss

@@ -0,0 +1,23 @@
+@use "../variables/index" as variables;
+
+:root {
+    --tooltip-background-color: rgba(255, 255, 255, 0.4);
+}
+
+html[data-theme="dark"] {
+    --tooltip-background-color: rgba(255, 255, 255, 0.4);
+}
+$tooltip-background-color: var(--tooltip-background-color);
+
+@mixin calendar-tooltip() {
+    background-color: $tooltip-background-color;
+    border-radius: 4px;
+
+    .TooltipView__arrow {
+        display: none;
+    }
+
+    .TooltipView__content {
+        color: variables.$text-color;
+    }
+}

package/scss/mixins/typography.scss

@@ -0,0 +1,29 @@
+@use "sass:map";
+@use "../variables/common/media";
+
+@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: media.$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: media.$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/normalize.scss

@@ -0,0 +1,25 @@
+@import-normalize;
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+ul, li {
+    list-style-type: none;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+    font-family: inherit;
+}
+
+button {
+    font-family: inherit;
+}
+
+input {
+    outline: none;
+}