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

package/form/AutoCompleteField/AutoCompleteFieldView.scss

@@ -1,157 +1,216 @@
+@use "../../scss/variables";
+@use '../../scss/mixins';
+
+:root {
+    --autocomplete-hover-color: #f1f5f7;
+    --autocomplete-selected-color: #dbe2e6;
+    --autocomplete-icon-color: #313131;
+}
+
+html[data-theme="dark"] {
+    --autocomplete-hover-color: #4e4f57;
+    --autocomplete-selected-color: #5b5c6b;
+    --autocomplete-icon-color: #ffffff;
+}
+
+$autocomplete-hover-color: var(--autocomplete-hover-color);
+$autocomplete-selected-color: var(--autocomplete-selected-color);
+$autocomplete-icon-color: var(--autocomplete-icon-color);
+
 .AutoCompleteFieldView {
-  position: relative;
-
-  font-size: 1rem;
-  &_size_sm {
-    font-size: 0.7875rem;
-  }
-  &_size_lg {
-    font-size: 1.25rem;
-  }
-
-  &__selected-items {
-    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
-    min-width: 100px;
-    //height: 38px;
-    cursor: pointer;
-    background-color: black; //changed
-    background-clip: blue; //changed
-    border: 1px solid red; //changed
-    border-radius: 0.25rem;
-    line-height: 1.5;
-    color: red; //changed
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      right: 10px;
-      transform: translateY(-50%);
-      display: inline-block;
-      width: 0;
-      height: 0;
-      border-top: 0.3em solid;
-      border-right: 0.3em solid transparent;
-      border-bottom: 0;
-      border-left: 0.3em solid transparent;
+    $root: &;
+
+    position: relative;
+
+    &__input {
+        width: 100%;
+        border: 1px solid variables.$element-border-color;
+        background-color: variables.$element-field-background-color;
+        color: variables.$text-color;
+        transition: border-color 150ms ease-in-out;
+        font-size: inherit;
+        line-height: inherit;
     }
 
-    &_reset {
-      padding-right: 3rem;
+    &_opened {
+        #{$root}__input {
+            border-color: variables.$primary;
+        }
     }
 
-    &_is-invalid {
-      border-color: black; //changed
-    }
-  }
-  &_size_sm &__selected-items {
-    padding: 0.25rem 0.5rem;
-    line-height: 1.5;
-    border-radius: 0.2rem;
-    //height: 31px;
-  }
-  &_size_lg &__selected-items {
-    padding: 0.5rem 1rem;
-    line-height: 1.5;
-    border-radius: 0.3rem;
-    //height: 48px;
-  }
-
-  &__reset {
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 20px;
-    width: 30px;
-    height: 100%;
-    cursor: pointer;
-
-    &::before,
-    &::after
-    {
-      display: block;
-      position: absolute;
-      top: 50%;
-      margin-top: -5px;
-      left: 50%;
-      width: 1px;
-      height: 10px;
-      background-color: yellow; //
-      content: '';
+    &__drop-down {
+        width: 100%;
+        top: 100%;
+        left: 0;
+        position: absolute;
+        z-index: 9999;
+        margin-top: 8px;
+        border-radius: variables.$radius-large;
+        background-color: variables.$element-background-color;
+        border: 1px solid variables.$element-border-color;
+        overflow: hidden;
     }
 
-    &::before {
-      transform: rotate(45deg);
+    &__list {
+        display: flex;
+        flex-flow: column nowrap;
+        @include mixins.scrollWrapper(240px, 0, variables.$scroll-thumb-color, variables.$scroll-track-color);
     }
 
-    &::after {
-      transform: rotate(-45deg);
+    &__item {
+        width: 100%;
+        flex-shrink: 0;
+        background-color: variables.$element-background-color;
+        outline: none;
+        border: none;
+        text-align: left;
+
+        color: variables.$text-color;
+        cursor: pointer;
+
+        font-size: inherit;
+        line-height: inherit;
+
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+
+        &-label {
+            display: inline-block;
+        }
+
+        &_hover {
+            background-color: $autocomplete-hover-color;
+        }
+
+        &_select {
+            background-color: $autocomplete-selected-color;
+        }
+
+        &-additional {
+            display: flex;
+            align-items: center;
+            column-gap: 4px;
+
+            &-icon {
+                display: inline-block;
+                width: 24px;
+                height: 24px;
+
+                path,
+                circle {
+                    stroke: $autocomplete-icon-color;
+                }
+            }
+        }
     }
-  }
-
-  &__drop-down {
-    position: absolute;
-    top: calc(100% + 8px);
-    left: 0;
-    width: 100%;
-    z-index: 10;  //changed
-    background-color: #fff; //changed
-    line-height: 1.5;
-    padding: 5.5px 0;
-    border: 1px solid #CCCCCC;
-    filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.1));
-    border-radius: 10px;
-  }
-
-  &__drop-down-list {
-    display: flex;
-    flex-direction: column;
-    max-height: 273px;
-    overflow: auto;
-  }
-
-  &__search {
-    padding: 0.25rem 0.5rem;
-
-    > .form-control {
-      width: 100%;
+
+    &__category {
+        background-color: variables.$element-background-color;
+        width: 100%;
+        flex-shrink: 0;
+
+        &__label {
+            display: block;
+            padding: 12px 8px;
+            color: variables.$element-placeholder-color;
+        }
+        &__content {
+            width: 100%;
+        }
+
+        &_hidden {
+            display: none;
+        }
     }
-  }
-  &_size_sm &__search {
-    padding: 0.1rem 0.2rem;
-  }
-
-  &__drop-down-item {
-    display: flex;
-    justify-content: flex-start;
-    padding: 10px 34px;
-    cursor: pointer;
-    border: unset;
-    background-color: #fff;
-    font-size: 14px;
-    line-height: 140%;
-    &_hover {
-      background-color: #F8F8F8; //
+
+    &__nothing {
+        color: variables.$element-placeholder-color;
+        width: 100%;
+        margin-bottom: 48px;
+        padding: 8px 12px;
+        font-size: variables.$font-size-xs;
+        line-height: variables.$line-height-xs;
     }
 
-    &_select {
-      background-color: #F8F8F8; //
-      color: #152536; //
+    &_size {
+        &_lg {
+            font-size: variables.$font-size-lg;
+            line-height: variables.$line-height-lg;
+
+            #{$root}__input {
+                padding: 16px 8px;
+                height: variables.$input-height-lg;
+                border-radius: variables.$radius-large;
+            }
+
+            #{$root}__item {
+                padding: 16px;
+            }
+
+            #{$root}__category {
+                #{$root}__item {
+                    padding: 16px 24px;
+                }
+
+               
+                &__label {
+                    font-size: variables.$font-size-base;
+                    line-height: variables.$line-height-base;
+                }
+            }
+        }
+
+        &_md {
+            font-size: variables.$font-size-base;
+            line-height: variables.$line-height-lg;
+
+            #{$root}__input {
+                padding: 11px 8px;
+                height: variables.$input-height-md;
+                border-radius: variables.$radius-large;
+            }
+
+            #{$root}__item {
+                padding: 12px;
+            }
+
+            #{$root}__category {
+                #{$root}__item {
+                    padding: 12px 20px;
+                }
+
+                &__label {
+                    font-size: variables.$font-size-sm;
+                    line-height: variables.$line-height-sm;
+                }
+            }
+        }
+
+        &_sm {
+            font-size: variables.$font-size-sm;
+            line-height: variables.$line-height-lg;
+
+            #{$root}__input {
+                padding: 5px 8px;
+                height: variables.$input-height-sm;
+                border-radius: variables.$radius-small;
+            }
+
+            #{$root}__item {
+                padding: 8px;
+            }
+
+            #{$root}__category {
+                #{$root}__item {
+                    padding: 8px 16px;
+                }
+
+                &__label {
+                    font-size: variables.$font-size-xs;
+                    line-height: variables.$line-height-xs;
+                }
+            }
+        }
     }
