Change the week header and left button style to meet the date spacing (…

…#27730) * Change the week header and left button style to meet the dates spacing. * Add RTL ignore for month button * Add rtl begin and end ignore.
WordPress · Jan 7, 2021 · c3ff86d · c3ff86d
1 parent cf31360
commit c3ff86d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/packages/components/src/date-time/datepicker.scss b/packages/components/src/date-time/datepicker.scss
@@ -432,7 +432,7 @@
 }
 .CalendarMonthGrid__horizontal {
 	position: absolute;
-	left: 9px;
+	left: 0;
 }
 .CalendarMonthGrid__vertical {
 	margin: 0 auto;
@@ -573,14 +573,15 @@
 	position: relative;
 }
 .DayPicker_weekHeaders__horizontal {
-	margin-left: 9px;
+	margin-left: 13px;
 }
 .DayPicker_weekHeader {
 	color: #757575;
 	position: absolute;
 	top: 62px;
 	z-index: 2;
 	text-align: left;
+	padding: 0 !important;
 }
 .DayPicker_weekHeader__vertical {
 	left: 50%;
@@ -605,6 +606,7 @@
 .DayPicker_weekHeader_li {
 	display: inline-block;
 	text-align: center;
+	margin: 0 1px;
 }
 .DayPicker_transitionContainer {
 	position: relative;

diff --git a/packages/components/src/date-time/style.scss b/packages/components/src/date-time/style.scss
@@ -48,7 +48,9 @@
 
 	// Override external DatePicker styles.
 	.DayPickerNavigation_leftButton__horizontalDefault {
-		left: 0;
+		/*!rtl:begin:ignore*/
+		left: 13px;
+		/*!rtl:end:ignore*/
 	}
 
 	.CalendarMonth_caption {
@@ -98,7 +100,7 @@
 	.DayPicker_weekHeader {
 		top: 50px;
 		.DayPicker_weekHeader_ul {
-			margin: 1px 0;
+			margin: 1px;
 			padding-left: 0;
 			padding-right: 0;
 		}