@steroidsjs/bootstrap 3.0.29 → 3.0.32

package/form/DateRangeField/views/RangeButtons/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var RangeButtons_1 = __importDefault(require("./RangeButtons"));
+exports["default"] = RangeButtons_1["default"];

package/form/DateRangeField/views/RangeButtons/utils.d.ts

@@ -0,0 +1,14 @@
+import { ILocaleComponent } from '@steroidsjs/core/components/LocaleComponent';
+export declare const getEndOfDay: (date: ReturnType<ILocaleComponent['dayjs']>) => import("dayjs").Dayjs;
+export declare const getCurrentWeek: (locale: ILocaleComponent) => {
+    start: import("dayjs").Dayjs;
+    finish: import("dayjs").Dayjs;
+};
+export declare const getCurrentMonth: (locale: ILocaleComponent) => {
+    start: import("dayjs").Dayjs;
+    finish: import("dayjs").Dayjs;
+};
+export declare const getCurrentYear: (locale: ILocaleComponent) => {
+    start: import("dayjs").Dayjs;
+    finish: import("dayjs").Dayjs;
+};

package/form/DateRangeField/views/RangeButtons/utils.js

@@ -0,0 +1,36 @@
+"use strict";
+exports.__esModule = true;
+exports.getCurrentYear = exports.getCurrentMonth = exports.getCurrentWeek = exports.getEndOfDay = void 0;
+var getEndOfDay = function (date) { return date.hour(23).minute(59).second(59); };
+exports.getEndOfDay = getEndOfDay;
+var getCurrentWeek = function (locale) {
+    var today = locale.dayjs(new Date().toDateString());
+    var dayOfWeek = today.day();
+    var startDate = today.subtract(dayOfWeek === 0 ? 6 : dayOfWeek - 1, 'day');
+    var finishDate = startDate.add(6, 'day');
+    return {
+        start: startDate,
+        finish: (0, exports.getEndOfDay)(finishDate)
+    };
+};
+exports.getCurrentWeek = getCurrentWeek;
+var getCurrentMonth = function (locale) {
+    var today = locale.dayjs(new Date().toDateString());
+    var startDate = today.startOf('month');
+    var finishDate = today.endOf('month');
+    return {
+        start: startDate,
+        finish: (0, exports.getEndOfDay)(finishDate)
+    };
+};
+exports.getCurrentMonth = getCurrentMonth;
+var getCurrentYear = function (locale) {
+    var today = locale.dayjs(new Date().toDateString());
+    var startDate = today.startOf('year');
+    var finishDate = today.endOf('year');
+    return {
+        start: startDate,
+        finish: (0, exports.getEndOfDay)(finishDate)
+    };
+};
+exports.getCurrentYear = getCurrentYear;

package/form/DateTimeField/DateTimeFieldView.js