-  }
-  &_size_sm &__drop-down-item {
-    padding: 0.25rem 0.5rem;
-  }
-  &_size_lg &__drop-down-item {
-    padding: 0.5rem 1rem;
-  }
 }
-
-.form-control:focus{
-  box-shadow: unset;
-  border: 4px solid #A7EFFF;
-  border-radius: 4px;
-}

package/form/Button/ButtonView.d.ts

@@ -1,3 +1,2 @@
 import { IButtonViewProps } from '@steroidsjs/core/ui/form/Button/Button';
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
-export default function ButtonView(props: IButtonViewProps & IBemHocOutput): JSX.Element;
+export default function ButtonView(props: IButtonViewProps): JSX.Element;

package/form/Button/ButtonView.js

@@ -38,17 +38,19 @@ function ButtonView(props) {
             ? props.label
             : (props.hint || null);
         return (React.createElement(React.Fragment, null,
-            props.isLoading && (React.createElement("div", { className: bem.element('preloader') },
-                React.createElement("span", { className: 'spinner-border spinner-border-sm', role: 'status', "aria-hidden": 'true' }))),
-            (props.showLabelOnLoading || !props.isLoading) && (React.createElement("span", { className: bem.element('label') },
+            props.isLoading && (React.createElement(Icon_1["default"], { className: bem.element('loader'), name: 'loading_icon_thick', tabIndex: -1 })),
+            !props.isLoading && (React.createElement("span", { title: props.hint, className: bem.element(props.link ? 'link' : 'label') },
                 props.icon && (React.createElement(Icon_1["default"], { name: props.icon, title: title, className: bem.element('icon', !props.label && 'without-label') })),
-                props.children))));
+                React.createElement("span", { className: bem.element('text') }, props.children)))));
     };
     var renderBadge = function () {
-        if (!props.badge.enable) {
+        var _a;
+        if (!props.badge || !props.badge.enable) {
             return null;
         }
-        return (React.createElement("span", { className: bem('badge', props.badge.color && "badge-".concat(props.badge.color), bem.element('badge'), props.badge.className) }, props.badge.value));
+        return (React.createElement("span", { className: bem(bem.element('badge', (_a = {},
+                _a["".concat(props.badge.color)] = !!props.badge.color,
+                _a)), props.badge.className) }, props.badge.value));
     };
     var className = bem(bem.block((_a = {
             button: !props.link
@@ -61,14 +63,16 @@ function ButtonView(props) {
         _a.submitting = props.submitting,
         _a.loading = props.isLoading,
         _a.failed = props.isFailed,
-        _a.link = props.tag === 'a',
-        _a)), props.block && 'btn-block', props.link && 'btn-link', props.className);
+        _a.link = props.link,
+        _a.block = props.block,
+        _a["tag-".concat(props.tag)] = !!props.tag,
+        _a)), props.className);
     if (props.tag === 'a') {
         return (React.createElement("a", { className: className, href: props.url, onClick: props.onClick, style: props.style, target: props.target },
             renderLabel(),
             renderBadge()));
     }
