Add transparent to border colors on navigation

Tim · Tim · commit f5296a8b9bec · 2018-04-23T17:13:34.000+02:00
diff --git a/dist/react-datepicker-cssmodules.css b/dist/react-datepicker-cssmodules.css
@@ -237,11 +237,12 @@
 
 :global .react-datepicker__navigation--previous {
   left: 10px;
-  border-right-color: #ccc;
+  border-right-color: transparent;
+  border-color: transparent;
 }
 
 :global .react-datepicker__navigation--previous:hover {
-  border-right-color: #b3b3b3;
+  border-right-color: transparent;
 }
 
 :global .react-datepicker__navigation--previous--disabled,
@@ -252,7 +253,8 @@
 
 :global .react-datepicker__navigation--next {
   right: 10px;
-  border-left-color: #ccc;
+  border-left-color: transparent;
+  border-color: transparent;
 }
 
 :global
@@ -262,7 +264,7 @@
 }
 
 :global .react-datepicker__navigation--next:hover {
-  border-left-color: #b3b3b3;
+  border-left-color: transparent;
 }
 
 :global .react-datepicker__navigation--next--disabled,
@@ -642,7 +644,7 @@
 :global
   .react-datepicker__month-year-option:hover
   .react-datepicker__navigation--years-upcoming {
-  border-bottom-color: #b3b3b3;
+  border-bottom-color: transparent;
 }
 
 :global
@@ -654,7 +656,7 @@
 :global
   .react-datepicker__month-year-option:hover
   .react-datepicker__navigation--years-previous {
-  border-top-color: #b3b3b3;
+  border-top-color: transparent;
 }
 
 :global .react-datepicker__year-option--selected,
diff --git a/dist/react-datepicker-cssmodules.min.css b/dist/react-datepicker-cssmodules.min.css
@@ -208,10 +208,11 @@
 }
 :global .react-datepicker__navigation--previous {
   left: 10px;
-  border-right-color: #ccc;
+  border-right-color: transparent;
+  border-color: transparent;
 }
 :global .react-datepicker__navigation--previous:hover {
-  border-right-color: #b3b3b3;
+  border-right-color: transparent;
 }
 :global .react-datepicker__navigation--previous--disabled,
 :global .react-datepicker__navigation--previous--disabled:hover {
@@ -220,15 +221,16 @@
 }
 :global .react-datepicker__navigation--next {
   right: 10px;
-  border-left-color: #ccc;
+  border-left-color: transparent;
+  border-color: transparent;
 }
 :global
   .react-datepicker__navigation--next--with-time:not(:global
     .react-datepicker__navigation--next--with-today-button) {
   right: 80px;
 }
 :global .react-datepicker__navigation--next:hover {
-  border-left-color: #b3b3b3;
+  border-left-color: transparent;
 }
 :global .react-datepicker__navigation--next--disabled,
 :global .react-datepicker__navigation--next--disabled:hover {
@@ -556,7 +558,7 @@
 :global
   .react-datepicker__month-year-option:hover
   .react-datepicker__navigation--years-upcoming {
-  border-bottom-color: #b3b3b3;
+  border-bottom-color: transparent;
 }
 :global
   .react-datepicker__year-option:hover
@@ -567,7 +569,7 @@
 :global
   .react-datepicker__month-year-option:hover
   .react-datepicker__navigation--years-previous {
-  border-top-color: #b3b3b3;
+  border-top-color: transparent;
 }
 :global .react-datepicker__year-option--selected,
 :global .react-datepicker__month-option--selected,
diff --git a/dist/react-datepicker.css b/dist/react-datepicker.css
@@ -209,11 +209,12 @@
 
 .react-datepicker__navigation--previous {
   left: 10px;
-  border-right-color: #ccc;
+  border-right-color: transparent;
+  border-color: transparent;
 }
 
 .react-datepicker__navigation--previous:hover {
-  border-right-color: #b3b3b3;
+  border-right-color: transparent;
 }
 
 .react-datepicker__navigation--previous--disabled,
@@ -224,15 +225,16 @@
 
 .react-datepicker__navigation--next {
   right: 10px;
-  border-left-color: #ccc;
+  border-left-color: transparent;
+  border-color: transparent;
 }
 
 .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
   right: 80px;
 }
 
 .react-datepicker__navigation--next:hover {
-  border-left-color: #b3b3b3;
+  border-left-color: transparent;
 }
 
 .react-datepicker__navigation--next--disabled,
