@hearthsound/design 0.1.0 → 0.1.1
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/css/components/field.css +3 -1
- package/css/components/menu.css +53 -0
- package/package.json +1 -1
package/css/components/field.css
CHANGED
|
@@ -128,7 +128,9 @@
|
|
|
128
128
|
/* Declared after focus: the invalid tint is not a focus treatment and stays while the
|
|
129
129
|
* field is focused or hovered. The doubled class matches the focus rule's specificity. */
|
|
130
130
|
.hs-field.hs-field--invalid,
|
|
131
|
-
.hs-field[aria-invalid='true']
|
|
131
|
+
.hs-field[aria-invalid='true'],
|
|
132
|
+
.hs-select.hs-field--invalid,
|
|
133
|
+
.hs-select[aria-invalid='true'] {
|
|
132
134
|
background: color-mix(in srgb, var(--hs-error) 12%, transparent);
|
|
133
135
|
}
|
|
134
136
|
|
package/css/components/menu.css
CHANGED
|
@@ -126,6 +126,59 @@
|
|
|
126
126
|
box-shadow: var(--hs-focus-shadow);
|
|
127
127
|
}
|
|
128
128
|
|
|
129
|
+
/* ------------------------------------------------------------------ */
|
|
130
|
+
/* k05 A - drop-down list: the menu surface and items, check at the end */
|
|
131
|
+
/* ------------------------------------------------------------------ */
|
|
132
|
+
|
|
133
|
+
.hs-listbox {
|
|
134
|
+
background: var(--hs-popover-bg);
|
|
135
|
+
border-radius: var(--hs-radius-popover);
|
|
136
|
+
box-shadow: var(--hs-elevation-2);
|
|
137
|
+
padding: 6px;
|
|
138
|
+
box-sizing: border-box;
|
|
139
|
+
min-width: 200px;
|
|
140
|
+
margin: 0;
|
|
141
|
+
list-style: none;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.hs-option {
|
|
145
|
+
display: flex;
|
|
146
|
+
align-items: center;
|
|
147
|
+
gap: 8px;
|
|
148
|
+
height: 36px;
|
|
149
|
+
padding: 0 10px;
|
|
150
|
+
border-radius: var(--hs-radius-row);
|
|
151
|
+
font: 400 14px var(--hs-font-body);
|
|
152
|
+
color: var(--hs-fg);
|
|
153
|
+
box-sizing: border-box;
|
|
154
|
+
cursor: default;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.hs-option > .hs-icon {
|
|
158
|
+
width: 16px;
|
|
159
|
+
height: 16px;
|
|
160
|
+
margin-left: auto;
|
|
161
|
+
color: var(--hs-accent-text);
|
|
162
|
+
visibility: hidden;
|
|
163
|
+
flex: none;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.hs-option--selected > .hs-icon,
|
|
167
|
+
.hs-option[aria-selected='true'] > .hs-icon {
|
|
168
|
+
visibility: visible;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.hs-option:hover {
|
|
172
|
+
background: var(--hs-control-tone);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.hs-option--active {
|
|
176
|
+
background: var(--hs-accent-tint);
|
|
177
|
+
color: var(--hs-accent-text);
|
|
178
|
+
font-weight: 600;
|
|
179
|
+
box-shadow: var(--hs-focus-shadow);
|
|
180
|
+
}
|
|
181
|
+
|
|
129
182
|
/* ------------------------------------------------------------------ */
|
|
130
183
|
/* k18 A - add-to-playlist submenu */
|
|
131
184
|
/* ------------------------------------------------------------------ */
|