@howssatoshi/quantumcss 1.11.1 → 1.11.4
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/README.md +27 -6
- package/dist/quantum.min.css +2 -2
- package/examples/admin-panel.html +18 -6
- package/examples/analytics-dashboard.html +15 -9
- package/examples/chat-messaging.html +40 -3
- package/examples/email-client.css +62 -1
- package/examples/index.html +17 -1
- package/examples/kitchen-sink.html +8 -2
- package/examples/music-streaming.html +67 -6
- package/examples/news.html +34 -8
- package/examples/nova-shop.css +1 -0
- package/examples/portfolio.html +17 -17
- package/examples/shopping.html +1 -1
- package/examples/travel.html +29 -2
- package/examples/video-streaming.html +85 -13
- package/package.json +2 -1
- package/src/cli.js +102 -10
- package/src/defaults.js +413 -22
- package/src/generator.js +2 -1
- package/src/styles/quantum-animations.css +2 -2
- package/src/styles/quantum-base.css +38 -7
- package/src/styles/quantum-components.css +91 -20
- package/src/styles/quantum-icons.css +2 -3
- package/src/styles/starlight.css +235 -46
|
@@ -253,9 +253,9 @@ html[data-theme="light"] .input:disabled {
|
|
|
253
253
|
}
|
|
254
254
|
|
|
255
255
|
.badge-primary {
|
|
256
|
-
background-color:
|
|
257
|
-
color:
|
|
258
|
-
border-color:
|
|
256
|
+
background-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 85%);
|
|
257
|
+
color: var(--q-color-starlight-blue);
|
|
258
|
+
border-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 70%);
|
|
259
259
|
}
|
|
260
260
|
|
|
261
261
|
.badge-secondary {
|
|
@@ -982,21 +982,21 @@ html[data-theme="light"] .tab-button.active {
|
|
|
982
982
|
}
|
|
983
983
|
|
|
984
984
|
.chip:hover {
|
|
985
|
-
background-color:
|
|
986
|
-
border-color:
|
|
985
|
+
background-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 90%);
|
|
986
|
+
border-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 70%);
|
|
987
987
|
color: var(--q-color-starlight-blue);
|
|
988
988
|
}
|
|
989
989
|
|
|
990
990
|
.chip.active {
|
|
991
|
-
background-color:
|
|
992
|
-
border-color:
|
|
991
|
+
background-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 90%);
|
|
992
|
+
border-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 70%);
|
|
993
993
|
color: var(--q-color-starlight-blue);
|
|
994
994
|
}
|
|
995
995
|
|
|
996
996
|
/* Chip variants */
|
|
997
997
|
.chip-primary {
|
|
998
|
-
background-color:
|
|
999
|
-
border-color:
|
|
998
|
+
background-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 90%);
|
|
999
|
+
border-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 70%);
|
|
1000
1000
|
color: var(--q-color-starlight-blue);
|
|
1001
1001
|
}
|
|
1002
1002
|
|
|
@@ -1568,6 +1568,35 @@ html[data-theme="light"] .table-premium-footer {
|
|
|
1568
1568
|
border-top-color: var(--q-light-card-border);
|
|
1569
1569
|
}
|
|
1570
1570
|
|
|
1571
|
+
/* Mobile Responsive for Premium Table */
|
|
1572
|
+
@media (max-width: 640px) {
|
|
1573
|
+
.table-premium-header {
|
|
1574
|
+
flex-direction: column;
|
|
1575
|
+
gap: var(--q-space-3);
|
|
1576
|
+
padding: var(--q-space-3) var(--q-space-4);
|
|
1577
|
+
}
|
|
1578
|
+
|
|
1579
|
+
.table-premium-title {
|
|
1580
|
+
font-size: 1rem;
|
|
1581
|
+
}
|
|
1582
|
+
|
|
1583
|
+
.table-premium-filters {
|
|
1584
|
+
width: 100%;
|
|
1585
|
+
justify-content: flex-start;
|
|
1586
|
+
}
|
|
1587
|
+
|
|
1588
|
+
.table-premium th,
|
|
1589
|
+
.table-premium td {
|
|
1590
|
+
padding: var(--q-space-2) var(--q-space-3);
|
|
1591
|
+
}
|
|
1592
|
+
|
|
1593
|
+
.table-premium-footer {
|
|
1594
|
+
flex-direction: column;
|
|
1595
|
+
gap: var(--q-space-2);
|
|
1596
|
+
padding: var(--q-space-3) var(--q-space-4);
|
|
1597
|
+
}
|
|
1598
|
+
}
|
|
1599
|
+
|
|
1571
1600
|
/* ============================================================================
|
|
1572
1601
|
LIST COMPONENT
|
|
1573
1602
|
============================================================================ */
|
|
@@ -1761,6 +1790,26 @@ html[data-theme="light"] .list-divider {
|
|
|
1761
1790
|
overflow-y: auto;
|
|
1762
1791
|
}
|
|
1763
1792
|
|
|
1793
|
+
/* Touch Slide - Horizontal scroll with touch swipe support */
|
|
1794
|
+
.touch-slide {
|
|
1795
|
+
display: flex;
|
|
1796
|
+
gap: var(--q-space-2, 0.5rem);
|
|
1797
|
+
overflow-x: auto;
|
|
1798
|
+
-webkit-overflow-scrolling: touch;
|
|
1799
|
+
scroll-snap-type: x mandatory;
|
|
1800
|
+
scrollbar-width: none;
|
|
1801
|
+
-ms-overflow-style: none;
|
|
1802
|
+
}
|
|
1803
|
+
|
|
1804
|
+
.touch-slide::-webkit-scrollbar {
|
|
1805
|
+
display: none;
|
|
1806
|
+
}
|
|
1807
|
+
|
|
1808
|
+
.touch-slide > * {
|
|
1809
|
+
flex-shrink: 0;
|
|
1810
|
+
scroll-snap-align: start;
|
|
1811
|
+
}
|
|
1812
|
+
|
|
1764
1813
|
/* ============================================================================
|
|
1765
1814
|
APP LAYOUT PATTERNS
|
|
1766
1815
|
Standardized layout components for dashboard and admin applications
|
|
@@ -1832,6 +1881,22 @@ html[data-theme="light"] .top-nav {
|
|
|
1832
1881
|
justify-content: space-between;
|
|
1833
1882
|
align-items: center;
|
|
1834
1883
|
margin-bottom: 2rem;
|
|
1884
|
+
flex-wrap: wrap;
|
|
1885
|
+
gap: 1rem;
|
|
1886
|
+
}
|
|
1887
|
+
|
|
1888
|
+
@media (max-width: 768px) {
|
|
1889
|
+
.page-header {
|
|
1890
|
+
flex-direction: column;
|
|
1891
|
+
align-items: stretch;
|
|
1892
|
+
gap: 0.75rem;
|
|
1893
|
+
}
|
|
1894
|
+
.page-header > div:first-child {
|
|
1895
|
+
min-width: 0;
|
|
1896
|
+
}
|
|
1897
|
+
.page-header .page-actions {
|
|
1898
|
+
justify-content: flex-start;
|
|
1899
|
+
}
|
|
1835
1900
|
}
|
|
1836
1901
|
|
|
1837
1902
|
.page-title {
|
|
@@ -1854,6 +1919,18 @@ html[data-theme="light"] .top-nav {
|
|
|
1854
1919
|
gap: 0.75rem;
|
|
1855
1920
|
}
|
|
1856
1921
|
|
|
1922
|
+
@media (max-width: 768px) {
|
|
1923
|
+
.page-actions {
|
|
1924
|
+
overflow-x: auto;
|
|
1925
|
+
-webkit-overflow-scrolling: touch;
|
|
1926
|
+
scrollbar-width: none;
|
|
1927
|
+
padding-bottom: 0.25rem;
|
|
1928
|
+
}
|
|
1929
|
+
.page-actions::-webkit-scrollbar {
|
|
1930
|
+
display: none;
|
|
1931
|
+
}
|
|
1932
|
+
}
|
|
1933
|
+
|
|
1857
1934
|
html[data-theme="light"] .page-title {
|
|
1858
1935
|
color: #0f172a;
|
|
1859
1936
|
}
|
|
@@ -1886,12 +1963,6 @@ html[data-theme="light"] .sidebar {
|
|
|
1886
1963
|
|
|
1887
1964
|
.main-content {
|
|
1888
1965
|
}
|
|
1889
|
-
|
|
1890
|
-
.page-header {
|
|
1891
|
-
flex-direction: column;
|
|
1892
|
-
align-items: flex-start;
|
|
1893
|
-
gap: 1rem;
|
|
1894
|
-
}
|
|
1895
1966
|
}
|
|
1896
1967
|
|
|
1897
1968
|
/* ============================================================================
|
|
@@ -1996,7 +2067,7 @@ html[data-theme="light"] .breadcrumb-current {
|
|
|
1996
2067
|
}
|
|
1997
2068
|
|
|
1998
2069
|
.nav-item.active {
|
|
1999
|
-
background:
|
|
2070
|
+
background: color-mix(in srgb, var(--q-color-starlight-blue), transparent 88%);
|
|
2000
2071
|
color: var(--q-color-starlight, #00d4ff);
|
|
2001
2072
|
}
|
|
2002
2073
|
|
|
@@ -2666,7 +2737,7 @@ html[data-theme="light"] .user-email {
|
|
|
2666
2737
|
}
|
|
2667
2738
|
|
|
2668
2739
|
.role-admin {
|
|
2669
|
-
background:
|
|
2740
|
+
background: color-mix(in srgb, var(--q-color-starlight-blue), transparent 85%);
|
|
2670
2741
|
color: var(--q-color-starlight, #00d4ff);
|
|
2671
2742
|
}
|
|
2672
2743
|
|
|
@@ -2739,7 +2810,7 @@ html[data-theme="light"] .role-badge {
|
|
|
2739
2810
|
}
|
|
2740
2811
|
|
|
2741
2812
|
html[data-theme="light"] .role-admin {
|
|
2742
|
-
background:
|
|
2813
|
+
background: color-mix(in srgb, var(--q-color-starlight-blue), transparent 90%);
|
|
2743
2814
|
color: #0284c7;
|
|
2744
2815
|
}
|
|
2745
2816
|
|
|
@@ -2948,8 +3019,8 @@ html[data-theme="light"] .notification-badge {
|
|
|
2948
3019
|
}
|
|
2949
3020
|
|
|
2950
3021
|
.page-btn.active {
|
|
2951
|
-
background:
|
|
2952
|
-
border-color:
|
|
3022
|
+
background: color-mix(in srgb, var(--q-color-starlight-blue), transparent 85%);
|
|
3023
|
+
border-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 70%);
|
|
2953
3024
|
color: var(--q-color-starlight, #00d4ff);
|
|
2954
3025
|
}
|
|
2955
3026
|
|
|
@@ -286,8 +286,8 @@
|
|
|
286
286
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11.049%202.927c.3-.921%201.603-.921%201.902%200l1.519%204.674a1%201%200%2000.95.69h4.915c.969%200%201.371%201.24.588%201.81l-3.976%202.888a1%201%200%2000-.363%201.118l1.518%204.674c.3.922-.755%201.688-1.538%201.118l-3.976-2.888a1%201%200%2000-1.176%200l-3.976%202.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1%201%200%2000-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1%201%200%2000.951-.69l1.519-4.674z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
|
|
287
287
|
}
|
|
288
288
|
.q-icon-starlight {
|
|
289
|
-
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%
|
|
290
|
-
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%
|
|
289
|
+
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%228%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2215%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.45%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%224%22%20width%3D%224%22%20height%3D%2256%22%20rx%3D%222%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2230%22%20width%3D%2256%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2211%22%20width%3D%222%22%20height%3D%2242%22%20rx%3D%221%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%2231%22%20width%3D%2242%22%20height%3D%222%22%20rx%3D%221%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(-45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(-45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E");
|
|
290
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%228%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2215%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.45%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%224%22%20width%3D%224%22%20height%3D%2256%22%20rx%3D%222%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2230%22%20width%3D%2256%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2211%22%20width%3D%222%22%20height%3D%2242%22%20rx%3D%221%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%2231%22%20width%3D%2242%22%20height%3D%222%22%20rx%3D%221%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(-45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(-45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E");
|
|
291
291
|
}
|
|
292
292
|
.q-icon-sun {
|
|
293
293
|
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22%3E%3C%2Fcircle%3E%3Cline%20x1%3D%2212%22%20y1%3D%221%22%20x2%3D%2212%22%20y2%3D%223%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2212%22%20y1%3D%2221%22%20x2%3D%2212%22%20y2%3D%2223%22%3E%3C%2Fline%3E%3Cline%20x1%3D%224.22%22%20y1%3D%224.22%22%20x2%3D%225.64%22%20y2%3D%225.64%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2218.78%22%20y1%3D%2218.78%22%20x2%3D%2220.2%22%20y2%3D%2220.2%22%3E%3C%2Fline%3E%3Cline%20x1%3D%221%22%20y1%3D%2212%22%20x2%3D%223%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2221%22%20y1%3D%2212%22%20x2%3D%2223%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cline%20x1%3D%224.22%22%20y1%3D%2219.78%22%20x2%3D%225.64%22%20y2%3D%2218.36%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2218.78%22%20y1%3D%225.22%22%20x2%3D%2220.2%22%20y2%3D%223.8%22%3E%3C%2Fline%3E%3C%2Fsvg%3E");
|
|
@@ -342,4 +342,3 @@
|
|
|
342
342
|
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M3%209v6h4l5%205V4L7%209H3zm13.5%203c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73%202.5-2.25%202.5-4.02zM14%203.23v2.06c2.89.86%205%203.54%205%206.71s-2.11%205.85-5%206.71v2.06c4.01-.91%207-4.49%207-8.77s-2.99-7.86-7-8.77z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
|
|
343
343
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M3%209v6h4l5%205V4L7%209H3zm13.5%203c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73%202.5-2.25%202.5-4.02zM14%203.23v2.06c2.89.86%205%203.54%205%206.71s-2.11%205.85-5%206.71v2.06c4.01-.91%207-4.49%207-8.77s-2.99-7.86-7-8.77z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
|
|
344
344
|
}
|
|
345
|
-
|