418 lines
10 KiB
SCSS
418 lines
10 KiB
SCSS
@use 'src/utils' as *;
|
|
@use "../../../utils/responsive" as *;
|
|
|
|
.c__date-picker {
|
|
position: relative;
|
|
|
|
|
|
&__wrapper {
|
|
border-radius: var(--c--components--forms-datepicker--border-radius);
|
|
border-width: var(--c--components--forms-datepicker--border-width);
|
|
border-color: var(--c--components--forms-datepicker--border-color);
|
|
border-style: var(--c--components--forms-datepicker--border-style);
|
|
display: flex;
|
|
transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out), border-radius var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
|
|
padding: 0 0.75rem;
|
|
gap: 1rem;
|
|
box-sizing: border-box;
|
|
height: var(--c--components--forms-datepicker--height);
|
|
background-color: var(--c--components--forms-datepicker--background-color);
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&--clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&__icon {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
&__toggle {
|
|
.icon {
|
|
font-size: var(--c--components--button--medium-icon-font-size);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__inner {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
user-select: none;
|
|
min-width: 0;
|
|
|
|
&--collapsed {
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
clip-path: inset(50%);
|
|
height: 1px;
|
|
width: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute
|
|
}
|
|
|
|
&--clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&__value {
|
|
display: flex;
|
|
font-size: var(--c--components--forms-datepicker--font-size);
|
|
color: var(--c--components--forms-datepicker--value-color);
|
|
overflow: hidden;
|
|
flex-grow: 1;
|
|
|
|
&__segment {
|
|
&--empty {
|
|
color: var(--c--components--forms-field--color);
|
|
}
|
|
|
|
&:focus-visible {
|
|
background-color: var(--c--theme--colors--primary-100);
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__action {
|
|
flex-shrink: 0;
|
|
margin-top: 1.375rem;
|
|
|
|
&--empty {
|
|
color: var(--c--components--forms-field--color);
|
|
}
|
|
|
|
&--hidden {
|
|
visibility: hidden;
|
|
transition: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/** Modifiers */
|
|
|
|
&--disabled {
|
|
.c__date-picker__wrapper {
|
|
color: var(--c--theme--colors--greyscale-600);
|
|
border-color: var(--c--components--forms-datepicker--border-color--disabled);
|
|
cursor: default;
|
|
pointer-events: none;
|
|
|
|
&__toggle {
|
|
color: var(--c--theme--colors--greyscale-400);
|
|
}
|
|
|
|
.c__date-picker__inner {
|
|
|
|
&__action {
|
|
color: var(--c--theme--colors--greyscale-400);
|
|
}
|
|
|
|
&__value {
|
|
color: var(--c--components--forms-datepicker--value-color--disabled);
|
|
}
|
|
}
|
|
|
|
label {
|
|
cursor: default;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--invalid {
|
|
.c__date-picker__wrapper {
|
|
border-color: var(--c--theme--colors--danger-600);
|
|
border-radius: var(--c--components--forms-datepicker--border-radius);
|
|
|
|
&__toggle {
|
|
color: var(--c--theme--colors--danger-600);
|
|
}
|
|
|
|
label {
|
|
color: var(--c--theme--colors--danger-600);
|
|
}
|
|
}
|
|
|
|
&:not(.c__date-picker--disabled) {
|
|
&:hover {
|
|
.c__date-picker__wrapper {
|
|
border-color: var(--c--theme--colors--danger-800);
|
|
&__toggle {
|
|
color: var(--c--theme--colors--danger-800);
|
|
}
|
|
|
|
label {
|
|
color: var(--c--theme--colors--danger-800);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&--success {
|
|
.c__date-picker__wrapper {
|
|
border-color: var(--c--theme--colors--success-600);
|
|
border-radius: var(--c--components--forms-datepicker--border-radius);
|
|
|
|
&__toggle {
|
|
color: var(--c--theme--colors--success-600);
|
|
}
|
|
|
|
label {
|
|
color: var(--c--theme--colors--success-600);
|
|
}
|
|
}
|
|
|
|
&:not(.c__date-picker--disabled) {
|
|
&:hover {
|
|
.c__date-picker__wrapper {
|
|
border-color: var(--c--theme--colors--success-800);
|
|
&__toggle {
|
|
color: var(--c--theme--colors--success-800);
|
|
}
|
|
|
|
label {
|
|
color: var(--c--theme--colors--success-800);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not(&--focused):not(&--invalid):not(&--disabled):not(&--success) {
|
|
&:hover {
|
|
.c__date-picker__wrapper {
|
|
border-radius: var(--c--components--forms-datepicker--border-radius--hover);
|
|
border-color: var(--c--components--forms-datepicker--border-color--hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Even if usually !important is evil, in this case it is on purpose. Focus styling most have a greater priority
|
|
* than :hover. But here hover has more css specificity, so we need !important.
|
|
*/
|
|
@mixin focused-wrapper {
|
|
border-radius: var(--c--components--forms-datepicker--border-radius--focus) !important;
|
|
border-color: var(--c--components--forms-datepicker--border-color--focus) !important;
|
|
|
|
.c__date-picker__wrapper__toggle {
|
|
color: var(--c--components--forms-datepicker--border-color--focus) !important;
|
|
}
|
|
|
|
label {
|
|
color: var(--c--components--forms-datepicker--label-color--focus);
|
|
}
|
|
}
|
|
|
|
&--focused {
|
|
.c__date-picker__wrapper {
|
|
@include focused-wrapper;
|
|
}
|
|
}
|
|
|
|
.c__date-picker__wrapper:focus-visible {
|
|
outline: none;
|
|
@include focused-wrapper;
|
|
}
|
|
|
|
&__range {
|
|
$component-min-width: px-to-rem(350px);
|
|
|
|
// MUST READ:
|
|
// We can only use @container property for full-width fields, as the container-type: inline-size property
|
|
// should not be based on the children's width. We cannot at the same time use container-type and a default
|
|
// width.
|
|
// So in order to make this work we use @media for the non-full-width fields and @container for the full-width.
|
|
|
|
&__container {
|
|
|
|
&:not(.c__field--full-width) {
|
|
min-width: $component-min-width;
|
|
|
|
@include media(sm) {
|
|
min-width: auto;
|
|
|
|
.c__date-picker__wrapper__icon {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.c__field--full-width {
|
|
|
|
.c__date-picker__wrapper {
|
|
// The container-type must absolutely not be parent of the calendar popover or otherwise the popover will
|
|
// not be able to float above other DOM elements as a container-type: inline-size defines a new stacking
|
|
// context.
|
|
container-type: inline-size;
|
|
}
|
|
|
|
@container (max-width: #{$component-min-width}) {
|
|
|
|
.c__date-picker__wrapper__icon {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
&__separator {
|
|
background-color: var(--c--theme--colors--greyscale-400);
|
|
height: px-to-rem(24px);
|
|
width: px-to-rem(1px);
|
|
margin: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.c__calendar {
|
|
display: block;
|
|
transform: translate(2px, 0);
|
|
max-width: px-to-rem(340px);
|
|
|
|
&__wrapper {
|
|
display: block;
|
|
padding: 0.75rem;
|
|
|
|
&--opened {
|
|
@extend %shadow;
|
|
background-color: var(--c--components--forms-datepicker--menu-background-color);
|
|
}
|
|
|
|
&__header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
&__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
min-width: 8.5rem;
|
|
|
|
&__dropdown {
|
|
padding: 0 0 0 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__grid {
|
|
width: 100%;
|
|
padding-top: 0.5rem;
|
|
table-layout: fixed;
|
|
border-spacing: 0 0.4rem;
|
|
|
|
&__header-row {
|
|
line-height: 3rem;
|
|
font-size: var(--c--components--button--small-font-size);
|
|
|
|
th {
|
|
font-weight: var(--c--components--button--font-weight);
|
|
color: var(--c--theme--colors--greyscale-700);
|
|
}
|
|
}
|
|
|
|
&__week-row {
|
|
|
|
td {
|
|
padding: 0;
|
|
}
|
|
|
|
&__background {
|
|
&--range {
|
|
background: var(--c--components--forms-datepicker--range-selection-background-color);
|
|
|
|
&:not(&--end):not(&--start):not(&--disabled) button {
|
|
color: var(--c--components--forms-datepicker--grid-cell--color--today);
|
|
}
|
|
|
|
&--end {
|
|
border-top-right-radius: 100%;
|
|
border-bottom-right-radius: 100%;
|
|
}
|
|
&--start {
|
|
border-top-left-radius: 100%;
|
|
border-bottom-left-radius: 100%;
|
|
}
|
|
&--disabled {
|
|
background: var(--c--components--forms-datepicker--range-selection-background-color--disabled);
|
|
}
|
|
}
|
|
}
|
|
&__button {
|
|
&--today {
|
|
border: 1px solid var(--c--components--forms-datepicker--grid-cell--border-color--today);
|
|
}
|
|
&--today:not(&--selected) {
|
|
color: var(--c--components--forms-datepicker--grid-cell--color--today);
|
|
}
|
|
}
|
|
.c__button--small {
|
|
height: auto;
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
padding: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__menu {
|
|
@extend %shadow;
|
|
position: absolute;
|
|
top: 0;
|
|
left: -2px;
|
|
overflow: auto;
|
|
width: 100%;
|
|
max-height: 25rem;
|
|
background-color: var(--c--components--forms-datepicker--menu-background-color);
|
|
transform: translate(2px, 0);
|
|
display: none;
|
|
z-index: 2;
|
|
|
|
&--opened {
|
|
display: block;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
padding-top: px-to-rem(3px);
|
|
}
|
|
|
|
&__item {
|
|
padding: 0.75rem;
|
|
font-size: var(--c--components--forms-datepicker--item-font-size);
|
|
color: var(--c--components--forms-datepicker--item-color);
|
|
cursor: pointer;
|
|
|
|
&--highlight {
|
|
background-color: var(--c--components--forms-datepicker--item-background-color--hover);
|
|
}
|
|
|
|
&--selected {
|
|
background-color: var(--c--components--forms-datepicker--item-background-color--selected);
|
|
}
|
|
|
|
&--disabled {
|
|
color: var(--c--theme--colors--greyscale-400);
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
}
|