@steroidsjs/bootstrap 3.0.0-beta.15 → 3.0.0-beta.16

package/content/Accordion/AccordionItemView.js

@@ -86,11 +86,11 @@ function AccordionItemView(props) {
         React.createElement("div", { className: bem.element('header-container'), onClick: handleHeaderClick },
             React.createElement("div", { className: bem.element('title-container') },
                 React.createElement("p", null, props.title)),
-            React.createElement("div", { className: bem.element('icon-wrapper') }, props.showIcon && props.icon
+            props.showIcon && (React.createElement("div", { className: bem.element('icon-wrapper') }, props.icon
                 ? renderIcon()
                 : (React.createElement(Icon_1["default"], { className: bem.element('icon', {
                         active: !props.disabled && props.isShowMore
-                    }), name: "accordion-chevron" })))),
+                    }), name: "accordion-chevron" }))))),
         React.createElement("div", { className: bem.element('content', { visible: !props.disabled && props.isShowMore }) }, props.children)));
 }
 exports["default"] = AccordionItemView;

package/content/Accordion/AccordionItemView.scss

@@ -140,7 +140,7 @@ $accordion-chevron-color: var(--accordion-chevron-color);
 
     &__title-container {
         width: 100%;
-        padding: $spacing-16;
+        padding: 16px;
         align-self: center;
         font-size: $font-size-lg;
         line-height: 24px;
@@ -164,21 +164,16 @@ $accordion-chevron-color: var(--accordion-chevron-color);
         transition: all 200ms ease;
         overflow: hidden;
         max-height: 0;
-        padding: 0 $spacing-16;
+        padding: 0 16px;
         color: #343a40;
 
         &_visible {
             max-height: 1024px;
-            padding: 18px 32px 18px $spacing-16;
+            padding: 18px 32px 18px 16px;
             border: 1px solid rgba(#000, 0.1);
         }
     }
 
-    &__close-icon,
-    &__open-icon {
-        transition: opacity 150ms ease-in-out;
-    }
-
     &__close-icon {
         position: absolute;
         opacity: 0;

package/content/Alert/AlertView.scss

@@ -2,7 +2,7 @@
     $root: &;
 
     position: relative;
-    padding: $spacing-16;
+    padding: 16px;
     border-radius: $radius-large;
     font-family: $font-family-nunito;
 

package/content/Badge/BadgeView.scss

@@ -57,15 +57,15 @@
     }
 
     &_large {
-        padding: $spacing-4 $spacing-8;
+        padding: 4px 8px;
     }
 
     &_medium {
-        padding: $spacing-2 $spacing-8;
+        padding: 2px 8px;
     }
 
     &_small {
-        padding: 0 $spacing-8;
+        padding: 0 8px;
     }
 
     &_has-counter {
@@ -74,13 +74,7 @@
 
         background: $light-gray;
         color: $text-color;
-        padding: $spacing-4 12px;
-
-        #{$root}__counter-content {
-            background: $white;
-            padding: $spacing-2 5px;
-            border-radius: 20px;
-        }
+        padding: 4px 12px;
 
         #{$root}__message {
             margin-right: 8px;
@@ -88,11 +82,23 @@
 
         #{$root}__counter {
             margin-right: 8px;
+            width: 18px;
+            background-color: $white;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: $radius-circle;
+        }
+
+        #{$root}__counter-content { 
+            font-weight: $font-weight-sm;
+            font-size: $font-size-xs;
+            line-height: 16px;
         }
 
