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

package/content/Accordion/AccordionItemView.scss

@@ -124,7 +124,6 @@ $accordion-chevron-color: var(--accordion-chevron-color);
         width: 24px;
         height: 24px;
         box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
-        position: absolute;
         border-radius: $radius-small;
 
         transform: rotate(0deg);
@@ -136,8 +135,7 @@ $accordion-chevron-color: var(--accordion-chevron-color);
     }
 
     &__header-container {
-        display: flex;
-        align-items: center;
+        position: relative;
         cursor: pointer;
     }
 
@@ -150,13 +148,12 @@ $accordion-chevron-color: var(--accordion-chevron-color);
     }
 
     &__icon-wrapper {
-        width: 48px;
-        height: 48px;
+        width: 24px;
+        height: 24px;
 
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: transparent;
+        position: absolute;
+        top: 16px;
+        right: 16px;
 
         &_not_visible {
             width: 0;
@@ -164,6 +161,12 @@ $accordion-chevron-color: var(--accordion-chevron-color);
         }
     }
 
+    .IconView { 
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+    }
+
     &__content {
         transition: all 200ms ease;
         overflow: hidden;
@@ -178,7 +181,8 @@ $accordion-chevron-color: var(--accordion-chevron-color);
         }
     }
 
-    &__close-icon, &__open-icon { 
+    &__close-icon,
+    &__open-icon {
         width: 24px;
         height: 24px;
     }
@@ -195,6 +199,7 @@ $accordion-chevron-color: var(--accordion-chevron-color);
             opacity: 1;
             pointer-events: all;
         }
+        
         #{$root}__open-icon {
             position: absolute;
             opacity: 0;

package/content/Alert/AlertView.scss

@@ -78,7 +78,9 @@
     }
 
     &__wrapper {
+        width: 508px;
         display: flex;
+        flex-flow: column;
         justify-content: space-between;
     }
 

package/content/Avatar/AvatarView.scss

@@ -13,8 +13,16 @@
     --status-size-medium: 12px;
     --status-size-large: 14px;
     --status-size: var(--status-size-x-large);
+
+    --status-border-color: #FFFFFF;
+}
+
+html[data-theme="dark"] { 
+    --status-border-color: #4E4F57;
 }
 
+$status-border-color: var(--status-border-color);
+
 @mixin border($background) {
     &::before {
         content: "";
@@ -120,7 +128,7 @@
             border-radius: $radius-circle;
             background-color: $success;
 
-            border: var(--status-border-width) solid $white;
+            border: var(--status-border-width) solid $status-border-color;
         }
     }
 

package/content/Badge/BadgeView.js

@@ -12,14 +12,14 @@ function BadgeView(props) {
     var bem = (0, useBem_1["default"])('BadgeView');
     return (props.isExist && (react_1["default"].createElement("div", { className: bem(bem.block((_a = {},
             _a[props.type] = !!props.type,
-            _a[props.size] = !!props.size,
+            _a.size = props.size,
+            _a.hasClose = props.showClose,
             _a[props.roundingStyle] = !!props.roundingStyle,
             _a['has-counter'] = !!props.counter,
             _a)), props.className), style: props.style },
-        react_1["default"].createElement("div", { className: bem.element('wrapper') },
-            react_1["default"].createElement("div", { className: bem.element('content') },
-                react_1["default"].createElement("span", { className: bem.element('message') }, props.message),
-                props.counter && (react_1["default"].createElement("span", { className: bem.element('counter') }, typeof props.counter === 'object' && (react_1["default"].createElement("span", { className: bem.element('counter-content') }, props.counter.content)))),
-                props.showClose && (react_1["default"].createElement(Icon_1["default"], { onClick: props.onClose, className: bem.element('close'), name: 'badge-close' })))))));
+        react_1["default"].createElement("div", { className: bem.element('content') },
+            react_1["default"].createElement("span", { className: bem.element('message') }, props.message),
+            props.counter && (react_1["default"].createElement("span", { className: bem.element('counter') }, typeof props.counter === 'object' && (react_1["default"].createElement("span", { className: bem.element('counter-content') }, props.counter.content)))),
+            props.showClose && (react_1["default"].createElement(Icon_1["default"], { onClick: props.onClose, className: bem.element('close'), name: 'badge-close' }))))));
 }
 exports["default"] = BadgeView;

package/content/Badge/BadgeView.scss

@@ -1,10 +1,10 @@
 @import "../../scss/variables";
 