@@ -57,7 +57,7 @@ function DateTimeFieldView(props) {
                 'is-invalid': !!props.errors
             }), props.className), style: props.style },
             React.createElement("div", { className: bem.element('body') },
-                React.createElement("input", __assign({}, props.inputProps, { placeholder: props.placeholder
+                React.createElement("input", __assign({}, props.inputProps, { id: props.id, placeholder: props.placeholder
                         ? props.placeholder
                         : props.inputProps.placeholder, className: bem(bem.element('input', {
                         size: props.size

package/form/DateTimeRangeField/DateTimeRangeFieldView.js

@@ -44,13 +44,22 @@ var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var DropDown_1 = __importDefault(require("@steroidsjs/core/ui/content/DropDown"));
 var Calendar_1 = __importDefault(require("@steroidsjs/core/ui/content/Calendar"));
 var TimePanelView_1 = __importDefault(require("../TimeField/TimePanelView"));
+var RangeButtons_1 = __importDefault(require("../DateRangeField/views/RangeButtons"));
 function DateTimeRangeFieldView(props) {
     var bem = (0, hooks_1.useBem)('DateTimeRangeFieldView');
     var hasValue = props.inputPropsFrom.value || props.inputPropsTo.value;
-    var renderCalendar = (0, react_1.useCallback)(function () { return (React.createElement("div", { className: bem.element('panel-container') },
-        React.createElement(Calendar_1["default"], __assign({}, props.calendarProps, { className: bem.element('calendar') })),
+    var calendarComponent = React.useMemo(function () { return (React.createElement("div", { className: bem.element('panel-container') },
+        React.createElement(Calendar_1["default"], __assign({}, props.calendarProps, { className: bem.element('calendar'), showTodayButton: !props.withRangeButtons })),
         React.createElement("div", { className: bem.element('separator') }),
-        React.createElement(TimePanelView_1["default"], __assign({}, props.timePanelViewProps, { className: bem.element('time-panel') })))); }, [bem, props.calendarProps, props.timePanelViewProps]);
+        React.createElement(TimePanelView_1["default"], __assign({}, props.timePanelViewProps, { className: bem.element('time-panel') })))); }, [bem, props.calendarProps, props.timePanelViewProps, props.withRangeButtons]);
+    var renderCalendar = (0, react_1.useCallback)(function () { return (props.withRangeButtons ? (React.createElement("div", { className: bem.element('calendar-wrapper', {
+            position: props.rangeButtonsPosition
+        }) },
+        React.createElement("div", { className: bem.element('additional-buttons') },
+            React.createElement(RangeButtons_1["default"], { config: props.withRangeButtons, changeTo: props.inputPropsTo.onChange, changeFrom: props.inputPropsFrom.onChange, position: props.rangeButtonsPosition, format: props.displayFormat })),
+        React.createElement("div", { className: bem.element('calendar') }, calendarComponent)))
+        : calendarComponent); }, [bem, calendarComponent, props.inputPropsFrom.onChange, props.inputPropsTo.onChange,
+        props.rangeButtonsPosition, props.displayFormat, props.withRangeButtons]);
     return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose, hasArrow: false, className: bem.element('dropdown') },
         React.createElement("div", { className: bem(bem.block({
                 disabled: props.disabled,
@@ -58,7 +67,7 @@ function DateTimeRangeFieldView(props) {
                 'is-invalid': !!props.errors
             }), props.className), style: props.style },
             React.createElement("div", { className: bem.element('body') },
-                React.createElement("input", __assign({}, props.inputPropsFrom, { className: bem(bem.element('input', {
+                React.createElement("input", __assign({}, props.inputPropsFrom, { id: props.id, className: bem(bem.element('input', {
                         size: props.size
                     })), onInput: function (e) { return props.inputPropsFrom.onChange(e.currentTarget.value); } })),
                 React.createElement("input", __assign({}, props.inputPropsTo, { className: bem(bem.element('input', {

package/form/DateTimeRangeField/DateTimeRangeFieldView.scss

@@ -2,6 +2,26 @@
 @use "../../scss/variables";
 @use '../../scss/mixins';
 
+$positions: (
+  top: (
+    direction: column,
+    responsive: top
+  ),
+  bottom: (
+    direction: column-reverse,
+    responsive: bottom
+  ),
+  left: (
+    direction: row,
+    responsive: left
+  ),
+  right: (
+    direction: row-reverse,
+    responsive: right
+  )
+);
+
+$all-directions: top, bottom, left, right;
 
 .DateTimeRangeFieldView {
     $root: &;
@@ -44,4 +64,38 @@
         @include mixins.calendar-border();
         background-color: variables.$element-background-color;
     }
+    
+    &__calendar-wrapper {
+        display: flex;
+        width: min-content;
+
+        &_position {
+            @each $pos, $config in $positions {
+                &_#{$pos} {
+                    flex-direction: map-get($config, direction);
+                    align-items: center;
+                
+                    @media (max-width: variables.$tablet-width) {
+                        flex-direction: map-get($config, responsive);
+                        align-items: center;
+                    }
+                }
+            }
+            @each $dir1 in $all-directions {
+                @each $dir2 in $all-directions {
+                    @if $dir1 != $dir2 {
+                    &_#{$dir1}-#{$dir2} {
+                        flex-direction: map-get(map-get($positions, $dir1), direction);
+                        align-items: center;
+                
+                        @media (max-width: variables.$tablet-width) {
+                            flex-direction: map-get(map-get($positions, $dir2), direction);
+                            align-items: center;
+                        }
+                    }
+                    }
+                }
+            }
+        }
+    }
 }

package/form/DropDownField/DropDownFieldView.js

@@ -73,7 +73,8 @@ function DropDownFieldView(props) {
             renderPlaceholder(),
             React.createElement("span", { className: bem.element('selected-items') }, props.showEllipses
                 ? (0, utils_1.getSelectedItemsLabel)(props.selectedItems)
-                : (0, utils_1.getSelectedItemsCount)(props.selectedItems))),
+                : (0, utils_1.getSelectedItemsCount)(props.selectedItems)),
+            React.createElement("input", { className: bem.element('input'), ref: props.inputRef })),
         props.showReset && props.selectedIds.length > 0 && (React.createElement(Icon_1["default"], { name: "cross_8x8", className: bem.element('icon-close'), tabIndex: -1, onClick: props.onReset, "aria-label": __('Сбросить') })),
         React.createElement(Icon_1["default"], { name: 'arrow_down_24x24', className: bem.element('icon-chevron'), tabIndex: -1, onClick: props.onOpen }),
         props.isOpened && (React.createElement("div", { className: bem.element('drop-down') },
@@ -81,7 +82,7 @@ function DropDownFieldView(props) {
                     size: props.size
                 }) },
                 React.createElement(Icon_1["default"], { name: 'search', className: bem.element('search-icon') }),
-                React.createElement("input", __assign({}, props.searchInputProps, { ref: props.forwardedInputRef, onChange: function (e) { return props.searchInputProps.onChange(e.target.value); }, className: bem(bem.element('search-input'), props.searchInputProps.className) })))),
+                React.createElement("input", __assign({}, props.searchInputProps, { ref: props.autoCompleteInputForwardedRef, onChange: function (e) { return props.searchInputProps.onChange(e.target.value); }, className: bem(bem.element('search-input'), props.searchInputProps.className) })))),
             React.createElement("div", { className: bem.element('drop-down-list') },
                 props.multiple
                     && props.itemToSelectAll

package/form/DropDownField/DropDownFieldView.scss

@@ -435,4 +435,16 @@ $drop-down-color-themes: map.merge(
         border-color: transparent;
         pointer-events: none;
     }
+
+    &__input {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        opacity: 0;
+        cursor: default;
+        pointer-events: none;
+        user-select: none;
+    }
 }

package/form/InputField/InputFieldView.js

@@ -58,9 +58,9 @@ function InputFieldView(props) {
             hasTextAddonBefore: !!props.textBefore,
             hasTextAddonAfter: !!props.textAfter
         }), props.className), style: props.style },
-        props.addonBefore && (React.createElement("span", { className: bem.element('addon-before') }, props.addonBefore)),
         props.textBefore && (React.createElement("span", { className: bem.element('text-before') }, props.textBefore)),
         React.createElement("div", { className: bem.element('input-wrapper') },
+            props.addonBefore && (React.createElement("span", { className: bem.element('addon-before') }, props.addonBefore)),
             props.leadIcon && (0, renderIcon_1["default"])(props.leadIcon, {
                 className: bem.element('lead-icon'),
                 tabIndex: -1
@@ -72,8 +72,8 @@ function InputFieldView(props) {
                 : (React.createElement("input", __assign({ className: bem(bem.element('input', {
                         size: props.size
                     })) }, props.inputProps, { type: props.inputProps.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required, id: props.id, ref: props.inputRef }))),
-            !props.disabled && props.showClear && !props.maskProps && !!props.inputProps.value && (React.createElement(Icon_1["default"], { name: 'cross_8x8', className: bem.element('icon-clear'), tabIndex: -1, onClick: props.onClear }))),
-        props.textAfter && (React.createElement("span", { className: bem.element('text-after') }, props.textAfter)),
-        props.addonAfter && (React.createElement("span", { className: bem.element('addon-after') }, props.addonAfter))));
+            !props.disabled && props.showClear && !props.maskProps && !!props.inputProps.value && (React.createElement(Icon_1["default"], { name: 'cross_8x8', className: bem.element('icon-clear'), tabIndex: -1, onClick: props.onClear })),
+            props.addonAfter && (React.createElement("span", { className: bem.element('addon-after') }, props.addonAfter))),
+        props.textAfter && (React.createElement("span", { className: bem.element('text-after') }, props.textAfter))));
 }
 exports["default"] = InputFieldView;

package/form/InputField/InputFieldView.scss

@@ -24,16 +24,74 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
     flex-flow: row nowrap;
     align-items: center;
 
-    height: 34px;
+    height: var(--input-height);
+
 
     font-family: variables.$font-family-nunito;
     font-weight: variables.$font-weight-sm;
     line-height: 24px;
 
+    color: variables.$text-color;
+    border-radius: var(--border-radius);
+
+
+    --input-height: #{variables.$input-height-sm};
+
+    --border-radius: #{variables.$radius-small};
+
+    --colored-border-radius: 12px;
+
+    --addon-padding: 5px 8px;
+
+    --input-font-size: #{variables.$font-size-sm};
+ 
+    //Sizes
+    &_size {
+        &_lg {
+            --input-height: #{variables.$input-height-lg};
+            --border-radius: #{variables.$radius-large};
+            --colored-border-radius: 16px;
+            --addon-padding: 16px;
+            --input-font-size: #{variables.$font-size-lg};
+            --input-border-radius: #{variables.$radius-large};
+        }
+
+        &_md {
+            --input-height: #{variables.$input-height-md};
+            --border-radius: #{variables.$radius-large};
+            --colored-border-radius: 16px;
+            --addon-padding: 11px 12px;
+            --input-font-size: #{variables.$font-size-base};
+            --input-border-radius: #{variables.$radius-large};
+        }
+    }
+
     &__input-wrapper {
+        display: flex;
+
         position: relative;
         width: 100%;
         height: 100%;
+
+        &::before {
+            content: '';
+            position: absolute;
+            z-index: 2;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+
+            pointer-events: none;
+            transform: translate(calc(var(--input-wrapper-border-width) * -1), calc(var(--input-wrapper-border-width) * -1));
+            opacity: var(--input-wrapper-border-opacity);
+            transition: opacity 150ms ease-in-out;
+
+            border-radius: var(--colored-border-radius);
+            border-width: var(--input-wrapper-border-width);
+            border-color: var(--input-wrapper-border-color);
+            border-style: solid;
+        }
     }
 
     &__input {
@@ -47,170 +105,34 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
         outline: none;
 
         background-color: variables.$element-field-background-color;
-        border: 1px solid variables.$element-border-color;
-        border-radius: inherit;
+        border-width: var(--input-border-width);
+        border-color: var(--input-border-color);
+        border-top-left-radius: var(--input-left-border-radius);
+        border-bottom-left-radius: var(--input-left-border-radius);
+        border-top-right-radius: var(--input-right-border-radius);
+        border-bottom-right-radius: var(--input-right-border-radius);
+        border-style: solid;
 
         white-space: nowrap; /* Запретить перенос текста */
         overflow: hidden; /* Скрыть содержимое, выходящее за границы ячейки */
         text-overflow: ellipsis; /* Добавить многоточие, если текст обрезается */
 
+        font-size: var(--input-font-size);
+
         &::placeholder {
             color: variables.$element-placeholder-color;
             font-size: inherit;
         }
 
-        &:not(:disabled):focus {
-            border-color: transparent;
-        }
-    }
-
-    //Statements
-    &::before {
-        content: '';
-        position: absolute;
-        z-index: 2;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-
-        pointer-events: none;
-        transform: translate(-1px, -1px);
-        opacity: 0;
-        transition: opacity 150ms ease-in-out;
-    }
-
-    &:not(#{$root}_disabled):focus-within::before {
-        border: 4px solid variables.$primary-light;
-        transform: translateX(-4px) translateY(-4px);
-        opacity: 1;
-    }
-
-    &:not(#{$root}_disabled):active {
-        #{$root}__input {
-            border-color: transparent;
-        }
-
-        &::before {
-            transform: translate(-1px, -1px);
-            border: 1px solid variables.$primary;
-            opacity: 1;
-        }
     }
 
     &_disabled {
         #{$root}__input {
             background-color: variables.$element-background-color-disabled;
-            border-color: transparent;
             cursor: not-allowed;
         }
     }
 
-    &_hasError {
-        #{$root}__input {
-            border-color: transparent;
-        }
-
-
-        &::before {
-            border: 1px solid variables.$danger;
-            border-radius: 16px;
-            transform: translateX(-1px) translateY(-1px);
-            opacity: 1;
-        }
-    }
-
-    //Sizes
-    &_size {
-        &_lg {
-            color: variables.$text-color;
-            height: variables.$input-height-lg;
-            border-radius: variables.$radius-large;
-
-            #{$root}__input {
-                font-size: variables.$font-size-lg;
-                border-radius: variables.$radius-large;
-            }
-
-            #{$root}__addon-before,
-            #{$root}__addon-after {
-                padding: 16px;
-            }
-            #{$root}__text-before,
-            #{$root}__text-after {
-                padding: 16px 3px;
-            }
-
-            &::before {
-                border-radius: variables.$radius-large;
-            }
-
-            &:focus-within::before {
-                border-radius: 16px;
-            }
-        }
-
-        &_md {
-            color: variables.$text-color;
-            height: variables.$input-height-md;
-            border-radius: variables.$radius-large;
-
-            #{$root}__input {
-                border-radius: variables.$radius-large;
-                font-size: variables.$font-size-base;
-            }
-
-            #{$root}__addon-before,
-            #{$root}__addon-after,
-            #{$root}__text-before,
-            #{$root}__text-after {
-                padding: 11px 12px;
-            }
-
-            #{$root}__text-before,
-            #{$root}__text-after {
-                padding: 11px 3px;
-            }
-
-            &::before {
-                border-radius: variables.$radius-medium;
-            }
-
-            &:focus-within::before {
-                border-radius: 16px;
-            }
-        }
-
-        &_sm {
-            color: variables.$text-color;
-            height: variables.$input-height-sm;
-            border-radius: variables.$radius-small;
-
-            #{$root}__input {
-                font-size: variables.$font-size-sm;
-                border-radius: variables.$radius-small;
-            }
-
-            #{$root}__addon-before,
-            #{$root}__addon-after {
-                padding: 5px 8px;
-            }
-
-            #{$root}__text-before,
-            #{$root}__text-after {
-                padding: 5px 3px;
-            }
-
-            &::before {
-                border-radius: variables.$radius-small;
-            }
-
-            &:focus-within::before {
-                border-radius: 12px;
-            }
-        }
-    }
-
     //LEAD ICON
     &_hasLeadIcon {
         #{$root}__input {
@@ -279,49 +201,81 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
         }
     }
 
