adjust start/end date styling

Automattic · Sep 20, 2024 · 37ca1aa · 37ca1aa
1 parent e34dc5a
commit 37ca1aa
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/client/components/date-range/style.scss b/client/components/date-range/style.scss
@@ -273,19 +273,18 @@ $date-range-mobile-layout-switch: $break-small;
 
 	.DayPicker-Day--range .date-picker__day {
 		color: var(--color-text);
-		background-color: var(--date-range-picker-highlight-color);
+		background-color: transparent;
 	}
 
 	.DayPicker-Day--start.DayPicker-Day--range-start,
 	.DayPicker-Day--end.DayPicker-Day--range-end {
-		& .date-picker__day {
+		&:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) .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 {
@@ -303,7 +302,8 @@ $date-range-mobile-layout-switch: $break-small;
 	}
 
 	&.date-picker--range-selected {
-		.DayPicker-Day--start: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) {
 			border-top-left-radius: 200px; /* stylelint-disable-line scales/radii */
 			border-top-right-radius: 0;
 			border-bottom-right-radius: 0;