@steroidsjs/bootstrap 3.0.0-beta.6 → 3.0.0-beta.61

package/content/Badge/BadgeView.scss

@@ -0,0 +1,135 @@
+@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: &;
+
+    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: $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 #e9e9e9;
+        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: #000;
+            }
+        }
+    }
+}

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];

package/content/Calendar/CalendarView.scss

@@ -1,198 +1,277 @@
-.CalendarView {
-  $root: &;
-
-  position: relative;
-  color: $calendar-text-color;
-  font-weight: $calendar-font-weight;
-  user-select: none;
-
-  .DayPicker-wrapper {
-    padding-bottom: 0;
-  }
-  .DayPicker-Months {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-  .DayPicker-Month {
-    display: table;
-    border-collapse: separate;
-    border-spacing: 10px;
-    margin: 0;
-  }
-
-  // Body
-
-  .DayPicker-Weekdays {
-    display: table-header-group;
-    margin-top: 1em;
-  }
-  .DayPicker-WeekdaysRow {
-    display: table-row;
-  }
-  .DayPicker-Weekday {
-    display: table-cell;
-    width: 30px;
-    height: 30px;
-    padding: 0;
-    color: inherit;
-    text-align: center;
-    font-size: 0.875em;
-  }
-  .DayPicker-Weekday abbr[title] {
-    border-bottom: none;
-    text-decoration: none;
-  }
-
-  .DayPicker-Body {
-    display: table-row-group;
-  }
-  .DayPicker-Week {
-    display: table-row;
-
-    &--disabled {
-      pointer-events: none;
-      opacity: .5;
-    }
-  }
-  .DayPicker-Day {
-    position: relative;
-    display: table-cell;
+:root {
+    --day-background-color-hover: rgba(0, 0, 0, 0.1);
+    --calendar-border-color: #f1f5f7;
+}
 
-    padding: 0;
-    border-radius: $calendar-day-border-radius;
+html[data-theme="dark"] {
+    --day-background-color-hover: rgba(255, 255, 255, 0.1);
+    --calendar-border-color: #5b5c6b;
+}
 
-    vertical-align: middle;
-    text-align: center;
+$day-background-color-hover: var(--day-background-color-hover);
+$calendar-border-color: var(--calendar-border-color);
+
+@mixin calendar-button () {
+    padding: 5px 12.5px;
+    border-radius: $radius-small;
+    border: 1px solid $gray;
+    background-color: transparent;
+    background-image: none;
+    box-shadow: none;
     cursor: pointer;
+    color: $text-color;
+    font-size: $font-size-sm;
+    line-height: $line-height-lg;
+}
 
-    transition-property: background-color, box-shadow, color;
-    transition-duration: .1s;
+.CalendarView {
+    $root: &;
+    position: relative;
+    color: $text-color;
+    font-weight: $font-weight-md;
+    user-select: none;
+    padding: 12px;
 
-    &::before {
-      content: '';
-      height: 30px;
-      left: 0;
-      position: absolute;
-      right: 0;
-      top: 50%;
-      transform: translate(-5px, -50%);
-      width: 40px;
-      z-index: 1;
+    .DayPicker-wrapper {
+        padding-bottom: 0;
     }
 
-    &--outside {
-      color: $calendar-secondary-color;
+    .DayPicker-Months {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        row-gap: 12px;
     }
 
-    &--today {
-      #{$root}__day {
-        box-shadow: $calendar-today-shadow;
-      }
+    .DayPicker-Month {
+        margin: 0;
     }
 
-    &--disabled {
-      pointer-events: none;
-      opacity: .5;
+    // Body
+    .DayPicker-Weekdays {
+        margin-top: 0;
     }
-  }
 
-  // Footer
+    .DayPicker-WeekdaysRow {
+        display: inline-flex;
+        column-gap: 16px;
+    }
 
-  .DayPicker-Footer {
-    height: 50px;
+    .DayPicker-Weekday {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        width: 34px;
+        height: 34px;
+        padding: 0;
+        color: inherit;
+        text-align: center;
+        vertical-align: middle;
+        font-size: $font-size-base;
+        line-height: $line-height-base;
+        font-weight: $font-weight-lg;
+        text-transform: capitalize;
+    }
 
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    justify-content: center;
-    padding: 0 10px;
+    .DayPicker-Weekday abbr[title] {
+        border-bottom: none;
+        text-decoration: none;
+    }
 
-    border-top: 1px solid $calendar-secondary-color;
-  }
-  .DayPicker-TodayButton {
-    border: none;
-    background-color: transparent;
-    background-image: none;
-    box-shadow: none;
-    font-size: 0.875em;
-    cursor: pointer;
-    color: $calendar-primary-color;
-    font-weight: $calendar-font-weight;
-  }
-
-  // Days selection
-
-  // Selected day
-  .DayPicker-Day--selected:not(.DayPicker-Day--inRange) {
-    color: $calendar-selected-text-color;
-    border-radius: $calendar-day-border-radius;
-    background-color: $calendar-primary-color;
-    box-shadow: $calendar-selected-shadow;
-  }
-
-  // Hover
-  .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
-    background-color: $calendar-secondary-light-color !important;
-    box-shadow: $calendar-hover-shadow;
-  }
-
-  &__day {
-    position: relative;
-    z-index: 1;
-    width: 30px;
-    height: 30px;
-    line-height: 30px;
-    border-radius: $calendar-day-border-radius;
-  }
+    .DayPicker-Body {
+        display: flex;
+        flex-flow: column nowrap;
+        row-gap: 12px;
+    }
+
+    .DayPicker-Week {
+        display: flex;
+        width: 100%;
+        column-gap: 16px;
 
-  &_ranged {
+        &--disabled {
+            pointer-events: none;
+            opacity: 0.5;
+        }
+    }
 
     .DayPicker-Day {
-      &--start {
-        color: $white;
+        position: relative;
+        padding: 0;
+        border-radius: $radius-large;
 
-        #{$root}__day {
-          background-color: $calendar-primary-color;
-          box-shadow: $calendar-selected-shadow;
-        }
+        vertical-align: middle;
+        text-align: center;
+        cursor: pointer;
+
+        transition-property: background-color, box-shadow, color;
+        transition-duration: 0.1s;
 
         &::before {
-          background-color: $calendar-primary-light-color;
-          width: 10px;
-          transform: translate(25px, -50%);
+            content: "";
+            height: 30px;
+            left: 0;
+            position: absolute;
+            right: 0;
+            top: 50%;
+            transform: translate(-5px, -50%);
+            width: 40px;
+            z-index: 1;
         }
-      }
 
-      &--end {
-        color: #fff;
+        &::after {
+            position: absolute;
+            content: "";
+            display: block;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border-width: 4px;
+            border-style: solid;
+            border-radius: 16px;
+            border-color: $day-background-color-hover;
+            transform: translate(-4px, -4px);
+            opacity: 0;
+            transition: opacity 150ms ease-in-out;
+            z-index: 9;
+        }
 
-        #{$root}__day {
-          background-color: $calendar-primary-color;
-          box-shadow: $calendar-selected-shadow;
+        &:focus { 
+            outline: none;
+        }
+        
+        &:focus:not(:active)::after {
+            opacity: 1;
         }
 
-        &::before {
-          background-color: $calendar-primary-light-color;
-          width: 10px;
+        &--outside {
+            color: $placeholder-color;
+
         }
-      }
 
+        &--today {
+            #{$root}__day {
+                border: 1px solid $primary;
+                color: $primary;
+            }
+        }
 
-      &--inRange {
-        &::before {
-          background-color: $calendar-primary-light-color;
+        &--disabled {
+            pointer-events: none;
+            opacity: 0.5;
         }
-      }
+    }
 
-      &--outRange {
-        pointer-events: none;
-        &::before {
-          background-color: $calendar-primary-light-color;
+    // Footer
+    .DayPicker-Footer {
+        margin-top: 8px;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        justify-content: flex-start;
+    }
+
+    .DayPicker-TodayButton {
+        @include calendar-button();
+    }
+
+    // Days selection
+    // Selected day
+    .DayPicker-Day--selected:not(.DayPicker-Day--inRange) {
+        color: $white;
+        background-color: $primary;
+    }
+
+    .DayPicker-Day--selected.DayPicker-Day--today .CalendarView__day {
+        color: $white;
+    }
+
+    // Hover
+    .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):not(
+            .DayPicker-Day--today
+        ):hover {
+        background-color: $day-background-color-hover;
+    }
+
+    .DayPicker-Day--today:hover {
+        background-color: transparent;
+
+        .CalendarView__day {
+            transition: background-color 150ms ease-in-out;
         }
-      }
+    }
 
+    &__day {
+        position: relative;
+        z-index: 1;
+        width: 34px;
+        height: 34px;
+        line-height: 30px;
+        border-radius: $radius-large;
+        display: flex;
+        justify-content: center;
+        align-items: center;
     }
 
-  }
+    &_ranged {
+        .DayPicker-Day {
+            &--start {
+                color: $white;
+
+                #{$root}__day {
+                    background-color: $primary;
+                }
+
+                &::before {
+                    width: 50px;
+                    height: 42px;
+                    background-color: $primary-light;
+                    border-radius: 16px 0px 0px 16px;
+                }
+            }
+
+            &--end {
+                color: #fff;
+
+                #{$root}__day {
+                    background-color: $calendar-primary-color;
+                }
+
+                &::before {
+                    width: 46px;
+                    height: 42px;
+                    background-color: $primary-light;
+                    border-radius: 0px 16px 16px 0px;
+                }
+            }
+
+            &--inRange {
+                &::before {
+                    background-color: $primary-light;
+                    width: 50px;
+                    height: 42px;
+                }
+            }
+
+            //Today in range
+            &--inRange.DayPicker-Day--selected.DayPicker-Day--today .CalendarView__day {
+                color: $primary;
+            }
+
+            &--inRange:hover .CalendarView__day {
+                transition: background-color 150ms ease-in-out;
+                background-color: $day-background-color-hover;
+            }
+
+            &--outRange {
+                pointer-events: none;
+                &::before {
+                    background-color: $calendar-primary-light-color;
+                }
+            }
+        }
+    }
 }

package/content/Calendar/CaptionElement.js

@@ -57,16 +57,28 @@ function CaptionElement(props) {
         }
         return result;
     }, [fromYear, toYear]);