-    &_hasAddonBefore {
-        #{$root}__input {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-            border: none;
-        }
-        &::before {
-            border: 1px solid variables.$element-border-color;
-            opacity: 1;
-        }
-    }
-
-    &_hasAddonAfter {
-        #{$root}__input {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-        &::before {
-            border: 1px solid variables.$element-border-color;
-            opacity: 1;
-        }
-    }
-
     &__text-before,
     &__text-after {
         flex-shrink: 0;
+        padding: 0 6px;
     }
 
     &__addon-before,
     &__addon-after {
         flex-shrink: 0;
-        padding: 11px 12px;
+        padding: var(--addon-padding);
         background-color: variables.$element-background-color-disabled;
         color: variables.$text-color;
     }
 
+    // BORDERS 
+    --input-border-radius: #{variables.$radius-small};
+    --input-border-width: 1px;
+    --input-border-color: #{variables.$element-border-color};
+    --input-left-border-radius: var(--input-border-radius);
+    --input-right-border-radius: var(--input-border-radius);
+
+    --input-wrapper-border-width: 1px;
+    --input-wrapper-border-color: transparent;
+    --input-wrapper-border-opacity: 0;
+
+    &_hasError {
+        --input-wrapper-border-width: 1px;
+        --input-wrapper-border-color: #{variables.$danger};
+        --input-wrapper-border-opacity: 1;
+
+        --input-border-color: transparent;
+    }
+
+    &_hasAddon {
+        --input-wrapper-border-width: 1px;
+        --input-wrapper-border-color: #{variables.$element-border-color};
+        --input-wrapper-border-opacity: 1;
+
+        --input-border-width: 0px;
+    }
+    &_hasAddonBefore {
+        --input-left-border-radius: 0;
+    }
+    &_hasAddonAfter {
+        --input-right-border-radius: 0;
+    }
+
+    &:not(&_disabled) {
+        &:focus-within {
+            --input-wrapper-border-width: 4px;
+            --input-wrapper-border-color: #{variables.$primary-light};
+            --input-wrapper-border-opacity: 1;
+
+            --input-border-color: transparent;
+        }
+        &:active {
+            --input-wrapper-border-width: 1px;
+            --input-wrapper-border-color: #{variables.$primary};
+            --input-wrapper-border-opacity: 1;
+
+            --input-border-color: transparent;
+        }
+    }
+
+    &_disabled {
+        --input-border-color: transparent;
+    }
+
     &__addon-before {
-        border-top-left-radius: inherit;
-        border-bottom-left-radius: inherit;
+        border-top-left-radius: var(--input-border-radius);
+        border-bottom-left-radius: var(--input-border-radius);
     }
 
     &__addon-after {
-        border-top-right-radius: inherit;
-        border-bottom-right-radius: inherit;
+        border-top-right-radius: var(--input-border-radius);
+        border-bottom-right-radius: var(--input-border-radius);
     }
 }

