@steroidsjs/bootstrap 3.0.0-beta.26 → 3.0.0-beta.27

package/form/NumberField/NumberFieldView.scss

@@ -1,101 +1,226 @@
+:root {
+    --number-field-arrow-color: #414141;
+}
+
+html[data-theme="dark"] {
+    --number-field-arrow-color: #ffffff;
+}
+
+$number-field-arrow-color: var(--number-field-arrow-color);
+
 .NumberFieldView {
-  display: flex;
-  overflow: hidden;
-  flex-flow: row nowrap;
-  align-items: stretch;
-  padding: 0;
-
-  &:hover {
-    border-color: $border-hover;
-  }
-  &:active {
-    border-color: $border-action;
-    box-shadow: 0 0 0 4px $border-typing;
-  }
-
-  &_disabled {
-    color: rgba(0, 0, 0, .25);
-    background-color: $back-disabled;
-    border: unset;
-    cursor: not-allowed;
-
-    &:active, &:hover {
-      border: unset;
-      box-shadow: unset;
+    $root: &;
+    display: flex;
+    position: relative;
+    padding: 0;
+
+    width: 120px;
+
+    font-family: $font-family-nunito;
+
+    // Hide default arrows
+    /* Chrome, Safari, Edge, Opera */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
     }
 
-    input {
-      cursor: inherit;
+    /* Firefox */
+    input[type="number"] {
+        -moz-appearance: textfield;
     }
-  }
-
-  // Hide default arrows
-  /* Chrome, Safari, Edge, Opera */
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  /* Firefox */
-  input[type=number] {
-    -moz-appearance: textfield;
-  }
-
-  &__input {
-    flex-grow: 1;
-    border: none;
-    outline: none;
-    background-color: transparent;
-    color: $heading;
-
-    width: inherit;
-    padding: $input-padding-y $input-padding-x;
-  }
-
-  &__arrows-container{
-    display: flex;
-    flex-flow: column;
-    grid-gap: 2px;
-    font-size: .6em;
-
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity .15s;
-  }
-  &:hover &__arrows-container{
-      opacity: 1;
-      pointer-events: all;
-  }
-
-  &__arrow{
-    padding: $input-padding-y $input-padding-x;
-    cursor: pointer;
-    height: 50%;
 
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:nth-child(1), &:nth-child(2) {
-      background-color: $grey-lighter;
-      &:active, &:hover {
-        background-color: $border-default;
-        fill: $white;
-        svg {
-          fill: $white;
+    &__arrows-container {
+        position: absolute;
+        z-index: 2;
+        right: 0;
+        top: 0;
+        height: 100%;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+
+        transition: opacity 150ms ease-in-out;
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    &__arrow {
+        width: 30px;
+        height: 16px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        outline: none;
+        border: none;
+        background: transparent;
+
+        span > svg > path {
+            stroke: $number-field-arrow-color;
+        }
+
+        &_disabled {
+            span {
+                cursor: not-allowed;
+            }
+            span > svg > path {
+                stroke: $background-disabled-color;
+            }
+        }
+
+        &:last-child{
+            transform: rotate(180deg);
         }
-      }
     }
 
-    &_disabled{
-      cursor: not-allowed;
+    &_size {
+        &_lg {
+            #{$root} {
+                &__input {
+                    height: 56px;
+                    border-radius: $radius-large;
+                    font-size: $font-size-lg;
+
+                    &-effects {
+                        border-radius:$radius-large;
+                    }
+
+                    &::placeholder {
+                        font-size: $font-size-sm;
+                    }
+
+                }
+
+                &__arrow { 
+                    transform: translateX(-3px) translateY(5px);
+
+                    &:last-child{
+                        transform: translateX(-3px) translateY(-6px) rotate(180deg);
+                    }
+                }
+            }            
+        }
+
+        &_md {
+            #{$root} {
+                &__input {
+                    height: 46px;
+                    border-radius: $radius-large;
+                    font-size: $font-size-base;
+
+                    &-effects {
+                        border-radius: $radius-large;
+                    }
+
+                    &::placeholder {
+                        font-size: $font-size-sm;
+                    }
+                }
+
+                &__arrow { 
+                    transform: translateX(-3px) translateY(4px) scale(0.8);
+
+                    &:last-child{
+                        transform: translateX(-3px) translateY(-2px) rotate(180deg) scale(0.8);
+                    }
+                }
+            }
+        }
+
+        &_sm {
+            #{$root} {
+                &__input {
+                    height: 34px;
+                    font-size: $font-size-sm;
+
+                    &::placeholder {
+                        font-size: $font-size-sm;
+                    }
+
+                    &-effects {
+                        border-radius: $radius-small;
+                    }
+                }
+
+                &__arrow { 
+                    transform: translateX(1px) translateY(-2px) scale(0.8);
+
+                    &:last-child{
+                        transform: translateX(1px) translateY(0px) rotate(180deg) scale(0.8);
+                    }
+                }
+            }
+        }
+    }
+
+    &__input {
+        width: 120px;
+        outline: none;
+        border: 1px solid $border-color;
+        border-radius: $radius-small;
+        padding: 5px 22px 5px 8px;
+        line-height: 24px;
+        z-index: 1;
+        font-weight: $font-weight-sm;
+        color: $text-color;
+
+        background-color: $element-background-color;
+
+        &::placeholder {
+            color: $placeholder-color;
+        }
+
+        &:disabled {
+            background-color: $background-disabled-color;
+            color: $placeholder-disabled-color;
+        }
+
+        &:hover:not(:disabled):not(:focus) {
+            border-color: $border-color-hover;
+        }
+
+        &:active:not(:disabled) {
+            border: 1px solid $primary;
+        } 
     }
 
-    svg{
-      transition: fill .1s;
+    &:focus-within #{$root}__arrows-container { 
+        opacity: 1;
+        pointer-events: all;
     }
 
-  }
-}
+    &__input-effects {
+        position: absolute;
+        display: block;
+        z-index: 5;
+        top: 0;
+        left: 0;
+
+        width: 103.3333333333%;
+        height: 111.7647058824%;
+
+        transform: translate(-1.6666666667%, -5.8823529412%);
+        background-color: transparent;
+        
+        border: 4px solid $primary-light;
+        opacity: 0;
+        pointer-events: none;
+    }
 
+    &__input:focus ~ &__input-effects {
+        opacity: 1;
+    }
+
+    &__input:active ~ &__input-effects {
+        opacity: 0;
+    }
+
+    &_filled #{$root}__arrows-container {
+        opacity: 1;
+        pointer-events: all;
+    }
+}