-:root { 
-    --counter-background-color: #FFFFFF;
+:root {
+    --counter-background-color: #ffffff;
 }
 
-html[data-theme="dark"] { 
+html[data-theme="dark"] {
     --counter-background-color: #414141;
 }
 
@@ -19,21 +19,20 @@ $counter-background-color: var(--counter-background-color);
 
     font-family: $font-family-nunito;
     color: $white;
-    font-weight: $font-weight-sm;
+    font-size: $font-size-xs;
+    line-height: 16px;
 
     &__content {
+        width: 100%;
+        height: 100%;
         display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        #{$root}__message {
-            margin-right: 4px;
-        }
+        flex-flow: row nowrap;
+        justify-content: center;
     }
 
     &__close {
-        width: 17px;
-        height: 17px;
+        width: 16px;
+        height: 16px;
         cursor: pointer;
     }
 
@@ -64,6 +63,18 @@ $counter-background-color: var(--counter-background-color);
         }
     }
 
+    &_size {
+        &_lg {
+            padding: 4px 8px;
+        }
+        &_md {
+            padding: 3px 8px;
+        }
+        &_sm {
+            padding: 1px 8px;
+        }
+    }
+
     &_squarer {
         border-radius: $radius-small;
     }
@@ -72,16 +83,10 @@ $counter-background-color: var(--counter-background-color);
         border-radius: $radius-xlarge;
     }
 
-    &_large {
-        padding: 4px 8px;
-    }
-
-    &_medium {
-        padding: 2px 8px;
-    }
-
-    &_small {
-        padding: 0 8px;
+    &_hasClose {
+        #{$root}__message {
+            margin-right: 4px;
+        }
     }
 
     &_has-counter {
@@ -90,19 +95,26 @@ $counter-background-color: var(--counter-background-color);
 
         background: $light-gray;
         color: $text-color;
-        padding: 4px 12px;
+        padding: 3px 12px;
+
+        #{$root}__content {
+            height: 100%;
+            padding: 0;
+        }
 
         #{$root}__message {
             margin-right: 8px;
         }
 
         #{$root}__counter {
-            margin-right: 8px;
-            width: 18px;
-            background-color: $white;
             display: flex;
             justify-content: center;
             align-items: center;
+
+            margin-right: 4px;
+            padding: 0 5.4px;
+            background-color: $white;
+
             border-radius: $radius-circle;
             background-color: $counter-background-color;
         }
@@ -115,10 +127,8 @@ $counter-background-color: var(--counter-background-color);
         }
 
         #{$root}__close {
-            svg {
-                path {
-                    stroke: #000;
-                }
+            path {
+                stroke: #000;
             }
         }
     }

package/content/Card/CardView.js

@@ -1,27 +1,47 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
 var react_1 = __importDefault(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var form_1 = require("@steroidsjs/core/ui/form");
+var Avatar_1 = __importDefault(require("@steroidsjs/core/ui/content/Avatar/Avatar"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
+var nav_1 = require("@steroidsjs/core/ui/nav");
 function CardView(props) {
     var bem = (0, hooks_1.useBem)('CardView');
-    return (react_1["default"].createElement("div", { className: bem(bem.block({
-            orientation: props.orientation,
-            shape: props.shape,
-            color: props.color,
-            border: props.borderColor
-        }), props.className), style: props.style },
-        props.header && (react_1["default"].createElement("div", { className: bem.element('header') }, props.header)),
+    var hasContent = props.title || props.buttons || props.links || props.description;
+    return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className), style: props.style },
+        props.header && (react_1["default"].createElement("div", { className: bem.element('header') },
+            react_1["default"].createElement("div", { className: bem.element('header-data') },
+                props.header.avatar && react_1["default"].createElement(Avatar_1["default"], __assign({}, props.header.avatar)),
+                react_1["default"].createElement("div", { className: bem.element('header-text-content') },
+                    react_1["default"].createElement("h3", { className: bem.element('header-head') }, props.header.head),
+                    react_1["default"].createElement("p", { className: bem.element('header-subhead') }, props.header.subhead))),
+            props.header.menu && (react_1["default"].createElement("div", { className: bem.element('header-menu'), role: 'button' },
+                react_1["default"].createElement(Icon_1["default"], { name: 'dots', className: bem.element('header-dots') }))))),
         props.cover && (react_1["default"].createElement("div", { className: bem.element('cover') },
-            react_1["default"].createElement("img", { src: props.cover, alt: 'cover-img' }))),
-        react_1["default"].createElement("div", { className: bem.element('content') },
-            props.title && (react_1["default"].createElement("div", { className: bem.element('title') }, props.title)),
+            react_1["default"].createElement("img", { src: props.cover, alt: 'Card cover img' }))),
+        hasContent && (react_1["default"].createElement("div", { className: bem.element('content') },
+            props.title && (react_1["default"].createElement("h3", { className: bem.element('title') }, props.title)),
             react_1["default"].createElement("div", { className: bem.element('content-inner') },
-                react_1["default"].createElement(react_1["default"].Fragment, null,
-                    props.description && (react_1["default"].createElement("div", { className: bem.element('description') }, props.description)),
-                    props.children))),
-        props.footer && (react_1["default"].createElement("div", { className: bem.element('footer') }, props.footer))));
+                props.description && (react_1["default"].createElement("p", { className: bem.element('description') }, props.description)),
+                props.buttons && (react_1["default"].createElement("div", { className: bem.element('buttons') }, props.buttons.map(function (button, buttonIndex) { return (react_1["default"].createElement(form_1.Button, __assign({}, button, { key: buttonIndex }))); }))),
+                props.links && (react_1["default"].createElement("div", { className: bem.element('links') }, props.links.map(function (link, linkIndex) { return (react_1["default"].createElement(nav_1.Link, __assign({}, link, { key: linkIndex }))); })))))),
+        props.footer && (react_1["default"].createElement("div", { className: bem.element('footer') },
+            react_1["default"].createElement("h3", { className: bem.element('footer-head') }, props.footer.head),
+            react_1["default"].createElement("p", { className: bem.element('footer-subhead') }, props.footer.subhead)))));
 }
 exports["default"] = CardView;