package/form/PasswordField/PasswordFieldView.scss

@@ -152,19 +152,23 @@ $eye-filled-color: var(--eye-filled-color);
     }
 
     &__security-bar {
-        position: relative;
+        position: absolute;
         width: 100%;
         height: 4px;
         border-radius: 4px;
-        margin-top: 8px;
+
+        bottom: -12px;
 
         background-color: $security-bar-background;
 
+        opacity: 0;
+        transition: 0.15s ease opacity;
+
         &::before {
             content: "";
             position: absolute;
             width: 0%;
-            height: 4px;
+            height: 100%;
             border-radius: 4px;
             transition: width 1s ease-in-out;
         }
@@ -184,6 +188,11 @@ $eye-filled-color: var(--eye-filled-color);
             background-color: variables.$success;
         }
     }
+    &:focus-within {
+        #{$root}__security-bar {
+            opacity: 1;
+        }
+    }
 
     &__icon-eye {
         outline: none;

package/form/TimeField/TimeFieldView.js

@@ -54,7 +54,7 @@ function TimeFieldView(props) {
                 'is-invalid': !!props.errors
             }), props.className), style: props.style },
             React.createElement("div", { className: bem.element('body') },
-                React.createElement("input", __assign({}, props.inputProps, { className: bem(bem.element('input'), props.inputProps.className), onChange: function (e) { return props.inputProps.onChange(e.target.value); } })),
+                React.createElement("input", __assign({}, props.inputProps, { id: props.id, className: bem(bem.element('input'), props.inputProps.className), onChange: function (e) { return props.inputProps.onChange(e.target.value); } })),
                 React.createElement("div", { className: bem.element('icon-container') },
                     !props.inputProps.value && props.icon && (React.createElement(Icon_1["default"], { className: bem.element('date-icon'), name: typeof props.icon === 'string' ? props.icon : 'calendar_range', tabIndex: -1 })),
                     props.showRemove && props.inputProps.value && props.icon !== false && (React.createElement(Icon_1["default"], { className: bem.element('close-icon'), onClick: function (e) {

package/form/TimeField/TimeFieldView.scss

@@ -18,6 +18,8 @@
     &__dropdown { 
         background: variables.$element-background-color;
 
+        min-width: unset;
+
         @include mixins.calendar-border();
     }
 
@@ -30,7 +32,23 @@
             padding-top: 10px;
             display: flex;
             flex-flow: row nowrap;
-            column-gap: 10px;
+            column-gap: 10px;   
+        }
+
+        &:has(.TimePanelView__button_now) {
+            .TimePanelView {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                &__button_now {
+                    margin-bottom: 6px;
+                }
+            }
+            .TimePanelView__footer {
+                flex-direction: column;
+            }
+            
         }
     }
 }