-        #{$root}__close { 
+        #{$root}__close {
             svg {
-                path { 
+                path {
                     stroke: #000;
                 }
             }

package/content/DropDown/DropDownView.js

@@ -42,9 +42,12 @@ function DropDownView(props) {
     var contentProps = (0, react_1.useMemo)(function () { return ({
         onClose: props.onClose
     }); }, [props.onClose]);
-    var content = props.content();
-    if ((0, isFunction_1["default"])(content)) {
-        content = ui.renderView(content, contentProps);
+    var content;
+    if (props.content) {
+        content = props.content();
+        if ((0, isFunction_1["default"])(content)) {
+            content = ui.renderView(content, contentProps);
+        }
     }
     return (React.createElement("div", { ref: props.forwardedRef, className: bem(bem.block((_a = {
                 show: props.isComponentVisible

package/content/DropDown/DropDownView.scss

@@ -1,18 +1,117 @@
 @import "../../scss/variables/";
 
 :root {
-    --drop-down-background: #fff;
+    --dropdown-background: #fff;
+    --dropdown-triangle-border: #eef1f2;
+    --dropdown-triangle-svg: url("data:image/svg+xml,%3Csvg width='21' height='11' viewBox='0 0 21 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.0416 0.5L10.1719 10.2567L1.30215 0.499998L19.0416 0.5Z' fill='white' stroke='%23EEF1F2'/%3E%3C/svg%3E%0A");
 
     html[data-theme="dark"] {
-        --drop-down-background: #4e4f57;
+        --dropdown-background: #4e4f57;
+        --dropdown-triangle-border: transparent;
+        --dropdown-triangle-svg: url("data:image/svg+xml,%3Csvg width='21' height='11' viewBox='0 0 21 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.1719 11L0.171876 -1.74846e-06L20.1719 0L10.1719 11Z' fill='%234E4F57'/%3E%3C/svg%3E%0A");
     }
 }
 
-$drop-down-background: var(--drop-down-background);
+$dropdown-background: var(--dropdown-background);
+$dropdown-triangle-border: var(--triangle-border);
+$dropdown-triangle-svg: var(--dropdown-triangle-svg);
 
 $gap: 12px;
 
+%triangle {
+    content: "";
+    position: absolute;
+    width: 20px;
+    height: 11px;
+    z-index: 2;
+    background-image: $dropdown-triangle-svg;
+}
+
+%borderShaper {
+    content: "";
+    position: absolute;
+    z-index: 3;
+
+    width: 16px;
+    height: 1px;
+    background-color: $dropdown-background;
+    border-left: 2px solid $dropdown-triangle-border;
+    border-right: 2px solid $dropdown-triangle-border;
+}
+
+@mixin drop($edge, $padding) {
+    @if ($edge == "top") {
+        &::before {
+            @extend %triangle;
+
+            top: 100%;
+            left: $padding;
+            transform: translateX(-50%);
+        }
+
+        &::after {
+            @extend %borderShaper;
+
+            top: 100%;
+            left: $padding;
+            transform: translateX(-50%);
+        }
+    } @else if ($edge == "bottom") {
+        &::before {
+            @extend %triangle;
+
+            top: 0;
+            left: $padding;
+            top: -11px;
+            transform: translateX(-50%) rotate(180deg);
+        }
+
+        &::after {
+            @extend %borderShaper;
+
+            transform: translateX(-50%);
+            top: -1px;
+            left: $padding;
+        }
+    } @else if($edge == "left") {
+        &::before {
+            @extend %triangle;
+
+            left: 100%;
+            top: $padding;
+            transform: translateX(-22.5%) rotate(-90deg);
+        }
+
+        &::after {
+            @extend %borderShaper;
+
+            left: 100%;
+            top: $padding;
+            transform: rotate(-90deg) translate(-30%, -7.5px) ;
+        }
+    }
+    @else if($edge == "right") { 
+        &::before {
+            @extend %triangle;
+
+            right: 100%;
+            top: $padding;
+            transform: translateX(22.5%) rotate(90deg);
+        }
+
+        &::after {
+            @extend %borderShaper;
+
+            right: 100%;
+            top: $padding;
+            transform: rotate(-90deg) translate(-30%, 7.5px) ;
+        }
+    }
+}
+
 .DropDownView {
+    $root: &;
+
     z-index: 1000;
     position: absolute;
 
@@ -20,10 +119,11 @@ $gap: 12px;
     opacity: 0;
     transition: opacity 0.15s ease-in, transform 0.15s ease-in;
 
+    z-index: 4;
     width: 200px;
     padding: 12px;
     border-radius: $radius-large;
-    background-color: $drop-down-background;
+    background-color: $dropdown-background;
     border: 1px solid $gray;
 
     &_show {
@@ -50,14 +150,51 @@ $gap: 12px;
         transform: translateX($gap);
     }
 
-    &::before {
-        content: "";
-        position: absolute;
-        left: -10px;
-        top: 50%;
-        transform: translateY(-50%);
-        border-top: 10px solid transparent;
-        border-bottom: 10px solid transparent;
-        border-right: 10px solid #fff;
+    &_position-top {
+        @include drop("top", 50%);
+    }
+
+    &_position-topLeft {
+        @include drop("top", 15%);
+    }
+
+    &_position-topRight {
+        @include drop("top", 85%);
+    }
+
+    &_position-bottom {
+        @include drop("bottom", 50%);
+    }
+
+    &_position-bottomLeft {
+        @include drop("bottom", 15%);
+    }
+
+    &_position-bottomRight {
+        @include drop("bottom", 85%);
+    }
+
+    &_position-left {
+        @include drop("left", 46.5%);
+    }
+
+    &_position-leftTop {
+        @include drop("left", 12.5%)
+    }
+
+    &_position-leftBottom {
+        @include drop("left", 80%)
+    }
+
+    &_position-right {
+        @include drop("right", 46.5%);
+    }
+
+    &_position-rightTop {
+        @include drop("right", 12.5%);
+    }
+
+    &_position-rightBottom {
+        @include drop("right", 80%);
     }
 }

package/form/Button/ButtonView.js

@@ -57,10 +57,11 @@ function ButtonView(props) {
         _a.size = props.size,
         _a.disabled = props.disabled,
         _a.submitting = props.submitting,
-        _a.loading = !!props.isLoading,
+        _a.loading = props.isLoading,
         _a.failed = props.isFailed,
-        _a.link = props.tag === 'a',
-        _a)), props.block && 'btn-block', props.link && 'btn-link', props.className);
+        _a.link = props.link,
+        _a.block = props.block,
+        _a)), props.className);
     if (props.tag === 'a') {
         return (React.createElement("a", { className: className, href: props.url, onClick: props.onClick, style: props.style, target: props.target },
             renderLabel(),

package/form/Button/ButtonView.scss

@@ -42,6 +42,23 @@ $btn-letter-spacing: 0.1em;
         }
     }
 
+    &_block {
+        display: block;
+        width: 100%;
+
+        #{$root}__label {
+            justify-content: center;
+        }
+    }
+
+    &_link { 
+        display: inline;
+        width: auto;
+        #{$root}__label {
+            display: inline;
+        }
+    }
+
     &_disabled {
         opacity: 0.5;
         color: rgba(0, 0, 0, 0.25);
@@ -69,9 +86,10 @@ $btn-letter-spacing: 0.1em;
         }
     }
 
-    &_link {
-        justify-content: center;
-        background-color: transparent;
+    &__label {
+        display: flex;
+        flex-direction: row;
+        column-gap: 10px;
     }
 
     &__icon {
@@ -107,12 +125,6 @@ $btn-letter-spacing: 0.1em;
             animation: rotate 1.45s linear infinite;
         }
     }
-
-    &__label { 
-        display: flex;
-        flex-direction: row;
-        column-gap: 10px;
-    }
 }
 
 @keyframes rotate {

package/form/CheckboxField/CheckboxFieldView.scss

@@ -56,6 +56,7 @@
             color: $text-color;
             font-size: $font-size-sm;
             font-weight: $font-weight-md;
+            transform: translateY(1px);
         }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.15",
+    "version": "3.0.0-beta.16",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",

package/scss/variables/index.scss

@@ -1,6 +1,5 @@
 @import 'common/colors';
 @import 'common/typography';
-@import 'common/spacing';
 @import 'common/radiuses';
 @import 'common/old-variables';