@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
package/examples/travel.html
CHANGED
|
@@ -40,6 +40,12 @@
|
|
|
40
40
|
z-index: -1;
|
|
41
41
|
transition: opacity 0.5s ease;
|
|
42
42
|
}
|
|
43
|
+
@media (max-width: 768px) {
|
|
44
|
+
.hero-glow {
|
|
45
|
+
width: 100%;
|
|
46
|
+
right: -50%;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
43
49
|
html[data-theme="light"] .hero-glow { opacity: 0; }
|
|
44
50
|
|
|
45
51
|
/* Theme Toggle Styling */
|
|
@@ -84,6 +90,22 @@
|
|
|
84
90
|
@media (min-width: 768px) {
|
|
85
91
|
.nav-header .btn-starlight { display: block; }
|
|
86
92
|
}
|
|
93
|
+
|
|
94
|
+
@media (max-width: 900px) {
|
|
95
|
+
.nav-header .nav-links {
|
|
96
|
+
gap: 0.75rem !important;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
@media (max-width: 768px) {
|
|
101
|
+
.starlight-hero h1 { font-size: 2.5rem; }
|
|
102
|
+
.starlight-hero p { font-size: 1rem; padding: 0 1rem; }
|
|
103
|
+
.starlight-hero form { padding: 1.5rem; }
|
|
104
|
+
.starlight-hero form input { font-size: 1rem !important; }
|
|
105
|
+
.starlight-hero form button { width: 100%; }
|
|
106
|
+
.container { padding-left: 1rem; padding-right: 1rem; }
|
|
107
|
+
.starlight-footer .container > div { grid-template-columns: 1fr; }
|
|
108
|
+
}
|
|
87
109
|
html[data-theme="light"] .nav-header a { color: var(--q-light-text-muted) !important; }
|
|
88
110
|
html[data-theme="light"] .nav-header a:hover { color: var(--q-color-primary) !important; }
|
|
89
111
|
html[data-theme="light"] .text-gradient {
|
|
@@ -192,6 +214,11 @@
|
|
|
192
214
|
background: var(--q-color-primary);
|
|
193
215
|
color: white;
|
|
194
216
|
}
|
|
217
|
+
html[data-theme="light"] .date-picker-input,
|
|
218
|
+
html[data-theme="light"] input[placeholder="Where to?"] {
|
|
219
|
+
background: white;
|
|
220
|
+
color: #1e293b;
|
|
221
|
+
}
|
|
195
222
|
</style>
|
|
196
223
|
</head>
|
|
197
224
|
<body class="text-primary">
|
|
@@ -203,7 +230,7 @@
|
|
|
203
230
|
<div class="container mx-auto px-6 flex items-center justify-between w-full">
|
|
204
231
|
<h1 class="text-3xl font-black tracking-tighter text-gradient uppercase">NEBULA</h1>
|
|
205
232
|
|
|
206
|
-
<nav class="nav-links
|
|
233
|
+
<nav class="nav-links flex-1 uppercase justify-center">
|
|
207
234
|
<a href="#" class="hover:text-starlight-blue transition-colors">Destinations</a>
|
|
208
235
|
<a href="#" class="hover:text-starlight-blue transition-colors">Cruises</a>
|
|
209
236
|
<a href="#" class="hover:text-starlight-blue transition-colors">Excursions</a>
|
|
@@ -216,7 +243,7 @@
|
|
|
216
243
|
<i class="q-icon-sun sun-icon"></i>
|
|
217
244
|
<i class="q-icon-moon moon-icon"></i>
|
|
218
245
|
</button>
|
|
219
|
-
<button class="btn-starlight px-8 h-12 text-[10px] font-black uppercase tracking-widest">Book Now</button>
|
|
246
|
+
<button class="btn-starlight px-8 h-12 text-[10px] font-black uppercase tracking-widest" style="white-space: nowrap;">Book Now</button>
|
|
220
247
|
<label for="nav-toggle" class="nav-hamburger" aria-label="Toggle menu">
|
|
221
248
|
<span class="nav-hamburger-icon"><span></span><span></span><span></span></span>
|
|
222
249
|
</label>
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
height: 100vh;
|
|
104
104
|
overflow: hidden;
|
|
105
105
|
position: relative;
|
|
106
|
-
z-index:
|
|
106
|
+
z-index: 2;
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
header {
|
|
@@ -252,16 +252,7 @@
|
|
|
252
252
|
padding: 0.75rem 0;
|
|
253
253
|
}
|
|
254
254
|
.sidebar .nav-item span:last-child,
|
|
255
|
-
.sidebar .nav-
|
|
256
|
-
display: none;
|
|
257
|
-
}
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
@media (max-width: 768px) {
|
|
261
|
-
.main-content {
|
|
262
|
-
grid-template-columns: 1fr;
|
|
263
|
-
}
|
|
264
|
-
.sidebar {
|
|
255
|
+
.sidebar .nav-title {
|
|
265
256
|
display: none;
|
|
266
257
|
}
|
|
267
258
|
}
|
|
@@ -332,6 +323,11 @@
|
|
|
332
323
|
margin-bottom: 1.5rem;
|
|
333
324
|
overflow-x: auto;
|
|
334
325
|
padding-bottom: 0.5rem;
|
|
326
|
+
-ms-overflow-style: none;
|
|
327
|
+
scrollbar-width: none;
|
|
328
|
+
}
|
|
329
|
+
.category-tabs::-webkit-scrollbar {
|
|
330
|
+
display: none;
|
|
335
331
|
}
|
|
336
332
|
.category-tab {
|
|
337
333
|
padding: 0.5rem 1rem;
|
|
@@ -635,6 +631,77 @@
|
|
|
635
631
|
grid-template-columns: repeat(2, 1fr);
|
|
636
632
|
}
|
|
637
633
|
}
|
|
634
|
+
|
|
635
|
+
@media (max-width: 768px) {
|
|
636
|
+
.main-content {
|
|
637
|
+
grid-template-columns: 1fr;
|
|
638
|
+
}
|
|
639
|
+
.logo {
|
|
640
|
+
cursor: pointer;
|
|
641
|
+
}
|
|
642
|
+
.sidebar {
|
|
643
|
+
position: fixed;
|
|
644
|
+
top: 60px;
|
|
645
|
+
left: 0;
|
|
646
|
+
bottom: 0;
|
|
647
|
+
width: 280px;
|
|
648
|
+
transform: translateX(-100%);
|
|
649
|
+
transition: transform 0.3s ease;
|
|
650
|
+
z-index: 101;
|
|
651
|
+
display: flex;
|
|
652
|
+
flex-direction: column;
|
|
653
|
+
pointer-events: none;
|
|
654
|
+
}
|
|
655
|
+
.sidebar.open {
|
|
656
|
+
transform: translateX(0);
|
|
657
|
+
pointer-events: auto;
|
|
658
|
+
bottom: 0;
|
|
659
|
+
}
|
|
660
|
+
.sidebar .nav-section-title {
|
|
661
|
+
display: block;
|
|
662
|
+
padding: 0.5rem 1rem;
|
|
663
|
+
}
|
|
664
|
+
.sidebar .nav-item {
|
|
665
|
+
justify-content: flex-start;
|
|
666
|
+
padding: 0.75rem 1rem;
|
|
667
|
+
}
|
|
668
|
+
.sidebar .nav-item span:last-child {
|
|
669
|
+
display: inline;
|
|
670
|
+
}
|
|
671
|
+
.sidebar-overlay {
|
|
672
|
+
display: block;
|
|
673
|
+
position: fixed;
|
|
674
|
+
top: 60px;
|
|
675
|
+
left: 0;
|
|
676
|
+
right: 0;
|
|
677
|
+
bottom: 0;
|
|
678
|
+
background: rgba(0, 0, 0, 0.5);
|
|
679
|
+
z-index: 100;
|
|
680
|
+
opacity: 0;
|
|
681
|
+
pointer-events: none;
|
|
682
|
+
transition: opacity 0.3s ease;
|
|
683
|
+
}
|
|
684
|
+
.sidebar-overlay.open {
|
|
685
|
+
z-index: 100;
|
|
686
|
+
opacity: 1;
|
|
687
|
+
pointer-events: auto;
|
|
688
|
+
top: 60px;
|
|
689
|
+
bottom: 0;
|
|
690
|
+
}
|
|
691
|
+
}
|
|
692
|
+
|
|
693
|
+
@media (min-width: 769px) {
|
|
694
|
+
.sidebar {
|
|
695
|
+
position: relative;
|
|
696
|
+
transform: none;
|
|
697
|
+
z-index: auto;
|
|
698
|
+
display: block;
|
|
699
|
+
pointer-events: auto;
|
|
700
|
+
}
|
|
701
|
+
.sidebar-overlay {
|
|
702
|
+
display: none;
|
|
703
|
+
}
|
|
704
|
+
}
|
|
638
705
|
::-webkit-scrollbar {
|
|
639
706
|
width: 8px;
|
|
640
707
|
}
|
|
@@ -675,7 +742,7 @@
|
|
|
675
742
|
<div class="stars"></div>
|
|
676
743
|
<div class="video-app">
|
|
677
744
|
<header>
|
|
678
|
-
<div class="logo">
|
|
745
|
+
<div class="logo" onclick="toggleSidebar()">
|
|
679
746
|
<div class="logo-icon">
|
|
680
747
|
<span class="q-icon q-icon-play-fill"></span>
|
|
681
748
|
</div>
|
|
@@ -711,6 +778,7 @@
|
|
|
711
778
|
</header>
|
|
712
779
|
|
|
713
780
|
<div class="main-content">
|
|
781
|
+
<div class="sidebar-overlay" onclick="toggleSidebar()"></div>
|
|
714
782
|
<aside class="sidebar">
|
|
715
783
|
<div class="nav-section">
|
|
716
784
|
<a href="#" class="nav-item active"
|
|
@@ -756,7 +824,7 @@
|
|
|
756
824
|
<span>Gaming Channel</span></a
|
|
757
825
|
>
|
|
758
826
|
<a href="#" class="nav-item"
|
|
759
|
-
><span class="q-icon q-icon-
|
|
827
|
+
><span class="q-icon q-icon-video"></span>
|
|
760
828
|
<span>Tech Review</span></a
|
|
761
829
|
>
|
|
762
830
|
<a href="#" class="nav-item"
|
|
@@ -1051,6 +1119,10 @@
|
|
|
1051
1119
|
</div>
|
|
1052
1120
|
|
|
1053
1121
|
<script>
|
|
1122
|
+
function toggleSidebar() {
|
|
1123
|
+
document.querySelector('.sidebar').classList.toggle('open');
|
|
1124
|
+
document.querySelector('.sidebar-overlay').classList.toggle('open');
|
|
1125
|
+
}
|
|
1054
1126
|
document.querySelectorAll(".category-tab").forEach((tab) => {
|
|
1055
1127
|
tab.addEventListener("click", function () {
|
|
1056
1128
|
document
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@howssatoshi/quantumcss",
|
|
3
|
-
"version": "1.11.
|
|
3
|
+
"version": "1.11.4",
|
|
4
4
|
"description": "Advanced utility-first CSS framework with JIT generation and modern components",
|
|
5
5
|
"main": "dist/quantum.min.css",
|
|
6
6
|
"bin": {
|
|
@@ -47,6 +47,7 @@
|
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
49
|
"autoprefixer": "^10.4.27",
|
|
50
|
+
"bun": "^1.3.11",
|
|
50
51
|
"chokidar": "^5.0.0",
|
|
51
52
|
"cssnano": "^7.1.3",
|
|
52
53
|
"glob": "^13.0.0",
|
package/src/cli.js
CHANGED
|
@@ -45,17 +45,26 @@ function manifest(outputPath) {
|
|
|
45
45
|
theme: {
|
|
46
46
|
colors: { ...defaultTheme.colors, ...(userConfig.theme?.extend?.colors || {}) },
|
|
47
47
|
spacing: { ...defaultTheme.spacing, ...(userConfig.theme?.extend?.spacing || {}) },
|
|
48
|
+
borderRadius: defaultTheme.borderRadius,
|
|
48
49
|
fontSize: defaultTheme.fontSize,
|
|
50
|
+
fontWeight: defaultTheme.fontWeight,
|
|
49
51
|
shadows: defaultTheme.shadows,
|
|
50
|
-
maxWidth: defaultTheme.maxWidth
|
|
52
|
+
maxWidth: defaultTheme.maxWidth,
|
|
53
|
+
duration: defaultTheme.duration,
|
|
54
|
+
easing: defaultTheme.easing,
|
|
55
|
+
transition: defaultTheme.transition,
|
|
56
|
+
semantic: defaultTheme.semantic,
|
|
57
|
+
light: defaultTheme.light
|
|
51
58
|
},
|
|
52
59
|
utilityMaps: Object.keys(utilityMaps),
|
|
53
60
|
componentPresets: {
|
|
54
|
-
...utilityMaps,
|
|
61
|
+
...utilityMaps,
|
|
55
62
|
...(userConfig.componentPresets || {})
|
|
56
63
|
},
|
|
57
|
-
|
|
58
|
-
|
|
64
|
+
plugins: userConfig.plugins || [],
|
|
65
|
+
presets: userConfig.presets || [],
|
|
66
|
+
darkMode: userConfig.darkMode || 'media',
|
|
67
|
+
instructions: "Use ':' for variants (e.g., md:flex). Use Attribute Mode with sm='...' md='...' attributes."
|
|
59
68
|
};
|
|
60
69
|
|
|
61
70
|
const json = JSON.stringify(manifestData, null, 2);
|
|
@@ -77,16 +86,99 @@ function init() {
|
|
|
77
86
|
theme: {
|
|
78
87
|
extend: {
|
|
79
88
|
colors: {
|
|
80
|
-
primary:
|
|
81
|
-
|
|
82
|
-
|
|
89
|
+
primary: {
|
|
90
|
+
50: "#eff6ff", 100: "#dbeafe", 200: "#bfdbfe", 300: "#93c5fd", 400: "#60a5fa",
|
|
91
|
+
500: "#3b82f6", 600: "#2563eb", 700: "#1d4ed8", 800: "#1e40af", 900: "#1e3a8a"
|
|
92
|
+
},
|
|
93
|
+
secondary: {
|
|
94
|
+
50: "#f8fafc", 100: "#f1f5f9", 200: "#e2e8f0", 300: "#cbd5e1", 400: "#94a3b8",
|
|
95
|
+
500: "#64748b", 600: "#475569", 700: "#334155", 800: "#1e293b", 900: "#0f172a"
|
|
96
|
+
},
|
|
97
|
+
success: "#10b981",
|
|
98
|
+
warning: "#f59e0b",
|
|
99
|
+
error: "#ef4444",
|
|
100
|
+
neutral: "#6b7280",
|
|
101
|
+
starlight: {
|
|
102
|
+
blue: "#00d4ff",
|
|
103
|
+
peach: "#ffb38a",
|
|
104
|
+
orange: "#ff7e5f",
|
|
105
|
+
deep: "#08081a"
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
fontFamily: {
|
|
109
|
+
sans: ["Inter", "system-ui", "-apple-system", "sans-serif"],
|
|
110
|
+
serif: ["Georgia", "Cambria", "serif"],
|
|
111
|
+
mono: ["SF Mono", "Monaco", "Cascadia Code", "monospace"]
|
|
112
|
+
},
|
|
113
|
+
spacing: {
|
|
114
|
+
px: "1px",
|
|
115
|
+
0: "0px",
|
|
116
|
+
1: "0.25rem",
|
|
117
|
+
2: "0.5rem",
|
|
118
|
+
3: "0.75rem",
|
|
119
|
+
4: "1rem",
|
|
120
|
+
5: "1.25rem",
|
|
121
|
+
6: "1.5rem",
|
|
122
|
+
8: "2rem",
|
|
123
|
+
10: "2.5rem",
|
|
124
|
+
12: "3rem",
|
|
125
|
+
16: "4rem",
|
|
126
|
+
24: "6rem",
|
|
127
|
+
32: "8rem"
|
|
128
|
+
},
|
|
129
|
+
borderRadius: {
|
|
130
|
+
none: "0px",
|
|
131
|
+
sm: "0.125rem",
|
|
132
|
+
md: "0.375rem",
|
|
133
|
+
lg: "0.5rem",
|
|
134
|
+
xl: "0.75rem",
|
|
135
|
+
"2xl": "1rem",
|
|
136
|
+
"3xl": "1.5rem",
|
|
137
|
+
full: "9999px"
|
|
138
|
+
},
|
|
139
|
+
boxShadow: {
|
|
140
|
+
sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
|
141
|
+
md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
|
142
|
+
lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
|
|
143
|
+
xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
|
|
144
|
+
"2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)"
|
|
145
|
+
},
|
|
146
|
+
animation: {
|
|
147
|
+
spin: "spin 1s linear infinite",
|
|
148
|
+
ping: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
|
|
149
|
+
pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
|
|
150
|
+
bounce: "bounce 1s infinite",
|
|
151
|
+
"fade-in": "fadeIn 0.5s ease-in-out",
|
|
152
|
+
"slide-up": "slideUp 0.3s ease-out",
|
|
153
|
+
"slide-down": "slideDown 0.3s ease-out"
|
|
83
154
|
}
|
|
84
155
|
}
|
|
85
156
|
},
|
|
86
|
-
content: [
|
|
157
|
+
content: [
|
|
158
|
+
"./src/**/*.{html,js,ts,jsx,tsx}",
|
|
159
|
+
"./examples/**/*.html",
|
|
160
|
+
"./index.html"
|
|
161
|
+
],
|
|
162
|
+
plugins: [
|
|
163
|
+
"container-queries",
|
|
164
|
+
"logical-properties",
|
|
165
|
+
"component-utilities",
|
|
166
|
+
"dark-mode",
|
|
167
|
+
"accessibility"
|
|
168
|
+
],
|
|
169
|
+
presets: [
|
|
170
|
+
"modern-css"
|
|
171
|
+
],
|
|
87
172
|
componentPresets: {
|
|
88
|
-
"btn-
|
|
89
|
-
"
|
|
173
|
+
"btn-primary": "btn-starlight px-6 py-2 shadow-md hover:scale-105 active:scale-95",
|
|
174
|
+
"btn-secondary": "btn-base theme-glass px-6 py-2 shadow-md hover:bg-white_10 active:scale-95",
|
|
175
|
+
"card-premium": "card-base theme-glass p-8 shadow-xl",
|
|
176
|
+
"starlight-nav": "nav-base theme-glass-dark",
|
|
177
|
+
"search": "search-container theme-glass-dark rounded-xl",
|
|
178
|
+
"dashboard": "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8",
|
|
179
|
+
"gallery": "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4",
|
|
180
|
+
"form": "card-base theme-glass-dark grid grid-cols-1 md:grid-cols-2 gap-8 items-start",
|
|
181
|
+
"dialog": "dialog-base modal-fixed theme-glass-dark dialog-bg ani-scale-in"
|
|
90
182
|
},
|
|
91
183
|
darkMode: "media"
|
|
92
184
|
};
|