@steroidsjs/bootstrap 3.0.0-beta.29 → 3.0.0-beta.30

package/form/RadioListField/RadioListFieldView.scss

@@ -1,23 +1,17 @@
 :root {
-    --radio-svg-default: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.110938' y='0.115161' width='12' height='12' rx='6' fill='%23651FFF'/%3E%3C/svg%3E%0A");
-    --radio-checked-hover-svg: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.110938' y='0.115161' width='12' height='12' rx='6' fill='%23651FFF'/%3E%3C/svg%3E%0A");
-    --radio-checked-active-svg: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.110938' y='0.115161' width='12' height='12' rx='6' fill='%23DBCBFF'/%3E%3C/svg%3E%0A");
-    --radio-checked-disabled-svg: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.110938' y='0.115161' width='12' height='12' rx='6' fill='%23EEF1F2'/%3E%3C/svg%3E%0A");
+    --radio-hover-color: #651fff;
 }
 
 html[data-theme="dark"] {
-    --radio-svg-default: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.110938' y='0.115161' width='12' height='12' rx='6' fill='%238B57FF'/%3E%3C/svg%3E%0A");
-    --radio-checked-hover-svg: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.110938' y='0.115161' width='12' height='12' rx='6' fill='%236648A7'/%3E%3C/svg%3E%0A");
-    --radio-checked-active-svg: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.110938' y='0.115161' width='12' height='12' rx='6' fill='%23BA9BFF'/%3E%3C/svg%3E%0A");
-    --radio-checked-disabled-svg: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.010938' y='0.115161' width='12' height='12' rx='6' fill='%235B5C6B'/%3E%3C/svg%3E%0A");
+    --radio-hover-color: #6648A7;
 }
 
-$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);
+$radio-hover-color: var(--radio-hover-color);
 
 .RadioListFieldView {
+    position: relative;
+    box-sizing: border-box;
+
     $root: &;
 
     font-family: $font-family-nunito;
@@ -26,8 +20,21 @@ $radio-checked-disabled-svg: var(--radio-checked-disabled-svg);
     font-weight: 400;
     font-size: $font-size-sm;
 
-    &__item {
-        width: fit-content;
+    &__ellipse {
+        position: absolute;
+        top: 50%;
+        left: 6px;
+        transform: translateY(-50%);
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        background-color: $primary;
+        border-radius: $radius-circle;
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    &__label { 
         position: relative;
     }
 
@@ -38,6 +45,7 @@ $radio-checked-disabled-svg: var(--radio-checked-disabled-svg);
     }
 
     &__input + &__label {
+        position: relative;
         display: inline-flex;
         align-items: center;
         user-select: none;
@@ -89,21 +97,35 @@ $radio-checked-disabled-svg: var(--radio-checked-disabled-svg);
         opacity: 1;
     }
 
+    &__input:not(:disabled):focus + &__label &__ellipse {
+        opacity: 1;
+    }
+
     &__input:checked + &__label::before {
-        background-image: $radio-svg-default;
         border: 1px solid $primary;
     }
+    &__input:checked + &__label &__ellipse {
+        opacity: 1;
+    }
 
     &__input:not(:disabled):checked:hover + &__label::before {
         border-color: $primary-dark;
-        background-image: $radio-checked-hover-svg;
+    }
+
+    &__input:not(:disabled):checked:hover + &__label &__ellipse {
+        opacity: 1;
+        background-color: $radio-hover-color;
     }
 
     &__input:not(:disabled):checked:active + &__label::before {
-        background-image: $radio-checked-active-svg;
         border-color: $primary-light;
     }
 
+    &__input:not(:disabled):checked:active + &__label &__ellipse {
+        opacity: 1;
+        background-color: $primary-light;
+    }
+
     &__input:disabled + &__label {
         cursor: not-allowed;
         color: $placeholder-color;
@@ -119,17 +141,91 @@ $radio-checked-disabled-svg: var(--radio-checked-disabled-svg);
 
         background-color: transparent;
         border-color: $background-disabled-color;
+    }
 
-        background-image: $radio-checked-disabled-svg;
+    &__input:disabled:checked + &__label &__ellipse {
+       background-color: $background-disabled-color;
     }
 
     &__item_hasError {
         #{$root}__input:not(:disabled):not(:checked) + #{$root}__label {
             color: $danger;
-            
+
             &::before {
                 border-color: $danger;
             }
         }
     }
+
+    &__item {
+        width: fit-content;
+        position: relative;
+
+        &_size {
+            &_lg {
+                #{$root}__label {
+                    font-size: $font-size-lg;
+                    line-height: 24px;
+
+                    &::before {
+                        width: 22px;
+                        height: 22px;
+                    }
+
+                    &::after {
+                        width: 24px;
+                        height: 24px;
+                    }
+                }
+            }
+
+            &_md {
+                #{$root}__label {
+                    font-size: $font-size-base;
+                    line-height: 22px;
+
+                    &::before {
+                        width: 18px;
+                        height: 18px;
+                    }
+
+                    &::after {
+                        width: 20px;
+                        height: 20px;
+                        transform: translate(-14.5%, -10.5%);
+                    }
+                }
+
+                #{$root}__ellipse {
+                    width: 10px;
+                    height: 10px;
+                    left: 5px;
+                }
+            }
+
+            &_sm {
+                #{$root}__label {
+                    font-size: $font-size-sm;
+                    line-height: 18px;
+
+                    &::before {
+                        width: 14px;
+                        height: 14px;
+                    }
+
+                    &::after {
+                        width: 16px;
+                        height: 16px;
+                        transform: translate(-16.5%, -12.5%);
+                    }
+                }
+
+                #{$root}__ellipse {
+                    width: 8px;
+                    height: 8px;
+                    left: 4px;
+                }
+            }
+        }
+    }
 }