package/form/RadioListField/RadioListFieldView.js

@@ -43,10 +43,14 @@ var useUniqueId_1 = __importDefault(require("@steroidsjs/core/hooks/useUniqueId"
 function RadioListFieldView(props) {
     var bem = (0, hooks_1.useBem)('RadioListFieldView');
     var prefix = (0, useUniqueId_1["default"])('radio');
-    return (React.createElement("div", { className: bem.block() }, props.items.map(function (item) { return (React.createElement("div", { key: typeof item.id !== 'boolean' ? item.id : (item.id ? 'true' : 'false'), className: 'custom-control custom-radio' },
-        React.createElement("input", __assign({}, props.inputProps, { id: "".concat(prefix, "_").concat(item.id), className: bem(bem.element('input'), 'custom-control-input', !!props.errors && 'is-invalid'), checked: props.selectedIds.includes(item.id), disabled: props.disabled || item.disabled, onChange: function () {
+    return (React.createElement("div", { className: bem.block() }, props.items.map(function (item, index) { return (React.createElement("div", { key: typeof item.id !== 'boolean' ? item.id : (item.id ? 'true' : 'false'), className: bem(bem.element('item', {
+            hasError: !!props.errors
+        }), props.className) },
+        React.createElement("input", __assign({}, props.inputProps, { id: "".concat(prefix, "_").concat(item.id), tabIndex: index, className: bem(bem.element('input', {
+                checked: props.selectedIds.includes(item.id)
+            })), checked: props.selectedIds.includes(item.id), disabled: props.disabled || item.disabled, onChange: function () {
                 props.onItemSelect(item.id);
             } })),
-        React.createElement("label", { className: 'custom-control-label', htmlFor: "".concat(prefix, "_").concat(item.id) }, item.label))); })));
+        React.createElement("label", { htmlFor: "".concat(prefix, "_").concat(item.id), className: bem.element('label') }, item.label))); })));
 }
 exports["default"] = RadioListFieldView;

package/form/RadioListField/RadioListFieldView.scss

@@ -1,3 +1,135 @@
+:root {
+    --radio-svg-default: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.210938' y='0.915161' width='12' height='12' rx='6' fill='%23651FFF'/%3E%3C/svg%3E%0A");
+    --radio-checked-hover-svg: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.210938' y='0.915161' width='12' height='12' rx='6' fill='%23651FFF'/%3E%3C/svg%3E%0A");
+    --radio-checked-active-svg: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.210938' y='0.915161' width='12' height='12' rx='6' fill='%23DBCBFF'/%3E%3C/svg%3E%0A");
+    --radio-checked-disabled-svg: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.710938' y='0.915161' width='12' height='12' rx='6' fill='%23EEF1F2'/%3E%3C/svg%3E%0A");
+}
+
+html[data-theme="dark"] {
+    --radio-svg-default: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.210938' y='0.915161' width='12' height='12' rx='6' fill='%238B57FF'/%3E%3C/svg%3E%0A");
+    --radio-checked-hover-svg: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.210938' y='0.915161' width='12' height='12' rx='6' fill='%236648A7'/%3E%3C/svg%3E%0A");
+    --radio-checked-active-svg: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.210938' y='0.915161' width='12' height='12' rx='6' fill='%23BA9BFF'/%3E%3C/svg%3E%0A");
+    --radio-checked-disabled-svg: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.710938' y='0.915161' width='12' height='12' rx='6' fill='%235B5C6B'/%3E%3C/svg%3E%0A");
+}
+
+$radio-svg-default: var(--radio-svg-default);
+$radio-checked-hover-svg: var(--radio-checked-hover-svg);
+$radio-checked-active-svg: var(--radio-checked-active-svg);
+$radio-checked-disabled-svg: var(--radio-checked-disabled-svg);
+
 .RadioListFieldView {
+    $root: &;
+
+    font-family: $font-family-nunito;
+    color: $text-color;
+    line-height: 24px;
+    font-weight: 400;
+    font-size: $font-size-sm;
+
+    &__item {
+        width: fit-content;
+        position: relative;
+    }
+
+    &__input {
+        position: absolute;
+        z-index: -1;
+        opacity: 0;
+    }
+
+    &__input + &__label {
+        display: inline-flex;
+        align-items: center;
+        user-select: none;
+        cursor: pointer;
+    }
+
+    //Custom Radio
+    &__input + label::before {
+        content: "";
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        border-radius: $radius-circle;
+        border: 1px solid $border-color;
+        margin-right: 8px;
+        cursor: pointer;
+
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: 50% 50%;
+    }
+
+    &__input + &__label::after {
+        content: "";
+        width: 26px;
+        height: 26px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: 4px solid $primary-light;
+        border-radius: $radius-circle;
+        pointer-events: none;
+        opacity: 0;
+
+        transform: translate(-11%, -11%);
+
+        transition: opacity 150ms ease-in-out;
+    }
+
+    &__input:not(:disabled):not(:checked):hover + &__label::before {
+        border-color: $border-color-hover;
+    }
+
+    &__input:not(:disabled):not(:checked):active + &__label::before {
+        border-color: $primary;
+    }
+
+    &__input:not(:disabled):focus + &__label::after {
+        opacity: 1;
+    }
+
+    &__input:checked + &__label::before {
+        background-image: $radio-svg-default;
+        border: 1px solid $primary;
+    }
+
+    &__input:not(:disabled):checked:hover + &__label::before {
+        border-color: $primary-dark;
+        background-image: $radio-checked-hover-svg;
+    }
+
+    &__input:not(:disabled):checked:active + &__label::before {
+        background-image: $radio-checked-active-svg;
+        border-color: $primary-light;
+    }
+
+    &__input:disabled + &__label {
+        cursor: not-allowed;
+        color: $placeholder-color;
+
+        &::before {
+            cursor: not-allowed;
+            background-color: $background-disabled-color;
+        }
+    }
+
+    &__input:disabled:checked + &__label::before {
+        cursor: not-allowed;
+
+        background-color: transparent;
+        border-color: $background-disabled-color;
+
+        background-image: $radio-checked-disabled-svg;
+    }
 
-}
+    &__item_hasError {
+        #{$root}__input:not(:disabled):not(:checked) + #{$root}__label {
+            color: $danger;
+            
+            &::before {
+                border-color: $danger;
+            }
+        }
+    }
+}

package/form/TextField/TextFieldView.js

@@ -33,13 +33,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 function TextFieldView(props) {
     var bem = (0, hooks_1.useBem)('TextFieldView');
-    return (React.createElement("textarea", __assign({ className: bem(bem.block({
+    return (React.createElement("div", { className: bem(bem.block({
+            hasErrors: !!props.errors,
+            filled: !!props.inputProps.value,
             size: props.size
-        }), 'form-control', 'form-control-' + props.size, !!props.errors && 'is-invalid', props.className) }, props.inputProps)));
+        }), props.className) },
+        React.createElement("textarea", __assign({ className: bem.element('textarea') }, props.inputProps)),
+        props.showClear && (React.createElement(Icon_1["default"], { className: bem.element('clear'), name: "field-close", onClick: props.onClear }))));
 }
 exports["default"] = TextFieldView;

package/form/TextField/TextFieldView.scss

@@ -1,4 +1,147 @@
+:root {
+    --text-field-disabled-clear-color: #e5e9eb;
+    --text-field-active-clear-color: #323232;
+    --text-field-background-color: #ffffff;
+    --text-field-border-color: 
+}
+
+html[data-theme="dark"] {
+    --text-field-background-color: #414141;
+    --text-field-disabled-clear-color: #4e4f57;
+    --text-field-active-clear-color: #ffffff;
+}
+
+$text-field-background-color: var(--text-field-background-color);
+$text-field-disabled-clear-color: var(--text-field-disabled-clear-color);
+$text-field-active-clear-color: var(--text-field-active-clear-color);
+
 .TextFieldView {
-  min-height: 38px;
-  box-sizing: border-box;
+    $root: &;
+
+    position: relative;
+    font-family: $font-family-nunito;
+    width: fit-content;
+
+    &_hasErrors {
+        #{$root}__textarea {
+            border-color: $danger;
+        }
+    }
+
+    &__clear {
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        z-index: 3;
+        top: 3%;
+        right: 16px;
+
+        transition: opacity 150ms ease-in-out;
+        opacity: 0;
+        pointer-events: none;
+
+        svg {
+            path {
+                stroke: $background-disabled-color;
+            }
+        }
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    &__textarea {
+        width: 100%;
+        min-width: 240px;
+        min-height: 80px;
+        height: 80px;
+
+        border-radius: $radius-small;
+        background-color: $text-field-background-color;
+
+        padding: 5px 40px 8px 8px;
+
+        font-size: $font-size-sm;
+        font-weight: 400;
+        line-height: 24px;
+        z-index: 2;
+        outline: none;
+        color: $text-color;
+        border-color: $border-color;
+
+        &::placeholder {
+            color: $placeholder-color;
+        }
+
+        &:hover {
+            border-color: $border-color-hover;
+        }
+
+        &:focus {
+            border: 4px solid $primary-light;
+        }
+
+        &:active {
+            border: 1px solid $primary;
+        }
+
+        &:disabled {
+            background-color: $background-disabled-color;
+            border: none;
+            resize: none;
+        }
+
+        &:disabled::placeholder {
+            color: $placeholder-disabled-color;
+        }
+
+        &:disabled + #{$root}__clear {
+            display: none;
+        }
+
+        &:not(:disabled):focus + #{$root}__clear {
+            svg {
+                path {
+                    stroke: $text-field-active-clear-color;
+                }
+            }
+        }
+    }
+
+    &_size {
+        width: 240px;
+        &_lg {
+            #{$root}__textarea {
+                height: 130px;
+                min-height: 130px;
+                border-radius: $radius-large;
+                font-size: $font-size-lg;
+            }
+        }
+
+        &_md {
+            #{$root}__textarea {
+                height: 100px;
+                min-height: 100px;
+                border-radius: $radius-large;
+                font-size: $font-size-base;
+            }
+        }
+
+        &_sm {
+            #{$root}__textarea {
+                height: 80px;
+                border-radius: $radius-small;
+                font-size: $font-size-sm;
+            }
+        }
+    }
+
+    &_filled {
+        #{$root}__clear {
+            opacity: 1;
+            pointer-events: all;
+        }
+    }
 }

package/icons/index.js

@@ -262,6 +262,9 @@ exports["default"] = (function (customIcons) {
         'badge-close',
         'loader',
         'accordion-chevron',
+        'field-close',
+        'arrow',
+        'user',
         'visible-eye',
         'crossed-out-eye',
     ];

package/icons/svgs/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="28" viewBox="0 0 36 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.2417 16.3981L17.9991 12.1554L13.7574 16.3971" stroke="#414141" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/field-close.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 8.69275L8 16.6927" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 8.69275L16 16.6927" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/user.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="8" r="3.25" stroke="#323232" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M6.24684 15.9465C7.45154 14.1154 9.25931 13.5 11.4511 13.5H12.4823C14.6828 13.5 16.5143 14.1468 17.7295 15.9814V15.9814C18.8016 17.6 17.9261 19.5 15.9847 19.5H8.00741C6.07032 19.5 5.18216 17.5648 6.24684 15.9465V15.9465Z" stroke="#323232" stroke-width="1.5" stroke-linecap="round"/>
+</svg>