noph-ui 0.48.0 → 0.48.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.
|
@@ -108,18 +108,26 @@
|
|
|
108
108
|
}
|
|
109
109
|
|
|
110
110
|
.np-select {
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
111
|
+
appearance: base-select;
|
|
112
|
+
display: inline-flex;
|
|
113
|
+
align-items: center;
|
|
114
|
+
margin: 0;
|
|
115
|
+
border: none;
|
|
116
|
+
outline: none;
|
|
117
|
+
background: none;
|
|
118
|
+
font: inherit;
|
|
117
119
|
font-size: inherit;
|
|
120
|
+
line-height: 1.5rem;
|
|
118
121
|
width: 100%;
|
|
122
|
+
min-inline-size: 0;
|
|
123
|
+
overflow: hidden;
|
|
119
124
|
box-sizing: border-box;
|
|
120
|
-
line-height: 1.5rem;
|
|
121
125
|
height: 3.5rem;
|
|
122
126
|
color: var(--np-color-on-surface);
|
|
127
|
+
&::picker(select) {
|
|
128
|
+
appearance: base-select;
|
|
129
|
+
scrollbar-width: thin;
|
|
130
|
+
}
|
|
123
131
|
&::picker-icon {
|
|
124
132
|
display: none;
|
|
125
133
|
}
|
|
@@ -130,6 +138,11 @@
|
|
|
130
138
|
border-radius: var(--np-shape-corner-extra-small);
|
|
131
139
|
box-shadow: var(--np-elevation-2);
|
|
132
140
|
border: none;
|
|
141
|
+
position-area: block-end span-inline-end;
|
|
142
|
+
min-inline-size: anchor-size(self-inline);
|
|
143
|
+
margin-block-start: 0.25rem;
|
|
144
|
+
padding-block: 0.5rem;
|
|
145
|
+
padding-inline: 0;
|
|
133
146
|
opacity: 0;
|
|
134
147
|
scale: 0.8;
|
|
135
148
|
transform-origin: top center;
|
|
@@ -156,9 +169,51 @@
|
|
|
156
169
|
.filled select {
|
|
157
170
|
padding-inline-start: 1rem;
|
|
158
171
|
padding-block-start: 1.5rem;
|
|
172
|
+
padding-block-end: 0.5rem;
|
|
159
173
|
padding-inline-end: 3.25rem;
|
|
160
174
|
}
|
|
161
175
|
|
|
176
|
+
.np-select :global(option) {
|
|
177
|
+
box-sizing: border-box;
|
|
178
|
+
min-height: 3rem;
|
|
179
|
+
padding-inline: 1rem;
|
|
180
|
+
gap: 0.75rem;
|
|
181
|
+
color: var(--np-color-on-surface);
|
|
182
|
+
background-color: transparent;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.np-select :global(option::checkmark) {
|
|
186
|
+
display: none;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.np-select :global(option:checked) {
|
|
190
|
+
background-color: var(--np-color-secondary-container);
|
|
191
|
+
color: var(--np-color-on-secondary-container);
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.np-select :global(option:hover:not(:disabled)) {
|
|
195
|
+
background-color: color-mix(in srgb, var(--np-color-on-surface) 8%, transparent);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.np-select :global(option:checked:hover) {
|
|
199
|
+
background-color: color-mix(
|
|
200
|
+
in srgb,
|
|
201
|
+
var(--np-color-on-secondary-container) 8%,
|
|
202
|
+
var(--np-color-secondary-container)
|
|
203
|
+
);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.np-select :global(option:disabled) {
|
|
207
|
+
color: color-mix(in srgb, var(--np-color-on-surface) 38%, transparent);
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.np-select :global(optgroup > legend) {
|
|
211
|
+
padding-inline: 1rem;
|
|
212
|
+
padding-block: 0.5rem;
|
|
213
|
+
font-size: 0.875rem;
|
|
214
|
+
color: var(--np-color-on-surface-variant);
|
|
215
|
+
}
|
|
216
|
+
|
|
162
217
|
.np-select-outline {
|
|
163
218
|
pointer-events: none;
|
|
164
219
|
width: 100%;
|