@steroidsjs/bootstrap 3.0.10 → 3.0.11

package/form/InputField/InputFieldView.scss

@@ -58,8 +58,11 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
             color: variables.$element-placeholder-color;
             font-size: inherit;
         }
-    }
 
+        &:not(:disabled):focus {
+            border: none;
+        }
+    }
 
     //Statements
     &::before {
@@ -80,7 +83,6 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
     &:not(#{$root}_disabled):focus-within::before {
         border: 4px solid variables.$primary-light;
         transform: translateX(-4px) translateY(-4px);
-        border-radius: 16px;
         opacity: 1;
     }
 
@@ -90,7 +92,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
         }
 
         &::before {
-            transform: none;
+            transform: translate(-1px, -1px);
             border: 1px solid variables.$primary;
             opacity: 1;
         }
@@ -140,7 +142,11 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
             }
 
             &::before {
-                border-radius: 14px;
+                border-radius: variables.$radius-large;
+            }
+
+            &:focus-within::before {
+                border-radius: 16px;
             }
         }
 
@@ -167,7 +173,11 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
             }
 
             &::before {
-                border-radius: 14px;
+                border-radius: variables.$radius-medium;
+            }
+
+            &:focus-within::before {
+                border-radius: 16px;
             }
         }
 
@@ -192,7 +202,11 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
             }
 
             &::before {
-                border-radius: 10px;
+                border-radius: variables.$radius-small;
+            }
+
+            &:focus-within::before {
+                border-radius: 12px;
             }
         }
     }

package/form/PasswordField/PasswordFieldView.js

@@ -46,12 +46,15 @@ function PasswordFieldView(props) {
     return (React.createElement("div", { className: bem(bem.block({
             size: props.size,
             filled: !!props.input.value,
-            disabled: props.inputProps.disabled
-        }), props.className) },
+            disabled: props.disabled,
+            hasError: !!props.errors
+        }), props.className), style: props.style },
         React.createElement("div", { className: bem.element('container', {
                 disabled: props.inputProps.disabled
             }) },
-            React.createElement("input", __assign({ className: bem.element('input') }, props.inputProps, { id: props.id, required: props.required })),
+            React.createElement("input", __assign({ className: bem(bem.element('input', {
+                    size: props.size
+                })) }, props.inputProps, { disabled: props.disabled, required: props.required, id: props.id, ref: props.inputRef })),
             props.showSecurityIcon && (React.createElement("span", { className: bem(bem.element('icon-eye', {
                     viewHide: props.inputProps.type === PasswordField_1.InputType.PASSWORD
                 })), onClick: props.onShowButtonClick },

package/form/PasswordField/PasswordFieldView.scss

@@ -31,20 +31,33 @@ $eye-filled-color: var(--eye-filled-color);
         &::before {
             position: absolute;
             content: "";
+            z-index: 2;
             width: 100%;
             height: 100%;
-
-            transform: translate(-4px, -4px);
-
+            top: 0;
+            left: 0;
+            transform: translate(-1px, -1px);
             border-radius: 16px;
-
-            border: 4px solid variables.$primary-light;
             transition: opacity 150ms ease-in-out;
             opacity: 0;
             pointer-events: none;
         }
+    }
+
+    &:not(#{$root}_disabled) &__container:focus-within::before {
+        border: 4px solid variables.$primary-light;
+        transform: translateX(-4px) translateY(-4px);
+        opacity: 1;
+    }
+
+    &:not(#{$root}_disabled) &__container:active {
+        #{$root}__input {
+            border-color: transparent;
+        }
 
-        &:focus-within:not(&_disabled):not(:active)::before {
+        &::before {
+            transform: translate(-1px, -1px);
+            border: 1px solid variables.$primary;
             opacity: 1;
         }
     }
@@ -52,7 +65,7 @@ $eye-filled-color: var(--eye-filled-color);
     &__input {
         width: 100%;
         height: 100%;
-        border-radius: variables.$radius-small;
+        border-radius: inherit;
         border: 1px solid variables.$element-border-color;
         outline: none;
         padding-left: 8px;
@@ -65,16 +78,12 @@ $eye-filled-color: var(--eye-filled-color);
             color: variables.$element-placeholder-color;
         }
 
-        &:hover {
-            border: 1px solid variables.$element-border-color-hover;
-        }
-
         &:not(:disabled):active {
             border: 1px solid variables.$primary;
         }
 
         &:not(:disabled):focus {
-            border-color: transparent;
+            border: none;
         }
 
         &:disabled {
@@ -89,8 +98,11 @@ $eye-filled-color: var(--eye-filled-color);
                 height: 56px;
 
                 &::before {
+                    border-radius: variables.$radius-large;
+                }
+
+                &:focus-within::before {
                     border-radius: 16px;
-                    transform: translateX(-2%) translateY(-6.5%);
                 }
             }
 
@@ -105,6 +117,10 @@ $eye-filled-color: var(--eye-filled-color);
                 height: 46px;
 
                 &::before {
+                    border-radius: variables.$radius-medium;
+                }
+
+                &:focus-within::before {
                     border-radius: 16px;
                 }
             }
@@ -120,8 +136,11 @@ $eye-filled-color: var(--eye-filled-color);
                 height: variables.$input-height-sm;
 
                 &::before {
+                    border-radius: variables.$radius-small;
+                }
+
+                &:focus-within::before {
                     border-radius: 12px;
-                    transform: translateX(-2%) translateY(-9.5%);
                 }
             }
 
@@ -221,7 +240,7 @@ $eye-filled-color: var(--eye-filled-color);
                     }
                 }
 
-                circle { 
+                circle {
                     stroke: $eye-filled-color;
                 }
             }

package/form/TextField/TextFieldView.scss

@@ -4,8 +4,6 @@
     --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"] {
@@ -57,6 +55,7 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
     &__textarea {
         width: 100%;
         min-width: 240px;
+        max-width: 100%;
         min-height: 80px;
         height: 80px;
 

package/icons/index.js

@@ -65,6 +65,7 @@ exports["default"] = (function (customIcons) {
         'home',
         'img_box',
         'import',
+        'export',
         'info_16x16',
         'info_24x24',
         'loading_purple',

package/icons/svgs/export.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="M7 10.4492L12 5.44922M12 5.44922L17 10.4492M12 5.44922L12 14.4492" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 16.4492L5 17.4492C5 18.5538 5.89543 19.4492 7 19.4492L17 19.4492C18.1046 19.4492 19 18.5538 19 17.4492V16.4492" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.10",
+    "version": "3.0.11",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -35,7 +35,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0.11",
+        "@steroidsjs/core": "^3.0.16",
         "@steroidsjs/eslint-config": "^2.1.6",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",