@broxus/react-uikit 0.17.4 → 0.19.0

package/dist/cjs/components/DatePicker/index.scss

@@ -1,693 +0,0 @@
-// Name:            DatePicker
-// Description:     Component to create DatePicker
-//
-// Component:       `uk-datepicker`
-//
-// Modifier:        `uk-datepicker-single`
-//                  `uk-datepicker-multiple`
-//                  `uk-control-small`
-//                  `uk-control-medium`
-//                  `uk-control-large`
-//
-// ========================================================================
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-
-/* Picker
- ========================================================================== */
-
-[class^='uk-datepicker'],
-[class*=' uk-datepicker'],
-[class^='uk-datepicker']::before,
-[class*=' uk-datepicker']::before,
-[class^='uk-datepicker']::after,
-[class*=' uk-datepicker']::after {
-    box-sizing: border-box;
-}
-
-.uk-datepicker {
-    align-items: center;
-    background-color: var(--control-background);
-    border: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
-    border-radius: var(--control-border-radius);
-    color: var(--control-color);
-    cursor: text;
-    display: flex;
-    font-size: inherit;
-    min-height: var(--control-height);
-    padding-left: var(--control-padding-horizontal);
-    padding-right: var(--control-padding-horizontal);
-    position: relative;
-    transition: all var(--transition-duration);
-    @if mixin-exists(hook-datepicker) {
-        @include hook-datepicker;
-    }
-}
-
-.uk-datepicker:hover {
-    background-color: var(--control-hover-background);
-    border-color: var(--control-hover-border);
-    color: var(--control-hover-color);
-    @if mixin-exists(hook-datepicker-hover) {
-        @include hook-datepicker-hover;
-    }
-}
-
-/* Focus state  (unused for disabled state) */
-.uk-datepicker:focus,
-.uk-datepicker:focus-within {
-    background-color: var(--control-focus-background);
-    border-color: var(--control-focus-border);
-    color: var(--control-focus-color);
-    outline: none;
-    @if mixin-exists(hook-datepicker-focus) {
-        @include hook-datepicker-focus;
-    }
-}
-
-.uk-datepicker-small {
-    font-size: var(--control-small-font-size);
-    padding: 0 var(--control-small-padding-horizontal);
-}
-
-.uk-datepicker-medium {
-    font-size: var(--control-medium-font-size);
-    padding: 0 var(--control-medium-padding-horizontal);
-}
-
-.uk-datepicker-large {
-    font-size: var(--control-large-font-size);
-    padding: 0 var(--control-large-padding-horizontal);
-}
-
-.uk-datepicker .uk-datepicker-input {
-    align-items: center;
-    display: inline-flex;
-    position: relative;
-    width: 100%;
-    @if mixin-exists(hook-datepicker-input) {
-        @include hook-datepicker-input;
-    }
-}
-
-.uk-datepicker .uk-datepicker-input .uk-control {
-    border: 0 none;
-    flex: 1;
-    min-width: 1px;
-    padding: 0;
-}
-
-
-/* Panel
- ========================================================================== */
-
-.uk-datepicker-panel-layout {
-    align-items: stretch;
-    display: flex;
-    flex-wrap: nowrap;
-    @if mixin-exists(hook-datepicker-panel-layout) {
-        @include hook-datepicker-panel-layout;
-    }
-}
-
-.uk-datepicker-panel {
-    border: 0 none;
-    border-radius: 0;
-    display: inline-flex;
-    flex-direction: column;
-    text-align: center;
-    vertical-align: top;
-    @if mixin-exists(hook-datepicker-panel) {
-        @include hook-datepicker-panel;
-    }
-}
-
-.uk-datepicker-datetime-panel {
-    display: flex;
-    @if mixin-exists(hook-datepicker-datetime-panel) {
-        @include hook-datepicker-datetime-panel;
-    }
-}
-
-.uk-datepicker-time-panel,
-.uk-datepicker-date-panel,
-.uk-datepicker-month-panel,
-.uk-datepicker-quarter-panel,
-.uk-datepicker-decade-panel,
-.uk-datepicker-week-panel,
-.uk-datepicker-year-panel {
-    display: flex;
-    flex-direction: column;
-    transition: opacity var(--transition-duration);
-    width: calc(var(--datepicker-cell-width) * 7 + calc(var(--datepicker-body-padding-horizontal) * 2));
-}
-
-.uk-datepicker-time-panel {
-    min-width: auto;
-    width: auto;
-    @if mixin-exists(hook-datepicker-time-panel) {
-        @include hook-datepicker-time-panel;
-    }
-}
-
-.uk-datepicker-time-panel:not(:first-child) {
-    border-inline-start: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
-}
-
-.uk-datepicker-date-panel {
-    @if mixin-exists(hook-datepicker-date-panel) {
-        @include hook-datepicker-date-panel;
-    }
-}
-
-.uk-datepicker-month-panel {
-    @if mixin-exists(hook-datepicker-month-panel) {
-        @include hook-datepicker-month-panel;
-    }
-}
-
-.uk-datepicker-quarter-panel {
-    @if mixin-exists(hook-datepicker-quarter-panel) {
-        @include hook-datepicker-quarter-panel;
-    }
-}
-
-.uk-datepicker-decade-panel {
-    @if mixin-exists(hook-datepicker-decade-panel) {
-        @include hook-datepicker-decade-panel;
-    }
-}
-
-.uk-datepicker-week-panel {
-    @if mixin-exists(hook-datepicker-week-panel) {
-        @include hook-datepicker-week-panel;
-    }
-}
-
-.uk-datepicker-year-panel {
-    @if mixin-exists(hook-datepicker-year-panel) {
-        @include hook-datepicker-year-panel;
-    }
-}
-
-/* Header */
-.uk-datepicker-header {
-    align-items: center;
-    border-bottom: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
-    color: var(--global-color);
-    display: flex;
-    padding-left: var(--datepicker-header-padding-horizontal);
-    padding-right: var(--datepicker-header-padding-horizontal);
-    @if mixin-exists(hook-datepicker-header) {
-        @include hook-datepicker-header;
-    }
-}
-
-.uk-datepicker-header-view {
-    display: inline-flex;
-    flex: auto;
-    font-size: var(--datepicker-header-font-size);
-    font-weight: var(--datepicker-header-font-weight);
-    justify-content: center;
-    line-height: var(--datepicker-header-height);
-    @if mixin-exists(hook-datepicker-header-view) {
-        @include hook-datepicker-header-view;
-    }
-}
-
-/* Body and content */
-.uk-datepicker-body {
-    padding: var(--datepicker-body-padding-vertical) var(--datepicker-body-padding-horizontal);
-    @if mixin-exists(hook-datepicker-body) {
-        @include hook-datepicker-body;
-    }
-}
-
-.uk-datepicker-content {
-    border-collapse: collapse;
-    table-layout: fixed;
-    text-align: center;
-    width: 100%;
-    @if mixin-exists(hook-datepicker-content) {
-        @include hook-datepicker-content;
-    }
-}
-
-// Elements
-.uk-datepicker-header button {
-    align-items: center;
-    appearance: none;
-    background: transparent;
-    border: none;
-    border-radius: 0;
-    color: var(--datepicker-header-button-color);
-    cursor: pointer;
-    display: inline-flex;
-    flex: none;
-    font-size: var(--datepicker-header-button-font-size);
-    font-weight: var(--datepicker-header-button-font-weight);
-    height: var(--datepicker-header-button-line-height);
-    justify-content: center;
-    line-height: var(--datepicker-header-button-line-height);
-    min-width: 1.6em;
-    padding: 0 var(--datepicker-header-button-padding-horizontal);
-    text-align: center;
-    transition: color var(--transition-medium-fast-duration);
-}
-
-.uk-datepicker-header-view button {
-    color: inherit;
-}
-
-.uk-datepicker-header-view button:hover {
-    color: var(--datepicker-header-view-button-hover-color);
-}
-
-.uk-datepicker-header > button:hover {
-    color: var(--datepicker-header-button-hover-color);
-}
-
-.uk-datepicker-prev-icon,
-.uk-datepicker-next-icon,
-.uk-datepicker-super-prev-icon,
-.uk-datepicker-super-next-icon {
-    color: inherit;
-    display: block;
-    height: 7px;
-    position: relative;
-    width: 7px;
-}
-
-.uk-datepicker-next-icon,
-.uk-datepicker-super-next-icon {
-    transform: rotate(135deg);
-}
-
-.uk-datepicker-prev-icon,
-.uk-datepicker-super-prev-icon {
-    transform: rotate(-45deg);
-}
-
-.uk-datepicker-prev-icon::before,
-.uk-datepicker-next-icon::before,
-.uk-datepicker-super-prev-icon::before,
-.uk-datepicker-super-next-icon::before {
-    border: 0 solid currentColor;
-    border-block-width: 1.5px 0;
-    border-inline-width: 1.5px 0;
-    content: '';
-    height: 7px;
-    inset-inline-start: 0;
-    position: absolute;
-    top: 0;
-    width: 7px;
-}
-
-.uk-datepicker-super-prev-icon::after,
-.uk-datepicker-super-next-icon::after {
-    border: 0 solid currentColor;
-    border-block-width: 1.5px 0;
-    border-inline-width: 1.5px 0;
-    content: '';
-    display: inline-block;
-    height: 7px;
-    inset-inline-start: 4px;
-    position: absolute;
-    top: 4px;
-    width: 7px;
-}
-
-.uk-datepicker-content th {
-    box-sizing: border-box;
-    height: var(--datepicker-cell-height);
-    padding: 0;
-}
-
-/* Footer */
-.uk-datepicker-footer {
-    border-top: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
-    padding: var(--datepicker-footer-padding-vertical) var(--datepicker-footer-padding-horizontal);
-    @if mixin-exists(hook-datepicker-footer) {
-        @include hook-datepicker-footer;
-    }
-}
-
-.uk-datepicker-ranges {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-    list-style: none;
-    margin-block: 0;
-    overflow: hidden;
-    padding-inline: var(--datepicker-footer-ranges-padding-vertical) var(--datepicker-footer-ranges-padding-horizontal);
-    text-align: start;
-    @if mixin-exists(hook-datepicker-ranges) {
-        @include hook-datepicker-ranges;
-    }
-}
-
-.uk-datepicker-ranges li {
-    display: inline-block;
-}
-
-/* Calendar
- ========================================================================== */
-
-.uk-datepicker-cell {
-    color: var(--datepicker-cell-disabled-color);
-    cursor: pointer;
-    font-weight: normal;
-    min-width: var(--datepicker-cell-height);
-    padding: var(--datepicker-cell-padding) calc(var(--datepicker-cell-padding) / 2);
-    position: relative;
-    transition: background var(--transition-medium-fast-duration);
-    @if mixin-exists(hook-datepicker-cell) {
-        @include hook-datepicker-cell;
-    }
-}
-
-.uk-datepicker-cell::before {
-    content: '';
-    height: var(--datepicker-cell-height);
-    inset-inline: 0;
-    pointer-events: none;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1;
-}
-
-.uk-datepicker-cell-in-view {
-    color: var(--datepicker-cell-color);
-}
-
-.uk-datepicker-cell-inner {
-    border-radius: var(--datepicker-cell-border-radius);
-    display: inline-block;
-    height: var(--datepicker-cell-height);
-    line-height: var(--datepicker-cell-height);
-    min-width: var(--datepicker-cell-height);
-    position: relative;
-    z-index: 2;
-    @if mixin-exists(hook-datepicker-cell-inner) {
-        @include hook-datepicker-cell-inner;
-    }
-}
-
-/* Hover cell state */
-.uk-datepicker-cell:hover:not(.uk-datepicker-cell-in-view, .uk-datepicker-cell-disabled) .uk-datepicker-cell-inner,
-.uk-datepicker-cell:hover:not(
-    .uk-datepicker-cell-selected,
-    .uk-datepicker-cell-range-start,
-    .uk-datepicker-cell-range-end,
-    .uk-datepicker-cell-disabled
-) .uk-datepicker-cell-inner {
-    background-color: var(--datepicker-cell-hover-background);
-}
-
-.uk-datepicker-cell-in-view.uk-datepicker-cell-selected:not(.uk-datepicker-cell-disabled) .uk-datepicker-cell-inner,
-.uk-datepicker-cell-in-view.uk-datepicker-cell-range-start:not(.uk-datepicker-cell-disabled) .uk-datepicker-cell-inner,
-.uk-datepicker-cell-in-view.uk-datepicker-cell-range-end:not(.uk-datepicker-cell-disabled) .uk-datepicker-cell-inner {
-    background-color: var(--datepicker-cell-active-background);
-    color: var(--datepicker-cell-active-color);
-}
-
-/* Disabled cell state */
-.uk-datepicker-cell-disabled:not(.uk-datepicker-cell-selected) {
-    color: var(--datepicker-cell-disabled-color);
-    cursor: not-allowed;
-}
-
-.uk-datepicker-cell-disabled::before {
-    background: var(--datepicker-cell-disabled-background);
-}
-
-.uk-datepicker-cell-disabled .uk-datepicker-cell-inner {
-    background: none;
-}
-
-/* Today */
-.uk-datepicker-cell-in-view.uk-datepicker-cell-today .uk-datepicker-cell-inner::before {
-    border: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
-    border-radius: var(--datepicker-cell-border-radius);
-    bottom: 0;
-    content: '';
-    inset-inline: 0;
-    position: absolute;
-    top: 0;
-    z-index: 1;
-}
-
-.uk-datepicker-cell-disabled.uk-datepicker-cell-today .uk-datepicker-cell-inner::before {
-    border-color: var(--datepicker-cell-disabled-border);
-}
-
-.uk-datepicker-week-panel-row-range-start td.uk-datepicker-cell .uk-datepicker-cell-inner,
-.uk-datepicker-week-panel-row-range-end td.uk-datepicker-cell .uk-datepicker-cell-inner,
-.uk-datepicker-week-panel-row-hover td.uk-datepicker-cell .uk-datepicker-cell-inner {
-    color: var(--datepicker-cell-week-hover-color);
-}
-
-.uk-datepicker-week-panel-row-range-start td.uk-datepicker-cell::before,
-.uk-datepicker-week-panel-row-range-end td.uk-datepicker-cell::before,
-.uk-datepicker-week-panel-row-hover td.uk-datepicker-cell::before {
-    background-color: var(--datepicker-cell-week-hover-background);
-}
-
-.uk-datepicker-week-panel-row-selected td.uk-datepicker-cell .uk-datepicker-cell-inner {
-    color: var(--datepicker-cell-week-active-color);
-}
-
-.uk-datepicker-week-panel-row-selected td.uk-datepicker-cell::before {
-    background-color: var(--datepicker-cell-week-active-background);
-}
-
-.uk-datepicker-week-panel-row td:first-child::before {
-    border-bottom-left-radius: var(--datepicker-cell-border-radius);
-    border-top-left-radius: var(--datepicker-cell-border-radius);
-}
-
-.uk-datepicker-week-panel-row td:last-child::before {
-    border-bottom-right-radius: var(--datepicker-cell-border-radius);
-    border-top-right-radius: var(--datepicker-cell-border-radius);
-}
-
-.uk-datepicker-year-panel .uk-datepicker-cell-inner,
-.uk-datepicker-quarter-panel .uk-datepicker-cell-inner,
-.uk-datepicker-month-panel .uk-datepicker-cell-inner {
-    width: calc(var(--datepicker-cell-width) * 1.5);
-}
-
-.uk-datepicker-decade-panel .uk-datepicker-cell-inner,
-.uk-datepicker-year-panel .uk-datepicker-cell-inner,
-.uk-datepicker-quarter-panel .uk-datepicker-cell-inner,
-.uk-datepicker-month-panel .uk-datepicker-cell-inner {
-    padding: 0 calc(var(--datepicker-cell-padding) * 2);
-}
-
-
-/* Time panel */
-.uk-datepicker-time-panel .uk-datepicker-content {
-    display: flex;
-    flex: auto;
-    height: var(--datepicker-time-column-height);
-}
-
-.uk-datepicker-time-panel-column {
-    flex: 1 0 auto;
-    margin: var(--global-xsmall-margin) 0;
-    overflow: hidden;
-    padding: 0;
-    scrollbar-color: var(--global-scroll-background, var(--global-muted-backgrounf, rgba(#000, 0.15))) transparent;
-    scrollbar-width: thin;
-    text-align: start;
-    transition: background var(--transition-medium-fast-duration);
-    width: var(--datepicker-time-column-width);
-    @if mixin-exists(hook-datepicker-time-panel-column) {
-        @include hook-datepicker-time-panel-column;
-    }
-}
-
-.uk-datepicker-time-panel-column:hover {
-    overflow-y: auto;
-}
-
-.uk-datepicker-time-panel-column ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-
-/* Time
- ========================================================================== */
-
-.uk-datepicker-time-panel-column .uk-datepicker-time-panel-cell {
-    margin-inline: var(--global-xsmall-margin);
-}
-
-.uk-datepicker-time-panel-column .uk-datepicker-time-panel-cell-inner {
-    border-radius: var(--global-small-border-radius);
-    color: var(--datepicker-cell-color);
-    cursor: pointer;
-    display: block;
-    height: var(--datepicker-time-cell-height);
-    line-height: var(--datepicker-time-cell-height);
-    margin: 0;
-    padding-block: 0;
-    padding-inline: calc((var(--datepicker-time-column-width) - var(--datepicker-time-cell-height)) / 2) 0;
-    transition: background var(--transition-medium-fast-duration);
-    width: calc(var(--datepicker-time-column-width) - var(--global-xsmall-margin) * 2);
-}
-
-.uk-datepicker-time-panel-cell-inner:hover {
-    background-color: var(--datepicker-cell-hover-background);
-}
-
-.uk-datepicker-time-panel-cell-selected .uk-datepicker-time-panel-cell-inner {
-    background-color: var(--datepicker-cell-active-background);
-    color: var(--datepicker-cell-active-color);
-}
-
-.uk-datepicker-time-panel-cell-disabled:not(.uk-datepicker-time-panel-cell-selected) .uk-datepicker-time-panel-cell-inner {
-    color: var(--datepicker-cell-disabled-color);
-    cursor: not-allowed;
-}
-
-
-/* Icons
- ========================================================================== */
-
-.uk-datepicker .uk-datepicker-suffix {
-    --icon-size: 1em;
-    align-self: center;
-    color: var(--datepicker-suffix-color);
-    display: flex;
-    flex: none;
-    font-size: 1em;
-    line-height: 0;
-    margin-inline-start: calc(var(--datepicker-suffix-padding-horizontal) / 2);
-    pointer-events: none;
-    transition: opacity var(--transition-medium-fast-duration),
-        color var(--transition-medium-fast-duration);
-}
-
-.uk-datepicker:hover .uk-datepicker-suffix:not(:last-child) {
-    opacity: 0;
-}
-
-.uk-datepicker .uk-datepicker-clear {
-    --icon-size: 1em;
-    color: var(--datepicker-clear-color);
-    cursor: pointer;
-    font-size: 1em;
-    inset-inline-end: 0;
-    line-height: 0;
-    opacity: 0;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    transition: opacity var(--transition-medium-fast-duration), color var(--transition-medium-fast-duration);
-}
-
-.uk-datepicker:hover .uk-datepicker-clear {
-    opacity: 1;
-}
-
-/* Dropdown
- ========================================================================== */
-
-.uk-datepicker-dropdown {
-    background-color: var(--datepicker-dropdown-background);
-    border: var(--datepicker-dropdown-border-width) var(--datepicker-dropdown-border-style) var(--datepicker-dropdown-border);
-    border-radius: var(--datepicker-dropdown-border-radius);
-    font-variant: initial;
-    left: -9999px;
-    outline: none;
-    overflow: hidden;
-    padding: calc(var(--datepicker-gutter) / 2);
-    position: absolute;
-    top: -9999px;
-    z-index: calc(var(--global-z-index) + 30);
-    @if mixin-exists(hook-datepicker-dropdown) {
-        @include hook-datepicker-dropdown;
-    }
-}
-
-.uk-datepicker-dropdown-placement-bottom-left.uk-slide-up-enter.uk-slide-up-enter-active,
-.uk-datepicker-dropdown-placement-bottom-left.uk-slide-up-appear.uk-slide-up-appear-active {
-    animation-name: uk-slide-up-in;
-}
-
-.uk-datepicker-dropdown-placement-top-left.uk-slide-up-enter.uk-slide-up-enter-active,
-.uk-datepicker-dropdown-placement-top-left.uk-slide-up-appear.uk-slide-up-appear-active {
-    animation-name: uk-slide-down-in;
-}
-
-.uk-datepicker-dropdown-placement-bottom-left .uk-slide-up-leave.uk-slide-up-leave-active {
-    animation-name: uk-slide-up-out;
-}
-
-.uk-datepicker-dropdown-placement-top-left.uk-slide-up-leave.uk-slide-up-leave-active {
-    animation-name: uk-slide-down-out;
-}
-
-.uk-datepicker-dropdown-hidden {
-    display: none;
-}
-
-// Vars
-// ========================================================================
-
-:root {
-    --datepicker-border-width: var(--global-border-width);
-    --datepicker-border-style: var(--global-border-style);
-    --datepicker-border: var(--global-border);
-    --datepicker-header-padding-horizontal: var(--global-small-gutter);
-    --datepicker-header-font-size: var(--global-font-size);
-    --datepicker-header-font-weight: var(--global-bold-font-weight);
-    --datepicker-header-height: var(--global-control-large-height);
-    --datepicker-body-padding-horizontal: var(--global-gutter);
-    --datepicker-body-padding-vertical: var(--global-small-gutter);
-    --datepicker-header-button-color: var(--global-muted-color);
-    --datepicker-header-button-font-size: var(--global-font-size);
-    --datepicker-header-button-font-weight: var(--global-bold-font-weight);
-    --datepicker-header-button-line-height: var(--global-control-large-height);
-    --datepicker-header-button-padding-horizontal: var(--global-small-gutter);
-    --datepicker-header-button-hover-color: var(--global-color);
-    --datepicker-header-view-button-hover-color: var(--global-primary-color);
-    --datepicker-footer-padding-horizontal: var(--global-small-gutter);
-    --datepicker-footer-padding-vertical: var(--global-small-gutter);
-    --datepicker-footer-ranges-padding-horizontal: var(--global-small-gutter);
-    --datepicker-footer-ranges-padding-vertical: var(--global-small-gutter);
-    --datepicker-cell-border-radius: var(--global-small-border-radius);
-    --datepicker-cell-height: var(--global-control-height);
-    --datepicker-cell-width: #{$datepicker-cell-width};
-    --datepicker-cell-padding: var(--global-xsmall-gutter);
-    --datepicker-cell-color: var(--global-color);
-    --datepicker-cell-hover-background: var(--global-secondary-background);
-    --datepicker-cell-active-background: var(--global-primary-background);
-    --datepicker-cell-active-color: var(--global-inverse-color);
-    --datepicker-cell-disabled-background: var(--global-muted-background);
-    --datepicker-cell-disabled-border: var(--global-muted-border);
-    --datepicker-cell-disabled-color: var(--global-muted-color);
-    --datepicker-cell-week-hover-background: var(--global-secondary-background);
-    --datepicker-cell-week-hover-color: var(--global-color);
-    --datepicker-cell-week-active-background: var(--global-primary-background);
-    --datepicker-cell-week-active-color: var(--global-inverse-color);
-    --datepicker-time-column-height: #{$datepicker-time-column-height};
-    --datepicker-time-column-width: #{$datepicker-time-column-width};
-    --datepicker-time-cell-height: #{$datepicker-time-cell-height};
-    --datepicker-suffix-color: var(--global-muted-color);
-    --datepicker-suffix-padding-horizontal: var(--global-small-gutter);
-    --datepicker-clear-color: var(--global-color);
-    --datepicker-dropdown-background: #{$datepicker-dropdown-background};
-    --datepicker-dropdown-border: var(--global-border);
-    --datepicker-dropdown-border-style: var(--global-border-style);
-    --datepicker-dropdown-border-width: var(--global-border-width);
-    --datepicker-dropdown-border-radius: var(--global-border-radius);
-}