@auronui/styles 1.0.8 → 1.0.10
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/base/base.css +12 -0
- package/components/autocomplete.css +9 -0
- package/components/combo-box.css +9 -0
- package/components/input.css +10 -0
- package/components/number-field.css +9 -0
- package/components/select.css +10 -4
- package/components/textarea.css +9 -0
- package/package.json +1 -1
package/base/base.css
CHANGED
|
@@ -45,3 +45,15 @@
|
|
|
45
45
|
body {
|
|
46
46
|
font-family: var(--font-sans);
|
|
47
47
|
}
|
|
48
|
+
|
|
49
|
+
/* Reka UI popper wrapper — reads z-index from the content element and applies it
|
|
50
|
+
* here. Since our content classes (.select__popover, .tooltip, etc.) sit inside
|
|
51
|
+
* the slot (not on the Primitive root Reka reads from), we set z-index directly
|
|
52
|
+
* on the wrapper so all floating UI clears the modal layer. */
|
|
53
|
+
[data-reka-popper-content-wrapper] {
|
|
54
|
+
z-index: var(--z-popover) !important;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
[data-reka-popper-content-wrapper]:has(.tooltip) {
|
|
58
|
+
z-index: var(--z-tooltip) !important;
|
|
59
|
+
}
|
|
@@ -309,6 +309,15 @@
|
|
|
309
309
|
outline: none;
|
|
310
310
|
box-shadow: none;
|
|
311
311
|
}
|
|
312
|
+
|
|
313
|
+
&:-webkit-autofill,
|
|
314
|
+
&:-webkit-autofill:hover,
|
|
315
|
+
&:-webkit-autofill:focus {
|
|
316
|
+
-webkit-box-shadow: 0 0 0px 1000px var(--color-field) inset;
|
|
317
|
+
box-shadow: 0 0 0px 1000px var(--color-field) inset;
|
|
318
|
+
-webkit-text-fill-color: var(--color-field-foreground);
|
|
319
|
+
caret-color: var(--color-field-foreground);
|
|
320
|
+
}
|
|
312
321
|
}
|
|
313
322
|
|
|
314
323
|
/* ─── Label slot ─────────────────────────────────────────────────────────────── */
|
package/components/combo-box.css
CHANGED
|
@@ -72,6 +72,15 @@
|
|
|
72
72
|
outline: none;
|
|
73
73
|
box-shadow: none;
|
|
74
74
|
}
|
|
75
|
+
|
|
76
|
+
&:-webkit-autofill,
|
|
77
|
+
&:-webkit-autofill:hover,
|
|
78
|
+
&:-webkit-autofill:focus {
|
|
79
|
+
-webkit-box-shadow: 0 0 0px 1000px var(--color-field) inset;
|
|
80
|
+
box-shadow: 0 0 0px 1000px var(--color-field) inset;
|
|
81
|
+
-webkit-text-fill-color: var(--color-field-foreground);
|
|
82
|
+
caret-color: var(--color-field-foreground);
|
|
83
|
+
}
|
|
75
84
|
}
|
|
76
85
|
|
|
77
86
|
/* ─── Clear button ──────────────────────────────────────────────────────────── */
|
package/components/input.css
CHANGED
|
@@ -305,6 +305,16 @@
|
|
|
305
305
|
outline: none;
|
|
306
306
|
box-shadow: none;
|
|
307
307
|
}
|
|
308
|
+
|
|
309
|
+
/* Suppress browser autofill background — use inset shadow to paint over it */
|
|
310
|
+
&:-webkit-autofill,
|
|
311
|
+
&:-webkit-autofill:hover,
|
|
312
|
+
&:-webkit-autofill:focus {
|
|
313
|
+
-webkit-box-shadow: 0 0 0px 1000px var(--color-field) inset;
|
|
314
|
+
box-shadow: 0 0 0px 1000px var(--color-field) inset;
|
|
315
|
+
-webkit-text-fill-color: var(--color-field-foreground);
|
|
316
|
+
caret-color: var(--color-field-foreground);
|
|
317
|
+
}
|
|
308
318
|
}
|
|
309
319
|
|
|
310
320
|
.input__start-content,
|
|
@@ -90,6 +90,15 @@
|
|
|
90
90
|
.number-field__input {
|
|
91
91
|
@apply min-w-0 rounded-none border-0 bg-transparent px-3 py-2 text-inherit tabular-nums shadow-none outline-none sm:text-sm h-full text-center;
|
|
92
92
|
|
|
93
|
+
&:-webkit-autofill,
|
|
94
|
+
&:-webkit-autofill:hover,
|
|
95
|
+
&:-webkit-autofill:focus {
|
|
96
|
+
-webkit-box-shadow: 0 0 0px 1000px var(--color-field) inset;
|
|
97
|
+
box-shadow: 0 0 0px 1000px var(--color-field) inset;
|
|
98
|
+
-webkit-text-fill-color: var(--color-field-foreground);
|
|
99
|
+
caret-color: var(--color-field-foreground);
|
|
100
|
+
}
|
|
101
|
+
|
|
93
102
|
/* Remove border radius on left side when decrement button is present */
|
|
94
103
|
.number-field__group:has([slot="decrement"]) & {
|
|
95
104
|
@apply rounded-l-none;
|
package/components/select.css
CHANGED
|
@@ -551,15 +551,15 @@
|
|
|
551
551
|
/* Cursor */
|
|
552
552
|
cursor: var(--cursor-interactive);
|
|
553
553
|
|
|
554
|
-
&[data-state="open"] {
|
|
555
|
-
@apply rotate-180;
|
|
556
|
-
}
|
|
557
|
-
|
|
558
554
|
&[data-slot="select-default-indicator"] {
|
|
559
555
|
@apply size-4;
|
|
560
556
|
}
|
|
561
557
|
}
|
|
562
558
|
|
|
559
|
+
.select__trigger[data-state="open"] .select__indicator {
|
|
560
|
+
@apply rotate-180;
|
|
561
|
+
}
|
|
562
|
+
|
|
563
563
|
/* ─── Start Content ──────────────────────────────────────────────────────── */
|
|
564
564
|
|
|
565
565
|
.select__start-content {
|
|
@@ -615,6 +615,12 @@
|
|
|
615
615
|
|
|
616
616
|
@apply overlay-popover-scrollbar;
|
|
617
617
|
|
|
618
|
+
/* Suppress smooth scroll for the first ~100ms so Reka's initial scrollTop
|
|
619
|
+
assignment (jumping to the selected item) is instant, not animated. */
|
|
620
|
+
&.select__popover--opening {
|
|
621
|
+
scroll-behavior: auto;
|
|
622
|
+
}
|
|
623
|
+
|
|
618
624
|
/* Focus visible state */
|
|
619
625
|
&:has(> *:focus-visible):not(:focus-within),
|
|
620
626
|
&[data-focus-visible="true"] {
|
package/components/textarea.css
CHANGED
|
@@ -293,6 +293,15 @@
|
|
|
293
293
|
outline: none;
|
|
294
294
|
box-shadow: none;
|
|
295
295
|
}
|
|
296
|
+
|
|
297
|
+
&:-webkit-autofill,
|
|
298
|
+
&:-webkit-autofill:hover,
|
|
299
|
+
&:-webkit-autofill:focus {
|
|
300
|
+
-webkit-box-shadow: 0 0 0px 1000px var(--color-field) inset;
|
|
301
|
+
box-shadow: 0 0 0px 1000px var(--color-field) inset;
|
|
302
|
+
-webkit-text-fill-color: var(--color-field-foreground);
|
|
303
|
+
caret-color: var(--color-field-foreground);
|
|
304
|
+
}
|
|
296
305
|
}
|
|
297
306
|
|
|
298
307
|
.textarea__start-content,
|