Skip to content

Commit 539400e

Browse files
juuso-vaadinjuuso-vaadin
committed
Fixes notification and tab styles
1 parent 0a88bcc commit 539400e

File tree

9 files changed

+85
-170
lines changed

9 files changed

+85
-170
lines changed

‎demo/pom.xml

-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<project xmlns="http://maven.apache.org/POM/4.0.0"
33
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
44
<modelVersion>4.0.0</modelVersion>
5-
<!-- Project from https://start.vaadin.com/project/35c38d2c-3fdf-4a67-908c-68cc76a467d1 -->
65

76
<artifactId>componentsample</artifactId>
87
<name>componentsample</name>

‎theme/pom.xml

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
</organization>
2121
<developers>
2222
<developer>
23-
<name>Juuso Kantonen</name>
23+
<name>Jouni Koivuviita</name>
2424
</developer>
2525
</developers>
2626
<licenses>

‎theme/src/main/resources/META-INF/resources/themes/starpass/date-picker.css

+16
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,19 @@ vaadin-date-picker-overlay-content::part(toolbar) {
77
vaadin-date-picker-year-scroller {
88
background: var(--lumo-shade-10pct);
99
}
10+
11+
vaadin-month-calendar::part(date),
12+
vaadin-month-calendar::part(weekday),
13+
vaadin-date-picker-year::part(year-number) {
14+
font-weight: 480;
15+
}
16+
17+
vaadin-month-calendar::part(month-header) {
18+
font-size: var(--lumo-font-size-m);
19+
font-weight: 600;
20+
}
21+
22+
/* TODO would need a dedicated custom property to control the hover background color */
23+
/* vaadin-month-calendar::part(date)::before {
24+
--lumo-primary-color-10pct: var(--lumo-contrast-10pct);
25+
} */

‎theme/src/main/resources/META-INF/resources/themes/starpass/menu-bar.css

+25-3
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,46 @@ vaadin-menu-bar::part(container) {
44
margin: calc(var(--vaadin-focus-ring-width, 2px) * -1 - 1px);
55
}
66

7-
vaadin-menu-bar vaadin-menu-bar-button[aria-haspopup]::part(suffix)::after {
7+
vaadin-menu-bar-button[aria-haspopup]::part(suffix)::after {
88
content: var(--lumo-icons-dropdown);
99
font-family: lumo-icons;
1010
opacity: 0.7;
1111
}
1212

13-
vaadin-menu-bar vaadin-menu-bar-button[aria-haspopup][theme~=icon]::part(suffix)::after {
13+
vaadin-menu-bar-button[aria-haspopup][theme~=icon]::part(suffix)::after {
1414
position: absolute;
1515
z-index: 1;
1616
bottom: 0;
1717
right: 0;
1818
transition: opacity 120ms;
1919
}
2020

21-
vaadin-menu-bar vaadin-menu-bar-button[theme~=icon]:not(:hover, [active])::part(suffix)::after {
21+
vaadin-menu-bar-button[theme~=icon]:not(:hover, [active])::part(suffix)::after {
2222
opacity: 0;
2323
}
2424

25+
vaadin-menu-bar-item {
26+
border-radius: var(--lumo-border-radius-s);
27+
}
28+
29+
vaadin-menu-bar-item .hint {
30+
color: var(--lumo-secondary-text-color);
31+
margin-inline-start: auto;
32+
font-weight: 450;
33+
display: flex;
34+
align-items: center;
35+
gap: var(--lumo-space-xs);
36+
}
37+
38+
vaadin-menu-bar-item.uncheckable {
39+
padding-inline-start: var(--lumo-space-s);
40+
}
41+
42+
vaadin-menu-bar-item.uncheckable::part(checkmark) {
43+
display: none;
44+
}
45+
46+
2547
@media (pointer: fine) {
2648
vaadin-menu-bar-item {
2749
font-size: var(--lumo-font-size-s);

‎theme/src/main/resources/META-INF/resources/themes/starpass/message-list.css

-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ vaadin-message vaadin-avatar {
1919
}
2020

2121
vaadin-message-list {
22-
/* min-height: 100%; */
2322
display: flex;
2423
flex-direction: column;
2524
justify-content: end;

‎theme/src/main/resources/META-INF/resources/themes/starpass/notifications.css

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
vaadin-notification-card[theme~=primary]::part(overlay) {
2+
background: var(--lumo-primary-color);
3+
}
4+
5+
vaadin-notification-card[theme~=success]::part(overlay) {
6+
background: var(--lumo-success-color);
7+
}
8+
9+
vaadin-notification-card[theme~=warning]::part(overlay) {
10+
background: var(--lumo-warning-color);
11+
}
12+
13+
vaadin-notification-card[theme~=error]::part(overlay) {
14+
background: var(--lumo-error-color);
15+
}
16+
17+
vaadin-notification-card[theme~=contrast]::part(overlay) {
18+
background: var(--lumo-contrast);
19+
}
20+
21+
vaadin-notification-card[theme~=about-dialog-hint]::part(overlay) {
22+
margin-inline-start: var(--lumo-size-xl);
23+
}

‎theme/src/main/resources/META-INF/resources/themes/starpass/styles.css

+4-73
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,19 @@
1010
@import "./menu-bar.css";
1111
@import "./message-input.css";
1212
@import "./message-list.css";
13+
@import "./notifications.css";
1314
@import "./progress-bar.css";
1415
@import "./radio-button.css";
1516
@import "./select.css";
1617
@import "./side-nav.css";
1718
@import "./tabs.css";
1819
@import "./text-input.css";
20+
@import "./typography.css";
1921

2022
html {
2123
background: var(--bg);
24+
background-attachment: fixed;
25+
height: 100vh;
2226
/* background: url(bg.png), hsl(var(--base-h) var(--base-s) var(--base-l));
2327
background-blend-mode: overlay;
2428
background-size: cover;
@@ -44,30 +48,6 @@ vaadin-connection-indicator:not([offline]) {
4448
color: inherit;
4549
}
4650

47-
:is(h1, h2, h3, h4, h5, h6) {
48-
text-wrap: balance;
49-
}
50-
51-
h1 {
52-
font-weight: 850;
53-
line-height: var(--lumo-line-height-xl);
54-
}
55-
56-
:is(h2, h3) {
57-
font-weight: 800;
58-
line-height: var(--lumo-line-height-l);
59-
}
60-
61-
h4 {
62-
font-weight: 650;
63-
line-height: var(--lumo-line-height-m);
64-
}
65-
66-
:is(h5, h6) {
67-
font-weight: 600;
68-
line-height: var(--lumo-line-height-s);
69-
}
70-
7151
::part(overlay) {
7252
background: var(--view-glow), hsl(var(--base-h) var(--base-s) max(calc(var(--base-l) + 7%), 8%));
7353
box-shadow: inset 0 0.5px 0 0 var(--lumo-tint-5pct), inset 0 0 0 0.5px var(--lumo-tint-10pct), 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-l);
@@ -76,10 +56,6 @@ h4 {
7656
font-weight: inherit;
7757
}
7858

79-
vaadin-notification-card[theme~=contrast]::part(overlay) {
80-
background: var(--lumo-contrast);
81-
}
82-
8359
vaadin-item::part(content),
8460
vaadin-menu-bar-item::part(content),
8561
vaadin-context-menu-item::part(content),
@@ -92,27 +68,6 @@ vaadin-multi-select-combo-box-item::part(content) {
9268
font-weight: 550;
9369
}
9470

95-
vaadin-menu-bar-item {
96-
border-radius: var(--lumo-border-radius-s);
97-
}
98-
99-
vaadin-menu-bar-item .hint {
100-
color: var(--lumo-secondary-text-color);
101-
margin-inline-start: auto;
102-
font-weight: 450;
103-
display: flex;
104-
align-items: center;
105-
gap: var(--lumo-space-xs);
106-
}
107-
108-
vaadin-menu-bar-item.uncheckable {
109-
padding-inline-start: var(--lumo-space-s);
110-
}
111-
112-
vaadin-menu-bar-item.uncheckable::part(checkmark) {
113-
display: none;
114-
}
115-
11671
vaadin-select.minimal {
11772
--vaadin-input-field-border-width: 0px;
11873
--vaadin-input-field-background: transparent;
@@ -136,22 +91,6 @@ vaadin-item:hover {
13691
background-color: var(--lumo-contrast-10pct);
13792
} */
13893

139-
vaadin-month-calendar::part(date),
140-
vaadin-month-calendar::part(weekday),
141-
vaadin-date-picker-year::part(year-number) {
142-
font-weight: 480;
143-
}
144-
145-
vaadin-month-calendar::part(month-header) {
146-
font-size: var(--lumo-font-size-m);
147-
font-weight: 600;
148-
}
149-
150-
/* TODO would need a dedicated custom property to control the hover background color */
151-
/* vaadin-month-calendar::part(date)::before {
152-
--lumo-primary-color-10pct: var(--lumo-contrast-10pct);
153-
} */
154-
15594
@media (prefers-reduced-motion) {
15695

15796
:is([opening], [closing]),
@@ -227,21 +166,13 @@ hr {
227166
margin: var(--lumo-space-s) var(--lumo-space-xs);
228167
}
229168

230-
a:where(:any-link) {
231-
color: var(--accent-text);
232-
}
233-
234169
.boxed-icon {
235170
padding: var(--lumo-space-m);
236171
box-sizing: content-box;
237172
background-color: var(--lumo-contrast-10pct);
238173
border-radius: var(--lumo-border-radius-s);
239174
}
240175

241-
vaadin-notification-card[theme~=about-dialog-hint]::part(overlay) {
242-
margin-inline-start: var(--lumo-size-xl);
243-
}
244-
245176
nav.sidebar {
246177
padding: 0 var(--lumo-space-xs);
247178
}

‎theme/src/main/resources/META-INF/resources/themes/starpass/tabs.css

+1
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ vaadin-tab {
6060
-webkit-backdrop-filter 200ms,
6161
backdrop-filter 200ms;
6262
padding: var(--lumo-space-xs) var(--lumo-space-m);
63+
flex: auto;
6364
}
6465

6566
vaadin-tab[selected] {

‎theme/src/main/resources/META-INF/resources/themes/starpass/typography.css

+15-91
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,27 @@
1-
html {
2-
--lumo-font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
3-
4-
/* Font sizes */
5-
--lumo-font-size-xxs: 0.75rem;
6-
--lumo-font-size-xs: 0.8125rem;
7-
--lumo-font-size-s: 0.875rem;
8-
--lumo-font-size-m: 1rem;
9-
--lumo-font-size-l: 1.125rem;
10-
--lumo-font-size-xl: 1.375rem;
11-
--lumo-font-size-xxl: 1.75rem;
12-
--lumo-font-size-xxxl: 2.5rem;
13-
14-
/* Line heights */
15-
--lumo-line-height-xs: 1.25;
16-
--lumo-line-height-s: 1.375;
17-
--lumo-line-height-m: 1.625;
1+
:is(h1, h2, h3, h4, h5, h6) {
2+
text-wrap: balance;
183
}
194

20-
body {
21-
font-family: var(--lumo-font-family);
22-
font-size: var(--lumo-font-size-m);
23-
line-height: var(--lumo-line-height-m);
24-
-webkit-text-size-adjust: 100%;
25-
-webkit-font-smoothing: antialiased;
26-
-moz-osx-font-smoothing: grayscale;
5+
h1 {
6+
font-weight: 850;
7+
line-height: var(--lumo-line-height-xl);
278
}
289

29-
small,
30-
[theme~='font-size-s'] {
31-
font-size: var(--lumo-font-size-s);
32-
line-height: var(--lumo-line-height-s);
10+
:is(h2, h3) {
11+
font-weight: 800;
12+
line-height: var(--lumo-line-height-l);
3313
}
3414

35-
[theme~='font-size-xs'] {
36-
font-size: var(--lumo-font-size-xs);
37-
line-height: var(--lumo-line-height-xs);
15+
h4 {
16+
font-weight: 650;
17+
line-height: var(--lumo-line-height-m);
3818
}
3919

40-
:where(h1, h2, h3, h4, h5, h6) {
20+
:is(h5, h6) {
4121
font-weight: 600;
42-
line-height: var(--lumo-line-height-xs);
43-
margin-block: 0;
44-
}
45-
46-
:where(h1) {
47-
font-size: var(--lumo-font-size-xxxl);
48-
}
49-
50-
:where(h2) {
51-
font-size: var(--lumo-font-size-xxl);
52-
}
53-
54-
:where(h3) {
55-
font-size: var(--lumo-font-size-xl);
56-
}
57-
58-
:where(h4) {
59-
font-size: var(--lumo-font-size-l);
60-
}
61-
62-
:where(h5) {
63-
font-size: var(--lumo-font-size-m);
64-
}
65-
66-
:where(h6) {
67-
font-size: var(--lumo-font-size-xs);
68-
text-transform: uppercase;
69-
letter-spacing: 0.03em;
70-
}
71-
72-
p,
73-
blockquote {
74-
margin-top: 0.5em;
75-
margin-bottom: 0.75em;
76-
}
77-
78-
a {
79-
text-decoration: none;
80-
}
81-
82-
a:where(:any-link):hover {
83-
text-decoration: underline;
84-
}
85-
86-
hr {
87-
display: block;
88-
align-self: stretch;
89-
height: 1px;
90-
border: 0;
91-
padding: 0;
92-
margin: var(--lumo-space-s) calc(var(--lumo-border-radius-m) / 2);
93-
background-color: var(--lumo-contrast-10pct);
22+
line-height: var(--lumo-line-height-s);
9423
}
9524

96-
blockquote {
97-
border-left: 2px solid var(--lumo-contrast-30pct);
25+
a:where(:any-link) {
26+
color: var(--accent-text);
9827
}
99-
100-
b,
101-
strong {
102-
font-weight: 600;
103-
}

0 commit comments

Comments
 (0)