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

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.25",
+    "version": "3.0.0-beta.27",
     "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;
+    --text-color: #ffffff;
     --background-color: #414141;
-    --is-dark: 'true';
-    --border-color: #eef1f2;
+    --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;
+}