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

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: 10px;
+
+        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>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.26",
+    "version": "3.0.0-beta.28",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -23,6 +23,7 @@
         "date-fns": "^2.29.3",
         "lodash": "^4.17.20",
         "lodash-es": "^4.17.20",
+        "normalize.css": "^8.0.1",
         "rc-slider": "^9.7.4",
         "react": "^18.2.0",
         "react-collapse": "^5.0.1",
@@ -34,7 +35,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.9",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.13",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",
@@ -52,6 +53,6 @@
         "typescript": "^4.9.5"
     },
     "peerDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.9"
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.13"
     }
 }

package/scss/mixins/button.scss

@@ -2,14 +2,14 @@
     background-color: map-get($colorMap, color);
     color: map-get($colorMap, text-color);
 
-    &:hover {
+    &:not(:disabled):hover {
         background-color: map-get($colorMap, color-dark);
     }
-    &:focus,
-    &:focus-visible {
+    &:not(:disabled):focus,
+    &:not(:disabled):focus-visible {
         border: 4px solid map-get($colorMap, color-light);
     }
-    &:active {
+    &:not(:disabled):active {
         background-color: map-get($colorMap, color-light);
     }
 
@@ -31,15 +31,15 @@
     color: map-get($colorMap, color);
     border: 1px solid map-get($colorMap, color);
 
-    &:hover {
+    &:not(:disabled):hover {
         color: map-get($colorMap, color-dark);
         border-color: map-get($colorMap, color-dark);
     }
-    &:focus {
+    &:not(:disabled):focus {
         box-shadow: 0 0 0 4px map-get($colorMap, color-light), 0 0 0 4px map-get($colorMap, color-light);
         border: none;
     }
-    &:active {
+    &:not(:disabled):active {
         color: map-get($colorMap, color-light);
         border-color: map-get($colorMap, color-light);
         box-shadow: none;
@@ -47,7 +47,7 @@
 
     @if ($colorName == "basic") {
         color: $text-color;
-    }
+    } 
 
     #{$root}__loader { 
         svg {

package/scss/variables/common/colors.scss

@@ -23,14 +23,15 @@
     --light-gray: #f8f8f8;
     --dark: #6f6b76;
     --light: #9088a1;
-    --text-color: #312C3A;
+    --text-color: #312c3a;
     --background-color: #fff;
-    --is-dark: 'false';
+    --is-dark: "false";
     --border-color: #eef1f2;
     --border-color-hover: #e5e9eb;
     --placeholder-color: rgba(0, 0, 0, 0.3);
     --placeholder-disabled-color: rgba(0, 0, 0, 0.3);
     --background-disabled-color: #eef1f2;
+    --element-background-color: #FFFFFF;
 }
 
 html[data-theme="dark"] {
@@ -58,51 +59,53 @@ html[data-theme="dark"] {
     --light-gray: #928b9d;
     --dark: #6b6477;
     --light: #b7afc7;
-    --text-color: #FFFFFF;
-    --background-color: #414141;
-    --is-dark: 'true';
-    --border-color: #eef1f2;
+    --text-color: #ffffff;
+    --background-color: #323030;
+    --is-dark: "true";
+    --border-color: #5B5C6B;
     --border-color-hover: #4e4f57;
     --placeholder-color: rgba(255, 255, 255, 0.3);
     --placeholder-disabled-color: rgba(255, 255, 255, 0.1);
     --background-disabled-color: #5b5c6b;
+    --element-background-color: #414141;
 }
 
 /*
  *  SCSS variables implementation
  */
-$primary: var(--primary) !default;
-$primary-dark: var(--primary-dark) !default;
-$primary-light: var(--primary-light) !default;
-$secondary: var(--secondary) !default;
-$secondary-dark: var(--secondary-dark) !default;
-$secondary-light: var(--secondary-light) !default;
-$success: var(--success) !default;
-$success-dark: var(--success-dark) !default;
-$success-light: var(--success-light) !default;
-$danger: var(--danger) !default;
-$danger-dark: var(--danger-dark) !default;
-$danger-light: var(--danger-light) !default;
-$info: var(--info) !default;
-$info-dark: var(--info-dark) !default;
-$info-light: var(--info-light) !default;
-$warning: var(--warning) !default;
-$warning-dark: var(--warning-dark) !default;
-$warning-light: var(--warning-light) !default;
-$graphite: var(--graphite) !default;
-$gray-dark: var(--gray-dark) !default;
-$gray: var(--gray) !default;
-$light-gray: var(--light-gray) !default;
-$dark: var(--dark) !default;
-$light: var(--light) !default;
-$text-color: var(--text-color) !default;
-$background-color: var(--background-color) !default;
-$is-dark: var(--is-dark) !default;
-$border-color: var(--border-color) !default;
-$border-color-hover: var(--border-color-hover) !default;
-$placeholder-color: var(--placeholder-color) !default;
-$placeholder-disabled-color: var(--placeholder-disabled-color) !default;
-$background-disabled-color: var(--background-disabled-color) !default;
+$primary: var(--primary);
+$primary-dark: var(--primary-dark);
+$primary-light: var(--primary-light);
+$secondary: var(--secondary);
+$secondary-dark: var(--secondary-dark);
+$secondary-light: var(--secondary-light);
+$success: var(--success);
+$success-dark: var(--success-dark);
+$success-light: var(--success-light);
+$danger: var(--danger);
+$danger-dark: var(--danger-dark);
+$danger-light: var(--danger-light);
+$info: var(--info);
+$info-dark: var(--info-dark);
+$info-light: var(--info-light);
+$warning: var(--warning);
+$warning-dark: var(--warning-dark);
+$warning-light: var(--warning-light);
+$graphite: var(--graphite);
+$gray-dark: var(--gray-dark);
+$gray: var(--gray);
+$light-gray: var(--light-gray);
+$dark: var(--dark);
+$light: var(--light);
+$text-color: var(--text-color);
+$background-color: var(--background-color);
+$is-dark: var(--is-dark);
+$border-color: var(--border-color);
+$border-color-hover: var(--border-color-hover);
+$placeholder-color: var(--placeholder-color);
+$placeholder-disabled-color: var(--placeholder-disabled-color);
+$background-disabled-color: var(--background-disabled-color);
+$element-background-color: var(--element-background-color);
 
 /*
  * Common colors   
@@ -117,7 +120,7 @@ $white: #fff !default;
 
 $link-color: #2ba3fb !default;
 
-$gradient-blue: linear-gradient(180deg, #651FFF, #BA9BFF) !default;
+$gradient-blue: linear-gradient(180deg, #651fff, #ba9bff) !default;
 
 $color-themes: () !default;
 $color-themes: map-merge(

package/scss/variables/components/input.scss

@@ -64,4 +64,4 @@ $input-border-radius: 4px !default;
 $input-padding-y: 0 !default;
 $input-padding-x: 8px !default;
 $input-addon-padding: 0.6rem !default;
-$input-text-padding: 0.4rem !default;
+$input-text-padding: 0.4rem !default;

package/scss/variables/index.scss

@@ -1,3 +1,4 @@
+@import 'normalize.scss';
 @import 'common/colors';
 @import 'common/media';
 @import 'common/typography';

package/scss/variables/normalize.scss

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