lumen-plus 0.0.3 → 0.0.5

package/dist/theme-chalk/date-picker.scss

@@ -0,0 +1,352 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('date-picker') {
+    position: relative;
+    display: inline-block;
+    width: 220px;
+
+    @include m('small') {
+        .#{$namespace}-date-picker__trigger {
+            height: 28px;
+        }
+
+        .#{$namespace}-date-picker__input {
+            font-size: $font-size-small;
+        }
+    }
+
+    @include m('default') {
+        .#{$namespace}-date-picker__trigger {
+            height: 32px;
+        }
+
+        .#{$namespace}-date-picker__input {
+            font-size: $font-size-base;
+        }
+    }
+
+    @include m('large') {
+        .#{$namespace}-date-picker__trigger {
+            height: 40px;
+        }
+
+        .#{$namespace}-date-picker__input {
+            font-size: $font-size-medium;
+        }
+    }
+
+    @include when('disabled') {
+        .#{$namespace}-date-picker__trigger {
+            background: $bg-color-page;
+            cursor: not-allowed;
+        }
+
+        .#{$namespace}-date-picker__input {
+            color: $color-text-disabled;
+            cursor: not-allowed;
+        }
+    }
+
+    @include e('trigger') {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        padding: 0 12px;
+        border: 1px solid $border-color-base;
+        border-radius: $border-radius-base;
+        background: $bg-color;
+        cursor: pointer;
+        transition: border-color $transition-duration-fast;
+        font-family: inherit;
+        font-size: inherit;
+        outline: none;
+
+        &:hover:not(:disabled):not(.is-focus) {
+            border-color: #c0c4cc;
+        }
+
+        &.is-focus {
+            border-color: $color-primary;
+        }
+
+        &:disabled {
+            background: $bg-color-page;
+            cursor: not-allowed;
+        }
+    }
+
+    @include e('prefix') {
+        color: $color-text-secondary;
+        margin-right: 8px;
+    }
+
+    @include e('input') {
+        flex: 1;
+        text-align: left;
+        color: $color-text-primary;
+
+        &.is-placeholder {
+            color: $color-text-placeholder;
+        }
+    }
+
+    @include e('clear') {
+        color: $color-text-secondary;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+
+        &:hover {
+            color: $color-text-primary;
+        }
+    }
+
+    @include e('dropdown') {
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        margin-top: 12px;
+        // Arrow variables
+        --l-date-picker-bg: #{$bg-color};
+        --l-date-picker-border: #{$border-color-lighter};
+        --arrow-size: 10px;
+
+        padding: 12px;
+        background: var(--l-date-picker-bg);
+        border: 1px solid var(--l-date-picker-border);
+        border-radius: $border-radius-base;
+        box-shadow: $box-shadow-light;
+        z-index: $z-index-popper;
+        width: 280px;
+        overflow: visible;
+        transform: translateX(-50%);
+        transform-origin: top;
+    }
+
+    @include e('menu-arrow') {
+        position: absolute;
+        width: var(--arrow-size);
+        height: var(--arrow-size);
+        z-index: -1;
+        pointer-events: none;
+
+        top: calc(-1 * (var(--arrow-size) * 0.55) + 1px);
+        left: 50%;
+        margin-left: calc(-1 * (var(--arrow-size) / 2));
+
+        &::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--l-date-picker-bg);
+            transform: rotate(45deg);
+            border-radius: calc(var(--arrow-size) * 0.2);
+            box-shadow: -1px -1px 0 0 var(--l-date-picker-border);
+        }
+    }
+
+    @include e('header') {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 12px;
+    }
+
+    @include e('body') {
+        display: block;
+    }
+
+    @include e('nav') {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border: none;
+        border-radius: $border-radius-base;
+        background: transparent;
+        color: $color-text-secondary;
+        cursor: pointer;
+        transition: background-color $transition-duration-fast, color $transition-duration-fast;
+
+        &:hover {
+            background: $bg-color-page;
+            color: $color-primary;
+        }
+    }
+
+    @include e('nav-group') {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+    }
+
+    @include e('title') {
+        flex: 1;
+        text-align: center;
+        font-size: $font-size-base;
+        font-weight: $font-weight-primary;
+        color: $color-text-primary;
+    }
+
+    @include e('week') {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        margin-bottom: 8px;
+    }
+
+    @include e('week-day') {
+        text-align: center;
+        font-size: $font-size-small;
+        color: $color-text-secondary;
+        padding: 4px 0;
+    }
+
+    @include e('days') {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 4px;
+    }
+
+    @include e('day') {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        border: none;
+        border-radius: $border-radius-base;
+        background: transparent;
+        font-size: $font-size-base;
+        color: $color-text-primary;
+        cursor: pointer;
+        transition: background-color $transition-duration-fast, color $transition-duration-fast;
+
+        &:hover:not(:disabled) {
+            background: $bg-color-page;
+        }
+
+        &.is-other-month {
+            color: $color-text-placeholder;
+        }
+
+        &.is-today {
+            color: $color-primary;
+            font-weight: $font-weight-primary;
+        }
+
+        &.is-selected {
+            background: $color-primary;
+            color: #fff;
+
+            &:hover {
+                background: $color-primary-light;
+            }
+        }
+
+        &.is-disabled {
+            color: $color-text-disabled;
+            cursor: not-allowed;
+        }
+    }
+}
+
+.dark {
+    .#{$namespace}-date-picker {
+        .#{$namespace}-date-picker__trigger {
+            background: $bg-color-dark-light;
+            border-color: color-mix(in oklab, #{$bg-color-dark-lighter} 78%, #{$color-text-dark});
+
+            &:hover:not(:disabled):not(.is-focus) {
+                border-color: color-mix(in oklab, #{$bg-color-dark-lighter} 60%, #{$color-text-dark});
+            }
+
+            &.is-focus {
+                border-color: $color-primary;
+            }
+        }
+
+        @include when('disabled') {
+            .#{$namespace}-date-picker__trigger {
+                background: $bg-color-dark-lighter;
+            }
+
+            .#{$namespace}-date-picker__input {
+                color: $color-text-dark-secondary;
+            }
+        }
+
+        .#{$namespace}-date-picker__prefix,
+        .#{$namespace}-date-picker__clear {
+            color: $color-text-dark-secondary;
+        }
+
+        .#{$namespace}-date-picker__clear:hover {
+            color: $color-text-dark;
+        }
+
+        .#{$namespace}-date-picker__input {
+            color: $color-text-dark;
+
+            &.is-placeholder {
+                color: $color-text-dark-secondary;
+            }
+        }
+
+        .#{$namespace}-date-picker__dropdown {
+            --l-date-picker-bg: #{$bg-color-dark-light};
+            --l-date-picker-border: color-mix(in oklab, #{$bg-color-dark-lighter} 74%, #{$color-text-dark});
+            box-shadow: $box-shadow-dark;
+        }
+
+        .#{$namespace}-date-picker__nav {
+            color: $color-text-dark-secondary;
+
+            &:hover {
+                background: $bg-color-dark-lighter;
+                color: $color-text-dark;
+            }
+        }
+
+        .#{$namespace}-date-picker__title {
+            color: $color-text-dark;
+        }
+
+        .#{$namespace}-date-picker__week-day {
+            color: $color-text-dark-secondary;
+        }
+
+        .#{$namespace}-date-picker__day {
+            color: $color-text-dark;
+
+            &:hover:not(:disabled) {
+                background: $bg-color-dark-lighter;
+            }
+
+            &.is-other-month {
+                color: $color-text-dark-secondary;
+            }
+
+            &.is-today {
+                color: $color-primary;
+            }
+
+            &.is-selected {
+                background: $color-primary;
+                color: #fff;
+
+                &:hover {
+                    background: $color-primary-light;
+                }
+            }
+
+            &:disabled,
+            &.is-disabled {
+                color: rgba($color-text-dark, 0.35);
+            }
+        }
+    }
+}