fix(themes): ignore hover styles on mobile device (#129)

Co-authored-by: Theeraphat-Sorasetsakul <[email protected]>
Refinitiv · Dec 20, 2021 · ac279a9 · ac279a9
1 parent 4648b8d
commit ac279a9
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/packages/elemental-theme/src/custom-elements/ef-toggle.less b/packages/elemental-theme/src/custom-elements/ef-toggle.less
@@ -85,10 +85,12 @@
     background-color: @scheme-color-primary;
   }
 
-  &:hover:not([readonly]), &[focused=visible] {
-    box-shadow: 0 0 (@global-box-shadow-blur-radius * 0.75) @input-focused-border-color;
-    [part=toggle] {
-      border-color: @input-focused-border-color;
+  .desktop-specific({
+    &:hover:not([readonly]), &[focused=visible] {
+      box-shadow: 0 0 (@global-box-shadow-blur-radius * 0.75) @input-focused-border-color;
+      [part=toggle] {
+        border-color: @input-focused-border-color;
+      }
     }
-  }
+  });
 }
diff --git a/packages/halo-theme/src/custom-elements/ef-toggle.less b/packages/halo-theme/src/custom-elements/ef-toggle.less
@@ -50,16 +50,18 @@
     right: @switch-margin;
   }
 
-  &:hover:not([readonly]) {
-    color: @input-hover-text-color;
-    [part=toggle] {
-      border-color: @scheme-color-primary;
-      &::after {
-        background-color: @scheme-color-primary;
+  .desktop-specific({
+    &:hover:not([readonly]) {
+      color: @input-hover-text-color;
+      [part=toggle] {
         border-color: @scheme-color-primary;
+        &::after {
+          background-color: @scheme-color-primary;
+          border-color: @scheme-color-primary;
+        }
       }
     }
-  }
+  });
 
   // Spacial style for dark theme only
   & when (@variant = dark) {