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

package/content/Accordion/AccordionItemView.js

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

package/content/Accordion/AccordionItemView.scss

@@ -94,7 +94,7 @@ $accordion-chevron-color: var(--accordion-chevron-color);
                 grid-row-end: 2;
             }
 
-            #{$root}__icon {
+            #{$root}__icon-chevron {
                 transform: rotate(180deg);
                 &_active {
                     transform: rotate(0deg);
@@ -120,8 +120,11 @@ $accordion-chevron-color: var(--accordion-chevron-color);
         margin: 0;
     }
 
-    &__icon {
+    &__icon-chevron {
+        width: 24px;
+        height: 24px;
         box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
+        position: absolute;
         border-radius: $radius-small;
 
         transform: rotate(0deg);
@@ -153,6 +156,7 @@ $accordion-chevron-color: var(--accordion-chevron-color);
         display: flex;
         align-items: center;
         justify-content: center;
+        background-color: transparent;
 
         &_not_visible {
             width: 0;
@@ -174,6 +178,11 @@ $accordion-chevron-color: var(--accordion-chevron-color);
         }
     }
 
+    &__close-icon, &__open-icon { 
+        width: 24px;
+        height: 24px;
+    }
+
     &__close-icon {
         position: absolute;
         opacity: 0;

package/content/Accordion/AccordionView.scss

@@ -5,10 +5,10 @@
   grid-gap: 0;
 
   & > :first-child {
-    border-radius: $radius-large $radius-large 0 0;
+    border-radius: 14px 14px 0 0;
   }
 
   & > :last-child {
-    border-radius: 0 0 $radius-large $radius-large;
+    border-radius: 0 0 14px 14px;
   }
 }

package/content/Alert/AlertView.scss

@@ -25,17 +25,25 @@
         }
     }
 
