@x33025/sveltely 0.0.40 → 0.0.42
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/components/ChipInput.svelte +8 -53
- package/dist/components/Dropdown/Dropdown.svelte +6 -11
- package/dist/components/NavigationStack/SidebarToggle.svelte +1 -5
- package/dist/components/Pagination.svelte +49 -80
- package/dist/components/SegmentedPicker.svelte +4 -22
- package/dist/components/Sheet/Sheet.svelte +4 -5
- package/dist/components/Slider.svelte +0 -67
- package/dist/components/Tooltip.svelte +8 -44
- package/dist/style/index.css +173 -59
- package/dist/style.css +330 -174
- package/package.json +1 -1
package/dist/style/index.css
CHANGED
|
@@ -31,83 +31,197 @@
|
|
|
31
31
|
.divider {
|
|
32
32
|
@apply bg-gray-200/70;
|
|
33
33
|
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@layer components {
|
|
37
|
+
.chip-input {
|
|
38
|
+
@apply gap-1;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.chip {
|
|
42
|
+
@apply rounded-full border border-transparent bg-zinc-100 px-2 py-1 text-xs whitespace-nowrap text-black;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.chip:hover {
|
|
46
|
+
@apply bg-zinc-200;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.chip-selected {
|
|
50
|
+
@apply border-zinc-300;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.chip-hovered {
|
|
54
|
+
@apply bg-zinc-200;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.chip-input-field:hover {
|
|
58
|
+
@apply bg-zinc-100;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.chip-input-disabled {
|
|
62
|
+
@apply pointer-events-none;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.chip-input-disabled .chip {
|
|
66
|
+
@apply cursor-not-allowed opacity-50;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.chip-input-disabled .chip:hover {
|
|
70
|
+
@apply bg-zinc-100;
|
|
71
|
+
}
|
|
34
72
|
|
|
35
73
|
.chip-input-action {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
74
|
+
@apply h-7 w-7 p-0;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.pagination-button {
|
|
78
|
+
@apply rounded bg-zinc-100 p-2;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.pagination-button:disabled {
|
|
82
|
+
@apply cursor-not-allowed opacity-50;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.pagination-input {
|
|
86
|
+
@apply rounded bg-zinc-100 px-3 py-1 outline-none;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.pagination {
|
|
90
|
+
@apply gap-4;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.sidebar-toggle {
|
|
94
|
+
@apply rounded p-1.5 hover:bg-zinc-100;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.dropdown {
|
|
98
|
+
@apply rounded-md border border-gray-200 bg-white p-1 shadow-md;
|
|
39
99
|
}
|
|
40
100
|
|
|
41
101
|
.dropdown-item {
|
|
42
|
-
|
|
102
|
+
@apply rounded-md;
|
|
43
103
|
}
|
|
44
104
|
|
|
45
105
|
.dropdown-item:hover {
|
|
46
|
-
|
|
106
|
+
@apply bg-zinc-100;
|
|
47
107
|
}
|
|
48
108
|
|
|
49
|
-
.
|
|
109
|
+
.sheet {
|
|
110
|
+
@apply rounded-md bg-white p-4 shadow-md;
|
|
50
111
|
}
|
|
51
112
|
|
|
52
|
-
.
|
|
113
|
+
.sheet-overlay {
|
|
114
|
+
@apply bg-black/20 backdrop-blur-sm;
|
|
53
115
|
}
|
|
54
|
-
}
|
|
55
116
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
--sheet-blur: var(--blur-sm);
|
|
65
|
-
--sheet-shadow: var(--shadow-md);
|
|
66
|
-
|
|
67
|
-
--dropdown-content-padding: calc(var(--spacing));
|
|
68
|
-
--dropdown-item-border-radius: var(--radius-md);
|
|
69
|
-
--dropdown-border-radius: var(--radius-md);
|
|
70
|
-
--dropdown-background: var(--color-white);
|
|
71
|
-
--dropdown-shadow: var(--shadow-md);
|
|
72
|
-
--dropdown-item-highlight: var(--color-zinc-100);
|
|
73
|
-
|
|
74
|
-
--tooltip-border-radius: var(--radius-sm);
|
|
75
|
-
--tooltip-padding: 4px 8px;
|
|
76
|
-
--tooltip-font-size: 12px;
|
|
77
|
-
--tooltip-background: var(--color-black);
|
|
78
|
-
--tooltip-text: var(--color-white);
|
|
79
|
-
|
|
80
|
-
--slider-shadow: var(--shadow-md);
|
|
81
|
-
--slider-track: var(--color-zinc-300);
|
|
82
|
-
--slider-fill: var(--color-zinc-900);
|
|
83
|
-
--slider-thumb-inner: var(--color-zinc-900);
|
|
84
|
-
--slider-thumb-outer: var(--color-white);
|
|
117
|
+
.slider {
|
|
118
|
+
appearance: none;
|
|
119
|
+
height: 6px;
|
|
120
|
+
border-radius: 9999px;
|
|
121
|
+
background: transparent;
|
|
122
|
+
outline: none;
|
|
123
|
+
cursor: pointer;
|
|
124
|
+
}
|
|
85
125
|
|
|
86
|
-
|
|
126
|
+
.slider:focus-visible {
|
|
127
|
+
outline: 2px solid color-mix(in oklab, var(--color-gray-900) 35%, white);
|
|
128
|
+
outline-offset: 4px;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.slider:disabled {
|
|
132
|
+
opacity: 0.5;
|
|
133
|
+
cursor: not-allowed;
|
|
134
|
+
}
|
|
87
135
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
calc(var(--segmented-picker-border-radius) - var(--segmented-picker-outer-padding))
|
|
136
|
+
.slider::-webkit-slider-runnable-track {
|
|
137
|
+
height: 6px;
|
|
138
|
+
border-radius: 9999px;
|
|
139
|
+
background: linear-gradient(
|
|
140
|
+
to right,
|
|
141
|
+
var(--color-zinc-900) 0%,
|
|
142
|
+
var(--color-zinc-900) var(--slider-pct),
|
|
143
|
+
var(--color-zinc-300) var(--slider-pct),
|
|
144
|
+
var(--color-zinc-300) 100%
|
|
98
145
|
);
|
|
146
|
+
}
|
|
99
147
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
--
|
|
106
|
-
--
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
148
|
+
.slider::-webkit-slider-thumb {
|
|
149
|
+
appearance: none;
|
|
150
|
+
width: 16px;
|
|
151
|
+
height: 16px;
|
|
152
|
+
border-radius: 9999px;
|
|
153
|
+
border: 2px solid var(--color-white);
|
|
154
|
+
background: var(--color-zinc-900);
|
|
155
|
+
box-shadow: var(--shadow-md);
|
|
156
|
+
margin-top: -5px;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.slider::-moz-range-track {
|
|
160
|
+
height: 6px;
|
|
161
|
+
border: none;
|
|
162
|
+
border-radius: 9999px;
|
|
163
|
+
background: var(--color-zinc-300);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.slider::-moz-range-progress {
|
|
167
|
+
height: 6px;
|
|
168
|
+
border: none;
|
|
169
|
+
border-radius: 9999px;
|
|
170
|
+
background: var(--color-zinc-900);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.slider::-moz-range-thumb {
|
|
174
|
+
width: 16px;
|
|
175
|
+
height: 16px;
|
|
176
|
+
border-radius: 9999px;
|
|
177
|
+
border: 2px solid var(--color-white);
|
|
178
|
+
background: var(--color-zinc-900);
|
|
179
|
+
box-shadow: var(--shadow-md);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.tooltip {
|
|
183
|
+
@apply pointer-events-none absolute bottom-[calc(100%+6px)] left-1/2 z-10 -translate-x-1/2 rounded-sm bg-black px-2 py-1 text-xs whitespace-nowrap text-white opacity-0;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.tooltip-trigger:hover .tooltip,
|
|
187
|
+
.tooltip-trigger:focus-within .tooltip {
|
|
188
|
+
@apply opacity-100;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.tooltip::before {
|
|
192
|
+
content: '';
|
|
193
|
+
position: absolute;
|
|
194
|
+
top: calc(100% - 5px);
|
|
195
|
+
left: 50%;
|
|
196
|
+
width: 10px;
|
|
197
|
+
height: 10px;
|
|
198
|
+
transform: translateX(-50%) rotate(45deg);
|
|
199
|
+
background: #000;
|
|
200
|
+
border-radius: 0;
|
|
201
|
+
border-bottom-right-radius: 0.125rem;
|
|
202
|
+
z-index: -1;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.segmented-picker {
|
|
206
|
+
@apply gap-1 rounded-md bg-zinc-100 p-1;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.segmented-picker-disabled {
|
|
210
|
+
@apply opacity-50 grayscale;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.segmented-picker-button {
|
|
214
|
+
@apply rounded-sm px-2.5 py-1;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.segmented-picker-button-active {
|
|
218
|
+
@apply bg-white shadow-xs;
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
@layer theme {
|
|
223
|
+
:root {
|
|
224
|
+
--navigation-stack-sidebar-width: 16rem;
|
|
111
225
|
}
|
|
112
226
|
}
|
|
113
227
|
|