🐛🎨 Update the hover style to be applied only to the non-disabled cale…

…ndar items Closes #4986
Hacker0x01 · Jul 18, 2024 · 08cdae9 · 08cdae9
1 parent 0bd3acc
commit 08cdae9
Showing 1 changed file with 5 additions and 9 deletions.
diff --git a/src/stylesheets/datepicker.scss b/src/stylesheets/datepicker.scss
@@ -402,7 +402,7 @@ h2.react-datepicker__current-month {
 .react-datepicker__year-text {
   cursor: pointer;
 
-  &:hover {
+  &:not([aria-disabled="true"]):hover {
     border-radius: $datepicker__border-radius;
     background-color: $datepicker__background-color;
   }
@@ -416,7 +416,7 @@ h2.react-datepicker__current-month {
     background-color: $datepicker__highlighted-color;
     color: #fff;
 
-    &:hover {
+    &:not([aria-disabled="true"]):hover {
       background-color: darken($datepicker__highlighted-color, 5%);
     }
 
@@ -452,7 +452,7 @@ h2.react-datepicker__current-month {
         opacity 0.3s ease-in-out;
     }
 
-    &:hover {
+    &:not([aria-disabled="true"]):hover {
       background-color: darken($datepicker__holidays-color, 10%);
     }
 
@@ -469,7 +469,7 @@ h2.react-datepicker__current-month {
     background-color: $datepicker__selected-color;
     color: #fff;
 
-    &:hover {
+    &:not([aria-disabled="true"]):hover {
       background-color: darken($datepicker__selected-color, 5%);
     }
   }
@@ -479,7 +479,7 @@ h2.react-datepicker__current-month {
     background-color: lighten($datepicker__selected-color, 45%);
     color: rgb(0, 0, 0);
 
-    &:hover {
+    &:not([aria-disabled="true"]):hover {
       background-color: darken($datepicker__selected-color, 5%);
     }
   }
@@ -500,10 +500,6 @@ h2.react-datepicker__current-month {
     cursor: default;
     color: $datepicker__muted-color;
 
-    &:hover {
-      background-color: transparent;
-    }
-
     .overlay {
       position: absolute;
       bottom: 70%;