+    var icons = (0, react_1.useMemo)(function () { return [
+        {
+            name: 'double_arrow_left',
+            onClick: function () { return handleYearChange(currentYear - 1); }
+        },
+        {
+            name: 'arrow_left_24x24',
+            externalClass: 'one-arrow',
+            onClick: function () { return handleMonthChange(currentMonth - 1); }
+        },
+        {
+            name: 'arrow_right_24x24',
+            externalClass: 'one-arrow',
+            onClick: function () { return handleMonthChange(currentMonth + 1); }
+        },
+        {
+            name: 'double_arrow_right',
+            onClick: function () { return handleYearChange(currentYear + 1); }
+        },
+    ]; }, [currentYear, handleYearChange, currentMonth, handleMonthChange]);
     return (React.createElement("div", { className: bem(bem.block()) },
         React.createElement("div", { className: bem.element('container') },
-            React.createElement(Icon_1["default"], { className: bem.element('button'), onClick: function (e) {
-                    e.preventDefault();
-                    handleYearChange(currentYear - 1);
-                }, name: 'angle-double-left' }),
-            React.createElement(Icon_1["default"], { className: bem.element('button', 'one-arrow'), onClick: function (e) {
-                    e.preventDefault();
-                    handleMonthChange(currentMonth - 1);
-                }, name: 'angle-left' }),
             React.createElement("div", { className: bem.element('content-container'), onKeyPress: function (e) {
                     e.preventDefault();
                     toggleCaptionPanel();
@@ -76,14 +88,10 @@ function CaptionElement(props) {
                 }, role: 'button', tabIndex: 0 },
                 React.createElement("span", { className: bem.element('selected-month') }, months.find(function (month) { return month.id === currentMonth; }).label),
                 React.createElement("span", { className: bem.element('selected-year') }, years.find(function (year) { return year === currentYear; }))),
-            React.createElement(Icon_1["default"], { className: bem.element('button', 'one-arrow'), onClick: function (e) {
-                    e.preventDefault();
-                    handleMonthChange(currentMonth + 1);
-                }, name: 'angle-right' }),
-            React.createElement(Icon_1["default"], { className: bem.element('button'), onClick: function (e) {
+            React.createElement("div", { className: bem.element('container-icons') }, icons.map(function (icon, iconIndex) { return (React.createElement(Icon_1["default"], { key: iconIndex, name: icon.name, onClick: function (e) {
                     e.preventDefault();
-                    handleYearChange(currentYear + 1);
-                }, name: 'angle-double-right' })),
+                    icon.onClick();
+                }, className: bem.element('button', icon.externalClass) })); }))),
         isCaptionPanelVisible && (React.createElement("div", { className: bem.element('panel', { 'full-height': !props.showCalendarFooter }) },
             React.createElement("div", { className: bem.element('panel-header', 'months') }, __('Месяц')),
             React.createElement("div", { className: bem.element('panel-header', 'years') }, __('Год')),