refactor: cleanup duplicate combo-box item styles (#3000)

vaadin · Nov 10, 2021 · 8ecad25 · 8ecad25
1 parent 40af58b
commit 8ecad25
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 43 deletions.
diff --git a/packages/combo-box/theme/lumo/vaadin-combo-box-item-styles.js b/packages/combo-box/theme/lumo/vaadin-combo-box-item-styles.js
@@ -4,42 +4,18 @@ import '@vaadin/vaadin-lumo-styles/style.js';
 import { item } from '@vaadin/item/theme/lumo/vaadin-item-styles.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 
-/* TODO partly duplicated from vaadin-list-box styles. Should find a way to make it DRY */
 const comboBoxItem = css`
   :host {
-    cursor: default;
-    -webkit-tap-highlight-color: var(--lumo-primary-color-10pct);
-    padding-left: calc(var(--lumo-border-radius-m) / 4);
-    padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
     transition: background-color 100ms;
-    border-radius: var(--lumo-border-radius-m);
     overflow: hidden;
     --_lumo-item-selected-icon-display: block;
   }
 
-  :host(:hover) {
-    background-color: var(--lumo-primary-color-10pct);
-  }
-
-  :host([focused]:not([disabled])) {
-    box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
-  }
-
-  @media (pointer: coarse) {
-    :host(:hover) {
-      background-color: transparent;
-    }
-
+  @media (any-hover: hover) {
     :host([focused]:not([disabled])) {
-      box-shadow: none;
+      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
     }
   }
-
-  /* RTL specific styles */
-  :host([dir='rtl']) {
-    padding-right: calc(var(--lumo-border-radius-m) / 4);
-    padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
-  }
 `;
 
 registerStyles('vaadin-combo-box-item', [item, comboBoxItem], {

diff --git a/packages/combo-box/theme/material/vaadin-combo-box-item-styles.js b/packages/combo-box/theme/material/vaadin-combo-box-item-styles.js
@@ -9,25 +9,8 @@ const comboBoxItem = css`
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
     padding: 4px 10px;
-    min-height: 36px;
-    font-size: var(--material-small-font-size);
     --_material-item-selected-icon-display: block;
   }
-
-  :host(:hover) {
-    background-color: var(--material-secondary-background-color);
-  }
-
-  :host([focused]) {
-    background-color: var(--material-divider-color);
-  }
-
-  @media (pointer: coarse) {
-    :host(:hover),
-    :host([focused]) {
-      background-color: transparent;
-    }
-  }
 `;
 
 registerStyles('vaadin-combo-box-item', [item, comboBoxItem], {