fix: allow focus rings on pointer coarse devices (#7704)

* allow focus rings on pointer coarse devices * change CSS selectors * change order of selectors * fix dumb mistake
vaadin · Aug 29, 2024 · 5824618 · 5824618
1 parent 8471108
commit 5824618
Showing 1 changed file with 2 additions and 3 deletions.
diff --git a/packages/date-picker/theme/lumo/vaadin-month-calendar-styles.js b/packages/date-picker/theme/lumo/vaadin-month-calendar-styles.js
@@ -137,19 +137,18 @@ registerStyles(
 
     @media (pointer: coarse) {
       [part~='date']:hover:not([part~='selected'])::before,
-      [part~='focused']:not([part~='selected'])::before {
+      :host(:not([focus-ring])) [part~='focused']:not([part~='selected'])::before {
         display: none;
       }
 
       [part~='date']:not(:empty):not([part~='disabled']):active::before {
         display: block;
       }
 
-      [part~='date'][part~='selected']::before {
+      :host(:not([focus-ring])) [part~='date'][part~='selected']::before {
         box-shadow: none;
       }
     }
-
     /* Disabled */
 
     :host([disabled]) * {