From 23fe76033024a13d962a48f95d33f75a5e164e63 Mon Sep 17 00:00:00 2001 From: Kron1749 Date: Thu, 25 Jul 2024 12:40:00 +0300 Subject: [PATCH 01/18] created_datepicker_neumorphism --- src/styles/neumorphism/datepicker.scss | 354 +++++++++++++++++++++++++ src/styles/neumorphism/index.scss | 1 + 2 files changed, 355 insertions(+) create mode 100644 src/styles/neumorphism/datepicker.scss diff --git a/src/styles/neumorphism/datepicker.scss b/src/styles/neumorphism/datepicker.scss new file mode 100644 index 000000000..703c686aa --- /dev/null +++ b/src/styles/neumorphism/datepicker.scss @@ -0,0 +1,354 @@ +$neu-datepicker-header-label: #2A1820 !default; +$neu-datepicker-btn-arrow: var(--s-color-base-content-tertiary) !default; +$neu-datepicker-table-days: var(--s-color-base-content-secondary) !default; +$neu-datepicker-border-bottom: $neu-datepicker-btn-arrow !default; + +@mixin date-picker-border-radius( + $suffix: "big", + $border-radius: var(--s-border-radius-big) +) { + &.s-border-radius { + &-#{$suffix} { + border-radius: 16px; + .s-placeholder { + border-top-left-radius: $border-radius; + } + & .el-input__inner { + border-radius: $border-radius; + } + } + } +} + +$date-picker-padding: 8px; + +.s-date-picker { + font-family: var(--s-font-family-default); + width: 100%; + position: relative; + &.s-big .el-input__inner { + height: $s-size-big; + .el-range-separator { + line-height: $s-size-big - $date-picker-padding; + } + } + &.s-medium .el-input__inner { + height: $s-size-medium; + .el-range-separator { + line-height: $s-size-medium - $date-picker-padding; + } + } + &.s-small .el-input__inner { + height: $s-size-small; + .el-range-separator { + line-height: $s-size-small - $date-picker-padding; + } + } + .el-date-editor { + width: 100%; + &.el-input, + &.el-input__inner { + width: 100%; + } + .el-range-separator { + color: var(--s-color-base-content-tertiary); + } + .el-input__inner, + .el-range-input { + &::placeholder { + color: var(--s-color-base-content-tertiary); + opacity: 1; // Firefox + } + } + &.is-active { + border-color: var(--s-color-base-border-primary); + } + } + @include date-picker-border-radius; + @include date-picker-border-radius("medium", var(--s-border-radius-medium)); + @include date-picker-border-radius("small", var(--s-border-radius-small)); + @include date-picker-border-radius("mini", var(--s-border-radius-mini)); + &.s-has-value { + .el-date-editor .el-range-separator { + color: var(--s-color-base-content-primary); + } + .el-range-input { + color: var(--s-color-base-content-primary); + } + } + &.s-input-type { + .el-input__inner { + padding: 0 15px; + border: 1px solid var(--s-color-base-background); + background-color: var(--s-color-base-background); + } + &:hover { + .el-input__inner { + border-color: var(--s-color-base-background-hover); + } + .el-input__inner, + .s-placeholder { + background-color: var(--s-color-base-background-hover); + } + } + .s-placeholder + .el-date-editor { + > .el-input__inner { + padding-top: 12px; + } + .el-input__validateIcon { + padding-top: 11px; + } + } + &.s-focused { + .el-input__inner { + border-color: var(--s-color-base-border-primary); + } + .el-input__inner, + .s-placeholder { + background-color: var(--s-color-utility-surface); + } + } + &.s-disabled { + .el-input__inner { + border-color: var(--s-color-base-disabled); + } + .el-input__inner, + .s-placeholder { + color: var(--s-color-base-content-quaternary); + background-color: var(--s-color-base-disabled); + } + } + } + .s-placeholder { + // TODO: add default animation from material-ui + color: var(--s-color-base-content-tertiary); + text-align: left; + font-size: var(--s-font-size-mini); + padding: 0 15px; + padding-top: 5px; + top: 1px; + left: 1px; + position: absolute; + z-index: 1; + width: calc(100% - 15px); + background-color: var(--s-color-base-background); + pointer-events: none; + } + &.s-select-type { + .el-date-editor { + .el-input__inner, + .el-range-input, + .el-range-separator { + @include font-weight(700, true); + } + &.el-input__inner, + & .el-input__inner { + padding-left: 12px; + &:hover { + border-color: var(--s-color-base-border-primary); + } + &::placeholder, + .el-range-input::placeholder { + color: var(--s-color-base-content-tertiary); + @include font-weight(700, true); + } + } + } + .s-icon-chevron-down-rounded-16 { + position: absolute; + right: 10px; + top: calc(50% - 8px); + pointer-events: none; + color: var(--s-color-base-content-tertiary); + transition: transform 0.3s; + } + &.s-focused { + .el-date-editor.el-input__inner, + .el-date-editor .el-input__inner { + border-color: var(--s-color-base-border-primary); + } + &:not(.disabled) .s-icon-chevron-down-rounded-16 { + transform: rotate(180deg); + } + } + &.s-has-value { + .s-icon-chevron-down-rounded-16 { + color: var(--s-color-base-content-primary); + } + } + &.s-disabled { + .el-date-editor.el-input__inner, + .el-date-editor .el-input__inner { + color: var(--s-color-base-content-quaternary); + border-color: var(--s-color-base-disabled); + background-color: var(--s-color-utility-surface); + &::placeholder { + color: var(--s-color-base-content-quaternary); + } + .el-range-input { + background-color: var(--s-color-utility-surface); + color: var(--s-color-base-content-quaternary); + &::placeholder { + color: var(--s-color-base-content-quaternary); + } + } + .el-range-separator { + color: var(--s-color-base-content-quaternary); + } + } + .s-chevron-down-rounded-16 { + color: var(--s-color-base-content-quaternary); + } + } + } +} +.el-picker-panel { + background-color: var(--s-color-base-on-accent); + @include with-popper-arrows; + &__sidebar { + background-color: var(--s-color-base-on-accent); + border-right-color: var(--s-color-base-border-secondary); + } + &__shortcut { + color: var(--s-color-base-content-primary); + } +} + +.el-date-table td, +.el-picker-panel__link-btn, +.el-time-panel__btn, +.el-date-range-picker__time-header > .el-icon-arrow-right, +.el-year-table td .cell, +.el-month-table td .cell { + color: var(--s-color-base-content-primary); +} +.el-picker-panel__icon-btn:hover, +.el-year-table td.today .cell, +.el-year-table td .cell:hover, +.el-year-table td.current:not(.disabled) .cell, +.el-month-table td.today .cell, +.el-month-table td.current:not(.disabled) .cell, +.el-month-table td .cell:hover, +.el-picker-panel__shortcut:hover { + color: var(--s-color-theme-accent); +} + +// TODO figure out what with hover +.el-date-picker__header-label { + color: $neu-datepicker-header-label; +} + +.el-picker-panel__icon-btn { + color: $neu-datepicker-btn-arrow; +} + +.el-date-table th { + color: $neu-datepicker-table-days; +} +.el-picker-panel { + border-color: var(--s-color-base-background-hover); + .el-picker-panel__content { + .el-date-table { + td { + &.available:hover, + &.today span { + color: var(--s-color-theme-accent); + } + &.next-month, + &.prev-month { + color: $neu-datepicker-table-days; + } + &.current:not(.disabled), + &.selected, + &.start-date, + &.end-date { + span { + background-color: var(--s-color-theme-accent); + color: var(--s-color-utility-surface); + } + } + } + th { + border-bottom-color: $neu-datepicker-border-bottom; + } + } + .el-month-table td { + &.start-date, + &.end-date { + .cell { + background-color: var(--s-color-theme-accent); + color: var(--s-color-utility-surface); + } + } + } + } + .el-picker-panel__footer { + border-top-color: var(--s-color-base-background-hover); + border-bottom-right-radius: inherit; + border-bottom-left-radius: inherit; + > .el-button { + height: 32px; + border-radius: var(--s-border-radius-mini); + &:hover, + &:focus { + color: var(--s-color-theme-accent); + } + &.is-plain { + &:hover, + &:focus { + border-color: var(--s-color-theme-accent); + } + } + } + } + div[x-arrow].popper__arrow { + border-bottom-color: var(--s-color-base-background-hover); + } +} +.el-time-panel { + border-color: var(--s-color-base-background-hover); + .el-time-panel__footer { + border-top-color: var(--s-color-base-background-hover); + .confirm { + color: var(--s-color-theme-accent); + } + } + .el-time-spinner__item { + &.active:not(.disabled) { + color: var(--s-color-base-content-primary); + } + &:hover:not(.disabled):not(.active) { + background-color: var(--s-color-base-background); + } + } + .el-time-panel__content { + &::after, + &::before { + border-top-color: var(--s-color-base-background-hover); + border-bottom-color: var(--s-color-base-background-hover); + } + } +} +.el-date-table.is-week-mode .el-date-table__row { + &.current, + &:hover { + div { + background-color: var(--s-color-base-background-hover); + } + } +} +.el-month-table td.in-range div { + background-color: var(--s-color-base-background-hover); + &:hover { + background-color: var(--s-color-base-background-hover); + } +} +.el-date-table td.in-range div { + background-color: var(--s-color-base-background-hover); + &:hover { + background-color: var(--s-color-base-background-hover); + } +} +.el-date-range-picker__content.is-left { + border-right-color: var(--s-color-base-background-hover); +} diff --git a/src/styles/neumorphism/index.scss b/src/styles/neumorphism/index.scss index 6d4142a1b..778565df6 100644 --- a/src/styles/neumorphism/index.scss +++ b/src/styles/neumorphism/index.scss @@ -10,3 +10,4 @@ @import "./dialog"; @import "./image"; @import "./select"; +@import "./datepicker.scss" From 3ff41af1a688262731a7da94cc6fba0ac3a6b393 Mon Sep 17 00:00:00 2001 From: Kron1749 Date: Thu, 25 Jul 2024 16:09:57 +0300 Subject: [PATCH 02/18] hovers_colors_updated --- src/styles/neumorphism/datepicker.scss | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/src/styles/neumorphism/datepicker.scss b/src/styles/neumorphism/datepicker.scss index 703c686aa..7312731b0 100644 --- a/src/styles/neumorphism/datepicker.scss +++ b/src/styles/neumorphism/datepicker.scss @@ -2,6 +2,8 @@ $neu-datepicker-header-label: #2A1820 !default; $neu-datepicker-btn-arrow: var(--s-color-base-content-tertiary) !default; $neu-datepicker-table-days: var(--s-color-base-content-secondary) !default; $neu-datepicker-border-bottom: $neu-datepicker-btn-arrow !default; +$neu-datepicker-date-hover-background-color: var(--s-color-theme-accent) !default; +$neu-datepicker-date-hover-color: #F4F0F1 !default; @mixin date-picker-border-radius( $suffix: "big", @@ -222,7 +224,8 @@ $date-picker-padding: 8px; .el-month-table td .cell { color: var(--s-color-base-content-primary); } -.el-picker-panel__icon-btn:hover, + + .el-year-table td.today .cell, .el-year-table td .cell:hover, .el-year-table td.current:not(.disabled) .cell, @@ -250,10 +253,18 @@ $date-picker-padding: 8px; .el-picker-panel__content { .el-date-table { td { - &.available:hover, + &.available:hover { + // width: 28px !important; + // height: 28px !important; + // padding: 2px !important; + color: $neu-datepicker-date-hover-color; + border-radius: 14px !important; + background-color: $neu-datepicker-date-hover-background-color; + } &.today span { color: var(--s-color-theme-accent); } + &.next-month, &.prev-month { color: $neu-datepicker-table-days; @@ -263,10 +274,18 @@ $date-picker-padding: 8px; &.start-date, &.end-date { span { + width: 28px; + height: 28px; + padding: 2px; + border-radius: 14px; background-color: var(--s-color-theme-accent); color: var(--s-color-utility-surface); } } + &.selected:hover, + &.today span:hover { + color: var(--s-color-utility-surface); + } } th { border-bottom-color: $neu-datepicker-border-bottom; From 224a5f70c9da9674be81d391ad23997f5a1f2c9e Mon Sep 17 00:00:00 2001 From: Kron1749 Date: Thu, 25 Jul 2024 17:00:55 +0300 Subject: [PATCH 03/18] added_hover_for_available --- src/styles/neumorphism/datepicker.scss | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/src/styles/neumorphism/datepicker.scss b/src/styles/neumorphism/datepicker.scss index 7312731b0..e39c1bc38 100644 --- a/src/styles/neumorphism/datepicker.scss +++ b/src/styles/neumorphism/datepicker.scss @@ -248,19 +248,12 @@ $date-picker-padding: 8px; .el-date-table th { color: $neu-datepicker-table-days; } + .el-picker-panel { border-color: var(--s-color-base-background-hover); .el-picker-panel__content { .el-date-table { td { - &.available:hover { - // width: 28px !important; - // height: 28px !important; - // padding: 2px !important; - color: $neu-datepicker-date-hover-color; - border-radius: 14px !important; - background-color: $neu-datepicker-date-hover-background-color; - } &.today span { color: var(--s-color-theme-accent); } @@ -272,7 +265,8 @@ $date-picker-padding: 8px; &.current:not(.disabled), &.selected, &.start-date, - &.end-date { + &.end-date, + &.available:hover { span { width: 28px; height: 28px; From 8416a61fe5256d974d9e8fb84f0c46e6d7b68fd0 Mon Sep 17 00:00:00 2001 From: Kron1749 Date: Thu, 25 Jul 2024 17:46:32 +0300 Subject: [PATCH 04/18] shadow --- src/styles/neumorphism/datepicker.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/styles/neumorphism/datepicker.scss b/src/styles/neumorphism/datepicker.scss index e39c1bc38..cd97c2ef6 100644 --- a/src/styles/neumorphism/datepicker.scss +++ b/src/styles/neumorphism/datepicker.scss @@ -4,6 +4,8 @@ $neu-datepicker-table-days: var(--s-color-base-content-secondary) !default; $neu-datepicker-border-bottom: $neu-datepicker-btn-arrow !default; $neu-datepicker-date-hover-background-color: var(--s-color-theme-accent) !default; $neu-datepicker-date-hover-color: #F4F0F1 !default; +$neu-datepicker-backgroun-color: var(--s-color-utility-body) !default; +$neu-datepicker-box-shadow: 20px 20px 60px var(--s-shadow-color-dark), 1px 1px 10px var(--s-shadow-color-light), -10px -10px 30px rgba(255, 255, 255, 0.9) !default; @mixin date-picker-border-radius( $suffix: "big", @@ -205,10 +207,12 @@ $date-picker-padding: 8px; } } .el-picker-panel { - background-color: var(--s-color-base-on-accent); + box-shadow: $neu-datepicker-box-shadow; + background-color: $neu-datepicker-backgroun-color; + border-radius: 16px; @include with-popper-arrows; &__sidebar { - background-color: var(--s-color-base-on-accent); + background-color: $neu-datepicker-backgroun-color; border-right-color: var(--s-color-base-border-secondary); } &__shortcut { From b04600c3f7c88580cefbaea196322da1e991aa79 Mon Sep 17 00:00:00 2001 From: Kron1749 Date: Fri, 26 Jul 2024 11:46:52 +0300 Subject: [PATCH 05/18] ok_button_updated --- src/styles/neumorphism/datepicker.scss | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/src/styles/neumorphism/datepicker.scss b/src/styles/neumorphism/datepicker.scss index cd97c2ef6..cc26229ef 100644 --- a/src/styles/neumorphism/datepicker.scss +++ b/src/styles/neumorphism/datepicker.scss @@ -1,11 +1,19 @@ $neu-datepicker-header-label: #2A1820 !default; $neu-datepicker-btn-arrow: var(--s-color-base-content-tertiary) !default; $neu-datepicker-table-days: var(--s-color-base-content-secondary) !default; +$neu-datepicker-text-color-btn: var(--s-color-base-on-accent) !default; + $neu-datepicker-border-bottom: $neu-datepicker-btn-arrow !default; +$neu-datepicker-border-top: $neu-datepicker-btn-arrow !default; +$neu-datepicker-backgroun-color-btn: $neu-datepicker-btn-arrow !default; + $neu-datepicker-date-hover-background-color: var(--s-color-theme-accent) !default; $neu-datepicker-date-hover-color: #F4F0F1 !default; $neu-datepicker-backgroun-color: var(--s-color-utility-body) !default; -$neu-datepicker-box-shadow: 20px 20px 60px var(--s-shadow-color-dark), 1px 1px 10px var(--s-shadow-color-light), -10px -10px 30px rgba(255, 255, 255, 0.9) !default; + +$neu-datepicker-box-shadow: 20px 20px 60px var(--s-shadow-color-dark), 1px 1px 10px var(--s-shadow-color-light) inset, -10px -10px 30px rgba(255, 255, 255, 0.9) !default; +$neu-datepicker-box-shadow-btn:1px 1px 5px rgba(0, 0, 0, 0.05),-1px -1px 5px rgba(0, 0, 0, 0.05) !default; + @mixin date-picker-border-radius( $suffix: "big", @@ -221,7 +229,6 @@ $date-picker-padding: 8px; } .el-date-table td, -.el-picker-panel__link-btn, .el-time-panel__btn, .el-date-range-picker__time-header > .el-icon-arrow-right, .el-year-table td .cell, @@ -300,20 +307,28 @@ $date-picker-padding: 8px; } } .el-picker-panel__footer { - border-top-color: var(--s-color-base-background-hover); + box-shadow: $neu-datepicker-box-shadow; + background-color: $neu-datepicker-backgroun-color; + border-top-color: $neu-datepicker-border-top; border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; > .el-button { height: 32px; - border-radius: var(--s-border-radius-mini); + border-radius: 16px; &:hover, &:focus { color: var(--s-color-theme-accent); } + &.is-plain { + background-color: $neu-datepicker-backgroun-color-btn; + color: $neu-datepicker-text-color-btn; + box-shadow: $neu-datepicker-box-shadow-btn; + + // TODO what border color should be &:hover, &:focus { - border-color: var(--s-color-theme-accent); + border-color: $neu-datepicker-backgroun-color-btn; } } } From 6b702ee2db7008e23029ef623a4c8bd2ad5b2b79 Mon Sep 17 00:00:00 2001 From: Kron1749 Date: Fri, 26 Jul 2024 12:42:13 +0300 Subject: [PATCH 06/18] updated_datepicker_dates --- src/styles/neumorphism/datepicker.scss | 44 ++++++++++++++++++++------ 1 file changed, 34 insertions(+), 10 deletions(-) diff --git a/src/styles/neumorphism/datepicker.scss b/src/styles/neumorphism/datepicker.scss index cc26229ef..584a19159 100644 --- a/src/styles/neumorphism/datepicker.scss +++ b/src/styles/neumorphism/datepicker.scss @@ -5,14 +5,15 @@ $neu-datepicker-text-color-btn: var(--s-color-base-on-accent) !default; $neu-datepicker-border-bottom: $neu-datepicker-btn-arrow !default; $neu-datepicker-border-top: $neu-datepicker-btn-arrow !default; -$neu-datepicker-backgroun-color-btn: $neu-datepicker-btn-arrow !default; +$neu-datepicker-border-time-select: var(--s-color-base-border-secondary) !default; +$neu-datepicker-background-color-btn: $neu-datepicker-btn-arrow !default; $neu-datepicker-date-hover-background-color: var(--s-color-theme-accent) !default; $neu-datepicker-date-hover-color: #F4F0F1 !default; -$neu-datepicker-backgroun-color: var(--s-color-utility-body) !default; +$neu-datepicker-background-color: var(--s-color-utility-body) !default; $neu-datepicker-box-shadow: 20px 20px 60px var(--s-shadow-color-dark), 1px 1px 10px var(--s-shadow-color-light) inset, -10px -10px 30px rgba(255, 255, 255, 0.9) !default; -$neu-datepicker-box-shadow-btn:1px 1px 5px rgba(0, 0, 0, 0.05),-1px -1px 5px rgba(0, 0, 0, 0.05) !default; +$neu-datepicker-box-shadow-btn: 1px 1px 5px rgba(0, 0, 0, 0.05),-1px -1px 5px rgba(0, 0, 0, 0.05) !default; @mixin date-picker-border-radius( @@ -34,6 +35,19 @@ $neu-datepicker-box-shadow-btn:1px 1px 5px rgba(0, 0, 0, 0.05),-1px -1px 5px rgb $date-picker-padding: 8px; +.el-picker-panel__content { + &.el-date-picker__time-header { + &.el-input__inner { + padding: 6px 12px !important; + border: 1px solid $neu-datepicker-border-time-select !important; + background-color: $neu-datepicker-background-color !important; + border-radius: 8px !important; + } + } +} + + + .s-date-picker { font-family: var(--s-font-family-default); width: 100%; @@ -216,11 +230,11 @@ $date-picker-padding: 8px; } .el-picker-panel { box-shadow: $neu-datepicker-box-shadow; - background-color: $neu-datepicker-backgroun-color; + background-color: $neu-datepicker-background-color; border-radius: 16px; @include with-popper-arrows; &__sidebar { - background-color: $neu-datepicker-backgroun-color; + background-color: $neu-datepicker-background-color; border-right-color: var(--s-color-base-border-secondary); } &__shortcut { @@ -236,7 +250,6 @@ $date-picker-padding: 8px; color: var(--s-color-base-content-primary); } - .el-year-table td.today .cell, .el-year-table td .cell:hover, .el-year-table td.current:not(.disabled) .cell, @@ -262,7 +275,6 @@ $date-picker-padding: 8px; .el-picker-panel { border-color: var(--s-color-base-background-hover); - .el-picker-panel__content { .el-date-table { td { &.today span { @@ -308,7 +320,7 @@ $date-picker-padding: 8px; } .el-picker-panel__footer { box-shadow: $neu-datepicker-box-shadow; - background-color: $neu-datepicker-backgroun-color; + background-color: $neu-datepicker-background-color; border-top-color: $neu-datepicker-border-top; border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; @@ -321,14 +333,14 @@ $date-picker-padding: 8px; } &.is-plain { - background-color: $neu-datepicker-backgroun-color-btn; + background-color: $neu-datepicker-background-color-btn; color: $neu-datepicker-text-color-btn; box-shadow: $neu-datepicker-box-shadow-btn; // TODO what border color should be &:hover, &:focus { - border-color: $neu-datepicker-backgroun-color-btn; + border-color: $neu-datepicker-background-color-btn; } } } @@ -336,6 +348,18 @@ $date-picker-padding: 8px; div[x-arrow].popper__arrow { border-bottom-color: var(--s-color-base-background-hover); } + +.el-input--small { + .el-input__inner { + padding: 6px 12px; + border: 1px solid $neu-datepicker-border-time-select; + background-color: $neu-datepicker-background-color; + border-radius: 8px; + &:hover { + cursor: pointer; + border-color: $neu-datepicker-date-hover-background-color; + } + } } .el-time-panel { border-color: var(--s-color-base-background-hover); From 9cc81e2fe2e673cba5a9f1bf3467c5f5135ed00a Mon Sep 17 00:00:00 2001 From: Kron1749 Date: Fri, 26 Jul 2024 17:09:07 +0300 Subject: [PATCH 07/18] date_range_updated --- src/styles/neumorphism/datepicker.scss | 67 ++++++++++++++++---------- 1 file changed, 42 insertions(+), 25 deletions(-) diff --git a/src/styles/neumorphism/datepicker.scss b/src/styles/neumorphism/datepicker.scss index 584a19159..f24446d08 100644 --- a/src/styles/neumorphism/datepicker.scss +++ b/src/styles/neumorphism/datepicker.scss @@ -35,18 +35,6 @@ $neu-datepicker-box-shadow-btn: 1px 1px 5px rgba(0, 0, 0, 0.05),-1px -1px 5px rg $date-picker-padding: 8px; -.el-picker-panel__content { - &.el-date-picker__time-header { - &.el-input__inner { - padding: 6px 12px !important; - border: 1px solid $neu-datepicker-border-time-select !important; - background-color: $neu-datepicker-background-color !important; - border-radius: 8px !important; - } - } -} - - .s-date-picker { font-family: var(--s-font-family-default); @@ -243,7 +231,6 @@ $date-picker-padding: 8px; } .el-date-table td, -.el-time-panel__btn, .el-date-range-picker__time-header > .el-icon-arrow-right, .el-year-table td .cell, .el-month-table td .cell { @@ -260,6 +247,7 @@ $date-picker-padding: 8px; color: var(--s-color-theme-accent); } + // TODO figure out what with hover .el-date-picker__header-label { color: $neu-datepicker-header-label; @@ -291,9 +279,8 @@ $date-picker-padding: 8px; &.end-date, &.available:hover { span { - width: 28px; - height: 28px; - padding: 2px; + width: 24px; + height: 24px; border-radius: 14px; background-color: var(--s-color-theme-accent); color: var(--s-color-utility-surface); @@ -333,13 +320,16 @@ $date-picker-padding: 8px; } &.is-plain { + border-color: none; background-color: $neu-datepicker-background-color-btn; color: $neu-datepicker-text-color-btn; box-shadow: $neu-datepicker-box-shadow-btn; + border-radius: 16px; // TODO what border color should be &:hover, &:focus { + color: $neu-datepicker-text-color-btn; border-color: $neu-datepicker-background-color-btn; } } @@ -355,16 +345,27 @@ $date-picker-padding: 8px; border: 1px solid $neu-datepicker-border-time-select; background-color: $neu-datepicker-background-color; border-radius: 8px; + + &:focus, + &.is-active, &:hover { - cursor: pointer; border-color: $neu-datepicker-date-hover-background-color; } + &:hover{ + cursor: pointer; + } + &::placeholder { + color: var(--s-color-base-content-primary); + } } } .el-time-panel { border-color: var(--s-color-base-background-hover); + background-color: var(--s-color-base-border-primary); + border-radius: 16px; + box-shadow: $neu-datepicker-box-shadow; .el-time-panel__footer { - border-top-color: var(--s-color-base-background-hover); + border-top-color: $neu-datepicker-border-top; .confirm { color: var(--s-color-theme-accent); } @@ -374,14 +375,25 @@ $date-picker-padding: 8px; color: var(--s-color-base-content-primary); } &:hover:not(.disabled):not(.active) { - background-color: var(--s-color-base-background); + background: none; + color: var(--s-color-theme-accent); } } .el-time-panel__content { &::after, &::before { - border-top-color: var(--s-color-base-background-hover); - border-bottom-color: var(--s-color-base-background-hover); + border-top-color: $neu-datepicker-border-top; + border-bottom-color: $neu-datepicker-border-bottom; + } + } + .el-time-panel__btn { + &.cancel { + color: var(--s-color-base-content-primary); + text-transform: uppercase; + font-weight: 800; + &:hover { + color: var(--s-color-theme-accent); + } } } } @@ -394,17 +406,22 @@ $date-picker-padding: 8px; } } .el-month-table td.in-range div { - background-color: var(--s-color-base-background-hover); + background-color: var(--s-color-base-border-secondary); &:hover { - background-color: var(--s-color-base-background-hover); + background-color: var(--s-color-base-border-secondary); } } .el-date-table td.in-range div { - background-color: var(--s-color-base-background-hover); + background-color: var(--s-color-base-border-secondary); &:hover { - background-color: var(--s-color-base-background-hover); + background-color: var(--s-color-base-border-secondary); } } + +.el-date-table td.start-date div { + margin: none; +} + .el-date-range-picker__content.is-left { border-right-color: var(--s-color-base-background-hover); } From f2bd663bfe416846ac52c735ad287b7df785ba4a Mon Sep 17 00:00:00 2001 From: Kron1749 Date: Mon, 29 Jul 2024 10:14:57 +0300 Subject: [PATCH 08/18] updated_for_dark_theme --- src/styles/neumorphism/datepicker.scss | 59 +++++++++++++++++--------- 1 file changed, 39 insertions(+), 20 deletions(-) diff --git a/src/styles/neumorphism/datepicker.scss b/src/styles/neumorphism/datepicker.scss index f24446d08..e57b46fad 100644 --- a/src/styles/neumorphism/datepicker.scss +++ b/src/styles/neumorphism/datepicker.scss @@ -1,4 +1,4 @@ -$neu-datepicker-header-label: #2A1820 !default; +$neu-datepicker-header-label: var(--s-color-base-content-primary) !default; $neu-datepicker-btn-arrow: var(--s-color-base-content-tertiary) !default; $neu-datepicker-table-days: var(--s-color-base-content-secondary) !default; $neu-datepicker-text-color-btn: var(--s-color-base-on-accent) !default; @@ -8,13 +8,32 @@ $neu-datepicker-border-top: $neu-datepicker-btn-arrow !default; $neu-datepicker-border-time-select: var(--s-color-base-border-secondary) !default; $neu-datepicker-background-color-btn: $neu-datepicker-btn-arrow !default; -$neu-datepicker-date-hover-background-color: var(--s-color-theme-accent) !default; -$neu-datepicker-date-hover-color: #F4F0F1 !default; +$neu-datepicker-date-hover-background: var(--s-color-theme-accent) !default; +$neu-datepicker-date-hover-background-dark: var(--s-color-theme-accent-hover) !default; + +$neu-datepicker-available-selected-hover: var(--s-color-utility-surface) !default; +$neu-datepicker-available-selected-hover-dark: var(--s-color-utility-body--dark) !default; +$neu-datepicker-date-hover-color: var(--s-color-base-background-hover) !default; + $neu-datepicker-background-color: var(--s-color-utility-body) !default; +$neu-datepicker-background-color-dark: var(--s-color-base-border-primary--dark) !default; -$neu-datepicker-box-shadow: 20px 20px 60px var(--s-shadow-color-dark), 1px 1px 10px var(--s-shadow-color-light) inset, -10px -10px 30px rgba(255, 255, 255, 0.9) !default; -$neu-datepicker-box-shadow-btn: 1px 1px 5px rgba(0, 0, 0, 0.05),-1px -1px 5px rgba(0, 0, 0, 0.05) !default; +$neu-datepicker-box-shadow-light: 20px 20px 60px var(--s-shadow-color-dark), 1px 1px 10px var(--s-shadow-color-light) inset, -10px -10px 30px rgba(255, 255, 255, 0.9) !default; +$neu-datepicker-box-shadow-btn: 1px 1px 5px rgba(0, 0, 0, 0.05), -1px -1px 5px rgba(0, 0, 0, 0.05) !default; +$neu-datepicker-box-shadow-dark: 20px 20px 60px rgba(73, 32, 103, 1), 1px 1px 10px rgba(155, 111, 165, 0.1) inset, -10px -10px 30px rgba(155, 111, 165, 0.25); +:root { + --neu-datepicker-box-shadow: #{$neu-datepicker-box-shadow-light}; + --neu-background-color: #{$neu-datepicker-background-color}; + --neu-datepicker-available-selected-hover-color: #{$neu-datepicker-available-selected-hover}; + --neu-datepicker-date-hover-background-color: #{$neu-datepicker-date-hover-background}; +} +[design-system-theme="dark"] { + --neu-datepicker-box-shadow: #{$neu-datepicker-box-shadow-dark}; + --neu-background-color: #{$neu-datepicker-background-color-dark}; + --neu-datepicker-available-selected-hover-color: #{$neu-datepicker-available-selected-hover-dark}; + --neu-datepicker-date-hover-background-color: #{$neu-datepicker-date-hover-background-dark}; +} @mixin date-picker-border-radius( $suffix: "big", @@ -217,13 +236,13 @@ $date-picker-padding: 8px; } } .el-picker-panel { - box-shadow: $neu-datepicker-box-shadow; - background-color: $neu-datepicker-background-color; - border-radius: 16px; + box-shadow: var(--neu-datepicker-box-shadow); + background-color: var(--neu-background-color); + border-radius: var(--s-border-radius-big); @include with-popper-arrows; &__sidebar { background-color: $neu-datepicker-background-color; - border-right-color: var(--s-color-base-border-secondary); + border-right-color: var(--s-color-base-content-tertiary); } &__shortcut { color: var(--s-color-base-content-primary); @@ -231,7 +250,6 @@ $date-picker-padding: 8px; } .el-date-table td, -.el-date-range-picker__time-header > .el-icon-arrow-right, .el-year-table td .cell, .el-month-table td .cell { color: var(--s-color-base-content-primary); @@ -253,7 +271,8 @@ $date-picker-padding: 8px; color: $neu-datepicker-header-label; } -.el-picker-panel__icon-btn { +.el-picker-panel__icon-btn, +.el-date-range-picker__time-header >.el-icon-arrow-right { color: $neu-datepicker-btn-arrow; } @@ -282,8 +301,8 @@ $date-picker-padding: 8px; width: 24px; height: 24px; border-radius: 14px; - background-color: var(--s-color-theme-accent); - color: var(--s-color-utility-surface); + background-color: var(--neu-datepicker-date-hover-background-color); + color: var(--neu-datepicker-available-selected-hover-color); // Update this } } &.selected:hover, @@ -306,14 +325,14 @@ $date-picker-padding: 8px; } } .el-picker-panel__footer { - box-shadow: $neu-datepicker-box-shadow; + box-shadow: var(--neu-datepicker-box-shadow); background-color: $neu-datepicker-background-color; border-top-color: $neu-datepicker-border-top; border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; > .el-button { height: 32px; - border-radius: 16px; + border-radius: var(--s-border-radius-big); &:hover, &:focus { color: var(--s-color-theme-accent); @@ -324,7 +343,7 @@ $date-picker-padding: 8px; background-color: $neu-datepicker-background-color-btn; color: $neu-datepicker-text-color-btn; box-shadow: $neu-datepicker-box-shadow-btn; - border-radius: 16px; + border-radius: var(--s-border-radius-big); // TODO what border color should be &:hover, @@ -349,7 +368,7 @@ $date-picker-padding: 8px; &:focus, &.is-active, &:hover { - border-color: $neu-datepicker-date-hover-background-color; + border-color: var(--neu-datepicker-date-hover-background-color); } &:hover{ cursor: pointer; @@ -362,8 +381,8 @@ $date-picker-padding: 8px; .el-time-panel { border-color: var(--s-color-base-background-hover); background-color: var(--s-color-base-border-primary); - border-radius: 16px; - box-shadow: $neu-datepicker-box-shadow; + border-radius: var(--s-border-radius-big); + box-shadow: var(--neu-datepicker-box-shadow); .el-time-panel__footer { border-top-color: $neu-datepicker-border-top; .confirm { @@ -423,5 +442,5 @@ $date-picker-padding: 8px; } .el-date-range-picker__content.is-left { - border-right-color: var(--s-color-base-background-hover); + border-right-color: var(--s-color-base-content-tertiary); } From 0ecb419f3c226f12d8b9ae224e701298146d31c9 Mon Sep 17 00:00:00 2001 From: Kron1749 Date: Mon, 29 Jul 2024 10:51:49 +0300 Subject: [PATCH 09/18] background_selected_dates_updated --- src/styles/neumorphism/datepicker.scss | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/styles/neumorphism/datepicker.scss b/src/styles/neumorphism/datepicker.scss index e57b46fad..fa95aa752 100644 --- a/src/styles/neumorphism/datepicker.scss +++ b/src/styles/neumorphism/datepicker.scss @@ -1,3 +1,5 @@ +// TODO figure out with disabled + $neu-datepicker-header-label: var(--s-color-base-content-primary) !default; $neu-datepicker-btn-arrow: var(--s-color-base-content-tertiary) !default; $neu-datepicker-table-days: var(--s-color-base-content-secondary) !default; @@ -262,7 +264,7 @@ $date-picker-padding: 8px; .el-month-table td.current:not(.disabled) .cell, .el-month-table td .cell:hover, .el-picker-panel__shortcut:hover { - color: var(--s-color-theme-accent); + color: var(--neu-datepicker-date-hover-background-color); } @@ -271,6 +273,12 @@ $date-picker-padding: 8px; color: $neu-datepicker-header-label; } +.el-date-picker { + &__header--bordered { + border-bottom: 1px solid $neu-datepicker-btn-arrow; + } +} + .el-picker-panel__icon-btn, .el-date-range-picker__time-header >.el-icon-arrow-right { color: $neu-datepicker-btn-arrow; @@ -309,6 +317,11 @@ $date-picker-padding: 8px; &.today span:hover { color: var(--s-color-utility-surface); } + &.selected { + div { + background-color: transparent; + } + } } th { border-bottom-color: $neu-datepicker-border-bottom; From 284b3664e982db225c7d58ad5c42170f24b2604f Mon Sep 17 00:00:00 2001 From: Kron1749 Date: Mon, 29 Jul 2024 11:33:37 +0300 Subject: [PATCH 10/18] upgraded_borders_colors --- src/styles/neumorphism/datepicker.scss | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/styles/neumorphism/datepicker.scss b/src/styles/neumorphism/datepicker.scss index fa95aa752..558d6e49e 100644 --- a/src/styles/neumorphism/datepicker.scss +++ b/src/styles/neumorphism/datepicker.scss @@ -4,6 +4,7 @@ $neu-datepicker-header-label: var(--s-color-base-content-primary) !default; $neu-datepicker-btn-arrow: var(--s-color-base-content-tertiary) !default; $neu-datepicker-table-days: var(--s-color-base-content-secondary) !default; $neu-datepicker-text-color-btn: var(--s-color-base-on-accent) !default; +$neu-datepicker-date-select-color: var(--s-color-base-content-primary) !default; $neu-datepicker-border-bottom: $neu-datepicker-btn-arrow !default; $neu-datepicker-border-top: $neu-datepicker-btn-arrow !default; @@ -284,6 +285,11 @@ $date-picker-padding: 8px; color: $neu-datepicker-btn-arrow; } +.el-date-range-picker__time-header, +.el-date-picker__time-header { + border-bottom-color: $neu-datepicker-border-bottom; +} + .el-date-table th { color: $neu-datepicker-table-days; } @@ -309,8 +315,8 @@ $date-picker-padding: 8px; width: 24px; height: 24px; border-radius: 14px; - background-color: var(--neu-datepicker-date-hover-background-color); - color: var(--neu-datepicker-available-selected-hover-color); // Update this + background-color: var(--neu-datepicker-date-hover-background-color) !important; + color: var(--neu-datepicker-available-selected-hover-color) !important; } } &.selected:hover, @@ -331,7 +337,7 @@ $date-picker-padding: 8px; &.start-date, &.end-date { .cell { - background-color: var(--s-color-theme-accent); + background-color: var(--neu-datepicker-date-hover-background-color); color: var(--s-color-utility-surface); } } @@ -403,8 +409,9 @@ $date-picker-padding: 8px; } } .el-time-spinner__item { + color: $neu-datepicker-date-select-color; &.active:not(.disabled) { - color: var(--s-color-base-content-primary); + color: $neu-datepicker-date-select-color; } &:hover:not(.disabled):not(.active) { background: none; @@ -455,5 +462,8 @@ $date-picker-padding: 8px; } .el-date-range-picker__content.is-left { - border-right-color: var(--s-color-base-content-tertiary); + border-right-color: $neu-datepicker-border-bottom; } +.el-date-range-picker__header { + border-bottom: 1px solid $neu-datepicker-border-bottom; +} \ No newline at end of file From 62ec4f4c5531b21354619907ccff494217f9e1a9 Mon Sep 17 00:00:00 2001 From: Kron1749 Date: Mon, 29 Jul 2024 12:00:17 +0300 Subject: [PATCH 11/18] time_r --- src/styles/neumorphism/datepicker.scss | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/styles/neumorphism/datepicker.scss b/src/styles/neumorphism/datepicker.scss index 558d6e49e..876f32dc2 100644 --- a/src/styles/neumorphism/datepicker.scss +++ b/src/styles/neumorphism/datepicker.scss @@ -4,7 +4,8 @@ $neu-datepicker-header-label: var(--s-color-base-content-primary) !default; $neu-datepicker-btn-arrow: var(--s-color-base-content-tertiary) !default; $neu-datepicker-table-days: var(--s-color-base-content-secondary) !default; $neu-datepicker-text-color-btn: var(--s-color-base-on-accent) !default; -$neu-datepicker-date-select-color: var(--s-color-base-content-primary) !default; +$neu-datepicker-date-select: var(--s-color-base-content-primary) !default; +$neu-datepicker-date-select-dark: var(--s-color-base-content-primary--dark) !default; $neu-datepicker-border-bottom: $neu-datepicker-btn-arrow !default; $neu-datepicker-border-top: $neu-datepicker-btn-arrow !default; @@ -29,6 +30,7 @@ $neu-datepicker-box-shadow-dark: 20px 20px 60px rgba(73, 32, 103, 1), 1px 1px 10 --neu-background-color: #{$neu-datepicker-background-color}; --neu-datepicker-available-selected-hover-color: #{$neu-datepicker-available-selected-hover}; --neu-datepicker-date-hover-background-color: #{$neu-datepicker-date-hover-background}; + --neu-datepicker-date-select-color: #{$neu-datepicker-date-select}; } [design-system-theme="dark"] { @@ -36,6 +38,7 @@ $neu-datepicker-box-shadow-dark: 20px 20px 60px rgba(73, 32, 103, 1), 1px 1px 10 --neu-background-color: #{$neu-datepicker-background-color-dark}; --neu-datepicker-available-selected-hover-color: #{$neu-datepicker-available-selected-hover-dark}; --neu-datepicker-date-hover-background-color: #{$neu-datepicker-date-hover-background-dark}; + --neu-datepicker-date-select-color: #{neu-datepicker-date-select-dark}; } @mixin date-picker-border-radius( @@ -239,6 +242,7 @@ $date-picker-padding: 8px; } } .el-picker-panel { + color: var(--neu-datepicker-date-select-color); box-shadow: var(--neu-datepicker-box-shadow); background-color: var(--neu-background-color); border-radius: var(--s-border-radius-big); @@ -330,7 +334,7 @@ $date-picker-padding: 8px; } } th { - border-bottom-color: $neu-datepicker-border-bottom; + border-bottom-color: $neu-datepicker-border-bottom !important; } } .el-month-table td { @@ -381,7 +385,7 @@ $date-picker-padding: 8px; .el-input__inner { padding: 6px 12px; border: 1px solid $neu-datepicker-border-time-select; - background-color: $neu-datepicker-background-color; + background-color: var(--neu-background-color); border-radius: 8px; &:focus, @@ -409,9 +413,9 @@ $date-picker-padding: 8px; } } .el-time-spinner__item { - color: $neu-datepicker-date-select-color; + color: var(--neu-datepicker-date-select-color); &.active:not(.disabled) { - color: $neu-datepicker-date-select-color; + color: var(--neu-datepicker-date-select-color); } &:hover:not(.disabled):not(.active) { background: none; @@ -463,7 +467,4 @@ $date-picker-padding: 8px; .el-date-range-picker__content.is-left { border-right-color: $neu-datepicker-border-bottom; -} -.el-date-range-picker__header { - border-bottom: 1px solid $neu-datepicker-border-bottom; } \ No newline at end of file From 13e5e6b851e3b8688db1044688b737d62ab17c1e Mon Sep 17 00:00:00 2001 From: Kron1749 Date: Mon, 29 Jul 2024 12:11:34 +0300 Subject: [PATCH 12/18] box_shadow_and_background_color_updated --- src/styles/neumorphism/datepicker.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/styles/neumorphism/datepicker.scss b/src/styles/neumorphism/datepicker.scss index 876f32dc2..dfc9f909a 100644 --- a/src/styles/neumorphism/datepicker.scss +++ b/src/styles/neumorphism/datepicker.scss @@ -24,7 +24,7 @@ $neu-datepicker-background-color-dark: var(--s-color-base-border-primary--dark) $neu-datepicker-box-shadow-light: 20px 20px 60px var(--s-shadow-color-dark), 1px 1px 10px var(--s-shadow-color-light) inset, -10px -10px 30px rgba(255, 255, 255, 0.9) !default; $neu-datepicker-box-shadow-btn: 1px 1px 5px rgba(0, 0, 0, 0.05), -1px -1px 5px rgba(0, 0, 0, 0.05) !default; -$neu-datepicker-box-shadow-dark: 20px 20px 60px rgba(73, 32, 103, 1), 1px 1px 10px rgba(155, 111, 165, 0.1) inset, -10px -10px 30px rgba(155, 111, 165, 0.25); +$neu-datepicker-box-shadow-dark: 20px 20px 60px rgba(73, 32, 103, 1), 1px 1px 10px var(--s-shadow-color-dark-light--dark) inset, -10px -10px 30px var(--s-shadow-color-dark-lighten--dark); :root { --neu-datepicker-box-shadow: #{$neu-datepicker-box-shadow-light}; --neu-background-color: #{$neu-datepicker-background-color}; @@ -349,11 +349,12 @@ $date-picker-padding: 8px; } .el-picker-panel__footer { box-shadow: var(--neu-datepicker-box-shadow); - background-color: $neu-datepicker-background-color; - border-top-color: $neu-datepicker-border-top; + background-color: var(--neu-background-color); + border-top-color: $neu-datepicker-border-top !important; border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; > .el-button { + text-transform: uppercase; height: 32px; border-radius: var(--s-border-radius-big); &:hover, From 7c8a72a048334bee4c1e4fe454af53ff107b95af Mon Sep 17 00:00:00 2001 From: Kron1749 Date: Mon, 29 Jul 2024 12:38:40 +0300 Subject: [PATCH 13/18] shadows_for_button_updated --- src/styles/neumorphism/datepicker.scss | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/src/styles/neumorphism/datepicker.scss b/src/styles/neumorphism/datepicker.scss index dfc9f909a..e4aa04343 100644 --- a/src/styles/neumorphism/datepicker.scss +++ b/src/styles/neumorphism/datepicker.scss @@ -1,5 +1,4 @@ // TODO figure out with disabled - $neu-datepicker-header-label: var(--s-color-base-content-primary) !default; $neu-datepicker-btn-arrow: var(--s-color-base-content-tertiary) !default; $neu-datepicker-table-days: var(--s-color-base-content-secondary) !default; @@ -23,18 +22,23 @@ $neu-datepicker-background-color: var(--s-color-utility-body) !default; $neu-datepicker-background-color-dark: var(--s-color-base-border-primary--dark) !default; $neu-datepicker-box-shadow-light: 20px 20px 60px var(--s-shadow-color-dark), 1px 1px 10px var(--s-shadow-color-light) inset, -10px -10px 30px rgba(255, 255, 255, 0.9) !default; -$neu-datepicker-box-shadow-btn: 1px 1px 5px rgba(0, 0, 0, 0.05), -1px -1px 5px rgba(0, 0, 0, 0.05) !default; -$neu-datepicker-box-shadow-dark: 20px 20px 60px rgba(73, 32, 103, 1), 1px 1px 10px var(--s-shadow-color-dark-light--dark) inset, -10px -10px 30px var(--s-shadow-color-dark-lighten--dark); +$neu-datepicker-box-shadow-dark: 20px 20px 60px rgba(73, 32, 103, 1), 1px 1px 10px var(--s-shadow-color-dark-light--dark) inset, -10px -10px 30px var(--s-shadow-color-dark-lighten--dark) !default; +$neu-datepicker-box-shadow-btn-light: 1px 1px 5px rgba(0, 0, 0, 0.05), -1px -1px 5px rgba(0, 0, 0, 0.05) !default; +$neu-datepicker-box-shadow-btn-dark: 1px 1px 5px rgba(0, 0, 0, 0.05), -1px -1px 5px rgba(0, 0, 0, 0.05) !default; + :root { --neu-datepicker-box-shadow: #{$neu-datepicker-box-shadow-light}; + --neu-datepicker-box-shadow-btn: #{$neu-datepicker-box-shadow-btn-light}; --neu-background-color: #{$neu-datepicker-background-color}; --neu-datepicker-available-selected-hover-color: #{$neu-datepicker-available-selected-hover}; --neu-datepicker-date-hover-background-color: #{$neu-datepicker-date-hover-background}; --neu-datepicker-date-select-color: #{$neu-datepicker-date-select}; + } [design-system-theme="dark"] { --neu-datepicker-box-shadow: #{$neu-datepicker-box-shadow-dark}; + --neu-datepicker-box-shadow-btn: #{$neu-datepicker-box-shadow-btn-dark}; --neu-background-color: #{$neu-datepicker-background-color-dark}; --neu-datepicker-available-selected-hover-color: #{$neu-datepicker-available-selected-hover-dark}; --neu-datepicker-date-hover-background-color: #{$neu-datepicker-date-hover-background-dark}; @@ -361,12 +365,15 @@ $date-picker-padding: 8px; &:focus { color: var(--s-color-theme-accent); } + &.is-disabled.is-plain { + background-color: var(--s-color-base-content-tertiary); + } &.is-plain { - border-color: none; + border-color: transparent; background-color: $neu-datepicker-background-color-btn; color: $neu-datepicker-text-color-btn; - box-shadow: $neu-datepicker-box-shadow-btn; + box-shadow: var(--neu-datepicker-box-shadow-btn); border-radius: var(--s-border-radius-big); // TODO what border color should be @@ -374,6 +381,10 @@ $date-picker-padding: 8px; &:focus { color: $neu-datepicker-text-color-btn; border-color: $neu-datepicker-background-color-btn; + [design-system-theme="dark"] & { + border-color: var(--s-color-theme-accent-hover); + } + } } } From 7e81b0cdad7e3fe44387316697b4e0867d43c357 Mon Sep 17 00:00:00 2001 From: Kron1749 Date: Mon, 29 Jul 2024 13:11:31 +0300 Subject: [PATCH 14/18] updated_color_for_weekend --- src/styles/neumorphism/datepicker.scss | 30 +++++++++++++++++++++++--- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/src/styles/neumorphism/datepicker.scss b/src/styles/neumorphism/datepicker.scss index e4aa04343..3c7fc2c6e 100644 --- a/src/styles/neumorphism/datepicker.scss +++ b/src/styles/neumorphism/datepicker.scss @@ -1,13 +1,16 @@ -// TODO figure out with disabled +// TODO figure out with disabled var(--neu-background-color) $neu-datepicker-header-label: var(--s-color-base-content-primary) !default; $neu-datepicker-btn-arrow: var(--s-color-base-content-tertiary) !default; $neu-datepicker-table-days: var(--s-color-base-content-secondary) !default; $neu-datepicker-text-color-btn: var(--s-color-base-on-accent) !default; $neu-datepicker-date-select: var(--s-color-base-content-primary) !default; $neu-datepicker-date-select-dark: var(--s-color-base-content-primary--dark) !default; +$neu-datepicker-unavailable-date: var(--s-color-base-content-tertiary) !default; +$neu-datepicker-weekends-day: var(--s-color-base-content-secondary) !default; $neu-datepicker-border-bottom: $neu-datepicker-btn-arrow !default; $neu-datepicker-border-top: $neu-datepicker-btn-arrow !default; +$neu-datepicker-border-right: $neu-datepicker-btn-arrow !default; $neu-datepicker-border-time-select: var(--s-color-base-border-secondary) !default; $neu-datepicker-background-color-btn: $neu-datepicker-btn-arrow !default; @@ -252,8 +255,8 @@ $date-picker-padding: 8px; border-radius: var(--s-border-radius-big); @include with-popper-arrows; &__sidebar { - background-color: $neu-datepicker-background-color; - border-right-color: var(--s-color-base-content-tertiary); + background-color: var(--neu-background-color); + border-right-color: $neu-datepicker-border-right; } &__shortcut { color: var(--s-color-base-content-primary); @@ -303,6 +306,20 @@ $date-picker-padding: 8px; } .el-picker-panel { + .el-picker-panel__content { + .el-date-table { + td:nth-child(7), // Targeting Saturday + td:nth-child(1) { // Targeting Sunday + color: $neu-datepicker-weekends-day !important; + } + td { + &.prev-month, + &.next-month { + color: var(--s-color-base-content-tertiary); + } + } + } + } border-color: var(--s-color-base-background-hover); .el-date-table { td { @@ -336,6 +353,12 @@ $date-picker-padding: 8px; background-color: transparent; } } + &.disabled { + div { + background-color: transparent; + color: $neu-datepicker-unavailable-date; + } + } } th { border-bottom-color: $neu-datepicker-border-bottom !important; @@ -460,6 +483,7 @@ $date-picker-padding: 8px; } } } + .el-month-table td.in-range div { background-color: var(--s-color-base-border-secondary); &:hover { From 0f94a1374d0967cf061b4b3b23c55297e3593adf Mon Sep 17 00:00:00 2001 From: Kron1749 Date: Mon, 29 Jul 2024 13:26:27 +0300 Subject: [PATCH 15/18] updated_with_disabled_arrows --- src/styles/neumorphism/datepicker.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/styles/neumorphism/datepicker.scss b/src/styles/neumorphism/datepicker.scss index 3c7fc2c6e..dceaab1e9 100644 --- a/src/styles/neumorphism/datepicker.scss +++ b/src/styles/neumorphism/datepicker.scss @@ -1,4 +1,3 @@ -// TODO figure out with disabled var(--neu-background-color) $neu-datepicker-header-label: var(--s-color-base-content-primary) !default; $neu-datepicker-btn-arrow: var(--s-color-base-content-tertiary) !default; $neu-datepicker-table-days: var(--s-color-base-content-secondary) !default; @@ -36,7 +35,6 @@ $neu-datepicker-box-shadow-btn-dark: 1px 1px 5px rgba(0, 0, 0, 0.05), -1px -1px --neu-datepicker-available-selected-hover-color: #{$neu-datepicker-available-selected-hover}; --neu-datepicker-date-hover-background-color: #{$neu-datepicker-date-hover-background}; --neu-datepicker-date-select-color: #{$neu-datepicker-date-select}; - } [design-system-theme="dark"] { @@ -292,10 +290,16 @@ $date-picker-padding: 8px; } .el-picker-panel__icon-btn, -.el-date-range-picker__time-header >.el-icon-arrow-right { +.el-date-range-picker__time-header>.el-icon-arrow-right { color: $neu-datepicker-btn-arrow; } +.el-picker-panel__icon-btn { + &.is-disabled { + color: var(--s-color-base-content-tertiary); + } +} + .el-date-range-picker__time-header, .el-date-picker__time-header { border-bottom-color: $neu-datepicker-border-bottom; From b3fa374b91d9d551efcad363ccfa7f1025e034ab Mon Sep 17 00:00:00 2001 From: Kron1749 Date: Mon, 29 Jul 2024 15:06:00 +0300 Subject: [PATCH 16/18] updated_naming_borders --- src/styles/neumorphism/datepicker.scss | 172 ++++++++++++++----------- 1 file changed, 94 insertions(+), 78 deletions(-) diff --git a/src/styles/neumorphism/datepicker.scss b/src/styles/neumorphism/datepicker.scss index dceaab1e9..88e17e537 100644 --- a/src/styles/neumorphism/datepicker.scss +++ b/src/styles/neumorphism/datepicker.scss @@ -1,36 +1,25 @@ +// General Colors $neu-datepicker-header-label: var(--s-color-base-content-primary) !default; $neu-datepicker-btn-arrow: var(--s-color-base-content-tertiary) !default; $neu-datepicker-table-days: var(--s-color-base-content-secondary) !default; $neu-datepicker-text-color-btn: var(--s-color-base-on-accent) !default; $neu-datepicker-date-select: var(--s-color-base-content-primary) !default; $neu-datepicker-date-select-dark: var(--s-color-base-content-primary--dark) !default; -$neu-datepicker-unavailable-date: var(--s-color-base-content-tertiary) !default; +$neu-datepicker-disabled-date: var(--s-color-base-content-tertiary) !default; $neu-datepicker-weekends-day: var(--s-color-base-content-secondary) !default; -$neu-datepicker-border-bottom: $neu-datepicker-btn-arrow !default; -$neu-datepicker-border-top: $neu-datepicker-btn-arrow !default; -$neu-datepicker-border-right: $neu-datepicker-btn-arrow !default; -$neu-datepicker-border-time-select: var(--s-color-base-border-secondary) !default; -$neu-datepicker-background-color-btn: $neu-datepicker-btn-arrow !default; - +// Hover and Selected Colors $neu-datepicker-date-hover-background: var(--s-color-theme-accent) !default; $neu-datepicker-date-hover-background-dark: var(--s-color-theme-accent-hover) !default; - $neu-datepicker-available-selected-hover: var(--s-color-utility-surface) !default; $neu-datepicker-available-selected-hover-dark: var(--s-color-utility-body--dark) !default; $neu-datepicker-date-hover-color: var(--s-color-base-background-hover) !default; +// Background Colors $neu-datepicker-background-color: var(--s-color-utility-body) !default; $neu-datepicker-background-color-dark: var(--s-color-base-border-primary--dark) !default; -$neu-datepicker-box-shadow-light: 20px 20px 60px var(--s-shadow-color-dark), 1px 1px 10px var(--s-shadow-color-light) inset, -10px -10px 30px rgba(255, 255, 255, 0.9) !default; -$neu-datepicker-box-shadow-dark: 20px 20px 60px rgba(73, 32, 103, 1), 1px 1px 10px var(--s-shadow-color-dark-light--dark) inset, -10px -10px 30px var(--s-shadow-color-dark-lighten--dark) !default; -$neu-datepicker-box-shadow-btn-light: 1px 1px 5px rgba(0, 0, 0, 0.05), -1px -1px 5px rgba(0, 0, 0, 0.05) !default; -$neu-datepicker-box-shadow-btn-dark: 1px 1px 5px rgba(0, 0, 0, 0.05), -1px -1px 5px rgba(0, 0, 0, 0.05) !default; - :root { - --neu-datepicker-box-shadow: #{$neu-datepicker-box-shadow-light}; - --neu-datepicker-box-shadow-btn: #{$neu-datepicker-box-shadow-btn-light}; --neu-background-color: #{$neu-datepicker-background-color}; --neu-datepicker-available-selected-hover-color: #{$neu-datepicker-available-selected-hover}; --neu-datepicker-date-hover-background-color: #{$neu-datepicker-date-hover-background}; @@ -38,24 +27,45 @@ $neu-datepicker-box-shadow-btn-dark: 1px 1px 5px rgba(0, 0, 0, 0.05), -1px -1px } [design-system-theme="dark"] { - --neu-datepicker-box-shadow: #{$neu-datepicker-box-shadow-dark}; - --neu-datepicker-box-shadow-btn: #{$neu-datepicker-box-shadow-btn-dark}; --neu-background-color: #{$neu-datepicker-background-color-dark}; --neu-datepicker-available-selected-hover-color: #{$neu-datepicker-available-selected-hover-dark}; --neu-datepicker-date-hover-background-color: #{$neu-datepicker-date-hover-background-dark}; --neu-datepicker-date-select-color: #{neu-datepicker-date-select-dark}; } +// Borders +$neu-datepicker-border-main: var(--s-color-base-content-tertiary) !default; +$neu-datepicker-border-time-select: var(--s-color-base-border-secondary) !default; +$neu-datepicker-background-color-btn: var(--s-color-base-content-tertiary) !default; + +// Shadows +$neu-datepicker-box-shadow-light: 20px 20px 60px var(--s-shadow-color-dark), 1px 1px 10px var(--s-shadow-color-light) inset, -10px -10px 30px rgba(255, 255, 255, 0.9) !default; +$neu-datepicker-box-shadow-dark: 20px 20px 60px rgba(73, 32, 103, 1), 1px 1px 10px var(--s-shadow-color-dark-light--dark) inset, -10px -10px 30px var(--s-shadow-color-dark-lighten--dark) !default; +$neu-datepicker-box-shadow-btn-light: 1px 1px 5px rgba(0, 0, 0, 0.05), -1px -1px 5px rgba(0, 0, 0, 0.05) !default; +$neu-datepicker-box-shadow-btn-dark: 1px 1px 5px rgba(0, 0, 0, 0.05), -1px -1px 5px rgba(0, 0, 0, 0.05) !default; + +:root { + --neu-datepicker-box-shadow: #{$neu-datepicker-box-shadow-light}; + --neu-datepicker-box-shadow-btn: #{$neu-datepicker-box-shadow-btn-light}; +} + +[design-system-theme="dark"] { + --neu-datepicker-box-shadow: #{$neu-datepicker-box-shadow-dark}; + --neu-datepicker-box-shadow-btn: #{$neu-datepicker-box-shadow-btn-dark}; +} + + @mixin date-picker-border-radius( $suffix: "big", - $border-radius: var(--s-border-radius-big) -) { + $border-radius: var(--s-border-radius-big)) { &.s-border-radius { &-#{$suffix} { border-radius: 16px; + .s-placeholder { border-top-left-radius: $border-radius; } + & .el-input__inner { border-radius: $border-radius; } @@ -246,6 +256,7 @@ $date-picker-padding: 8px; } } } + .el-picker-panel { color: var(--neu-datepicker-date-select-color); box-shadow: var(--neu-datepicker-box-shadow); @@ -254,7 +265,7 @@ $date-picker-padding: 8px; @include with-popper-arrows; &__sidebar { background-color: var(--neu-background-color); - border-right-color: $neu-datepicker-border-right; + border-right-color: $neu-datepicker-border-main; } &__shortcut { color: var(--s-color-base-content-primary); @@ -277,15 +288,13 @@ $date-picker-padding: 8px; color: var(--neu-datepicker-date-hover-background-color); } - -// TODO figure out what with hover .el-date-picker__header-label { color: $neu-datepicker-header-label; } .el-date-picker { &__header--bordered { - border-bottom: 1px solid $neu-datepicker-btn-arrow; + border-bottom: 1px solid $neu-datepicker-border-main; } } @@ -296,13 +305,13 @@ $date-picker-padding: 8px; .el-picker-panel__icon-btn { &.is-disabled { - color: var(--s-color-base-content-tertiary); + display: none; } } .el-date-range-picker__time-header, .el-date-picker__time-header { - border-bottom-color: $neu-datepicker-border-bottom; + border-bottom-color: $neu-datepicker-border-main; } .el-date-table th { @@ -325,63 +334,65 @@ $date-picker-padding: 8px; } } border-color: var(--s-color-base-background-hover); - .el-date-table { - td { - &.today span { - color: var(--s-color-theme-accent); - } - - &.next-month, - &.prev-month { - color: $neu-datepicker-table-days; - } - &.current:not(.disabled), - &.selected, - &.start-date, - &.end-date, - &.available:hover { - span { - width: 24px; - height: 24px; - border-radius: 14px; - background-color: var(--neu-datepicker-date-hover-background-color) !important; - color: var(--neu-datepicker-available-selected-hover-color) !important; - } - } - &.selected:hover, - &.today span:hover { - color: var(--s-color-utility-surface); - } - &.selected { - div { - background-color: transparent; - } + + .el-date-table { + td { + &.today span { + color: var(--s-color-theme-accent); + } + + &.next-month, + &.prev-month { + color: $neu-datepicker-table-days; + } + &.current:not(.disabled), + &.selected, + &.start-date, + &.end-date, + &.available:hover { + span { + width: 24px; + height: 24px; + border-radius: 14px; + background-color: var(--neu-datepicker-date-hover-background-color) !important; + color: var(--neu-datepicker-available-selected-hover-color) !important; } - &.disabled { - div { - background-color: transparent; - color: $neu-datepicker-unavailable-date; - } + } + &.selected:hover, + &.today span:hover { + color: var(--s-color-utility-surface); + } + &.selected { + div { + background-color: transparent; } } - th { - border-bottom-color: $neu-datepicker-border-bottom !important; + &.disabled { + div { + background-color: transparent; + color: $neu-datepicker-disabled-date; + } } } - .el-month-table td { - &.start-date, - &.end-date { - .cell { - background-color: var(--neu-datepicker-date-hover-background-color); - color: var(--s-color-utility-surface); - } + th { + border-bottom-color: $neu-datepicker-border-main !important; + } + } + .el-month-table td { + &.start-date, + &.end-date { + .cell { + background-color: var(--neu-datepicker-date-hover-background-color); + color: var(--s-color-utility-surface); } } + } } + .el-picker-panel__footer { box-shadow: var(--neu-datepicker-box-shadow); background-color: var(--neu-background-color); - border-top-color: $neu-datepicker-border-top !important; + border-top-color: $neu-datepicker-border-main !important; border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; > .el-button { @@ -403,15 +414,13 @@ $date-picker-padding: 8px; box-shadow: var(--neu-datepicker-box-shadow-btn); border-radius: var(--s-border-radius-big); - // TODO what border color should be &:hover, &:focus { color: $neu-datepicker-text-color-btn; - border-color: $neu-datepicker-background-color-btn; + border-color: $neu-datepicker-border-main; [design-system-theme="dark"] & { border-color: var(--s-color-theme-accent-hover); } - } } } @@ -420,6 +429,13 @@ $date-picker-padding: 8px; border-bottom-color: var(--s-color-base-background-hover); } +.el-input.is-disabled .el-input__inner { + background-color: var(--neu-background-color); + [design-system-theme="dark"] & { + border-color: var(--neu-background-color); + } +} + .el-input--small { .el-input__inner { padding: 6px 12px; @@ -446,7 +462,7 @@ $date-picker-padding: 8px; border-radius: var(--s-border-radius-big); box-shadow: var(--neu-datepicker-box-shadow); .el-time-panel__footer { - border-top-color: $neu-datepicker-border-top; + border-top-color: $neu-datepicker-border-main; .confirm { color: var(--s-color-theme-accent); } @@ -464,8 +480,8 @@ $date-picker-padding: 8px; .el-time-panel__content { &::after, &::before { - border-top-color: $neu-datepicker-border-top; - border-bottom-color: $neu-datepicker-border-bottom; + border-top-color: $neu-datepicker-border-main; + border-bottom-color: $neu-datepicker-border-main; } } .el-time-panel__btn { @@ -506,5 +522,5 @@ $date-picker-padding: 8px; } .el-date-range-picker__content.is-left { - border-right-color: $neu-datepicker-border-bottom; + border-right-color: $neu-datepicker-border-main; } \ No newline at end of file From d218dd811f3166aab822338c0aae73441d69344f Mon Sep 17 00:00:00 2001 From: Kron1749 Date: Mon, 29 Jul 2024 15:20:22 +0300 Subject: [PATCH 17/18] sonar_errors_fixed --- src/styles/neumorphism/datepicker.scss | 53 +++++++++++--------------- 1 file changed, 23 insertions(+), 30 deletions(-) diff --git a/src/styles/neumorphism/datepicker.scss b/src/styles/neumorphism/datepicker.scss index 88e17e537..d9b406b1b 100644 --- a/src/styles/neumorphism/datepicker.scss +++ b/src/styles/neumorphism/datepicker.scss @@ -19,20 +19,6 @@ $neu-datepicker-date-hover-color: var(--s-color-base-background-hover) !default; $neu-datepicker-background-color: var(--s-color-utility-body) !default; $neu-datepicker-background-color-dark: var(--s-color-base-border-primary--dark) !default; -:root { - --neu-background-color: #{$neu-datepicker-background-color}; - --neu-datepicker-available-selected-hover-color: #{$neu-datepicker-available-selected-hover}; - --neu-datepicker-date-hover-background-color: #{$neu-datepicker-date-hover-background}; - --neu-datepicker-date-select-color: #{$neu-datepicker-date-select}; -} - -[design-system-theme="dark"] { - --neu-background-color: #{$neu-datepicker-background-color-dark}; - --neu-datepicker-available-selected-hover-color: #{$neu-datepicker-available-selected-hover-dark}; - --neu-datepicker-date-hover-background-color: #{$neu-datepicker-date-hover-background-dark}; - --neu-datepicker-date-select-color: #{neu-datepicker-date-select-dark}; -} - // Borders $neu-datepicker-border-main: var(--s-color-base-content-tertiary) !default; $neu-datepicker-border-time-select: var(--s-color-base-border-secondary) !default; @@ -45,16 +31,23 @@ $neu-datepicker-box-shadow-btn-light: 1px 1px 5px rgba(0, 0, 0, 0.05), -1px -1px $neu-datepicker-box-shadow-btn-dark: 1px 1px 5px rgba(0, 0, 0, 0.05), -1px -1px 5px rgba(0, 0, 0, 0.05) !default; :root { + --neu-background-color: #{$neu-datepicker-background-color}; + --neu-datepicker-available-selected-hover-color: #{$neu-datepicker-available-selected-hover}; + --neu-datepicker-date-hover-background-color: #{$neu-datepicker-date-hover-background}; + --neu-datepicker-date-select-color: #{$neu-datepicker-date-select}; --neu-datepicker-box-shadow: #{$neu-datepicker-box-shadow-light}; --neu-datepicker-box-shadow-btn: #{$neu-datepicker-box-shadow-btn-light}; } [design-system-theme="dark"] { + --neu-background-color: #{$neu-datepicker-background-color-dark}; + --neu-datepicker-available-selected-hover-color: #{$neu-datepicker-available-selected-hover-dark}; + --neu-datepicker-date-hover-background-color: #{$neu-datepicker-date-hover-background-dark}; + --neu-datepicker-date-select-color: #{neu-datepicker-date-select-dark}; --neu-datepicker-box-shadow: #{$neu-datepicker-box-shadow-dark}; --neu-datepicker-box-shadow-btn: #{$neu-datepicker-box-shadow-btn-dark}; } - @mixin date-picker-border-radius( $suffix: "big", $border-radius: var(--s-border-radius-big)) { @@ -257,21 +250,6 @@ $date-picker-padding: 8px; } } -.el-picker-panel { - color: var(--neu-datepicker-date-select-color); - box-shadow: var(--neu-datepicker-box-shadow); - background-color: var(--neu-background-color); - border-radius: var(--s-border-radius-big); - @include with-popper-arrows; - &__sidebar { - background-color: var(--neu-background-color); - border-right-color: $neu-datepicker-border-main; - } - &__shortcut { - color: var(--s-color-base-content-primary); - } -} - .el-date-table td, .el-year-table td .cell, .el-month-table td .cell { @@ -319,6 +297,20 @@ $date-picker-padding: 8px; } .el-picker-panel { + color: var(--neu-datepicker-date-select-color); + box-shadow: var(--neu-datepicker-box-shadow); + background-color: var(--neu-background-color); + border-radius: var(--s-border-radius-big); + @include with-popper-arrows; + + &__sidebar { + background-color: var(--neu-background-color); + border-right-color: $neu-datepicker-border-main; + } + + &__shortcut { + color: var(--s-color-base-content-primary); + } .el-picker-panel__content { .el-date-table { td:nth-child(7), // Targeting Saturday @@ -433,6 +425,7 @@ $date-picker-padding: 8px; background-color: var(--neu-background-color); [design-system-theme="dark"] & { border-color: var(--neu-background-color); + color: var(--s-color-base-content-tertiary); } } From 9cbc6b4c7bb480847d5a47a7554c18f362edd612 Mon Sep 17 00:00:00 2001 From: Kron1749 Date: Tue, 30 Jul 2024 15:31:45 +0300 Subject: [PATCH 18/18] fixed_pr_comments --- src/styles/neumorphism/datepicker.scss | 51 ++++++++++++-------------- 1 file changed, 24 insertions(+), 27 deletions(-) diff --git a/src/styles/neumorphism/datepicker.scss b/src/styles/neumorphism/datepicker.scss index d9b406b1b..39046ae69 100644 --- a/src/styles/neumorphism/datepicker.scss +++ b/src/styles/neumorphism/datepicker.scss @@ -31,7 +31,7 @@ $neu-datepicker-box-shadow-btn-light: 1px 1px 5px rgba(0, 0, 0, 0.05), -1px -1px $neu-datepicker-box-shadow-btn-dark: 1px 1px 5px rgba(0, 0, 0, 0.05), -1px -1px 5px rgba(0, 0, 0, 0.05) !default; :root { - --neu-background-color: #{$neu-datepicker-background-color}; + --neu-datepicker-background-color: #{$neu-datepicker-background-color}; --neu-datepicker-available-selected-hover-color: #{$neu-datepicker-available-selected-hover}; --neu-datepicker-date-hover-background-color: #{$neu-datepicker-date-hover-background}; --neu-datepicker-date-select-color: #{$neu-datepicker-date-select}; @@ -40,7 +40,7 @@ $neu-datepicker-box-shadow-btn-dark: 1px 1px 5px rgba(0, 0, 0, 0.05), -1px -1px } [design-system-theme="dark"] { - --neu-background-color: #{$neu-datepicker-background-color-dark}; + --neu-datepicker-background-color: #{$neu-datepicker-background-color-dark}; --neu-datepicker-available-selected-hover-color: #{$neu-datepicker-available-selected-hover-dark}; --neu-datepicker-date-hover-background-color: #{$neu-datepicker-date-hover-background-dark}; --neu-datepicker-date-select-color: #{neu-datepicker-date-select-dark}; @@ -67,30 +67,21 @@ $neu-datepicker-box-shadow-btn-dark: 1px 1px 5px rgba(0, 0, 0, 0.05), -1px -1px } $date-picker-padding: 8px; +@mixin datepicker-size($size, $height) { + &.s-#{$size} .el-input__inner { + height: $height; + + .el-range-separator { + line-height: $height - $date-picker-padding; + } + } +} -.s-date-picker { +.s-date-picker.neumorphic { font-family: var(--s-font-family-default); width: 100%; position: relative; - &.s-big .el-input__inner { - height: $s-size-big; - .el-range-separator { - line-height: $s-size-big - $date-picker-padding; - } - } - &.s-medium .el-input__inner { - height: $s-size-medium; - .el-range-separator { - line-height: $s-size-medium - $date-picker-padding; - } - } - &.s-small .el-input__inner { - height: $s-size-small; - .el-range-separator { - line-height: $s-size-small - $date-picker-padding; - } - } .el-date-editor { width: 100%; &.el-input, @@ -111,10 +102,16 @@ $date-picker-padding: 8px; border-color: var(--s-color-base-border-primary); } } + @include date-picker-border-radius; @include date-picker-border-radius("medium", var(--s-border-radius-medium)); @include date-picker-border-radius("small", var(--s-border-radius-small)); @include date-picker-border-radius("mini", var(--s-border-radius-mini)); + + @include datepicker-size("big", $s-size-big); + @include datepicker-size("medium", $s-size-medium); + @include datepicker-size("small", $s-size-small); + &.s-has-value { .el-date-editor .el-range-separator { color: var(--s-color-base-content-primary); @@ -299,12 +296,12 @@ $date-picker-padding: 8px; .el-picker-panel { color: var(--neu-datepicker-date-select-color); box-shadow: var(--neu-datepicker-box-shadow); - background-color: var(--neu-background-color); + background-color: var(--neu-datepicker-background-color); border-radius: var(--s-border-radius-big); @include with-popper-arrows; &__sidebar { - background-color: var(--neu-background-color); + background-color: var(--neu-datepicker-background-color); border-right-color: $neu-datepicker-border-main; } @@ -383,7 +380,7 @@ $date-picker-padding: 8px; .el-picker-panel__footer { box-shadow: var(--neu-datepicker-box-shadow); - background-color: var(--neu-background-color); + background-color: var(--neu-datepicker-background-color); border-top-color: $neu-datepicker-border-main !important; border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; @@ -422,9 +419,9 @@ $date-picker-padding: 8px; } .el-input.is-disabled .el-input__inner { - background-color: var(--neu-background-color); + background-color: var(--neu-datepicker-background-color); [design-system-theme="dark"] & { - border-color: var(--neu-background-color); + border-color: var(--neu-datepicker-background-color); color: var(--s-color-base-content-tertiary); } } @@ -433,7 +430,7 @@ $date-picker-padding: 8px; .el-input__inner { padding: 6px 12px; border: 1px solid $neu-datepicker-border-time-select; - background-color: var(--neu-background-color); + background-color: var(--neu-datepicker-background-color); border-radius: 8px; &:focus,