-    &__icon.IconView {
+    &__icon {
+        width: 24px;
         height: 24px;
         margin-right: 12px;
-        
+
         svg {
             width: 24px;
         }
     }
 
-    &__icon-close.IconView {
-        width: 10px;
+    &__icon-close {
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;    
     }
 
     &__text-block {
@@ -60,6 +68,7 @@
     &_error {
         background: $danger-light;
     }
+
     &_default {
         background: $light-gray;
     }

package/content/Avatar/AvatarView.scss

@@ -138,7 +138,6 @@
 
         color: $white;
         background: $gradient-blue border-box;
-        border: 1px solid #fff;
 
         span {
             display: block;

package/content/Badge/BadgeView.scss

@@ -1,5 +1,15 @@
 @import "../../scss/variables";
 
+:root { 
+    --counter-background-color: #FFFFFF;
+}
+
+html[data-theme="dark"] { 
+    --counter-background-color: #414141;
+}
+
+$counter-background-color: var(--counter-background-color);
+
 .BadgeView {
     $root: &;
 
@@ -21,6 +31,12 @@
         }
     }
 
+    &__close {
+        width: 17px;
+        height: 17px;
+        cursor: pointer;
+    }
+
     $badge-types: (
         "primary": $primary,
         "secondary": $secondary,
@@ -88,12 +104,14 @@
             justify-content: center;
             align-items: center;
             border-radius: $radius-circle;
+            background-color: $counter-background-color;
         }
 
-        #{$root}__counter-content { 
+        #{$root}__counter-content {
             font-weight: $font-weight-sm;
             font-size: $font-size-xs;
             line-height: 16px;
+            color: $text-color;
         }
 
         #{$root}__close {

package/content/Calendar/CaptionElement.scss

@@ -1,10 +1,9 @@
-$border-color: gray;
 
 .CaptionElement {
   height: 45px;
   display: table-caption;
   padding: 0 10px;
-  border-bottom: 1px solid $border-color;
+  border-bottom: 1px solid gray;
 
   & > div {
     font-size: 14px;
@@ -87,12 +86,12 @@ $border-color: gray;
     padding: 5px;
 
     text-align: center;
-    border-bottom: 1px solid $border-color;
+    border-bottom: 1px solid gray;
     background-color: $calendar-primary-light-color;
 
     &_months {
       grid-area: HeaderMonths;
-      border-right: 1px solid $border-color;
+      border-right: 1px solid gray;
     }
 
     &_years {
@@ -101,7 +100,7 @@ $border-color: gray;
   }
 
   &__panel-column-months {
-    border-right: 1px solid $border-color;
+    border-right: 1px solid gray;
 
     &_first {
       grid-area: Months1stCol;

package/content/Detail/DetailView.scss

@@ -1,66 +1,88 @@
-.DetailView {
-  &__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 32px;
-  }
+:root {
+    --detail-background-color-value: #ffffff;
+    --detail-background-color-label: #f9fcff;
+    --detail-border-color: #e9e9e9;
+}
 
-  &__title {
-    color: #343a40;
-    font-size: 28px;
-    line-height: 34px;
-    font-weight: 800;
-  }
+html[data-theme="dark"] {
+    --detail-background-color-value: #4E4F57;
+    --detail-background-color-label: #5B5C6B;
+    --detail-border-color: #ADAAB3;
+}
 
-  &__controls {
-    margin-left: auto;
-  }
+$detail-border-color: var(--detail-border-color);
+$detail-background-color-value: var(--detail-background-color-value);
+$detail-background-color-label: var(--detail-background-color-label);
 
-  &__table-container {
-    display: flex;
-    border-radius: 10px;
-    border: 1px solid #cccccc;
-    filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.1));
-    overflow: hidden;
-  }
+.DetailView {
+    font-family: $font-family-nunito;
 
-  &__table {
-    background: #ffffff;
-    height: 100%;
-    width: 100%;
-    border-collapse: collapse;
-    border-spacing: 0;
-    border: none;
-  }
+    &__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 32px;
+    }
+
+    &__title {
+        color: $black-30;
+        font-size: 56px;
+        line-height: 56px;
+        font-weight: $font-weight-lg;
+    }
 
-  &__row:not(:last-child) {
-    border-bottom: 1px solid #cccccc;
-  }
+    &__controls {
+        margin-left: auto;
+    }
 
-  &__label,
-  &__value {
-    &:not(:last-child) {
-      border-right: 1px solid #cccccc;
+    &__table-container {
+        display: flex;
+        border-radius: 10px;
+        border: 1px solid $detail-border-color;
+        overflow: hidden;
     }
 
-    padding: 14px 16px;
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 140%;
+    &__table {
+        background: #ffffff;
+        height: 100%;
+        width: 100%;
+        border-collapse: collapse;
+        border-spacing: 0;
+        border: none;
+    }
 
-    &_size_md {
-      padding: 18px 20px;
-      font-size: 16px;
+    &__row:not(:last-child) {
+        border-bottom: 1px solid $detail-border-color;
     }
 
-    &_size_lg {
-      padding: 22px 24px;
-      font-size: 18px;
+    &__label,
+    &__value {
+        &:not(:last-child) {
+            border-right: 1px solid $detail-border-color;
+        }
+
+        padding: 12px;
+
+        font-weight: $font-weight-md;
+        font-size: $font-size-sm;
+        line-height: 18px;
+        color: $text-color;
+        background-color: $detail-background-color-value;
+
+        &_size_md {
+            padding: 16px 12px;
+            font-size: $font-size-base;
+            line-height: 22px;
+        }
+
+        &_size_lg {
+            padding: 18px 12px;
+            font-size: $font-size-lg;
+            line-height: 24px;
+        }
     }
-  }
 
-  &__label {
-    background: #f8f8f8;
-  }
+    &__label {
+        background: $detail-background-color-label;
+    }
 }

package/content/Icon/IconView.js

@@ -28,9 +28,9 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 function IconView(props) {
     var bem = (0, hooks_1.useBem)('IconView');
     if (typeof props.icon === 'string' && props.icon.indexOf('<svg') === 0) {
-        return (React.createElement("span", { dangerouslySetInnerHTML: { __html: props.icon } /* eslint-disable-line react/no-danger */, "aria-label": props.title, title: props.title, className: bem(bem.block(), props.className), onClick: props.onClick, onKeyPress: props.onClick, role: 'button', tabIndex: 0 }));
+        return (React.createElement("span", { dangerouslySetInnerHTML: { __html: props.icon } /* eslint-disable-line react/no-danger */, "aria-label": props.title, title: props.title, className: bem(bem.block(), props.className), onClick: props.onClick, onKeyPress: props.onClick, role: 'button', tabIndex: props.tabIndex || 0 }));
     }
-    return (React.createElement("span", { onClick: props.onClick, onKeyPress: props.onClick, role: 'button', tabIndex: 0 },
+    return (React.createElement("span", { onClick: props.onClick, onKeyPress: props.onClick, role: 'button', tabIndex: props.tabIndex || 0 },
         React.createElement("img", { alt: props.title, title: props.title, src: props.icon, className: bem(bem.block(), props.className) })));
 }
 exports["default"] = IconView;

package/form/Button/ButtonView.js

@@ -38,16 +38,19 @@ function ButtonView(props) {
             ? props.label
             : (props.hint || null);
         return (React.createElement(React.Fragment, null,
-            props.isLoading && (React.createElement(Icon_1["default"], { className: bem.element('loader'), name: 'loader' })),
+            props.isLoading && (React.createElement(Icon_1["default"], { className: bem.element('loader'), name: 'loader', tabIndex: -1 })),
             !props.isLoading && (React.createElement("span", { className: bem.element('label') },
                 props.icon && (React.createElement(Icon_1["default"], { name: props.icon, title: title, className: bem.element('icon', !props.label && 'without-label') })),
                 props.children))));
     };
     var renderBadge = function () {
+        var _a;
         if (!props.badge || !props.badge.enable) {
             return null;
         }
-        return (React.createElement("span", { className: bem('badge', props.badge.color && "badge-".concat(props.badge.color), bem.element('badge'), props.badge.className) }, props.badge.value));
+        return (React.createElement("span", { className: bem(bem.element('badge', (_a = {},
+                _a["".concat(props.badge.color)] = !!props.badge.color,
+                _a)), props.badge.className) }, props.badge.value));
     };
     var className = bem(bem.block((_a = {
             button: !props.link

package/form/Button/ButtonView.scss

@@ -12,9 +12,13 @@ $btn-letter-spacing: 0.1em;
 
     width: 160px;
 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
     &_button {
         position: relative;
-        border-radius: 8px;
+        border-radius: $radius-small;
         user-select: none;
         border: 3px solid transparent;
 
@@ -42,6 +46,12 @@ $btn-letter-spacing: 0.1em;
         }
     }
 
+    &__label {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
     &_block {
         display: block;
         width: 100%;
@@ -51,7 +61,7 @@ $btn-letter-spacing: 0.1em;
         }
     }
 
-    &_link { 
+    &_link {
         display: inline;
         width: auto;
         #{$root}__label {
@@ -61,8 +71,9 @@ $btn-letter-spacing: 0.1em;
 
     &_disabled {
         opacity: 0.5;
-        color: rgba(0, 0, 0, 0.25);
+        color: rgba(0, 0, 0, 0.1);
         cursor: not-allowed;
+
         input {
             cursor: inherit;
         }
@@ -93,6 +104,8 @@ $btn-letter-spacing: 0.1em;
     }
 
     &__icon {
+        width: 16px;
+        height: 16px;
         &_without-label {
             margin: 0;
         }
@@ -117,10 +130,35 @@ $btn-letter-spacing: 0.1em;
         position: relative;
         top: -1px;
         margin-left: 4px;
+        border-radius: $radius-small;
+        padding: 2px 5px;
+
+        $badge-types: (
+            "primary": $primary,
+            "secondary": $secondary,
+            "success": $success,
+            "danger": $danger,
+            "warning": $warning,
+            "info": $info,
+        );
+
+        @each $type, $color in $badge-types {
+            &_#{$type} {
+                background-color: $color;
+            }
+        }
     }
 
     &__loader {
+        width: 24px;
+        height: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
         svg {
+            width: 14px;
+            height: 14px;
             transform-origin: center;
             animation: rotate 1.45s linear infinite;
         }

package/form/CheckboxField/CheckboxFieldView.scss

@@ -38,18 +38,17 @@
             content: "";
             display: inline-block;
             position: absolute;
-            transform: translateX(-7.5%);
+            top: 0;
+            left: 0;
+            width: 26px;
+            height: 26px;
 
-            width: 28px;
-            height: 28px;
-            flex-shrink: 0;
-            flex-grow: 0;
-
-            border-radius: $radius-small;
-            border: 4px solid $primary-light;
+            transform: translate(-12%, -11.5%);
+            transition: opacity 150ms ease-in-out;
             opacity: 0;
 
-            background: transparent;
+            border-radius: $radius-large;
+            border: 4px solid $primary-light;
         }
 
         &-text {
@@ -66,7 +65,7 @@
         opacity: 0;
 
         //HOVER
-        &:not(:disabled):not(:checked):not(:active) + #{$root}__label:hover::before {
+        &:not(:focus):not(:disabled):not(:checked):not(:active) + #{$root}__label:hover::before {
             border-color: #d0d0d0;
         }
 
@@ -81,7 +80,7 @@
 
         &:checked:active + #{$root}__label::before {
             background-color: $primary-light;
-            border: none;
+            border-color: transparent;
         }
 
         //FOCUS

package/form/FieldLayout/FieldLayoutView.js

@@ -29,17 +29,25 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 function FieldLayoutView(props) {
     var bem = (0, hooks_1.useBem)('FieldLayoutView');
     return (React.createElement("div", { className: bem(bem.block({
             layout: props.layout.layout
         }), 'form-group', props.layout.className, props.layout.layout === 'horizontal' && 'row', props.layout.layout === 'inline' && 'form-inline mb-0'), style: props.layout.style },
         props.label && (React.createElement("div", { className: bem(bem.element('label', {
-                required: props.required
+                required: props.required,
+                size: props.size
             }), props.layout.layout === 'horizontal' && 'col-form-label text-right', props.layout.layout === 'horizontal' && 'col-' + props.layout.cols[0], props.layout.layout === 'inline' && 'sr-only') }, props.label + ':')),
         React.createElement("div", { className: bem(bem.element('field'), props.layout.layout === 'horizontal' && 'col-' + props.layout.cols[1], props.layout.layout === 'horizontal' && !props.label && 'offset-' + props.layout.cols[0], props.layout.layout === 'inline' && 'w-100') },
             props.children,
-            !(0, isEmpty_1["default"])(props.errors) && (React.createElement("div", { className: bem(bem.element('invalid-feedback'), 'invalid-feedback') }, [].concat(props.errors).filter(function (error) { return typeof error === 'string'; }).map(function (error, index) { return (React.createElement("div", { key: index }, error)); }))),
-            (0, isEmpty_1["default"])(props.errors) && props.layout.layout !== 'inline' && props.hint && (React.createElement("div", { className: bem(bem.element('hint'), 'text-muted') }, props.hint)))));
+            !(0, isEmpty_1["default"])(props.errors) && (React.createElement("div", { className: bem(bem.element('invalid-feedback'), 'invalid-feedback') }, [].concat(props.errors).filter(function (error) { return typeof error === 'string'; }).map(function (error, index) { return (React.createElement("div", { key: index, className: bem.element('error-message') },
+                React.createElement(Icon_1["default"], { name: "error", className: bem.element('icon_error'), tabIndex: -1 }),
+                React.createElement("span", { className: bem.element('error-text', {
+                        size: !!props.size || 'md'
+                    }) }, error))); }))),
+            (0, isEmpty_1["default"])(props.errors) && props.layout.layout !== 'inline' && props.hint && (React.createElement("div", { className: bem(bem.element('hint', {
+                    size: props.size
+                })) }, props.hint)))));
 }
 exports["default"] = FieldLayoutView;