package/content/Card/CardView.scss

@@ -1,154 +1,170 @@
+:root {
+    --card-background-color: #ffffff;
+    --card-footer-background-color: #f9fcff;
+    --card-dots-color: #323232;
+}
+
+html[data-theme="dark"] {
+    --card-background-color: #4e4f57;
+    --card-footer-background-color: #6b6477;
+    --card-dots-color: #ffffff;
+}
+
+$card-background-color: var(--card-background-color);
+$card-footer-background-color: var(--card-footer-background-color);
+$card-dots-color: var(--card-dots-color);
+
+%headTemplate {
+    font-weight: 700;
+    font-size: $font-size-lg;
+    line-height: 24px;
+}
+
+%subheadTemplate {
+    font-weight: 400;
+    font-size: $font-size-xs;
+    line-height: 16px;
+}
+
+%dotTemplate {
+    display: inline-block;
+    width: 4px;
+    height: 4px;
+    background-color: $card-dots-color;
+    border-radius: $radius-circle;
+}
+
 .CardView {
     $root: &;
 
-    background: $white;
-    box-sizing: border-box;
-    height: fit-content;
-    position: relative;
     display: flex;
-    flex-direction: column;
+    flex-flow: column;
     overflow: hidden;
+    height: fit-content;
 
-    &_orientation {
-        &_vertical {
-            font-size: $card-font-size;
-        }
-
-        &_vertical-reverse {
-            font-size: $card-font-size;
-            flex-direction: column-reverse;
-        }
+    border: 1px solid $border-color;
+    border-radius: $radius-large;
+    color: $text-color;
+    background-color: $card-background-color;
 
-        &_horizontal {
-            flex-direction: row;
+    &__header {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
 
-            #{$root}__title{
-                font-size: $card-horizontal-header-font-size;
-            }
+        padding: 16px;
 
-            #{$root}__content{
-                flex-basis: 50%;
-                font-size: $card-horizontal-font-size;
-            }
+        &-data {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            column-gap: 8px;
+        }
 
-            #{$root}__cover{
-                flex-basis: 50%;
-            }
+        &-text-content {
+            display: flex;
+            flex-flow: column nowrap;
         }
-    }
 
-    @each $color, $value in $color-themes {
-        &_color_#{$color} {
-            @include card-theme($root, $value)
+        &-head {
+            @extend %headTemplate;
         }
-    }
 
