@neovici/cosmoz-input 6.0.0-beta.4 → 6.0.0-beta.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/styles.js +34 -5
- package/package.json +1 -1
package/dist/styles.js
CHANGED
|
@@ -141,6 +141,10 @@ export const styles = css `
|
|
|
141
141
|
}
|
|
142
142
|
|
|
143
143
|
/* === Variant: inline === */
|
|
144
|
+
:host([variant='inline']) {
|
|
145
|
+
margin-bottom: 0;
|
|
146
|
+
}
|
|
147
|
+
|
|
144
148
|
:host([variant='inline']) .wrap {
|
|
145
149
|
margin-top: calc(var(--cz-spacing) * 2.5);
|
|
146
150
|
}
|
|
@@ -201,26 +205,51 @@ export const styles = css `
|
|
|
201
205
|
|
|
202
206
|
/* === Variant: cell === */
|
|
203
207
|
|
|
204
|
-
:host([variant='cell'])
|
|
208
|
+
:host([variant='cell']) {
|
|
209
|
+
margin-bottom: 0;
|
|
210
|
+
font-size: var(--cz-text-sm);
|
|
211
|
+
line-height: var(--cz-text-sm-line-height);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
:host([variant='cell']) .wrap:has(#input) {
|
|
205
215
|
border: 0.5px solid var(--cz-color-bg-quaternary);
|
|
206
216
|
border-radius: 0;
|
|
207
217
|
box-shadow: none;
|
|
208
218
|
}
|
|
209
|
-
|
|
219
|
+
|
|
220
|
+
:host([variant='cell']) .wrap:has(#input:focus) {
|
|
221
|
+
background: var(--cz-color-bg-quaternary);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
:host([variant='cell'][invalid]) .wrap:has(#input) {
|
|
210
225
|
border-color: var(--cz-color-border-error);
|
|
226
|
+
box-shadow: none;
|
|
211
227
|
}
|
|
228
|
+
|
|
212
229
|
:host([variant='cell'][invalid]) .wrap:has(#input:focus) {
|
|
213
230
|
background: var(--cz-color-bg-error);
|
|
214
231
|
border: 0.5px solid transparent;
|
|
215
232
|
}
|
|
216
|
-
:host([variant='cell']) .wrap:has(#input:focus) {
|
|
217
|
-
background: var(--cz-color-bg-quaternary);
|
|
218
|
-
}
|
|
219
233
|
|
|
220
234
|
:host([variant='cell']) label {
|
|
221
235
|
display: none;
|
|
222
236
|
}
|
|
223
237
|
|
|
238
|
+
:host([variant='cell']) .error {
|
|
239
|
+
left: calc(var(--cz-spacing) * 3);
|
|
240
|
+
bottom: 50%;
|
|
241
|
+
transform: translateY(50%);
|
|
242
|
+
text-overflow: ellipsis;
|
|
243
|
+
white-space: nowrap;
|
|
244
|
+
overflow: hidden;
|
|
245
|
+
max-width: calc(100% - calc(var(--cz-spacing) * 6));
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
:host([variant='cell']:focus-within) .error,
|
|
249
|
+
:host([variant='cell'][has-value]) .error {
|
|
250
|
+
visibility: hidden;
|
|
251
|
+
}
|
|
252
|
+
|
|
224
253
|
/* === No spinner === */
|
|
225
254
|
|
|
226
255
|
:host([no-spinner]) #input::-webkit-inner-spin-button {
|