@steroidsjs/bootstrap 3.0.0-beta.10 → 3.0.0-beta.100

package/content/Calendar/CalendarView.scss

@@ -1,198 +1,293 @@
+@use "../../scss/variables";
+@use '../../scss/mixins';
+
+:root {
+    --day-background-color-hover: rgba(0, 0, 0, 0.1);
+    --calendar-border-color: var(--light-gray);
+}
+
+html[data-theme="dark"] {
+    --day-background-color-hover: rgba(255, 255, 255, 0.1);
+    --calendar-border-color: var(--gray);
+}
+
+$day-background-color-hover: var(--day-background-color-hover);
+$calendar-border-color: var(--calendar-border-color);
+
 .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;
-
-    padding: 0;
-    border-radius: $calendar-day-border-radius;
-
-    vertical-align: middle;
-    text-align: center;
-    cursor: pointer;
-
-    transition-property: background-color, box-shadow, color;
-    transition-duration: .1s;
-
-    &::before {
-      content: '';
-      height: 30px;
-      left: 0;
-      position: absolute;
-      right: 0;
-      top: 50%;
-      transform: translate(-5px, -50%);
-      width: 40px;
-      z-index: 1;
-    }
-
-    &--outside {
-      color: $calendar-secondary-color;
-    }
-
-    &--today {
-      #{$root}__day {
-        box-shadow: $calendar-today-shadow;
-      }
-    }
-
-    &--disabled {
-      pointer-events: none;
-      opacity: .5;
-    }
-  }
-
-  // Footer
-
-  .DayPicker-Footer {
-    height: 50px;
-
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    justify-content: center;
-    padding: 0 10px;
-
-    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 {
+    $root: &;
+
+    background-color: variables.$element-background-color;
+    border-radius: variables.$radius-large;
+    border: 4px solid $calendar-border-color;
     position: relative;
-    z-index: 1;
-    width: 30px;
-    height: 30px;
-    line-height: 30px;
-    border-radius: $calendar-day-border-radius;
-  }
+    color: variables.$text-color;
+    font-weight: variables.$font-weight-md;
+    user-select: none;
+    padding: 12px;
 
-  &_ranged {
+    .DayPicker-wrapper {
+        padding-bottom: 0;
+    }
 
-    .DayPicker-Day {
-      &--start {
-        color: $white;
+    .DayPicker-Months {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        row-gap: 12px;
+    }
+
+    .DayPicker-Month {
+        margin: 0;
+    }
+
+    // Body
+    .DayPicker-Weekdays {
+        margin-top: 0;
+    }
 
-        #{$root}__day {
-          background-color: $calendar-primary-color;
-          box-shadow: $calendar-selected-shadow;
+    .DayPicker-WeekdaysRow {
+        width: 100%;
+        display: inline-flex;
+        column-gap: 16px;
+
+        @media (max-width: 392px) {
+            column-gap: 10px;
+        }
+        @media (max-width: 370px) {
+            column-gap: 6px;
+        }
+        @media (max-width: 334px) {
+            column-gap: 4px;
+        }
+    }
+
+    .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: variables.$font-size-base;
+        line-height: variables.$line-height-base;
+        font-weight: variables.$font-weight-lg;
+        text-transform: capitalize;
+    }
+
+    .DayPicker-Weekday abbr[title] {
+        border-bottom: none;
+        text-decoration: none;
+    }
+
+    .DayPicker-Body {
+        display: flex;
+        flex-flow: column nowrap;
+        row-gap: 12px;
+    }
+
+    .DayPicker-Week {
+        display: flex;
+        width: 100%;
+        column-gap: 16px;
+
+        @media (max-width: 392px) {
+            column-gap: 10px;
+        }
+        @media (max-width: 370px) {
+            column-gap: 6px;
+        }
+        @media (max-width: 334px) {
+            column-gap: 4px;
         }
 
+        &--disabled {
+            pointer-events: none;
+            opacity: 0.5;
+        }
+    }
+
+    .DayPicker-Day {
+        position: relative;
+        flex-shrink: 0;
+        padding: 0;
+        border-radius: variables.$radius-large;
+
+        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: variables.$element-placeholder-color;
+
         }
-      }
 
+        &--today {
+            #{$root}__day {
+                border: 1px solid variables.$primary;
+                color: variables.$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 mixins.calendar-button();
+    }
+
+    // Days selection
+    // Selected day
+    .DayPicker-Day--selected:not(.DayPicker-Day--inRange) {
+        color: variables.$white;
+        background-color: variables.$primary;
+    }
+
+    .DayPicker-Day--selected.DayPicker-Day--today .CalendarView__day {
+        color: variables.$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: variables.$radius-large;
+        display: flex;
+        justify-content: center;
+        align-items: center;
     }
 
-  }
+    &_ranged {
+        .DayPicker-Day {
+            &--start {
+                color: variables.$white;
+
+                #{$root}__day {
+                    background-color: variables.$primary;
+                }
+
+                &::before {
+                    width: 50px;
+                    height: 42px;
+                    background-color: variables.$primary-light;
+                    border-radius: 16px 0px 0px 16px;
+                }
+            }
+
+            &--end {
+                color: #fff;
+
+                #{$root}__day {
+                    background-color: variables.$calendar-primary-color;
+                }
+
+                &::before {
+                    width: 46px;
+                    height: 42px;
+                    background-color: variables.$primary-light;
+                    border-radius: 0px 16px 16px 0px;
+                }
+            }
+
+            &--inRange {
+                &::before {
+                    background-color: variables.$primary-light;
+                    width: 50px;
+                    height: 42px;
+                }
+            }
+
+            //Today in range
+            &--inRange.DayPicker-Day--selected.DayPicker-Day--today .CalendarView__day {
+                color: variables.$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: variables.$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') }, __('Год')),