update Lumo and Material to not show hover effect when disabled

vaadin · Jan 16, 2025 · 35f06ee · 35f06ee
1 parent 82509ff
commit 35f06ee
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/packages/button/theme/lumo/vaadin-button-styles.js b/packages/button/theme/lumo/vaadin-button-styles.js
@@ -75,7 +75,7 @@ const button = css`
   /* Hover */
 
   @media (any-hover: hover) {
-    :host(:hover)::before {
+    :host(:not([disabled]):hover)::before {
       opacity: 0.02;
     }
   }
@@ -159,7 +159,7 @@ const button = css`
   }
 
   @media (any-hover: hover) {
-    :host([theme~='primary']:hover)::before {
+    :host([theme~='primary']:not([disabled]):hover)::before {
       opacity: 0.05;
     }
   }

diff --git a/packages/button/theme/material/vaadin-button-styles.js b/packages/button/theme/material/vaadin-button-styles.js
@@ -60,7 +60,7 @@ const button = css`
     vertical-align: middle;
   }
 
-  :host(:hover)::before,
+  :host(:hover:not([disabled]))::before,
   :host([focus-ring])::before {
     opacity: 0.08;
     transition-duration: 0.2s;
@@ -77,7 +77,7 @@ const button = css`
     transition: 0s;
   }
 
-  :host(:hover:not([active]))::after {
+  :host(:hover:not([active]):not([disabled]))::after {
     transform: translate(-50%, -50%) scale(1);
     opacity: 0;
   }

diff --git a/packages/vaadin-lumo-styles/mixins/input-field-shared.js b/packages/vaadin-lumo-styles/mixins/input-field-shared.js
@@ -47,17 +47,17 @@ const inputField = css`
   }
 
   /* Hover */
-  :host(:hover:not([readonly]):not([focused])) [part='input-field']::after {
+  :host(:hover:not([readonly]):not([focused]):not([disabled])) [part='input-field']::after {
     opacity: var(--vaadin-input-field-hover-highlight-opacity, 0.1);
   }
 
   /* Touch device adjustment */
   @media (pointer: coarse) {
-    :host(:hover:not([readonly]):not([focused])) [part='input-field']::after {
+    :host(:hover:not([readonly]):not([focused]):not([disabled])) [part='input-field']::after {
       opacity: 0;
     }
 
-    :host(:active:not([readonly]):not([focused])) [part='input-field']::after {
+    :host(:active:not([readonly]):not([focused]):not([disabled])) [part='input-field']::after {
       opacity: 0.2;
     }
   }