package/form/TextField/TextFieldView.scss

@@ -20,7 +20,6 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
 
     position: relative;
     font-family: $font-family-nunito;
-    width: fit-content;
 
     &_hasErrors {
         #{$root}__textarea {
@@ -68,7 +67,7 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
         z-index: 2;
         outline: none;
         color: $text-color;
-        border-color: $border-color;
+        border: 1px solid $border-color;
 
         &::placeholder {
             color: $placeholder-color;
@@ -110,7 +109,6 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
     }
 
     &_size {
-        width: 240px;
         &_lg {
             #{$root}__textarea {
                 height: 130px;

package/icons/index.js

@@ -267,6 +267,8 @@ exports["default"] = (function (customIcons) {
         'user',
         'visible-eye',
         'crossed-out-eye',
+        'dots',
+        'search',
     ];
     steroidsIcons.forEach(function (iconName) {
         icons[iconName] = require("./svgs/".concat(iconName, ".svg"));

package/icons/svgs/dots.svg

@@ -0,0 +1,5 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="14.3535" y="2.58154" width="4" height="4" rx="2" transform="rotate(90 14.3535 2.58154)" fill="#323232"/>
+<rect x="14.3535" y="10.5815" width="4" height="4" rx="2" transform="rotate(90 14.3535 10.5815)" fill="#323232"/>
+<rect x="14.3535" y="18.5815" width="4" height="4" rx="2" transform="rotate(90 14.3535 18.5815)" fill="#323232"/>
+</svg>

package/icons/svgs/search.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="11.3535" cy="11.7225" r="6" stroke="#323232" stroke-width="1.5"/>
+<path d="M20.3535 20.7225L17.3535 17.7225" stroke="#323232" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/layout/Tooltip/TooltipView.js

@@ -27,18 +27,18 @@ var React = __importStar(require("react"));
 var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
 function TooltipView(props) {
-    var _a;
     var tooltipRef = (0, react_1.useRef)(null);
     var arrowRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         props.calculatePosition(tooltipRef.current.getBoundingClientRect(), arrowRef.current.getBoundingClientRect());
     }, [props.calculatePosition]);
     var bem = (0, hooks_1.useBem)('TooltipView');
-    return (React.createElement("div", { ref: tooltipRef, className: bem(bem.block({
-            show: props.isTooltipVisible
-        }), 'tooltip', 'tooltip-position-' + props.position), style: props.style },
-        React.createElement("div", { ref: arrowRef, className: bem.element('arrow', (_a = {}, _a['position-' + props.position] = true, _a)), style: props.arrowPosition }),
-        React.createElement("div", { className: bem(bem.element('content'), 'tooltip-inner') },
+    return (React.createElement("div", { ref: tooltipRef, className: bem.block({
+            show: props.isTooltipVisible,
+            position: props.position
+        }), style: props.style },
+        React.createElement("div", { ref: arrowRef, className: bem.element('arrow', { position: props.position }), style: props.arrowPosition }),
+        React.createElement("div", { className: bem.element('content') },
             React.createElement("span", null, props.content))));
 }
 exports["default"] = TooltipView;

package/layout/Tooltip/TooltipView.scss

@@ -1,8 +1,7 @@
 @use 'sass:math';
 
-$tooltip-arrow-color: #000;
-$tooltip-arrow-width: 8px;
-$tooltip-arrow-height: 8px;
+$tooltip-arrow-width: 10px;
+$tooltip-arrow-height: 10px;
 $tooltip-arrow-border: math.div($tooltip-arrow-width, 2);
 $tooltip-gap: 12px;
 
@@ -10,10 +9,18 @@ $tooltip-arrow-offset-horizontal: 20px;
 $tooltip-arrow-offset-vertical-top: 15px;
 $tooltip-arrow-offset-vertical-bottom: 7px;
 
+$tooltip-background-color: rgba(65, 65, 65, 0.95);
+
 .TooltipView {
   position: absolute;
   top: 0;
   left: 0;
+  max-width: 300px;
+  word-break: break-all;
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: $tooltip-background-color;
+
   transform: translate(0,0);
   opacity: 0;
   transition: opacity .15s ease-in, transform .15s ease-in;
@@ -22,99 +29,100 @@ $tooltip-arrow-offset-vertical-bottom: 7px;
   &_show {
     opacity: 1;
   }
-  &_show.tooltip-position-top, &_show.tooltip-position-topLeft,  &_show.tooltip-position-topRight{
+
+  &_position{
+    &_top, &_topLeft, &_topRight {
       transform: translateY(-$tooltip-gap);
-  }
-  &_show.tooltip-position-bottom, &_show.tooltip-position-bottomLeft,  &_show.tooltip-position-bottomRight{
-    transform: translateY($tooltip-gap);
-  }
-  &_show.tooltip-position-left, &_show.tooltip-position-leftTop,  &_show.tooltip-position-leftBottom{
-    transform: translateX(-$tooltip-gap);
-  }
-  &_show.tooltip-position-right, &_show.tooltip-position-rightTop,  &_show.tooltip-position-rightBottom{
-    transform: translateX($tooltip-gap);
-  }
+    }
+
+    &_bottom, &_bottomLeft, &_bottomRight {
+      transform: translateY($tooltip-gap);
+    }
+
+    &_left, &_leftTop, &_leftBottom {
+      transform: translateX(-$tooltip-gap);
+    }
 
+    &_right, &_rightTop, &_rightBottom {
+      transform: translateX($tooltip-gap);
+    }
+  }
 
   &__arrow{
     position: absolute;
-
+    
     width: $tooltip-arrow-width;
     height: $tooltip-arrow-height;
 
     border-style: solid;
     border-width: math.div($tooltip-arrow-height, 2);
+    border-color: $tooltip-background-color;
     box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
 
-
-    &_position-top, &_position-topLeft, &_position-topRight{
+    &_position_top, &_position_topLeft, &_position_topRight{
       bottom: -$tooltip-arrow-border;
       left: 50%;
-
       border-top-color: transparent;
       border-left-color: transparent;
-      border-right-color:  $tooltip-arrow-color;
-      border-bottom-color:  $tooltip-arrow-color;
       transform: translateX(-50%) rotate(45deg);
     }
-    &_position-topLeft{
+    &_position_topLeft{
       left: $tooltip-arrow-offset-horizontal;
     }
-    &_position-topRight{
+    &_position_topRight{
       left: unset;
       right: $tooltip-arrow-offset-horizontal;
     }
 
-    &_position-bottom, &_position-bottomLeft, &_position-bottomRight{
+    &_position_bottom, &_position_bottomLeft, &_position_bottomRight{
       top: -$tooltip-arrow-border;
       left: 50%;
-      border-top-color: $tooltip-arrow-color;
-      border-left-color: $tooltip-arrow-color;
       border-right-color: transparent;
       border-bottom-color: transparent;
       transform: translateX(-50%) rotate(45deg);
     }
-    &_position-bottomLeft{
+    &_position_bottomLeft{
       left: $tooltip-arrow-offset-horizontal;
     }
-    &_position-bottomRight{
+    &_position_bottomRight{
       left: unset;
       right: $tooltip-arrow-offset-horizontal;
     }
 
-    &_position-left, &_position-leftTop, &_position-leftBottom{
+    &_position_left, &_position_leftTop, &_position_leftBottom{
       right: -$tooltip-arrow-border;
       top: 50%;
-      border-top-color: $tooltip-arrow-color;
       border-left-color: transparent;
-      border-right-color: $tooltip-arrow-color;
       border-bottom-color: transparent;
       transform: translateY(-50%) rotate(45deg);
     }
-    &_position-leftTop{
+    &_position_leftTop{
       top: $tooltip-arrow-offset-vertical-top;
     }
-    &_position-leftBottom{
+    &_position_leftBottom{
       top: unset;
       bottom: $tooltip-arrow-offset-vertical-bottom;
     }
 
-    &_position-right, &_position-rightTop, &_position-rightBottom{
+    &_position_right, &_position_rightTop, &_position_rightBottom{
       left: -$tooltip-arrow-border;
       top: 50%;
       border-top-color: transparent;
-      border-left-color: $tooltip-arrow-color;
       border-right-color: transparent;
-      border-bottom-color: $tooltip-arrow-color;
       transform: translateY(-50%) rotate(45deg);
     }
-    &_position-rightTop{
+    &_position_rightTop{
       top: $tooltip-arrow-offset-vertical-top;
     }
-    &_position-rightBottom{
+    &_position_rightBottom{
       top: unset;
       bottom: $tooltip-arrow-offset-vertical-bottom;
     }
   }
 
+  &__content{
+    color: $white;
+    font-size: 14px;
+    line-height: 24px;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.29",
+    "version": "3.0.0-beta.30",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -35,7 +35,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.13",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.15",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",
@@ -53,6 +53,6 @@
         "typescript": "^4.9.5"
     },
     "peerDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.13"
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.15"
     }
 }

package/scss/mixins/index.scss

@@ -1,3 +1,3 @@
 @import "button";
-@import "card";
 @import "typography";
+@import "scroll";

package/scss/mixins/scroll.scss

@@ -0,0 +1,31 @@
+@mixin custom-scroll($thumbColor, $backgroundColor) {
+    scrollbar-color: $thumbColor $backgroundColor;
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+        width: 4px;
+        height: 4px;
+        border-radius: 3px;
+
+        &:hover {
+            cursor: pointer;
+        }
+    }
+
+    &::-webkit-scrollbar-track {
+        border-radius: 3px;
+        background-color: $backgroundColor;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border-radius: 3px;
+        background-color: $thumbColor;
+    }
+}
+
+@mixin scrollWrapper($maxHeight, $paddingRight: 0, $thumbColor, $backgroundColor) {
+    @include custom-scroll($thumbColor, $backgroundColor);
+    padding-right: $paddingRight;
+    max-height: $maxHeight;
+    overflow: auto;
+}

package/scss/variables/common/colors.scss

@@ -98,6 +98,7 @@ $light-gray: var(--light-gray);
 $dark: var(--dark);
 $light: var(--light);
 $text-color: var(--text-color);
+$text-color-revert: var(--text-color-revert);
 $background-color: var(--background-color);
 $is-dark: var(--is-dark);
 $border-color: var(--border-color);

package/scss/variables/index.scss

@@ -7,7 +7,6 @@
 
 @import 'components/button';
 @import 'components/calendar';
-@import 'components/card';
 @import 'components/icon';
 @import 'components/input';
 @import 'components/ratefield';

package/scss/mixins/card.scss

@@ -1,26 +0,0 @@
-@mixin card-theme($root, $color) {
-  background: map-get($color, color);
-  color: map-get($color, text-color);
-
-  #{$root}__header{
-    background: map-get($color, color);
-    border-bottom: 1px solid map-get($color, color-dark);
-  }
-  #{$root}__footer{
-    background: map-get($color, color);
-    border-top: 1px solid map-get($color, color-dark);
-  }
-}
-
-@mixin card-border-theme($root, $color) {
-  border: 1px solid map-get($color, color);
-  #{$root}__content{
-    color: map-get($color, color);
-  }
-  #{$root}__header{
-    border-bottom: 1px solid map-get($color, color);
-  }
-  #{$root}__footer{
-    border-top: 1px solid map-get($color, color);
-  }
-}

package/scss/variables/components/card.scss

@@ -1,20 +0,0 @@
-$card-header-font-size: 20px !default;
-$card-header-line-height: 24px !default;
-
-$card-title-font-size: 20px !default;
-$card-title-line-height: 24px !default;
-
-$card-font-size: 14px !default;
-
-$card-children-font-size: 16px !default;
-$card-children-line-height: 28px !default;
-
-$card-horizontal-header-font-size: 28px !default;
-$card-horizontal-font-size: 16px !default;
-
-$card-link-font-size: 16px !default;
-
-$card-border-radius: 3px !default;
-$card-button-border-radius: 4px !default;
-
-$card-header-background: $grey-lighter !default;