@quilltap/theme-storybook 1.0.55 → 1.0.56
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/index.css +41 -0
- package/package.json +1 -1
- package/src/css/qt-components.css +56 -0
package/dist/index.css
CHANGED
|
@@ -550,6 +550,10 @@ body {
|
|
|
550
550
|
--qt-overlay-muted-fg: rgb(255 255 255 / 0.7);
|
|
551
551
|
--qt-spinner-track: color-mix(in srgb, var(--color-primary) 20%, transparent);
|
|
552
552
|
--qt-spinner-indicator: var(--color-primary);
|
|
553
|
+
--qt-progress-track: var(--color-muted);
|
|
554
|
+
--qt-progress-indicator: var(--color-primary);
|
|
555
|
+
--qt-progress-indicator-success: var(--color-success);
|
|
556
|
+
--qt-progress-indicator-danger: var(--color-destructive);
|
|
553
557
|
--qt-favorite-color: hsl(45 96% 58%);
|
|
554
558
|
--qt-toggle-knob-bg: white;
|
|
555
559
|
--qt-warning-box-bg: color-mix(in srgb, var(--color-warning) 8%, transparent);
|
|
@@ -1845,6 +1849,43 @@ body {
|
|
|
1845
1849
|
border: 4px solid var(--qt-spinner-track, color-mix(in srgb, var(--color-primary) 20%, transparent));
|
|
1846
1850
|
border-right-color: var(--qt-spinner-indicator, var(--color-primary));
|
|
1847
1851
|
}
|
|
1852
|
+
.qt-progress {
|
|
1853
|
+
background-color: var(--qt-progress-track, var(--color-muted));
|
|
1854
|
+
border-radius: 9999px;
|
|
1855
|
+
overflow: hidden;
|
|
1856
|
+
height: 0.5rem;
|
|
1857
|
+
}
|
|
1858
|
+
.qt-progress-sm {
|
|
1859
|
+
height: 0.375rem;
|
|
1860
|
+
}
|
|
1861
|
+
.qt-progress-fill {
|
|
1862
|
+
height: 100%;
|
|
1863
|
+
border-radius: 9999px;
|
|
1864
|
+
background-color: var(--qt-progress-indicator, var(--color-primary));
|
|
1865
|
+
transition: width 500ms ease-out;
|
|
1866
|
+
}
|
|
1867
|
+
.qt-progress-fill-success {
|
|
1868
|
+
background-color: var(--qt-progress-indicator-success, var(--color-success));
|
|
1869
|
+
}
|
|
1870
|
+
.qt-progress-fill-danger {
|
|
1871
|
+
background-color: var(--qt-progress-indicator-danger, var(--color-destructive));
|
|
1872
|
+
}
|
|
1873
|
+
.qt-progress-fill-idle {
|
|
1874
|
+
background-color: transparent;
|
|
1875
|
+
}
|
|
1876
|
+
.qt-progress-indeterminate {
|
|
1877
|
+
width: 40% !important;
|
|
1878
|
+
transition: none;
|
|
1879
|
+
animation: qt-progress-slide 1.4s ease-in-out infinite;
|
|
1880
|
+
}
|
|
1881
|
+
@keyframes qt-progress-slide {
|
|
1882
|
+
0% {
|
|
1883
|
+
transform: translateX(-100%);
|
|
1884
|
+
}
|
|
1885
|
+
100% {
|
|
1886
|
+
transform: translateX(250%);
|
|
1887
|
+
}
|
|
1888
|
+
}
|
|
1848
1889
|
.qt-text-favorite {
|
|
1849
1890
|
color: var(--qt-favorite-color, hsl(45 96% 58%));
|
|
1850
1891
|
}
|
package/package.json
CHANGED
|
@@ -494,6 +494,12 @@
|
|
|
494
494
|
--qt-spinner-track: color-mix(in srgb, var(--color-primary) 20%, transparent);
|
|
495
495
|
--qt-spinner-indicator: var(--color-primary);
|
|
496
496
|
|
|
497
|
+
/* Progress bar variables — every bar-shaped construct in the app */
|
|
498
|
+
--qt-progress-track: var(--color-muted);
|
|
499
|
+
--qt-progress-indicator: var(--color-primary);
|
|
500
|
+
--qt-progress-indicator-success: var(--color-success);
|
|
501
|
+
--qt-progress-indicator-danger: var(--color-destructive);
|
|
502
|
+
|
|
497
503
|
/* Favorite star color */
|
|
498
504
|
--qt-favorite-color: hsl(45 96% 58%);
|
|
499
505
|
|
|
@@ -2210,6 +2216,56 @@
|
|
|
2210
2216
|
border-right-color: var(--qt-spinner-indicator, var(--color-primary));
|
|
2211
2217
|
}
|
|
2212
2218
|
|
|
2219
|
+
/* ==========================================================================
|
|
2220
|
+
PROGRESS BAR UTILITIES
|
|
2221
|
+
Multi-phase task progress and static value meters.
|
|
2222
|
+
========================================================================== */
|
|
2223
|
+
|
|
2224
|
+
.qt-progress {
|
|
2225
|
+
background-color: var(--qt-progress-track, var(--color-muted));
|
|
2226
|
+
border-radius: 9999px;
|
|
2227
|
+
overflow: hidden;
|
|
2228
|
+
height: 0.5rem;
|
|
2229
|
+
}
|
|
2230
|
+
|
|
2231
|
+
.qt-progress-sm {
|
|
2232
|
+
height: 0.375rem;
|
|
2233
|
+
}
|
|
2234
|
+
|
|
2235
|
+
.qt-progress-fill {
|
|
2236
|
+
height: 100%;
|
|
2237
|
+
border-radius: 9999px;
|
|
2238
|
+
background-color: var(--qt-progress-indicator, var(--color-primary));
|
|
2239
|
+
transition: width 500ms ease-out;
|
|
2240
|
+
}
|
|
2241
|
+
|
|
2242
|
+
.qt-progress-fill-success {
|
|
2243
|
+
background-color: var(--qt-progress-indicator-success, var(--color-success));
|
|
2244
|
+
}
|
|
2245
|
+
|
|
2246
|
+
.qt-progress-fill-danger {
|
|
2247
|
+
background-color: var(--qt-progress-indicator-danger, var(--color-destructive));
|
|
2248
|
+
}
|
|
2249
|
+
|
|
2250
|
+
.qt-progress-fill-idle {
|
|
2251
|
+
background-color: transparent;
|
|
2252
|
+
}
|
|
2253
|
+
|
|
2254
|
+
.qt-progress-indeterminate {
|
|
2255
|
+
width: 40% !important;
|
|
2256
|
+
transition: none;
|
|
2257
|
+
animation: qt-progress-slide 1.4s ease-in-out infinite;
|
|
2258
|
+
}
|
|
2259
|
+
|
|
2260
|
+
@keyframes qt-progress-slide {
|
|
2261
|
+
0% {
|
|
2262
|
+
transform: translateX(-100%);
|
|
2263
|
+
}
|
|
2264
|
+
100% {
|
|
2265
|
+
transform: translateX(250%);
|
|
2266
|
+
}
|
|
2267
|
+
}
|
|
2268
|
+
|
|
2213
2269
|
/* ==========================================================================
|
|
2214
2270
|
FAVORITE / TOGGLE / WARNING BOX UTILITIES
|
|
2215
2271
|
========================================================================== */
|