refactor: remove duplicate CSS selectors from themes (#7568)

vaadin · Jul 18, 2024 · d3dad14 · d3dad14
1 parent 27284bc
commit d3dad14
Show file tree

Hide file tree

Showing 6 changed files with 5 additions and 29 deletions.
diff --git a/packages/app-layout/theme/material/vaadin-app-layout-styles.js b/packages/app-layout/theme/material/vaadin-app-layout-styles.js
@@ -18,9 +18,6 @@ registerStyles(
 
     [part='drawer'] {
       background: var(--material-background-color);
-    }
-
-    [part='drawer'] {
       border-inline-end: 1px solid var(--material-secondary-background-color);
     }
 

diff --git a/packages/app-layout/theme/material/vaadin-drawer-toggle-styles.js b/packages/app-layout/theme/material/vaadin-drawer-toggle-styles.js
@@ -12,12 +12,6 @@ const drawerToggle = css`
     margin-inline-end: 1em;
   }
 
-  [part='icon'],
-  [part='icon']::after,
-  [part='icon']::before {
-    background-color: currentColor;
-  }
-
   [part='icon'] {
     top: 18px;
     left: 15px;
@@ -26,6 +20,7 @@ const drawerToggle = css`
   [part='icon'],
   [part='icon']::after,
   [part='icon']::before {
+    background-color: currentColor;
     height: 2px;
     width: 18px;
   }

diff --git a/packages/date-picker/theme/lumo/vaadin-date-picker-overlay-styles.js b/packages/date-picker/theme/lumo/vaadin-date-picker-overlay-styles.js
@@ -22,9 +22,6 @@ const datePickerOverlay = css`
     max-height: calc(var(--lumo-size-m) * 14);
     overflow: hidden;
     -webkit-tap-highlight-color: transparent;
-  }
-
-  [part='overlay'] {
     flex-direction: column;
   }
 

diff --git a/packages/login/theme/lumo/vaadin-login-overlay-styles.js b/packages/login/theme/lumo/vaadin-login-overlay-styles.js
@@ -14,10 +14,6 @@ const loginOverlayWrapper = css`
     background: var(--lumo-base-color) linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
   }
 
-  [part='content'] {
-    padding: 0;
-  }
-
   [part='overlay'] {
     background: none;
     border-radius: 0;
@@ -26,11 +22,6 @@ const loginOverlayWrapper = css`
     height: 100%;
   }
 
-  [part='card'] {
-    width: calc(var(--lumo-size-m) * 10);
-    background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
-  }
-
   [part='brand'] {
     padding: var(--lumo-space-l) var(--lumo-space-xl) var(--lumo-space-l) var(--lumo-space-l);
     background-color: var(--lumo-primary-color);
@@ -49,9 +40,12 @@ const loginOverlayWrapper = css`
     display: flex;
     align-items: center;
     justify-content: center;
+    padding: 0;
   }
 
   [part='card'] {
+    width: calc(var(--lumo-size-m) * 10);
+    background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
     border-radius: var(--lumo-border-radius-l);
     box-shadow: var(--lumo-box-shadow-s);
     margin: var(--lumo-space-s);

diff --git a/packages/tabs/theme/lumo/vaadin-tab-styles.js b/packages/tabs/theme/lumo/vaadin-tab-styles.js
@@ -94,11 +94,6 @@ registerStyles(
       will-change: transform;
     }
 
-    :host([selected])::before,
-    :host([selected])::after {
-      background-color: var(--_selection-color);
-    }
-
     :host([orientation='vertical'])::before,
     :host([orientation='vertical'])::after {
       left: 0;
@@ -120,6 +115,7 @@ registerStyles(
 
     :host([selected])::before,
     :host([selected])::after {
+      background-color: var(--_selection-color);
       transform: translateX(-50%) scale(1);
       transition-timing-function: cubic-bezier(0.12, 0.32, 0.54, 1.5);
     }

diff --git a/packages/tabs/theme/material/vaadin-tabs-styles.js b/packages/tabs/theme/material/vaadin-tabs-styles.js
@@ -7,9 +7,6 @@ registerStyles(
   css`
     :host {
       -webkit-tap-highlight-color: transparent;
-    }
-
-    :host {
       display: flex;
       flex-shrink: 0;
     }