@steroidsjs/bootstrap 3.0.0-beta.7 → 3.0.0-beta.71

package/content/Avatar/AvatarView.scss

@@ -1,21 +1,28 @@
 :root {
     --border-width-small: 1px;
-    --border-width-medium: 1.5px;
+    --border-width-medium: 2px;
     --border-width-large: 2px;
     --border-width: var(--border-width-large);
 
-    --status-border-width-small: 2px;
-    --status-border-width-medium: 3px;
+    --status-border-width-small: 1px;
+    --status-border-width-medium: 2px;
     --status-border-width-large: 4px;
     --status-border-width: var(--status-border-width-large);
 
     --status-size-small: 8px;
-    --status-size-medium: 10px;
-    --status-size-large: 12px;
-    --status-size-x-large: 14px;
+    --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: "";
@@ -24,7 +31,7 @@
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        padding: 55%;
+        padding: 53%;
         border-radius: 100%;
         border: var(--border-width) solid transparent;
         background: $background border-box;
@@ -47,46 +54,35 @@
     }
 
     &_size {
-        &_x-large {
+
+        &_large {
             #{$root}__body {
                 height: 64px;
                 width: 64px;
                 line-height: 64px;
-                font-size: 20px;
-            }
-            --border-width: var(--border-width-large);
-            --status-border-width: var(--status-border-width-large);
-            --status-size: var(--status-size-x-large);
-        }
-
-        &_large {
-            #{$root}__body {
-                height: 46px;
-                width: 46px;
-                line-height: 46px;
                 font-size: $font-size-base;
             }
             --border-width: var(--border-width-large);
-            --status-border-width: var(--status-border-width-medium);
+            --status-border-width: var(--status-border-width-large);
             --status-size: var(--status-size-large);
         }
 
         &_middle {
             #{$root}__body {
-                height: 36px;
-                width: 36px;
-                line-height: 36px;
+                height: 50px;
+                width: 50px;
+                line-height: 46px;
                 font-size: $font-size-sm;
             }
             --border-width: var(--border-width-medium);
-            --status-border-width: var(--status-border-width-small);
+            --status-border-width: var(--status-border-width-medium);
             --status-size: var(--status-size-medium);
         }
 
         &_small {
             #{$root}__body {
-                height: 28px;
-                width: 28px;
+                height: 32px;
+                width: 32px;
                 line-height: 28px;
                 font-size: $font-size-xs;
             }
@@ -121,8 +117,8 @@
             content: "";
             position: absolute;
             box-sizing: content-box;
-            right: -7%;
-            bottom: -7%;
+            right: -6%;
+            bottom: -6%;
             width: var(--status-size);
             height: var(--status-size);
             z-index: 10;
@@ -132,16 +128,12 @@
             border-radius: $radius-circle;
             background-color: $success;
 
-            border: var(--status-border-width) solid $white;
+            border: var(--status-border-width) solid $status-border-color;
         }
     }
 
-    &_has-border-avatar {
-        @include border($gradient-purple);
-    }
-
-    &_has-border-without-avatar {
-        @include border($gradient-red);
+    &_has-border {
+        @include border($gradient-blue);
     }
 
     &__body {
@@ -153,12 +145,13 @@
         vertical-align: middle;
 
         color: $white;
-        background: $gradient-purple border-box;
-        border: 1px solid #fff;
+        background: $primary;
 
         span {
             display: block;
-            transform: translateY(-2px);
+            font-family: $font-family-nunito;
+            font-weight: 800;
+            letter-spacing: 0.1em;
         }
 
         img {

package/content/Badge/BadgeView.d.ts

@@ -0,0 +1,3 @@
+import { IBadgeViewProps } from '@steroidsjs/core/ui/content/Badge/Badge';
+import './BadgeView.scss';
+export default function BadgeView(props: IBadgeViewProps): JSX.Element;

package/content/Badge/BadgeView.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
+require("./BadgeView.scss");
+function BadgeView(props) {
+    var _a;
+    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.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('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: 'cross_4x4' }))))));
+}
+exports["default"] = BadgeView;

package/content/Badge/BadgeView.scss

@@ -0,0 +1,141 @@
+@import "../../scss/variables";
+
+:root {
+    --counter-background-color: #ffffff;
+    --counter-border-color: var(--gray);
+    --counter-cross-color: #000000;
+}
+
+html[data-theme="dark"] {
+    --counter-background-color: rgba(255, 255, 255, 0.1);;
+    --counter-border-color: transparent;
+    --counter-cross-color: #FFFFFF;
+}
+
+$counter-background-color: var(--counter-background-color);
+$counter-border-color: var(--counter-border-color);
+$counter-cross-color: var(--counter-cross-color);
+
+.BadgeView {
+    $root: &;
+
+    display: inline-block;
+    position: relative;
+    width: fit-content;
+
+    font-family: $font-family-nunito;
+    color: $white;
+    font-size: $font-size-xs;
+    line-height: 16px;
+
+    &__content {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: center;
+    }
+
+    &__close {
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+    }
+
+    $badge-types: (
+        "primary": $primary,
+        "secondary": $secondary,
+        "success": $success,
+        "danger": $danger,
+        "warning": $warning,
+        "info": $info,
+    );
+
+    @each $type, $color in $badge-types {
+        &_#{$type} {
+            background-color: $color;
+
+            @if ($type == "warning" or $type == "info") {
+                color: $static-text-color;
+
+                #{$root}__close {
+                    svg {
+                        path {
+                            stroke: #000;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &_size {
+        &_lg {
+            padding: 4px 8px;
+        }
+        &_md {
+            padding: 3px 8px;
+        }
+        &_sm {
+            padding: 1px 8px;
+        }
+    }
+
+    &_squarer {
+        border-radius: $radius-small;
+    }
+
+    &_rounder {
+        border-radius: $radius-xlarge;
+    }
+
+    &_hasClose {
+        #{$root}__message {
+            margin-right: 4px;
+        }
+    }
+
+    &_has-counter {
+        border: 1px solid $counter-border-color;
+        border-radius: 100px;
+
+        background: $light-gray;
+        color: $text-color;
+        padding: 3px 12px;
+
+        #{$root}__content {
+            height: 100%;
+            padding: 0;
+        }
+
+        #{$root}__message {
+            margin-right: 8px;
+        }
+
+        #{$root}__counter {
+            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;
+        }
+
+        #{$root}__counter-content {
+            font-weight: $font-weight-sm;
+            font-size: $font-size-xs;
+            line-height: 16px;
+            color: $text-color;
+        }
+
+        #{$root}__close {
+            path {
+                stroke: $counter-cross-color;
+            }
+        }
+    }
+}

package/content/Calendar/CalendarView.js

@@ -46,7 +46,7 @@ var CaptionElement_1 = __importDefault(require("./CaptionElement"));
 function CalendarView(props) {
     var bem = (0, hooks_1.useBem)('CalendarView');
     var month = props.month, toYear = props.toYear, fromYear = props.fromYear, showFooter = props.showFooter, onDaySelect = props.onDaySelect, selectedDates = props.selectedDates, onMonthSelect = props.onMonthSelect, numberOfMonths = props.numberOfMonths, toggleCaptionPanel = props.toggleCaptionPanel, isCaptionPanelVisible = props.isCaptionPanelVisible;
-    var isRange = !!selectedDates[1];
+    var isRange = !!selectedDates[0] && !!selectedDates[1];
     var _a = (0, react_1.useMemo)(function () {
         var from = selectedDates[0];
         var to = selectedDates[1];