-    return (React.createElement("button", { title: props.hint, type: props.type, disabled: props.disabled, onClick: props.onClick, style: props.style, className: className },
+    return (React.createElement("button", { title: props.hint, type: props.type, disabled: props.disabled || props.isLoading, onClick: props.onClick, style: props.style, className: className },
         renderLabel(),
         renderBadge()));
 }

package/form/Button/ButtonView.scss

@@ -1,96 +1,204 @@
-.ButtonView {
-  $root: &;
+@use "../../scss/variables";
+@use '../../scss/mixins';
+
+$btn-font-weight-sm: 400;
+$btn-font-weight-lg: 800;
+$btn-line-height: 24px;
+$btn-letter-spacing: 0.1em;
 
-  transition-property: color, background-color, border-color, box-shadow;
-  transition-duration: .15s;
-  transition-timing-function: ease-in-out;
+.ButtonView {
+    $root: &;
 
-  &_button {
-    position: relative;
-    border-radius: $button-border-radius;
-    user-select: none;
-    border: $button-border;
+    transition-property: color, background-color, border-color, box-shadow;
+    transition-duration: variables.$transition-duration;
+    transition-timing-function: ease-in-out;
 
-    padding: $button-padding-y $button-padding-x;
     display: flex;
     justify-content: center;
     align-items: center;
 
-    font-weight: $button-font-weight;
-    font-size: $button-font-size;
+    cursor: pointer;
+
+    &_button {
+        position: relative;
+        border-radius: variables.$radius-small;
+        user-select: none;
+        border: 3px solid transparent;
+
+        padding: 0 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        font-weight: $btn-font-weight-sm;
+        font-size: variables.$font-size-sm;
+        line-height: $btn-line-height;
+        outline: none;
+    }
+
+    @each $colorName, $colorMap in variables.$color-themes {
+        &_color_#{$colorName} {
+            @include mixins.button-theme($colorMap, $colorName, $root);
+        }
+    }
+
+    @each $colorName, $colorMap in variables.$color-themes {
+        &_outline_#{$colorName} {
+            @include mixins.button-outline-theme($colorMap, $colorName, $root);
+        }
+    }
+
+    &__label {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    &_block {
+        display: block;
+        width: 100%;
 
-    @each $color, $value in $color-themes {
-      &#{$root}_color_#{$color} {
-        @include button-theme($value)
-      }
+        #{$root}__label {
+            justify-content: center;
+        }
     }
 
-    @each $color, $value in $color-themes {
-      &#{$root}_outline_#{$color} {
-        @include button-outline-theme($value)
-      }
+    &_tag { 
+        &-a { 
+            width: auto;
+        }
     }
 
-  }
+    &_disabled {
+        opacity: 0.5;
+        color: rgba(0, 0, 0, 0.1);
+        cursor: not-allowed;
 
-  &_disabled {
-    opacity: .5;
-    color: rgba(0, 0, 0, .25);
-    cursor: not-allowed;
-    input {
-      cursor: inherit;
+        input {
+            cursor: inherit;
+        }
     }
-  }
 
-  &_size {
-    &_sm {
-      height: $button-height-sm;
-      font-size: $button-font-size-sm;
+    &_size {
+        &_sm {
+            height: 34px;
+            font-size: variables.$font-size-sm;
+            border-radius: variables.$radius-small;
+        }
+        &_md {
+            height: 46px;
+            font-size: variables.$font-size-base;
+            border-radius: variables.$radius-large;
+        }
+        &_lg {
+            height: 56px;
+            font-size: variables.$font-size-lg;
+            border-radius: variables.$radius-large;
+        }
     }
-    &_md {
-      height: $button-height-md;
-      font-size: $button-font-size-md;
+
+    &_link {
+        display: inline;
+        width: auto;
+        height: auto;
+        background-color: transparent;
+
+        &:focus-visible, &:focus {
+            box-shadow: none;
+        }
+
+        &:hover,&:active {
+            background-color: transparent;
+        }
+        
     }
-    &_lg {
-      height: $button-height-lg;
-      font-size: $button-font-size-lg;
+
+    &__link { 
+        display: inline-flex;
+        align-items: center;
+
+        #{$root}__text {
+            color: variables.$link-color;
+        }
+
+        &:hover { 
+            #{$root}__text { 
+                color: variables.$link-color-hover;
+            }
+        }
     }
-  }
 
-  &_link {
-    justify-content: flex-start;
-    background-color: transparent;
-  }
+    &__icon {
+        margin-right: 10px;
+        width: fit-content;
+        height: fit-content;
+        &_without-label {
+            margin: 0;
+        }
+    }
 
-  &__icon {
-    margin-right: 3px;
+    &_failed {
+        &,
+        &:hover {
+            border-color: variables.$danger;
+            box-shadow: 0 0 1rem rgba(variables.$danger, 0.2);
+        }
+    }
 
-    &_without-label {
-      margin: 0;
+    &_loading {
+      cursor: default;
     }
-  }
 
-  &_failed {
-    &, &:hover {
-      border-color: $danger;
-      box-shadow: 0 0 1rem rgba($danger, .2);
+    &__preloader {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
     }
-  }
 
-  &_loading &__label {
-    opacity: 0;
-  }
+    &__badge {
+        position: relative;
+        top: -1px;
+        margin-left: 4px;
+        border-radius: variables.$radius-small;
+        font-size: variables.$font-size-xs;
+        line-height: 16px;
+        padding: 3px 5px;
+
+        $badge-types: (
+            "primary": variables.$primary,
+            "secondary": variables.$secondary,
+            "success": variables.$success,
+            "danger": variables.$danger,
+            "warning": variables.$warning,
+            "info": variables.$info,
+        );
+
+        @each $type, $color in $badge-types {
+            &_#{$type} {
+                background-color: $color;
+            }
+        }
+    }
 
-  &__preloader {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
+    &__loader {
+        width: 24px;
+        height: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        svg {
+            width: 14px;
+            height: 14px;
+            transform-origin: center;
+            animation: rotate 1.45s linear infinite;
+        }
+    }
+}
 
-  &__badge {
-    position: relative;
-    top: -1px;
-    margin-left: 4px;
-  }
+@keyframes rotate {
+    100% {
+        transform: rotate(360deg);
+    }
 }

package/form/CheckboxField/CheckboxFieldView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ICheckboxFieldViewProps } from '@steroidsjs/core/ui/form/CheckboxField/CheckboxField';
-export default function CheckboxFieldView(props: ICheckboxFieldViewProps & IBemHocOutput): JSX.Element;
+export default function CheckboxFieldView(props: ICheckboxFieldViewProps): JSX.Element;