@limpiolux/ui-styles 1.1.8 → 1.1.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/components.css +70 -0
- package/light.css +44 -0
- package/package.json +1 -1
package/components.css
CHANGED
|
@@ -38,6 +38,76 @@
|
|
|
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-actions {
|
|
78
|
+
@apply flex shrink-0 items-center gap-1.5;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.search-select-clear-button {
|
|
82
|
+
@apply inline-flex h-5 w-5 items-center justify-center rounded-full border border-white/10 bg-white/[0.05] text-zinc-500;
|
|
83
|
+
transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.search-select-clear-button:hover {
|
|
87
|
+
color: #f4f4f5;
|
|
88
|
+
background: rgba(255, 255, 255, 0.12);
|
|
89
|
+
border-color: rgba(255, 255, 255, 0.18);
|
|
90
|
+
transform: scale(1.04);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.search-select-option {
|
|
94
|
+
@apply flex w-full items-start justify-between gap-3 px-3 py-2.5 text-left transition-colors;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.search-select-option:hover {
|
|
98
|
+
background: rgba(39, 39, 42, 0.72);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.search-select-option-active {
|
|
102
|
+
border-color: rgba(var(--color-brand) / 0.18);
|
|
103
|
+
background: rgba(var(--color-brand) / 0.05);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.search-select-empty {
|
|
107
|
+
@apply px-3 py-4 text-sm;
|
|
108
|
+
color: #71717a;
|
|
109
|
+
}
|
|
110
|
+
|
|
41
111
|
/* ── Buttons ── */
|
|
42
112
|
|
|
43
113
|
.btn-primary {
|
package/light.css
CHANGED
|
@@ -111,6 +111,50 @@
|
|
|
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-clear-button {
|
|
135
|
+
background: rgba(255, 255, 255, 0.9);
|
|
136
|
+
border-color: rgba(212, 212, 216, 0.92);
|
|
137
|
+
color: #71717a;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.light .search-select-clear-button:hover {
|
|
141
|
+
background: #ffffff;
|
|
142
|
+
border-color: rgba(161, 161, 170, 0.42);
|
|
143
|
+
color: #18181b;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.light .search-select-panel {
|
|
147
|
+
box-shadow: 0 18px 40px -30px rgba(15, 23, 42, 0.22);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.light .search-select-option:hover {
|
|
151
|
+
background: #f4f4f5;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.light .search-select-option-active {
|
|
155
|
+
background: rgba(var(--color-brand) / 0.1);
|
|
156
|
+
}
|
|
157
|
+
|
|
114
158
|
.light .btn-secondary {
|
|
115
159
|
background: rgba(255, 255, 255, 0.82);
|
|
116
160
|
border-color: rgba(212, 212, 216, 0.92);
|