@limpiolux/ui-styles 1.1.8 → 1.1.9
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/components.css +54 -0
- package/light.css +32 -0
- package/package.json +1 -1
package/components.css
CHANGED
|
@@ -38,6 +38,60 @@
|
|
|
38
38
|
color: #a1a1aa;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
+
.search-select-trigger {
|
|
42
|
+
@apply flex min-h-[2.5rem] w-full items-center justify-between gap-3 rounded-xl px-3.5 py-2.5 text-left text-sm outline-none;
|
|
43
|
+
color: #f4f4f5;
|
|
44
|
+
background: rgba(255, 255, 255, 0.06);
|
|
45
|
+
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
46
|
+
backdrop-filter: blur(20px) saturate(1.6);
|
|
47
|
+
-webkit-backdrop-filter: blur(20px) saturate(1.6);
|
|
48
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
|
49
|
+
transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.search-select-trigger:focus-within,
|
|
53
|
+
.search-select-trigger-open {
|
|
54
|
+
border-color: rgba(var(--color-brand) / 0.6);
|
|
55
|
+
box-shadow:
|
|
56
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
|
57
|
+
inset 0 -1px 0 rgba(0, 0, 0, 0.1),
|
|
58
|
+
0 0 0 3px rgba(var(--color-brand) / 0.15);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.search-select-panel {
|
|
62
|
+
@apply rounded-xl shadow-xl;
|
|
63
|
+
box-shadow:
|
|
64
|
+
0 18px 40px -24px rgba(0, 0, 0, 0.4),
|
|
65
|
+
0 0 0 1px rgba(255, 255, 255, 0.04);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.search-select-search-input {
|
|
69
|
+
@apply min-w-0 flex-1 bg-transparent text-sm outline-none;
|
|
70
|
+
color: #f4f4f5;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.search-select-search-input::placeholder {
|
|
74
|
+
color: #71717a;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.search-select-option {
|
|
78
|
+
@apply flex w-full items-start justify-between gap-3 px-3 py-2.5 text-left transition-colors;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.search-select-option:hover {
|
|
82
|
+
background: rgba(39, 39, 42, 0.72);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.search-select-option-active {
|
|
86
|
+
border-color: rgba(var(--color-brand) / 0.18);
|
|
87
|
+
background: rgba(var(--color-brand) / 0.05);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.search-select-empty {
|
|
91
|
+
@apply px-3 py-4 text-sm;
|
|
92
|
+
color: #71717a;
|
|
93
|
+
}
|
|
94
|
+
|
|
41
95
|
/* ── Buttons ── */
|
|
42
96
|
|
|
43
97
|
.btn-primary {
|
package/light.css
CHANGED
|
@@ -111,6 +111,38 @@
|
|
|
111
111
|
color: #52525b;
|
|
112
112
|
}
|
|
113
113
|
|
|
114
|
+
.light .search-select-trigger {
|
|
115
|
+
background: rgba(255, 255, 255, 0.92);
|
|
116
|
+
border-color: rgba(212, 212, 216, 0.92);
|
|
117
|
+
color: #18181b;
|
|
118
|
+
box-shadow: 0 10px 24px -22px rgba(15, 23, 42, 0.18);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.light .search-select-trigger:focus-within,
|
|
122
|
+
.light .search-select-trigger-open {
|
|
123
|
+
border-color: rgba(var(--color-brand) / 0.5);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.light .search-select-search-input {
|
|
127
|
+
color: #18181b;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.light .search-select-search-input::placeholder {
|
|
131
|
+
color: #71717a;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.light .search-select-panel {
|
|
135
|
+
box-shadow: 0 18px 40px -30px rgba(15, 23, 42, 0.22);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.light .search-select-option:hover {
|
|
139
|
+
background: #f4f4f5;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.light .search-select-option-active {
|
|
143
|
+
background: rgba(var(--color-brand) / 0.1);
|
|
144
|
+
}
|
|
145
|
+
|
|
114
146
|
.light .btn-secondary {
|
|
115
147
|
background: rgba(255, 255, 255, 0.82);
|
|
116
148
|
border-color: rgba(212, 212, 216, 0.92);
|