41 lines
697 B
CSS
41 lines
697 B
CSS
/* Leaving, will most likely get deleted */
|
|
.datePicker {
|
|
container-name: datePickerContainer;
|
|
container-type: inline-size;
|
|
}
|
|
.container {
|
|
display: grid;
|
|
gap: var(--Spacing-x2);
|
|
grid-template-areas: "year month day";
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
width: var(--width);
|
|
}
|
|
|
|
.day {
|
|
grid-area: day;
|
|
}
|
|
|
|
.month {
|
|
grid-area: month;
|
|
}
|
|
|
|
.year {
|
|
grid-area: year;
|
|
}
|
|
|
|
/* TODO: Handle this in Select component.
|
|
- out of scope for now.
|
|
*/
|
|
.day.invalid > div > div,
|
|
.month.invalid > div > div,
|
|
.year.invalid > div > div {
|
|
border-color: var(--Scandic-Red-60);
|
|
}
|
|
|
|
@container datePickerContainer (max-width: 350px) {
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|