3
3
--vaadin-button-shadow : 0 1px 4px -1px hsla (0 , 0% , 0% , 0.07 );
4
4
}
5
5
6
- /* TODO Avoid styling message-input button with :not([slot=button]) */
7
- : is (vaadin- butto n, vaadin- menu- bar- butto n, vaadin- drawer- to ggle): where (: not ([slot = 'button' ])) {
6
+ : is (vaadin-button , vaadin-menu-bar-button , vaadin-drawer-toggle ) {
8
7
transition : scale 180ms ;
9
8
position : relative;
10
9
}
11
10
12
- : is (vaadin- butto n, vaadin- menu- bar- butto n, vaadin- drawer- to ggle): where (: not ([slot = 'button' ] , [ theme ~= 'tertiary' ])) {
11
+ : is (vaadin- butto n, vaadin- menu- bar- butto n, vaadin- drawer- to ggle): where (: not ([theme ~= 'tertiary' ])) {
13
12
--aura-surface-level : 6 ;
14
13
--aura-surface-opacity : 0.3 ;
15
14
box-shadow : var (--vaadin-button-shadow );
@@ -32,20 +31,19 @@ Increase padding, but only for buttons that don't have an icon in the default sl
32
31
Buttons that place an icon in the default slot are assumed to be icon-only buttons.
33
32
*/
34
33
/* prettier-ignore */
35
- : is (vaadin- butto n, vaadin- menu- bar- butto n, vaadin- drawer- to ggle): not ([ slot = 'button' ]) : not ( : has (: is (vaadin- icon, svg , i [class *= 'fa-' ], vaadin-avatar ): not ([slot ]))) {
34
+ : is (vaadin- butto n, vaadin- menu- bar- butto n, vaadin- drawer- to ggle): not (: has (: is (vaadin- icon, svg, i[class *= 'fa-' ], vaadin-avatar ): not ([slot ]))) {
36
35
--vaadin-button-padding : round (var (--vaadin-padding-s ) / 1.4 , 1px )
37
36
max (var (--vaadin-padding-m ), round (var (--vaadin-radius-m ) / 1.5 , 1px ));
38
37
}
39
38
40
39
/* Decrease padding when an icon is placed in the prefix or suffix slot */
41
- /* prettier-ignore */
42
- : is (vaadin- butto n, vaadin- menu- bar- butto n): not ([slot = 'button' ]): has ([slot = 'prefix' ]: is (vaadin- icon, svg , i [class *= 'fa-' ], vaadin-avatar )),
40
+ : is (vaadin- butto n, vaadin- menu- bar- butto n): has ([slot = 'prefix' ]: is (vaadin- icon, svg , i [class *= 'fa-' ], vaadin-avatar )),
43
41
vaadin-drawer-toggle : empty {
44
42
padding-inline-start : max (var (--vaadin-padding-s ), round (var (--vaadin-radius-m ) / 1.75 , 1px ));
45
43
}
46
44
47
45
/* prettier-ignore */
48
- : is (vaadin- butto n, vaadin- menu- bar- butto n, vaadin- drawer- to ggle): not ([ slot = 'button' ]) : has ([slot = 'suffix' ]: is (vaadin- icon, svg , i [class *= 'fa-' ], vaadin-avatar )),
46
+ : is (vaadin- butto n, vaadin- menu- bar- butto n, vaadin- drawer- to ggle): has ([slot = 'suffix' ]: is (vaadin- icon, svg , i [class *= 'fa-' ], vaadin-avatar )),
49
47
vaadin-drawer-toggle : empty,
50
48
vaadin-menu-bar-button [aria-haspopup = 'true' ] {
51
49
padding-inline-end : max (var (--vaadin-padding-s ), round (var (--vaadin-radius-m ) / 1.75 , 1px ));
@@ -60,7 +58,7 @@ vaadin-menu-bar-button[aria-haspopup='true'] {
60
58
--vaadin-button-text-color : var (--vaadin-color-subtle );
61
59
}
62
60
63
- : is (vaadin- butto n, vaadin- menu- bar- butto n, vaadin- drawer- to ggle): not ([slot = 'button' ] , [ disabled ])::before {
61
+ : is (vaadin-button , vaadin-menu-bar-button , vaadin-drawer-toggle ): not ([disabled ])::before {
64
62
content : '' ;
65
63
position : absolute;
66
64
inset : calc (var (--vaadin-button-border-width , 1px ) * -1 );
@@ -74,7 +72,7 @@ vaadin-menu-bar-button[aria-haspopup='true'] {
74
72
}
75
73
76
74
@supports (color : hsl (0 0 0 )) {
77
- : is (vaadin- butto n, vaadin- menu- bar- butto n, vaadin- drawer- to ggle): not ([slot = 'button' ] , [ disabled ])::before {
75
+ : is (vaadin-button , vaadin-menu-bar-button , vaadin-drawer-toggle ): not ([disabled ])::before {
78
76
background-color : oklch (from currentColor calc (l + 0.4 - c) c h);
79
77
}
80
78
}
@@ -92,20 +90,19 @@ vaadin-menu-bar-button[aria-haspopup='true'] {
92
90
93
91
@media (min-resolution : 2x ) {
94
92
/* prettier-ignore */
95
- : is (vaadin- butto n, vaadin-menu-bar-button[first-visible ][last-visible ], vaadin-drawer-toggle )[active ]: not ([slot = 'button' ] , [ disabled ], [aria-disabled = 'true' ]) {
93
+ : is (vaadin- butto n, vaadin-menu-bar-button[first-visible ][last-visible ], vaadin-drawer-toggle )[active ]: not ([disabled ], [aria-disabled = 'true' ]) {
96
94
scale : 0.98 ;
97
95
transition-duration : 50ms ;
98
96
}
99
97
}
100
98
101
- : is (vaadin- butto n, vaadin- menu- bar- butto n, vaadin- drawer- to ggle)[active ]: not ([slot = 'button' ] , [ disabled ])::before {
99
+ : is (vaadin- butto n, vaadin- menu- bar- butto n, vaadin- drawer- to ggle)[active ]: not ([disabled ])::before {
102
100
transition-duration : 0s ;
103
101
opacity : 0.08 ;
104
102
background : oklch (from currentColor min (c, 1 - l + c) calc (c * 0.9 ) h);
105
103
}
106
104
107
- /* prettier-ignore */
108
- : is (vaadin- butto n, vaadin- menu- bar- butto n, vaadin- drawer- to ggle)[theme ~= 'primary' ][active ]: not ([slot = 'button' ], [disabled ])::before {
105
+ : is (vaadin- butto n, vaadin- menu- bar- butto n, vaadin- drawer- to ggle)[theme ~= 'primary' ][active ]: not ([disabled ])::before {
109
106
opacity : 0.16 ;
110
107
}
111
108
0 commit comments