using media query to apply hover style for days #202

shahabyazdi · Oct 28, 2023 · d47da70 · d47da70
1 parent 042d302
commit d47da70
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/changelog.md b/changelog.md
@@ -1,3 +1,7 @@
+# 4.4.1
+
+- Using media query to apply hover style for days. [#202](https://github.com/shahabyazdi/react-multi-date-picker/issues/202#issuecomment-1773860684)
+
 # 4.4.0
 
 - rangeHover prop is now supported in the multiple-range mode. [#234](https://github.com/shahabyazdi/react-multi-date-picker/issues/234)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-multi-date-picker",
-  "version": "4.4.0",
+  "version": "4.4.1",
   "description": "A simple React datepicker component for working with gregorian, persian, arabic and indian calendars with the ability to select the date by single, multiple, range and multiple range pickers.",
   "main": "./build/index.js",
   "types": "index.d.ts",

diff --git a/src/components/calendar/calendar.css b/src/components/calendar/calendar.css
@@ -162,9 +162,11 @@
   border-bottom-right-radius: 15px;
 }
 
-.rmdp-day:not(.rmdp-disabled, .rmdp-day-hidden, .rmdp-selected) span:hover {
-  background-color: var(--rmdp-hover);
-  color: white;
+@media (hover: hover) {
+  .rmdp-day:not(.rmdp-disabled, .rmdp-day-hidden) span:hover {
+    background-color: var(--rmdp-hover);
+    color: white;
+  }
 }
 
 .rmdp-day-picker {