Skip to content

Commit ee8673b

Browse files
web-padawanweb-padawan
authored
experiment: wrap CSS in base styles files with base layer (#9300)
1 parent 8367dd2 commit ee8673b

File tree

5 files changed

+95
-85
lines changed

5 files changed

+95
-85
lines changed

‎packages/combo-box/src/styles/vaadin-combo-box-base-styles.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,13 @@ import '@vaadin/component-base/src/style-props.js';
77
import { css } from 'lit';
88

99
export const comboBoxStyles = css`
10-
:host([opened]) {
11-
pointer-events: auto;
12-
}
10+
@layer base {
11+
:host([opened]) {
12+
pointer-events: auto;
13+
}
1314
14-
[part='toggle-button']::before {
15-
mask-image: var(--_vaadin-icon-chevron-down);
15+
[part='toggle-button']::before {
16+
mask-image: var(--_vaadin-icon-chevron-down);
17+
}
1618
}
1719
`;

‎packages/combo-box/src/styles/vaadin-combo-box-overlay-base-styles.js‎

Lines changed: 45 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -7,57 +7,59 @@ import '@vaadin/component-base/src/style-props.js';
77
import { css } from 'lit';
88

99
export const comboBoxOverlayStyles = css`
10-
:host {
11-
--vaadin-item-checkmark-display: block;
12-
}
10+
@layer base {
11+
:host {
12+
--vaadin-item-checkmark-display: block;
13+
}
1314
14-
[part='overlay'] {
15-
position: relative;
16-
width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
17-
}
15+
[part='overlay'] {
16+
position: relative;
17+
width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
18+
}
1819
19-
[part='loader'] {
20-
animation: spin 1s linear infinite;
21-
border: 2px solid;
22-
--_spinner-color: var(--vaadin-combo-box-spinner-color, var(--_vaadin-color-strong));
23-
border-color: var(--_spinner-color) var(--_spinner-color) hsl(from var(--_spinner-color) h s l / 0.2)
24-
hsl(from var(--_spinner-color) h s l / 0.2);
25-
border-radius: var(--_vaadin-radius-full);
26-
box-sizing: border-box;
27-
display: none;
28-
height: var(--vaadin-icon-size, 1lh);
29-
inset: calc(var(--vaadin-item-overlay-padding, 4px) + 2px);
30-
inset-block-end: auto;
31-
inset-inline-start: auto;
32-
pointer-events: none;
33-
position: absolute;
34-
width: var(--vaadin-icon-size, 1lh);
35-
}
20+
[part='loader'] {
21+
animation: spin 1s linear infinite;
22+
border: 2px solid;
23+
--_spinner-color: var(--vaadin-combo-box-spinner-color, var(--_vaadin-color-strong));
24+
border-color: var(--_spinner-color) var(--_spinner-color) hsl(from var(--_spinner-color) h s l / 0.2)
25+
hsl(from var(--_spinner-color) h s l / 0.2);
26+
border-radius: var(--_vaadin-radius-full);
27+
box-sizing: border-box;
28+
display: none;
29+
height: var(--vaadin-icon-size, 1lh);
30+
inset: calc(var(--vaadin-item-overlay-padding, 4px) + 2px);
31+
inset-block-end: auto;
32+
inset-inline-start: auto;
33+
pointer-events: none;
34+
position: absolute;
35+
width: var(--vaadin-icon-size, 1lh);
36+
}
3637
37-
[part='content'] {
38-
display: flex;
39-
flex-direction: column;
40-
height: 100%;
41-
}
38+
[part='content'] {
39+
display: flex;
40+
flex-direction: column;
41+
height: 100%;
42+
}
4243
43-
:host([loading]) [part='loader'] {
44-
display: block;
45-
}
44+
:host([loading]) [part='loader'] {
45+
display: block;
46+
}
4647
47-
:host([loading]) [part='content'] {
48-
--_items-min-height: calc(var(--vaadin-icon-size, 1lh) + 4px);
49-
}
48+
:host([loading]) [part='content'] {
49+
--_items-min-height: calc(var(--vaadin-icon-size, 1lh) + 4px);
50+
}
5051
51-
@keyframes spin {
52-
to {
53-
rotate: 1turn;
52+
@keyframes spin {
53+
to {
54+
rotate: 1turn;
55+
}
5456
}
55-
}
5657
57-
@media (forced-colors: active) {
58-
[part='loader'] {
59-
forced-color-adjust: none;
60-
--vaadin-combo-box-spinner-color: CanvasText;
58+
@media (forced-colors: active) {
59+
[part='loader'] {
60+
forced-color-adjust: none;
61+
--vaadin-combo-box-spinner-color: CanvasText;
62+
}
6163
}
6264
}
6365
`;

‎packages/combo-box/src/styles/vaadin-combo-box-scroller-base-styles.js‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,26 @@
66
import { css } from 'lit';
77

88
export const comboBoxScrollerStyles = css`
9-
:host {
10-
/* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
11-
box-shadow: 0 0 0 white;
12-
display: block;
13-
min-height: 1px;
14-
overflow: auto;
15-
/* Fixes item background from getting on top of scrollbars on Safari */
16-
transform: translate3d(0, 0, 0);
17-
}
9+
@layer base {
10+
:host {
11+
/* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
12+
box-shadow: 0 0 0 white;
13+
display: block;
14+
min-height: 1px;
15+
overflow: auto;
16+
/* Fixes item background from getting on top of scrollbars on Safari */
17+
transform: translate3d(0, 0, 0);
18+
}
1819
19-
#selector {
20-
border: var(--vaadin-item-overlay-padding, 4px) solid transparent;
21-
position: relative;
22-
forced-color-adjust: none;
23-
min-height: var(--_items-min-height, auto);
24-
}
20+
#selector {
21+
border: var(--vaadin-item-overlay-padding, 4px) solid transparent;
22+
position: relative;
23+
forced-color-adjust: none;
24+
min-height: var(--_items-min-height, auto);
25+
}
2526
26-
#selector > * {
27-
forced-color-adjust: auto;
27+
#selector > * {
28+
forced-color-adjust: auto;
29+
}
2830
}
2931
`;

‎packages/time-picker/src/styles/vaadin-time-picker-base-styles.js‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,19 @@ import '@vaadin/component-base/src/style-props.js';
77
import { css } from 'lit';
88

99
export const timePickerStyles = css`
10-
[part='toggle-button']::before {
11-
mask-image: var(--_vaadin-icon-clock);
12-
}
10+
@layer base {
11+
[part='toggle-button']::before {
12+
mask-image: var(--_vaadin-icon-clock);
13+
}
1314
14-
/* See https://github.com/vaadin/vaadin-time-picker/issues/145 */
15-
:host([dir='rtl']) [part='input-field'] {
16-
direction: ltr;
17-
}
15+
/* See https://github.com/vaadin/vaadin-time-picker/issues/145 */
16+
:host([dir='rtl']) [part='input-field'] {
17+
direction: ltr;
18+
}
1819
19-
:host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
20-
direction: rtl;
21-
text-align: left;
20+
:host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
21+
direction: rtl;
22+
text-align: left;
23+
}
2224
}
2325
`;

‎packages/time-picker/src/styles/vaadin-time-picker-overlay-base-styles.js‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,19 @@
66
import { css } from 'lit';
77

88
export const timePickerOverlayStyles = css`
9-
:host {
10-
--vaadin-item-checkmark-display: block;
11-
}
9+
@layer base {
10+
:host {
11+
--vaadin-item-checkmark-display: block;
12+
}
1213
13-
#overlay {
14-
width: var(--vaadin-time-picker-overlay-width, var(--_vaadin-time-picker-overlay-default-width, auto));
15-
}
14+
#overlay {
15+
width: var(--vaadin-time-picker-overlay-width, var(--_vaadin-time-picker-overlay-default-width, auto));
16+
}
1617
17-
[part='content'] {
18-
display: flex;
19-
flex-direction: column;
20-
height: 100%;
18+
[part='content'] {
19+
display: flex;
20+
flex-direction: column;
21+
height: 100%;
22+
}
2123
}
2224
`;

0 commit comments

Comments
 (0)