diff --git a/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker-global.scss b/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker-global.scss new file mode 100644 index 000000000..43e8fe82f --- /dev/null +++ b/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker-global.scss @@ -0,0 +1,348 @@ +@import "./../../mixins/scss/mixins"; +@import "flatpickr/dist/flatpickr.min.css"; + +f-date-time-picker { + @include base(); + display: flex; + flex: 1 0 auto; + &[disabled] { + @include disabled(); + } + &[state="default"] { + @include input-color("default"); + } + &[state="primary"] { + @include input-color("primary"); + } + &[state="success"] { + @include input-color("success"); + } + &[state="warning"] { + @include input-color("warning"); + } + &[state="danger"] { + @include input-color("danger"); + } +} + +.flatpickr-calendar { + background-color: var(--color-surface-secondary); + border-radius: 4px; + box-shadow: 0px 0px 12px rgba(35, 46, 60, 0.4); + -webkit-box-shadow: 0px 0px 12px rgba(35, 46, 60, 0.4); +} + +.flatpickr-calendar.arrowTop:before { + border-bottom-color: var(--color-surface-secondary); + z-index: 10; +} + +.flatpickr-calendar.arrowBottom:after { + border-top-color: var(--color-surface-secondary); + z-index: 10; +} +.flatpickr-calendar.arrowBottom:before { + border-top-color: var(--color-surface-secondary); + z-index: 10; +} + +.flatpickr-calendar:before { + width: 2px; + left: 20px; +} + +.flatpickr-calendar:after { + width: 2px; + left: 20px; +} + +.flatpickr-current-month .flatpickr-monthDropdown-months { + color: var(--color-text-default); +} + +.flatpickr-current-month .numInputWrapper { + color: var(--color-text-default); +} + +span.flatpickr-weekday { + color: var(--color-text-default); + font-size: 14px; + font-weight: 350; +} + +.flatpickr-day { + color: var(--color-text-secondary); + font-size: 14px; + font-weight: 325; +} + +.flatpickr-day.flatpickr-disabled, +.flatpickr-day.flatpickr-disabled:hover, +.flatpickr-day.prevMonthDay, +.flatpickr-day.nextMonthDay, +.flatpickr-day.notAllowed, +.flatpickr-day.notAllowed.prevMonthDay, +.flatpickr-day.notAllowed.nextMonthDay { + color: var(--color-text-subtle); + background: transparent; + border-color: transparent; + cursor: default; +} + +.flatpickr-day.flatpickr-disabled:hover, +.flatpickr-day.prevMonthDay:hover, +.flatpickr-day.nextMonthDay:hover, +.flatpickr-day.notAllowed:hover, +.flatpickr-day.notAllowed.prevMonthDay:hover, +.flatpickr-day.notAllowed.nextMonthDay:hover { + background: var(--color-surface-secondary-hover); +} + +.flatpickr-day:hover { + background-color: var(--color-surface-secondary-hover); + border-radius: 4px; + border: none; +} + +.flatpickr-day.today { + border-color: var(--color-border-default); + border-radius: 4px; +} +.flatpickr-day.today:hover { + background-color: var(--color-border-default-hover); +} + +.flatpickr-day.selected, +.flatpickr-day.startRange, +.flatpickr-day.endRange, +.flatpickr-day.selected.inRange, +.flatpickr-day.startRange.inRange, +.flatpickr-day.endRange.inRange, +.flatpickr-day.selected:focus, +.flatpickr-day.startRange:focus, +.flatpickr-day.endRange:focus, +.flatpickr-day.selected:hover, +.flatpickr-day.startRange:hover, +.flatpickr-day.endRange:hover, +.flatpickr-day.selected.prevMonthDay, +.flatpickr-day.startRange.prevMonthDay, +.flatpickr-day.endRange.prevMonthDay, +.flatpickr-day.selected.nextMonthDay, +.flatpickr-day.startRange.nextMonthDay, +.flatpickr-day.endRange.nextMonthDay { + background: var(--color-primary-default); + -webkit-box-shadow: none; + box-shadow: none; + color: var(--color-text-default); + border-color: var(--color-primary-default); + border-radius: 4px; +} + +.flatpickr-months { + padding: 12px 0px; +} + +.flatpickr-months .flatpickr-month { + height: 28px; +} + +.flatpickr-current-month .numInputWrapper span.arrowUp:after { + border-bottom-color: var(--color-text-default); +} + +.flatpickr-current-month .numInputWrapper span.arrowDown:after { + border-top-color: var(--color-text-default); +} + +.flatpickr-months .flatpickr-prev-month, +.flatpickr-months .flatpickr-next-month { + height: 10px; + top: 2px; +} + +.flatpickr-current-month .flatpickr-monthDropdown-months { + height: 28px; + padding: 0px 12px; + border: none; + background-color: var(--color-input-default); + border-radius: 4px; + font-size: 12px; + font-weight: 325; + color: var(--color-text-default); + -webkit-appearance: none; + -moz-appearance: none; + text-indent: 1px; + text-overflow: ""; + background-image: url("data:image/svg+xml,%3Csvg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.19844 0.333008L1.33301 0.333008C1.08715 0.333008 0.861238 0.468331 0.745226 0.685102C0.629214 0.901874 0.641929 1.1649 0.778309 1.36947L3.44497 5.36947C3.56862 5.55494 3.77677 5.66634 3.99967 5.66634C4.22258 5.66634 4.43073 5.55494 4.55437 5.36947L7.22104 1.36947C7.35742 1.1649 7.37014 0.901874 7.25412 0.685102C7.13811 0.468331 6.9122 0.333008 6.66634 0.333008L4.80091 0.333008L3.19844 0.333008Z' fill='%23BFCAD9'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right; + background-position-x: 94px; + width: 110px; + + &:hover { + background-color: var(--color-input-default-hover); + background-image: url("data:image/svg+xml,%3Csvg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.19844 0.333008L1.33301 0.333008C1.08715 0.333008 0.861238 0.468331 0.745226 0.685102C0.629214 0.901874 0.641929 1.1649 0.778309 1.36947L3.44497 5.36947C3.56862 5.55494 3.77677 5.66634 3.99967 5.66634C4.22258 5.66634 4.43073 5.55494 4.55437 5.36947L7.22104 1.36947C7.35742 1.1649 7.37014 0.901874 7.25412 0.685102C7.13811 0.468331 6.9122 0.333008 6.66634 0.333008L4.80091 0.333008L3.19844 0.333008Z' fill='%23BFCAD9'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right; + background-position-x: 94px; + } +} + +.flatpickr-current-month .numInputWrapper { + height: 28px; + border: none; + background-color: var(--color-input-default); + border-radius: 4px; + font-size: 12px; + font-weight: 325; + color: var(--color-text-default); + width: 8ch; +} +.flatpickr-current-month input.cur-year { + height: 28px; + padding: 0px 12px; + border: none; + background-color: var(--color-input-default); + border-radius: 4px; + font-size: 12px; + font-weight: 325; + color: var(--color-text-default); + &:hover { + background-color: var(--color-input-default-hover); + } + &:focus-within { + background-color: var(--color-input-default-hover); + } +} + +.flatpickr-current-month { + padding: 0px; + height: fit-content; + gap: 4px; + display: flex; + justify-content: center; +} + +.flatpickr-calendar.hasTime .flatpickr-time { + border-top: 1px solid var(--color-border-secondary); + max-height: 55px; + padding: 10px; + overflow: visible; + height: 50px; +} + +.flatpickr-time .numInputWrapper { + height: 28px; + border: none; + background-color: var(--color-input-default); + border-radius: 4px; + font-size: 12px; + font-weight: 325; + color: var(--color-text-default); + width: 8ch; + display: flex; + flex: none; + &:hover { + background-color: var(--color-input-default-hover); + } +} + +.flatpickr-time input { + height: 28px; + padding: 0px 12px; + border: none; + background-color: var(--color-input-default); + border-radius: 4px; + font-size: 12px; + font-weight: 325; + color: var(--color-text-default); + &:hover { + background-color: var(--color-input-default-hover); + } + &:focus { + background-color: var(--color-input-default-hover); + } +} + +.flatpickr-time .flatpickr-time-separator, +.flatpickr-time .flatpickr-am-pm { + color: var(--color-text-default); + height: 28px; + float: left; + display: flex; + justify-content: center; + align-items: center; + line-height: inherit; +} + +.flatpickr-time .flatpickr-am-pm { + background-color: var(--color-input-default); + border-radius: 4px; + font-size: 12px; + font-weight: 325; + margin-left: 5px; + color: var(--color-text-default); + &:hover { + background-color: var(--color-input-default-hover); + } + &:focus { + background-color: var(--color-input-default-hover); + } +} + +.flatpickr-time .numInputWrapper span.arrowUp:after { + border-bottom-color: var(--color-text-default); +} + +.flatpickr-time .numInputWrapper span.arrowDown:after { + border-top-color: var(--color-text-default); +} + +.numInputWrapper span { + border: 1px solid transparent; +} + +.flatpickr-day.inRange, +.flatpickr-day.prevMonthDay.inRange, +.flatpickr-day.nextMonthDay.inRange, +.flatpickr-day.today.inRange, +.flatpickr-day.prevMonthDay.today.inRange, +.flatpickr-day.nextMonthDay.today.inRange { + background: var(--color-primary-text); + border-color: var(--color-primary-text); + color: var(--color-surface-default); + &:hover { + border-radius: 0px; + } +} + +.flatpickr-day.selected.startRange, +.flatpickr-day.startRange.startRange, +.flatpickr-day.endRange.startRange { + border-radius: 4px 0 0 4px; +} + +.flatpickr-day.selected.endRange, +.flatpickr-day.startRange.endRange, +.flatpickr-day.endRange.endRange { + border-radius: 0 4px 4px 0; +} + +.flatpickr-weekwrapper span.flatpickr-day, +.flatpickr-weekwrapper span.flatpickr-day:hover { + color: var(--color-text-subtle); +} + +.flatpickr-day.inRange { + border-radius: 0; + -webkit-box-shadow: + -5px 0 0 var(--color-primary-text), + 5px 0 0 var(--color-primary-text); + box-shadow: + -5px 0 0 var(--color-primary-text), + 5px 0 0 var(--color-primary-text); +} + +.flatpickr-day.selected { + color: var(--color-surface-default); +} diff --git a/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.scss b/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.scss index 824f6c2fd..ae1587b28 100644 --- a/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.scss +++ b/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.scss @@ -1,355 +1,5 @@ -@use "sass:map"; - // common mixins imported from this file @import "./../../mixins/scss/mixins"; -// IMPORT flatpickr css -@import "flatpickr/dist/flatpickr.min.css"; - -f-date-time-picker { - @include base(); - display: flex; - flex: 1 0 auto; - &[disabled] { - @include disabled(); - } - &[state="default"] { - @include input-color("default"); - } - &[state="primary"] { - @include input-color("primary"); - } - &[state="success"] { - @include input-color("success"); - } - &[state="warning"] { - @include input-color("warning"); - } - &[state="danger"] { - @include input-color("danger"); - } -} - -.flatpickr-calendar { - background-color: var(--color-surface-secondary); - border-radius: 4px; - box-shadow: 0px 0px 12px rgba(35, 46, 60, 0.4); - -webkit-box-shadow: 0px 0px 12px rgba(35, 46, 60, 0.4); -} - -.flatpickr-calendar.arrowTop:before { - border-bottom-color: var(--color-surface-secondary); - z-index: 10; -} - -.flatpickr-calendar.arrowBottom:after { - border-top-color: var(--color-surface-secondary); - z-index: 10; -} -.flatpickr-calendar.arrowBottom:before { - border-top-color: var(--color-surface-secondary); - z-index: 10; -} - -.flatpickr-calendar:before { - width: 2px; - left: 20px; -} - -.flatpickr-calendar:after { - width: 2px; - left: 20px; -} - -.flatpickr-current-month .flatpickr-monthDropdown-months { - color: var(--color-text-default); -} - -.flatpickr-current-month .numInputWrapper { - color: var(--color-text-default); -} - -span.flatpickr-weekday { - color: var(--color-text-default); - font-size: 14px; - font-weight: 350; -} - -.flatpickr-day { - color: var(--color-text-secondary); - font-size: 14px; - font-weight: 325; -} - -.flatpickr-day.flatpickr-disabled, -.flatpickr-day.flatpickr-disabled:hover, -.flatpickr-day.prevMonthDay, -.flatpickr-day.nextMonthDay, -.flatpickr-day.notAllowed, -.flatpickr-day.notAllowed.prevMonthDay, -.flatpickr-day.notAllowed.nextMonthDay { - color: var(--color-text-subtle); - background: transparent; - border-color: transparent; - cursor: default; -} - -.flatpickr-day.flatpickr-disabled:hover, -.flatpickr-day.prevMonthDay:hover, -.flatpickr-day.nextMonthDay:hover, -.flatpickr-day.notAllowed:hover, -.flatpickr-day.notAllowed.prevMonthDay:hover, -.flatpickr-day.notAllowed.nextMonthDay:hover { - background: var(--color-surface-secondary-hover); -} - -.flatpickr-day:hover { - background-color: var(--color-surface-secondary-hover); - border-radius: 4px; - border: none; -} - -.flatpickr-day.today { - border-color: var(--color-border-default); - border-radius: 4px; -} -.flatpickr-day.today:hover { - background-color: var(--color-border-default-hover); -} - -.flatpickr-day.selected, -.flatpickr-day.startRange, -.flatpickr-day.endRange, -.flatpickr-day.selected.inRange, -.flatpickr-day.startRange.inRange, -.flatpickr-day.endRange.inRange, -.flatpickr-day.selected:focus, -.flatpickr-day.startRange:focus, -.flatpickr-day.endRange:focus, -.flatpickr-day.selected:hover, -.flatpickr-day.startRange:hover, -.flatpickr-day.endRange:hover, -.flatpickr-day.selected.prevMonthDay, -.flatpickr-day.startRange.prevMonthDay, -.flatpickr-day.endRange.prevMonthDay, -.flatpickr-day.selected.nextMonthDay, -.flatpickr-day.startRange.nextMonthDay, -.flatpickr-day.endRange.nextMonthDay { - background: var(--color-primary-default); - -webkit-box-shadow: none; - box-shadow: none; - color: var(--color-text-default); - border-color: var(--color-primary-default); - border-radius: 4px; -} - -.flatpickr-months { - padding: 12px 0px; -} - -.flatpickr-months .flatpickr-month { - height: 28px; -} - -.flatpickr-current-month .numInputWrapper span.arrowUp:after { - border-bottom-color: var(--color-text-default); -} - -.flatpickr-current-month .numInputWrapper span.arrowDown:after { - border-top-color: var(--color-text-default); -} - -.flatpickr-months .flatpickr-prev-month, -.flatpickr-months .flatpickr-next-month { - height: 10px; - top: 2px; -} - -.flatpickr-current-month .flatpickr-monthDropdown-months { - height: 28px; - padding: 0px 12px; - border: none; - background-color: var(--color-input-default); - border-radius: 4px; - font-size: 12px; - font-weight: 325; - color: var(--color-text-default); - -webkit-appearance: none; - -moz-appearance: none; - text-indent: 1px; - text-overflow: ""; - background-image: url("data:image/svg+xml,%3Csvg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.19844 0.333008L1.33301 0.333008C1.08715 0.333008 0.861238 0.468331 0.745226 0.685102C0.629214 0.901874 0.641929 1.1649 0.778309 1.36947L3.44497 5.36947C3.56862 5.55494 3.77677 5.66634 3.99967 5.66634C4.22258 5.66634 4.43073 5.55494 4.55437 5.36947L7.22104 1.36947C7.35742 1.1649 7.37014 0.901874 7.25412 0.685102C7.13811 0.468331 6.9122 0.333008 6.66634 0.333008L4.80091 0.333008L3.19844 0.333008Z' fill='%23BFCAD9'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: right; - background-position-x: 94px; - width: 110px; - - &:hover { - background-color: var(--color-input-default-hover); - background-image: url("data:image/svg+xml,%3Csvg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.19844 0.333008L1.33301 0.333008C1.08715 0.333008 0.861238 0.468331 0.745226 0.685102C0.629214 0.901874 0.641929 1.1649 0.778309 1.36947L3.44497 5.36947C3.56862 5.55494 3.77677 5.66634 3.99967 5.66634C4.22258 5.66634 4.43073 5.55494 4.55437 5.36947L7.22104 1.36947C7.35742 1.1649 7.37014 0.901874 7.25412 0.685102C7.13811 0.468331 6.9122 0.333008 6.66634 0.333008L4.80091 0.333008L3.19844 0.333008Z' fill='%23BFCAD9'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: right; - background-position-x: 94px; - } -} - -.flatpickr-current-month .numInputWrapper { - height: 28px; - border: none; - background-color: var(--color-input-default); - border-radius: 4px; - font-size: 12px; - font-weight: 325; - color: var(--color-text-default); - width: 8ch; -} -.flatpickr-current-month input.cur-year { - height: 28px; - padding: 0px 12px; - border: none; - background-color: var(--color-input-default); - border-radius: 4px; - font-size: 12px; - font-weight: 325; - color: var(--color-text-default); - &:hover { - background-color: var(--color-input-default-hover); - } - &:focus-within { - background-color: var(--color-input-default-hover); - } -} - -.flatpickr-current-month { - padding: 0px; - height: fit-content; - gap: 4px; - display: flex; - justify-content: center; -} - -.flatpickr-calendar.hasTime .flatpickr-time { - border-top: 1px solid var(--color-border-secondary); - max-height: 55px; - padding: 10px; - overflow: visible; - height: 50px; -} - -.flatpickr-time .numInputWrapper { - height: 28px; - border: none; - background-color: var(--color-input-default); - border-radius: 4px; - font-size: 12px; - font-weight: 325; - color: var(--color-text-default); - width: 8ch; - display: flex; - flex: none; - &:hover { - background-color: var(--color-input-default-hover); - } -} - -.flatpickr-time input { - height: 28px; - padding: 0px 12px; - border: none; - background-color: var(--color-input-default); - border-radius: 4px; - font-size: 12px; - font-weight: 325; - color: var(--color-text-default); - &:hover { - background-color: var(--color-input-default-hover); - } - &:focus { - background-color: var(--color-input-default-hover); - } -} - -.flatpickr-time .flatpickr-time-separator, -.flatpickr-time .flatpickr-am-pm { - color: var(--color-text-default); - height: 28px; - float: left; - display: flex; - justify-content: center; - align-items: center; - line-height: inherit; -} - -.flatpickr-time .flatpickr-am-pm { - background-color: var(--color-input-default); - border-radius: 4px; - font-size: 12px; - font-weight: 325; - margin-left: 5px; - color: var(--color-text-default); - &:hover { - background-color: var(--color-input-default-hover); - } - &:focus { - background-color: var(--color-input-default-hover); - } -} - -.flatpickr-time .numInputWrapper span.arrowUp:after { - border-bottom-color: var(--color-text-default); -} - -.flatpickr-time .numInputWrapper span.arrowDown:after { - border-top-color: var(--color-text-default); -} - -.numInputWrapper span { - border: 1px solid transparent; -} - -.flatpickr-day.inRange, -.flatpickr-day.prevMonthDay.inRange, -.flatpickr-day.nextMonthDay.inRange, -.flatpickr-day.today.inRange, -.flatpickr-day.prevMonthDay.today.inRange, -.flatpickr-day.nextMonthDay.today.inRange { - background: var(--color-primary-text); - border-color: var(--color-primary-text); - color: var(--color-surface-default); - &:hover { - border-radius: 0px; - } -} - -.flatpickr-day.selected.startRange, -.flatpickr-day.startRange.startRange, -.flatpickr-day.endRange.startRange { - border-radius: 4px 0 0 4px; -} - -.flatpickr-day.selected.endRange, -.flatpickr-day.startRange.endRange, -.flatpickr-day.endRange.endRange { - border-radius: 0 4px 4px 0; -} - -.flatpickr-weekwrapper span.flatpickr-day, -.flatpickr-weekwrapper span.flatpickr-day:hover { - color: var(--color-text-subtle); -} - -.flatpickr-day.inRange { - border-radius: 0; - -webkit-box-shadow: - -5px 0 0 var(--color-primary-text), - 5px 0 0 var(--color-primary-text); - box-shadow: - -5px 0 0 var(--color-primary-text), - 5px 0 0 var(--color-primary-text); -} - -.flatpickr-day.selected { - color: var(--color-surface-default); -} :host { f-input.f-date-input-picker[disabled] { diff --git a/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts b/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts index f445a6510..d45d7aeeb 100644 --- a/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts +++ b/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts @@ -1,6 +1,7 @@ import { html, PropertyValueMap, unsafeCSS } from "lit"; import { property, query } from "lit/decorators.js"; import eleStyle from "./f-date-time-picker.scss?inline"; +import globalStyle from "./f-date-time-picker-global.scss?inline"; import { FRoot } from "../../mixins/components/f-root/f-root"; import flatpickr from "flatpickr"; import { Instance } from "flatpickr/dist/types/instance"; @@ -10,6 +11,10 @@ import { FDiv } from "../f-div/f-div"; import { FText } from "../f-text/f-text"; import { flowElement } from "./../../utils"; +import { injectCss } from "@cldcvr/flow-core-config"; + +injectCss("f-date-time-picker", globalStyle); + export type FDateTimePickerState = "primary" | "default" | "success" | "warning" | "danger"; export type DateValueType = DateOption | DateOption[]; @@ -23,7 +28,13 @@ export class FDateTimePicker extends FRoot { /** * css loaded from scss file */ - static styles = [unsafeCSS(eleStyle), ...FDiv.styles, ...FText.styles, ...FInput.styles]; + static styles = [ + unsafeCSS(eleStyle), + unsafeCSS(globalStyle), + ...FDiv.styles, + ...FText.styles, + ...FInput.styles + ]; /** * @attribute Variants are various visual representations of a date-time-picker field.