From f6170e234ba66e7caf004ee6ba85c90b731e28e9 Mon Sep 17 00:00:00 2001 From: Artur Signell Date: Tue, 7 Jul 2026 15:40:00 +0300 Subject: [PATCH] refactor: Make styles an array To reduce the changes in https://github.com/vaadin/web-components/pull/12041 --- ...date-picker-overlay-content-base-styles.js | 189 +++++++++--------- 1 file changed, 97 insertions(+), 92 deletions(-) diff --git a/packages/date-picker/src/styles/vaadin-date-picker-overlay-content-base-styles.js b/packages/date-picker/src/styles/vaadin-date-picker-overlay-content-base-styles.js index d3f80d52e1f..08ff8d7ab15 100644 --- a/packages/date-picker/src/styles/vaadin-date-picker-overlay-content-base-styles.js +++ b/packages/date-picker/src/styles/vaadin-date-picker-overlay-content-base-styles.js @@ -6,108 +6,113 @@ import '@vaadin/component-base/src/styles/style-props.js'; import { css } from 'lit'; -export const overlayContentStyles = css` - :host { - display: grid; - grid-template-areas: - 'header header' - 'months years' - 'toolbar years'; - grid-template-columns: minmax(0, 1fr) 0; - height: 100%; - outline: none; - overflow: hidden; - } +export const overlayContentStyles = [ + css` + :host { + display: grid; + grid-template-areas: + 'header header' + 'months years' + 'toolbar years'; + grid-template-columns: minmax(0, 1fr) 0; + height: 100%; + outline: none; + overflow: hidden; + } - :host([desktop]) { - grid-template-columns: minmax(0, 1fr) auto; - } + :host([desktop]) { + grid-template-columns: minmax(0, 1fr) auto; + } - :host([fullscreen][years-visible]) { - grid-template-columns: minmax(0, 1fr) auto; - } + :host([fullscreen][years-visible]) { + grid-template-columns: minmax(0, 1fr) auto; + } - [part='years-toggle-button'] { - display: inline-flex; - align-items: center; - border-radius: var(--vaadin-button-border-radius, var(--vaadin-radius-m)); - color: var(--vaadin-text-color); - font-size: var(--vaadin-button-font-size, inherit); - font-weight: var(--vaadin-button-font-weight, 500); - height: var(--vaadin-button-height, auto); - line-height: var(--vaadin-button-line-height, inherit); - padding: var(--vaadin-button-padding, var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container)); - cursor: var(--vaadin-clickable-cursor); - } + [part='years-toggle-button'] { + display: inline-flex; + align-items: center; + border-radius: var(--vaadin-button-border-radius, var(--vaadin-radius-m)); + color: var(--vaadin-text-color); + font-size: var(--vaadin-button-font-size, inherit); + font-weight: var(--vaadin-button-font-weight, 500); + height: var(--vaadin-button-height, auto); + line-height: var(--vaadin-button-line-height, inherit); + padding: var( + --vaadin-button-padding, + var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container) + ); + cursor: var(--vaadin-clickable-cursor); + } - :host([years-visible]) [part='years-toggle-button'] { - background: var(--vaadin-text-color); - color: var(--vaadin-background-color); - } + :host([years-visible]) [part='years-toggle-button'] { + background: var(--vaadin-text-color); + color: var(--vaadin-background-color); + } - [hidden] { - display: none !important; - } + [hidden] { + display: none !important; + } - ::slotted([slot='months']) { - --vaadin-infinite-scroller-item-height: round( - var(--vaadin-date-picker-month-header-font-size, 0.9375rem) + 0.75rem + - var(--vaadin-date-picker-date-height, 2rem) * 7 + var(--_vaadin-date-picker-week-numbers-visible, 0) * - ( - var(--vaadin-date-picker-week-number-font-size, 0.7rem) * 6.25 + - var(--vaadin-date-picker-month-padding, var(--vaadin-padding-s)) * 3 - ), - 1px - ); - } + ::slotted([slot='months']) { + --vaadin-infinite-scroller-item-height: round( + var(--vaadin-date-picker-month-header-font-size, 0.9375rem) + 0.75rem + + var(--vaadin-date-picker-date-height, 2rem) * 7 + var(--_vaadin-date-picker-week-numbers-visible, 0) * + ( + var(--vaadin-date-picker-week-number-font-size, 0.7rem) * 6.25 + + var(--vaadin-date-picker-month-padding, var(--vaadin-padding-s)) * 3 + ), + 1px + ); + } - :host(:not([fullscreen])) ::slotted([slot='months']) { - border-bottom: 1px solid var(--vaadin-border-color-secondary); - } + :host(:not([fullscreen])) ::slotted([slot='months']) { + border-bottom: 1px solid var(--vaadin-border-color-secondary); + } - ::slotted([slot='years']) { - visibility: hidden; - background: var(--vaadin-date-picker-year-scroller-background, var(--vaadin-background-container)); - width: var(--vaadin-date-picker-year-scroller-width, 3rem); - box-sizing: border-box; - border-inline-start: 1px solid - var(--vaadin-date-picker-year-scroller-border-color, var(--vaadin-border-color-secondary)); - overflow: visible; - min-height: 0; - clip-path: inset(0); - } + ::slotted([slot='years']) { + visibility: hidden; + background: var(--vaadin-date-picker-year-scroller-background, var(--vaadin-background-container)); + width: var(--vaadin-date-picker-year-scroller-width, 3rem); + box-sizing: border-box; + border-inline-start: 1px solid + var(--vaadin-date-picker-year-scroller-border-color, var(--vaadin-border-color-secondary)); + overflow: visible; + min-height: 0; + clip-path: inset(0); + } - ::slotted([slot='years'])::before { - background: var(--vaadin-overlay-background, var(--vaadin-background-color)); - border: 1px solid var(--vaadin-date-picker-year-scroller-border-color, var(--vaadin-border-color-secondary)); - width: 16px; - height: 16px; - position: absolute; - left: auto; - z-index: 1; - rotate: 45deg; - translate: calc(-50% - 1px) -50%; - transform: none; - } + ::slotted([slot='years'])::before { + background: var(--vaadin-overlay-background, var(--vaadin-background-color)); + border: 1px solid var(--vaadin-date-picker-year-scroller-border-color, var(--vaadin-border-color-secondary)); + width: 16px; + height: 16px; + position: absolute; + left: auto; + z-index: 1; + rotate: 45deg; + translate: calc(-50% - 1px) -50%; + transform: none; + } - :host([dir='rtl']) ::slotted([slot='years'])::before { - translate: calc(50% + 1px) -50%; - } + :host([dir='rtl']) ::slotted([slot='years'])::before { + translate: calc(50% + 1px) -50%; + } - :host([desktop]) ::slotted([slot='years']), - :host([years-visible]) ::slotted([slot='years']) { - visibility: visible; - } + :host([desktop]) ::slotted([slot='years']), + :host([years-visible]) ::slotted([slot='years']) { + visibility: visible; + } - [part='toolbar'] { - display: flex; - grid-area: toolbar; - justify-content: space-between; - padding: var(--vaadin-date-picker-toolbar-padding, var(--vaadin-padding-s)); - } + [part='toolbar'] { + display: flex; + grid-area: toolbar; + justify-content: space-between; + padding: var(--vaadin-date-picker-toolbar-padding, var(--vaadin-padding-s)); + } - :host([fullscreen]) [part='toolbar'] { - grid-area: header; - border-bottom: 1px solid var(--vaadin-border-color-secondary); - } -`; + :host([fullscreen]) [part='toolbar'] { + grid-area: header; + border-bottom: 1px solid var(--vaadin-border-color-secondary); + } + `, +];