Skip to content

Commit

Permalink
styling header + footer
Browse files Browse the repository at this point in the history
  • Loading branch information
annacmc committed Sep 16, 2024
1 parent e5c24a3 commit ed62e9e
Showing 1 changed file with 27 additions and 24 deletions.
51 changes: 27 additions & 24 deletions client/components/date-range/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,12 @@ $date-range-mobile-layout-switch: $break-small;
}

.date-range__popover-header {
order: 1;
display: flex;
justify-content: left;
}

.date-range__popover-footer {
order: 4;
display: flex;
justify-content: flex-end;
Expand Down Expand Up @@ -150,6 +156,8 @@ $date-range-mobile-layout-switch: $break-small;
.date-range__popover {
.DayPicker {
order: 3;
margin-top: 12px;
border-top: 1px solid var(--color-neutral-5);
}

.DayPicker-wrapper,
Expand Down Expand Up @@ -232,7 +240,6 @@ $date-range-mobile-layout-switch: $break-small;


.date-range__picker {
--date-range-picker-highlight-color: rgba(var(--color-primary-light-rgb), 0.4);

.DayPicker-Day,
.DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside),
Expand All @@ -248,40 +255,36 @@ $date-range-mobile-layout-switch: $break-small;
&:hover,
&:focus {
color: var(--color-text-inverted);
background-color: var(--date-range-picker-highlight-color);
background-color: var(--color-primary);
}
}
}

.DayPicker-Day--range .date-picker__day {
color: var(--color-text);
background-color: var(--date-range-picker-highlight-color);
}

.DayPicker-Day--start.DayPicker-Day--range-start,
.DayPicker-Day--end.DayPicker-Day--range-end {
& .date-picker__day {
.DayPicker-Day--range,
.DayPicker-Day--start,
.DayPicker-Day--end {
.date-picker__day {
color: var(--color-text-inverted);
background-color: var(--color-primary);
}
&:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
border-radius: 200px; /* stylelint-disable-line scales/radii */
&.DayPicker-Day--range {
background-color: var(--color-primary);
.date-picker__day {
&:hover,
&:focus {
background-color: var(--date-range-picker-highlight-color);
}
}
}

.DayPicker-Day--range:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside),
.DayPicker-Day--start:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside),
.DayPicker-Day--end:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
background-color: var(--color-primary);
.date-picker__day {
&:hover,
&:focus {
background-color: var(--color-primary-light);
}
}
}

.DayPicker-Day--range:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
background-color: var(--date-range-picker-highlight-color);
.date-picker__day {
background-color: transparent;
.DayPicker-Day--start,
.DayPicker-Day--end {
&:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
border-radius: 200px; /* stylelint-disable-line scales/radii */
}
}

Expand Down

0 comments on commit ed62e9e

Please sign in to comment.