@lucca-front/scss 22.0.0-rc.4 → 22.0.0-rc.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lucca-front.min.css +1 -1
- package/package.json +3 -3
- package/src/components/listboxOption/component.scss +5 -3
- package/src/components/listboxOption/index.scss +26 -10
- package/src/components/listboxOption/mods.scss +6 -7
- package/src/components/listboxOption/states.scss +4 -0
- package/src/components/listboxOption/vars.scss +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lucca-front/scss",
|
|
3
|
-
"version": "22.0.0-rc.
|
|
3
|
+
"version": "22.0.0-rc.5",
|
|
4
4
|
"description": "A Sass framework for Lucca products.",
|
|
5
5
|
"main": "src/main.scss",
|
|
6
6
|
"scripts": {},
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"normalize.css": "^8.0.0"
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
|
-
"@lucca-front/icons": "22.0.0-rc.
|
|
28
|
-
"@lucca/prisme": "22.0.0-rc.
|
|
27
|
+
"@lucca-front/icons": "22.0.0-rc.5",
|
|
28
|
+
"@lucca/prisme": "22.0.0-rc.5"
|
|
29
29
|
}
|
|
30
30
|
}
|
|
@@ -54,6 +54,10 @@
|
|
|
54
54
|
pointer-events: none;
|
|
55
55
|
box-shadow: var(--pr-t-elevation-shadow-overflow);
|
|
56
56
|
}
|
|
57
|
+
|
|
58
|
+
.avatar {
|
|
59
|
+
margin-inline-end: var(--pr-t-spacings-75);
|
|
60
|
+
}
|
|
57
61
|
}
|
|
58
62
|
|
|
59
63
|
.listboxOption-content-checkboxField.checkboxField {
|
|
@@ -65,7 +69,7 @@
|
|
|
65
69
|
list-style-type: none;
|
|
66
70
|
display: flex;
|
|
67
71
|
flex-direction: column;
|
|
68
|
-
gap: var(--pr-t-spacings-
|
|
72
|
+
gap: var(--pr-t-spacings-50);
|
|
69
73
|
background-color: var(--palettes-neutral-0);
|
|
70
74
|
position: relative;
|
|
71
75
|
z-index: 1;
|
|
@@ -77,8 +81,6 @@
|
|
|
77
81
|
|
|
78
82
|
@include reset.list;
|
|
79
83
|
|
|
80
|
-
padding: var(--components-listboxOptionWrapper-padding);
|
|
81
|
-
|
|
82
84
|
.listboxOptionWrapper {
|
|
83
85
|
--components-listboxOptionWrapper-overflow: visible;
|
|
84
86
|
}
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
&.mod-add {
|
|
11
11
|
@include add;
|
|
12
12
|
|
|
13
|
-
&:hover
|
|
13
|
+
&:hover,
|
|
14
|
+
&:has(> .listboxOption-content.is-hovered) {
|
|
14
15
|
@include addHover;
|
|
15
16
|
}
|
|
16
17
|
|
|
@@ -53,7 +54,8 @@
|
|
|
53
54
|
}
|
|
54
55
|
|
|
55
56
|
&[aria-selected='true'],
|
|
56
|
-
&[aria-checked='true']
|
|
57
|
+
&[aria-checked='true'],
|
|
58
|
+
&.is-selected {
|
|
57
59
|
> .listboxOption-content {
|
|
58
60
|
@include selected;
|
|
59
61
|
|
|
@@ -68,7 +70,8 @@
|
|
|
68
70
|
}
|
|
69
71
|
}
|
|
70
72
|
|
|
71
|
-
&[aria-disabled='true']
|
|
73
|
+
&[aria-disabled='true'],
|
|
74
|
+
&.is-disabled {
|
|
72
75
|
> .listboxOption-content {
|
|
73
76
|
@include disabled;
|
|
74
77
|
|
|
@@ -78,7 +81,8 @@
|
|
|
78
81
|
}
|
|
79
82
|
|
|
80
83
|
&[aria-selected='true'],
|
|
81
|
-
&[aria-checked='true']
|
|
84
|
+
&[aria-checked='true'],
|
|
85
|
+
&.is-selected {
|
|
82
86
|
> .listboxOption-content {
|
|
83
87
|
@include selectedDisabled;
|
|
84
88
|
}
|
|
@@ -93,8 +97,7 @@
|
|
|
93
97
|
}
|
|
94
98
|
|
|
95
99
|
@layer mods {
|
|
96
|
-
&.is-hovered
|
|
97
|
-
&:hover {
|
|
100
|
+
&.is-hovered {
|
|
98
101
|
@include hover;
|
|
99
102
|
}
|
|
100
103
|
|
|
@@ -104,6 +107,15 @@
|
|
|
104
107
|
}
|
|
105
108
|
}
|
|
106
109
|
|
|
110
|
+
// In presentation mode the hover state is driven exclusively by the is-hovered class
|
|
111
|
+
// (bound to isHighlighted by the parent lu-select-option), so native :hover must not apply
|
|
112
|
+
// to avoid two items appearing highlighted simultaneously during mixed keyboard/mouse navigation.
|
|
113
|
+
.listboxOption:not([presentation]) > .listboxOption-content:hover {
|
|
114
|
+
@layer mods {
|
|
115
|
+
@include hover;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
107
119
|
.listboxOptionWrapper {
|
|
108
120
|
@layer components {
|
|
109
121
|
@include varsWrapper;
|
|
@@ -134,7 +146,8 @@
|
|
|
134
146
|
|
|
135
147
|
.listboxOption {
|
|
136
148
|
&:hover,
|
|
137
|
-
&.is-hovered
|
|
149
|
+
&.is-hovered,
|
|
150
|
+
&:has(> .listboxOption-content.is-hovered) {
|
|
138
151
|
@include multipleHover;
|
|
139
152
|
}
|
|
140
153
|
|
|
@@ -143,7 +156,8 @@
|
|
|
143
156
|
}
|
|
144
157
|
|
|
145
158
|
&[aria-selected='true'],
|
|
146
|
-
&[aria-checked='true']
|
|
159
|
+
&[aria-checked='true'],
|
|
160
|
+
&.is-selected {
|
|
147
161
|
> .listboxOption-content {
|
|
148
162
|
@include multipleSelected;
|
|
149
163
|
|
|
@@ -173,13 +187,15 @@
|
|
|
173
187
|
}
|
|
174
188
|
}
|
|
175
189
|
|
|
176
|
-
&[aria-disabled='true'],
|
|
190
|
+
&[aria-disabled='true'],
|
|
191
|
+
&.is-disabled {
|
|
177
192
|
> .listboxOption-content {
|
|
178
193
|
@include multipleDisabled;
|
|
179
194
|
}
|
|
180
195
|
|
|
181
196
|
&[aria-selected='true'],
|
|
182
|
-
&[aria-checked='true']
|
|
197
|
+
&[aria-checked='true'],
|
|
198
|
+
&.is-selected {
|
|
183
199
|
> .listboxOption-content {
|
|
184
200
|
@include multipleSelectedDisabled;
|
|
185
201
|
}
|
|
@@ -18,23 +18,22 @@
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
> .listboxOption-content {
|
|
21
|
-
--components-listboxOption-content-fontWeight: var(--pr-t-font-fontWeight-semibold);
|
|
22
21
|
--components-listboxOption-content-font: var(--pr-t-font-body-S);
|
|
22
|
+
--components-listboxOption-content-color: var(--pr-t-color-text-subtle);
|
|
23
23
|
--components-listboxOption-content-position: sticky;
|
|
24
|
-
--components-listboxOption-content-marginBlockStart: var(--pr-t-spacings-50);
|
|
25
24
|
--components-listboxOption-content-checkboxField-display: none;
|
|
26
25
|
--components-listboxOption-content-flexWrap: wrap;
|
|
27
26
|
--components-listboxOption-content-justifyContent: space-between;
|
|
28
|
-
--components-listboxOption-content-insetBlockStart:
|
|
27
|
+
--components-listboxOption-content-insetBlockStart: 0;
|
|
29
28
|
--components-listboxOption-content-boxShadow:
|
|
30
29
|
calc(var(--pr-t-spacings-100) * -1) 0 0 0 var(--pr-t-elevation-surface-raised),
|
|
31
|
-
|
|
32
|
-
calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-
|
|
33
|
-
|
|
30
|
+
var(--pr-t-spacings-100) 0 0 0 var(--pr-t-elevation-surface-raised),
|
|
31
|
+
calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-50) * -1) 0 0 var(--pr-t-elevation-surface-raised),
|
|
32
|
+
var(--pr-t-spacings-100) calc(var(--pr-t-spacings-50) * -1) 0 0 var(--pr-t-elevation-surface-raised);
|
|
34
33
|
}
|
|
35
34
|
|
|
36
35
|
.listboxOptionWrapper {
|
|
37
|
-
--components-listboxOptionWrapper-childrenPaddingInlineStart: var(--pr-t-spacings-
|
|
36
|
+
--components-listboxOptionWrapper-childrenPaddingInlineStart: var(--pr-t-spacings-250);
|
|
38
37
|
}
|
|
39
38
|
}
|
|
40
39
|
|
|
@@ -35,5 +35,5 @@
|
|
|
35
35
|
--components-listboxOptionWrapper-childrenPaddingInlineStart: var(--pr-t-spacings-100);
|
|
36
36
|
--components-listboxOptionWrapper-childrenCheckboxField-display: none;
|
|
37
37
|
--components-listboxOptionWrapper-childrenBefore-content: '';
|
|
38
|
-
--components-listboxOptionWrapper-overflow:
|
|
38
|
+
--components-listboxOptionWrapper-overflow: visible;
|
|
39
39
|
}
|