-    &_border {
-        &_default {
-            border: 1px solid $border-default;
+        &-subhead {
+            @extend %subheadTemplate;
         }
 
-        @each $color, $value in $color-themes {
-            &_#{$color} {
-                @include card-border-theme($root, $value)
-            }
+        &-menu {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
         }
 
-        &_light {
-            #{$root}__content {
-                color: $dark;
+        &-dots {
+            width: 24px;
+            height: 24px;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            rect {
+                fill: $card-dots-color;
             }
         }
     }
 
-    &_shape {
-        &_square {
-            border-radius: unset;
-        }
+    &__cover {
+        width: 100%;
+        height: 227px;
+        overflow: hidden;
+        border-radius: $radius-large;
 
-        &_circle {
-            border-radius: $card-border-radius;
+        img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
         }
     }
 
-    &__content-inner {
-        display: grid;
-        grid-row-gap: 16px;
-    }
-
-    &__children {
-        font-size: $card-children-font-size;
-        line-height: $card-children-line-height;
-        box-sizing: border-box;
-        width: 100%;
-        word-break: break-all;
+    &__content {
+        padding: 8px 16px;
+        padding-bottom: 16px;
     }
 
-    &__header {
-        background: $card-header-background;
-        padding: 20px;
-        border-bottom: 1px solid $border-default;
-        font-weight: bold;
-        font-size: $card-header-font-size;
-        line-height: $card-header-line-height;
-        word-break: break-all;
+    &__content-inner {
+        display: flex;
+        flex-flow: column nowrap;
+        row-gap: 16px;
     }
 
-    &__footer {
-        background: $card-header-background;
-        padding: 20px;
-        border-top: 1px solid $border-default;
-        font-weight: bold;
-        font-size: $card-header-font-size;
-        line-height: $card-header-line-height;
-        word-break: break-all;
+    &__title {
+        @extend %headTemplate;
+        margin-bottom: 8px;
     }
 
-    &__cover {
-        overflow: hidden;
+    &__description {
+        font-size: $font-size-base;
+        line-height: 22px;
     }
 
-    &__title{
+    &__buttons {
         display: flex;
-        align-items: center;
-        font-weight: bold;
-        font-size: $card-title-font-size;
-        line-height: $card-title-line-height;
-        border-bottom: 8px;
-        margin-bottom: 8px;
-    }
+        flex-flow: row wrap;
+        $columnGap: 6px;
+        row-gap: 8px;
+        column-gap: $columnGap;
+
+        button:only-of-type { 
+            width: 100%;
+        }
 
-    &__content{
-        padding: 20px;
+        button:not(:only-of-type) { 
+            width: calc(50% - $columnGap);
+        }
     }
 
-    button {
+    &__links {
         display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-        padding: 10px 20px;
-        position: static;
-        width: 140px;
-        height: 28px;
-        border: none;
-        color: $white;
-        background: $primary;
-        border-radius: $card-button-border-radius;
+        flex-flow: row wrap;
+        column-gap: 16px;
     }
 
-    img {
-        display: block;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
+    &__footer {
+        display: flex;
+        flex-flow: column wrap;
 
-    a {
-        color: $primary;
-        font-size: $card-link-font-size;
-    }
-    p{
-        margin: 0;
+        padding: 16px;
+        background-color: $card-footer-background-color;
+
+        &-head {
+            @extend %headTemplate;
+        }
+
+        &-subhead {
+            @extend %subheadTemplate;
+        }
     }
 }

package/content/Detail/DetailView.scss

@@ -68,6 +68,7 @@ $detail-background-color-label: var(--detail-background-color-label);
         line-height: 18px;
         color: $text-color;
         background-color: $detail-background-color-value;
+        text-align: start;
 
         &_size_md {
             padding: 16px 12px;

package/form/Button/ButtonView.js

@@ -65,6 +65,7 @@ function ButtonView(props) {
         _a.failed = props.isFailed,
         _a.link = props.link,
         _a.block = props.block,
+        _a["tag-".concat(props.tag)] = !!props.tag,
         _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 },

package/form/Button/ButtonView.scss

@@ -10,8 +10,6 @@ $btn-letter-spacing: 0.1em;
     transition-duration: 0.15s;
     transition-timing-function: ease-in-out;
 
-    width: 160px;
-
     display: flex;
     justify-content: center;
     align-items: center;
@@ -61,11 +59,11 @@ $btn-letter-spacing: 0.1em;
         }
     }
 
-    &_link {
-        display: inline;
-        width: auto;
-        #{$root}__label {
-            display: inline;
+
+
+    &_tag { 
+        &-a { 
+            width: auto;
         }
     }
 
@@ -97,6 +95,16 @@ $btn-letter-spacing: 0.1em;
         }
     }
 
+    &_link {
+        display: inline;
+        width: auto;
+        height: auto;
+        #{$root}__label {
+            display: inline;
+            color: $link-color;
+        }
+    }
+
     &__label {
         display: flex;
         flex-direction: row;
@@ -131,7 +139,9 @@ $btn-letter-spacing: 0.1em;
         top: -1px;
         margin-left: 4px;
         border-radius: $radius-small;
-        padding: 2px 5px;
+        font-size: $font-size-xs;
+        line-height: 16px;
+        padding: 3px 5px;
 
         $badge-types: (
             "primary": $primary,