@@ -589,7 +591,7 @@
   .react-datepicker__navigation--years-upcoming,
 .react-datepicker__month-year-option:hover
   .react-datepicker__navigation--years-upcoming {
-  border-bottom-color: #b3b3b3;
+  border-bottom-color: transparent;
 }
 
 .react-datepicker__year-option:hover
@@ -598,7 +600,7 @@
   .react-datepicker__navigation--years-previous,
 .react-datepicker__month-year-option:hover
   .react-datepicker__navigation--years-previous {
-  border-top-color: #b3b3b3;
+  border-top-color: transparent;
 }
 
 .react-datepicker__year-option--selected,
diff --git a/dist/react-datepicker.min.css b/dist/react-datepicker.min.css
@@ -180,10 +180,11 @@
 }
 .react-datepicker__navigation--previous {
   left: 10px;
-  border-right-color: #ccc;
+  border-right-color: transparent;
+  border-color: transparent;
 }
 .react-datepicker__navigation--previous:hover {
-  border-right-color: #b3b3b3;
+  border-right-color: transparent;
 }
 .react-datepicker__navigation--previous--disabled,
 .react-datepicker__navigation--previous--disabled:hover {
@@ -192,13 +193,14 @@
 }
 .react-datepicker__navigation--next {
   right: 10px;
-  border-left-color: #ccc;
+  border-left-color: transparent;
+  border-color: transparent;
 }
 .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
   right: 80px;
 }
 .react-datepicker__navigation--next:hover {
-  border-left-color: #b3b3b3;
+  border-left-color: transparent;
 }
 .react-datepicker__navigation--next--disabled,
 .react-datepicker__navigation--next--disabled:hover {
@@ -503,15 +505,15 @@
   .react-datepicker__navigation--years-upcoming,
 .react-datepicker__month-year-option:hover
   .react-datepicker__navigation--years-upcoming {
-  border-bottom-color: #b3b3b3;
+  border-bottom-color: transparent;
 }
 .react-datepicker__year-option:hover
   .react-datepicker__navigation--years-previous,
 .react-datepicker__month-option:hover
   .react-datepicker__navigation--years-previous,
 .react-datepicker__month-year-option:hover
   .react-datepicker__navigation--years-previous {
-  border-top-color: #b3b3b3;
+  border-top-color: transparent;
 }
 .react-datepicker__year-option--selected,
 .react-datepicker__month-option--selected,
diff --git a/docs-site/style.css b/docs-site/style.css
@@ -195,10 +195,11 @@
 }
 .react-datepicker__navigation--previous {
   left: 10px;
-  border-right-color: #ccc;
+  border-right-color: transparent;
+  border-color: transparent;
 }
 .react-datepicker__navigation--previous:hover {
-  border-right-color: #b3b3b3;
+  border-right-color: transparent;
 }
 .react-datepicker__navigation--previous--disabled,
 .react-datepicker__navigation--previous--disabled:hover {
@@ -207,13 +208,14 @@
 }
 .react-datepicker__navigation--next {
   right: 10px;
-  border-left-color: #ccc;
+  border-left-color: transparent;
+  border-color: transparent;
 }
 .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
   right: 80px;
 }
 .react-datepicker__navigation--next:hover {
-  border-left-color: #b3b3b3;
+  border-left-color: transparent;
 }
 .react-datepicker__navigation--next--disabled,
 .react-datepicker__navigation--next--disabled:hover {
@@ -529,15 +531,15 @@
   .react-datepicker__navigation--years-upcoming,
 .react-datepicker__month-year-option:hover
   .react-datepicker__navigation--years-upcoming {
-  border-bottom-color: #b3b3b3;
+  border-bottom-color: transparent;
 }
 .react-datepicker__year-option:hover
   .react-datepicker__navigation--years-previous,
 .react-datepicker__month-option:hover
   .react-datepicker__navigation--years-previous,
 .react-datepicker__month-year-option:hover
   .react-datepicker__navigation--years-previous {
-  border-top-color: #b3b3b3;
+  border-top-color: transparent;
 }
 .react-datepicker__year-option--selected,
 .react-datepicker__month-option--selected,
diff --git a/src/stylesheets/datepicker.scss b/src/stylesheets/datepicker.scss
@@ -131,10 +131,11 @@
 
   &--previous {
     left: 10px;
-    border-right-color: $datepicker__muted-color;
+    border-right-color: transparent;
+    border-color: transparent;
 
     &:hover {
-      border-right-color: darken($datepicker__muted-color, 10%);
+      border-right-color: transparent;
     }
 
     &--disabled,
@@ -146,13 +147,14 @@
 
   &--next {
     right: 10px;
-    border-left-color: $datepicker__muted-color;
+    border-left-color: transparent;
+    border-color: transparent;
     &--with-time:not(&--with-today-button) {
       right: 80px;
     }
 
     &:hover {
-      border-left-color: darken($datepicker__muted-color, 10%);
+      border-left-color: transparent;
     }
 
     &--disabled,
@@ -444,11 +446,11 @@
     background-color: $datepicker__muted-color;
 
     .react-datepicker__navigation--years-upcoming {
-      border-bottom-color: darken($datepicker__muted-color, 10%);
+      border-bottom-color: transparent;
     }
 
     .react-datepicker__navigation--years-previous {
-      border-top-color: darken($datepicker__muted-color, 10%);
+      border-top-color: transparent;
     }
   }
 

Original file line number	Diff line number	Diff line change
`@@ -237,11 +237,12 @@`
`237`	`237`
`238`	`238`	`:global .react-datepicker__navigation--previous {`
`239`	`239`	`left: 10px;`
`240`		`- border-right-color: #ccc;`
	`240`	`+ border-right-color: transparent;`
	`241`	`+ border-color: transparent;`
`241`	`242`	`}`
`242`	`243`
`243`	`244`	`:global .react-datepicker__navigation--previous:hover {`
`244`		`- border-right-color: #b3b3b3;`
	`245`	`+ border-right-color: transparent;`
`245`	`246`	`}`
`246`	`247`
`247`	`248`	`:global .react-datepicker__navigation--previous--disabled,`
`@@ -252,7 +253,8 @@`
`252`	`253`
`253`	`254`	`:global .react-datepicker__navigation--next {`
`254`	`255`	`right: 10px;`
`255`		`- border-left-color: #ccc;`
	`256`	`+ border-left-color: transparent;`
	`257`	`+ border-color: transparent;`
`256`	`258`	`}`
`257`	`259`
`258`	`260`	`:global`
`@@ -262,7 +264,7 @@`
`262`	`264`	`}`
`263`	`265`
`264`	`266`	`:global .react-datepicker__navigation--next:hover {`
`265`		`- border-left-color: #b3b3b3;`
	`267`	`+ border-left-color: transparent;`
`266`	`268`	`}`
`267`	`269`
`268`	`270`	`:global .react-datepicker__navigation--next--disabled,`
`@@ -642,7 +644,7 @@`
`642`	`644`	`:global`
`643`	`645`	`.react-datepicker__month-year-option:hover`
`644`	`646`	`.react-datepicker__navigation--years-upcoming {`
`645`		`- border-bottom-color: #b3b3b3;`
	`647`	`+ border-bottom-color: transparent;`
`646`	`648`	`}`
`647`	`649`
`648`	`650`	`:global`
`@@ -654,7 +656,7 @@`
`654`	`656`	`:global`
`655`	`657`	`.react-datepicker__month-year-option:hover`
`656`	`658`	`.react-datepicker__navigation--years-previous {`
`657`		`- border-top-color: #b3b3b3;`
	`659`	`+ border-top-color: transparent;`
`658`	`660`	`}`
`659`	`661`
`660`	`662`	`:global .react-datepicker__year-option--selected,`
Original file line number	Diff line number	Diff line change
`@@ -208,10 +208,11 @@`
`208`	`208`	`}`
`209`	`209`	`:global .react-datepicker__navigation--previous {`
`210`	`210`	`left: 10px;`
`211`		`- border-right-color: #ccc;`
	`211`	`+ border-right-color: transparent;`
	`212`	`+ border-color: transparent;`
`212`	`213`	`}`
`213`	`214`	`:global .react-datepicker__navigation--previous:hover {`
`214`		`- border-right-color: #b3b3b3;`
	`215`	`+ border-right-color: transparent;`
`215`	`216`	`}`
`216`	`217`	`:global .react-datepicker__navigation--previous--disabled,`
`217`	`218`	`:global .react-datepicker__navigation--previous--disabled:hover {`
`@@ -220,15 +221,16 @@`
`220`	`221`	`}`
`221`	`222`	`:global .react-datepicker__navigation--next {`
`222`	`223`	`right: 10px;`
`223`		`- border-left-color: #ccc;`
	`224`	`+ border-left-color: transparent;`
	`225`	`+ border-color: transparent;`
`224`	`226`	`}`
`225`	`227`	`:global`
`226`	`228`	`.react-datepicker__navigation--next--with-time:not(:global`
`227`	`229`	`.react-datepicker__navigation--next--with-today-button) {`
`228`	`230`	`right: 80px;`
`229`	`231`	`}`
`230`	`232`	`:global .react-datepicker__navigation--next:hover {`
`231`		`- border-left-color: #b3b3b3;`
	`233`	`+ border-left-color: transparent;`
`232`	`234`	`}`
`233`	`235`	`:global .react-datepicker__navigation--next--disabled,`
`234`	`236`	`:global .react-datepicker__navigation--next--disabled:hover {`
`@@ -556,7 +558,7 @@`
`556`	`558`	`:global`
`557`	`559`	`.react-datepicker__month-year-option:hover`
`558`	`560`	`.react-datepicker__navigation--years-upcoming {`
`559`		`- border-bottom-color: #b3b3b3;`
	`561`	`+ border-bottom-color: transparent;`
`560`	`562`	`}`
`561`	`563`	`:global`
`562`	`564`	`.react-datepicker__year-option:hover`
`@@ -567,7 +569,7 @@`
`567`	`569`	`:global`
`568`	`570`	`.react-datepicker__month-year-option:hover`
`569`	`571`	`.react-datepicker__navigation--years-previous {`
`570`		`- border-top-color: #b3b3b3;`
	`572`	`+ border-top-color: transparent;`
`571`	`573`	`}`
`572`	`574`	`:global .react-datepicker__year-option--selected,`
`573`	`575`	`:global .react-datepicker__month-option--selected,`
Original file line number	Diff line number	Diff line change
`@@ -180,10 +180,11 @@`
`180`	`180`	`}`
`181`	`181`	`.react-datepicker__navigation--previous {`
`182`	`182`	`left: 10px;`
`183`		`- border-right-color: #ccc;`
	`183`	`+ border-right-color: transparent;`
	`184`	`+ border-color: transparent;`
`184`	`185`	`}`
`185`	`186`	`.react-datepicker__navigation--previous:hover {`
`186`		`- border-right-color: #b3b3b3;`
	`187`	`+ border-right-color: transparent;`
`187`	`188`	`}`
`188`	`189`	`.react-datepicker__navigation--previous--disabled,`
`189`	`190`	`.react-datepicker__navigation--previous--disabled:hover {`
`@@ -192,13 +193,14 @@`
`192`	`193`	`}`
`193`	`194`	`.react-datepicker__navigation--next {`
`194`	`195`	`right: 10px;`
`195`		`- border-left-color: #ccc;`
	`196`	`+ border-left-color: transparent;`
	`197`	`+ border-color: transparent;`
`196`	`198`	`}`
`197`	`199`	`.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {`
`198`	`200`	`right: 80px;`
`199`	`201`	`}`
`200`	`202`	`.react-datepicker__navigation--next:hover {`
`201`		`- border-left-color: #b3b3b3;`
	`203`	`+ border-left-color: transparent;`
`202`	`204`	`}`
`203`	`205`	`.react-datepicker__navigation--next--disabled,`
`204`	`206`	`.react-datepicker__navigation--next--disabled:hover {`
`@@ -503,15 +505,15 @@`
`503`	`505`	`.react-datepicker__navigation--years-upcoming,`
`504`	`506`	`.react-datepicker__month-year-option:hover`
`505`	`507`	`.react-datepicker__navigation--years-upcoming {`
`506`		`- border-bottom-color: #b3b3b3;`
	`508`	`+ border-bottom-color: transparent;`
`507`	`509`	`}`
`508`	`510`	`.react-datepicker__year-option:hover`
`509`	`511`	`.react-datepicker__navigation--years-previous,`
`510`	`512`	`.react-datepicker__month-option:hover`
`511`	`513`	`.react-datepicker__navigation--years-previous,`
`512`	`514`	`.react-datepicker__month-year-option:hover`
`513`	`515`	`.react-datepicker__navigation--years-previous {`
`514`		`- border-top-color: #b3b3b3;`
	`516`	`+ border-top-color: transparent;`
`515`	`517`	`}`
`516`	`518`	`.react-datepicker__year-option--selected,`
`517`	`519`	`.react-datepicker__month-option--selected,`
Original file line number	Diff line number	Diff line change
`@@ -195,10 +195,11 @@`
`195`	`195`	`}`
`196`	`196`	`.react-datepicker__navigation--previous {`
`197`	`197`	`left: 10px;`
`198`		`- border-right-color: #ccc;`
	`198`	`+ border-right-color: transparent;`
	`199`	`+ border-color: transparent;`
`199`	`200`	`}`
`200`	`201`	`.react-datepicker__navigation--previous:hover {`
`201`		`- border-right-color: #b3b3b3;`
	`202`	`+ border-right-color: transparent;`
`202`	`203`	`}`
`203`	`204`	`.react-datepicker__navigation--previous--disabled,`
`204`	`205`	`.react-datepicker__navigation--previous--disabled:hover {`
`@@ -207,13 +208,14 @@`
`207`	`208`	`}`
`208`	`209`	`.react-datepicker__navigation--next {`
`209`	`210`	`right: 10px;`
`210`		`- border-left-color: #ccc;`
	`211`	`+ border-left-color: transparent;`
	`212`	`+ border-color: transparent;`
`211`	`213`	`}`
`212`	`214`	`.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {`
`213`	`215`	`right: 80px;`
`214`	`216`	`}`
`215`	`217`	`.react-datepicker__navigation--next:hover {`
`216`		`- border-left-color: #b3b3b3;`
	`218`	`+ border-left-color: transparent;`
`217`	`219`	`}`
`218`	`220`	`.react-datepicker__navigation--next--disabled,`
`219`	`221`	`.react-datepicker__navigation--next--disabled:hover {`
`@@ -529,15 +531,15 @@`
`529`	`531`	`.react-datepicker__navigation--years-upcoming,`
`530`	`532`	`.react-datepicker__month-year-option:hover`
`531`	`533`	`.react-datepicker__navigation--years-upcoming {`
`532`		`- border-bottom-color: #b3b3b3;`
	`534`	`+ border-bottom-color: transparent;`
`533`	`535`	`}`
`534`	`536`	`.react-datepicker__year-option:hover`
`535`	`537`	`.react-datepicker__navigation--years-previous,`
`536`	`538`	`.react-datepicker__month-option:hover`
`537`	`539`	`.react-datepicker__navigation--years-previous,`
`538`	`540`	`.react-datepicker__month-year-option:hover`
`539`	`541`	`.react-datepicker__navigation--years-previous {`
`540`		`- border-top-color: #b3b3b3;`
	`542`	`+ border-top-color: transparent;`
`541`	`543`	`}`
`542`	`544`	`.react-datepicker__year-option--selected,`
`543`	`545`	`.react-datepicker__month-option--selected,`
Original file line number	Diff line number	Diff line change
`@@ -131,10 +131,11 @@`
`131`	`131`
`132`	`132`	`&--previous {`
`133`	`133`	`left: 10px;`
`134`		`- border-right-color: $datepicker__muted-color;`
	`134`	`+ border-right-color: transparent;`
	`135`	`+ border-color: transparent;`
`135`	`136`
`136`	`137`	`&:hover {`
`137`		`- border-right-color: darken($datepicker__muted-color, 10%);`
	`138`	`+ border-right-color: transparent;`
`138`	`139`	`}`
`139`	`140`
`140`	`141`	`&--disabled,`
`@@ -146,13 +147,14 @@`
`146`	`147`
`147`	`148`	`&--next {`
`148`	`149`	`right: 10px;`
`149`		`- border-left-color: $datepicker__muted-color;`
	`150`	`+ border-left-color: transparent;`
	`151`	`+ border-color: transparent;`
`150`	`152`	`&--with-time:not(&--with-today-button) {`
`151`	`153`	`right: 80px;`
`152`	`154`	`}`
`153`	`155`
`154`	`156`	`&:hover {`
`155`		`- border-left-color: darken($datepicker__muted-color, 10%);`
	`157`	`+ border-left-color: transparent;`
`156`	`158`	`}`
`157`	`159`
`158`	`160`	`&--disabled,`
`@@ -444,11 +446,11 @@`
`444`	`446`	`background-color: $datepicker__muted-color;`
`445`	`447`
`446`	`448`	`.react-datepicker__navigation--years-upcoming {`
`447`		`- border-bottom-color: darken($datepicker__muted-color, 10%);`
	`449`	`+ border-bottom-color: transparent;`
`448`	`450`	`}`
`449`	`451`
`450`	`452`	`.react-datepicker__navigation--years-previous {`
`451`		`- border-top-color: darken($datepicker__muted-color, 10%);`
	`453`	`+ border-top-color: transparent;`
`452`	`454`	`}`
`453`	`455`	`}`
`454`	`456`