nk_jtb 0.19.0 → 0.19.1
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/index.html +226 -440
- package/package.json +1 -1
- package/src/_random-for-review.scss +1 -5
- package/src/base/_base.scss +6 -1
- package/src/build.scss +1 -0
- package/src/extras/_nk-docs.scss +0 -3
- package/src/utilities/_misc.scss +21 -0
- package/src/utilities/_themes.scss +0 -49
package/index.html
CHANGED
|
@@ -13,80 +13,225 @@
|
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
<body class="zebra c-py-5-3-2">
|
|
16
|
+
<div class="container py-5">
|
|
17
|
+
<div class="overflow-x-uto rounded-lg br bd-neutral-200">
|
|
18
|
+
<!-- just adding bdr is enough and it will inherit the border-color -->
|
|
19
|
+
<table class="bdr bdr-green">
|
|
20
|
+
<thead class="txt-upper bdr-b bg-neutral-100">
|
|
21
|
+
<tr>
|
|
22
|
+
<th scope="col"> Product name </th>
|
|
23
|
+
<th scope="col"> Color </th>
|
|
24
|
+
<th scope="col"> Category </th>
|
|
25
|
+
<th scope="col"> Price </th>
|
|
26
|
+
<th scope="col"> Action </th>
|
|
27
|
+
</tr>
|
|
28
|
+
</thead>
|
|
16
29
|
|
|
17
30
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<
|
|
25
|
-
</
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
<
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
31
|
+
<tbody class="divide-y">
|
|
32
|
+
<tr>
|
|
33
|
+
<th scope="row"> Apple MacBook Pro 17" </th>
|
|
34
|
+
<td> Silver </td>
|
|
35
|
+
<td> Laptop </td>
|
|
36
|
+
<td> $2999 </td>
|
|
37
|
+
<td> <a href="#">Edit</a> </td>
|
|
38
|
+
</tr>
|
|
39
|
+
<tr>
|
|
40
|
+
<th scope="row"> Microsoft Surface Pro </th>
|
|
41
|
+
<td> White </td>
|
|
42
|
+
<td> Laptop PC </td>
|
|
43
|
+
<td> $1999 </td>
|
|
44
|
+
<td> <a href="#">Edit</a> </td>
|
|
45
|
+
</tr>
|
|
46
|
+
<tr>
|
|
47
|
+
<th scope="row"> Magic Mouse 2 </th>
|
|
48
|
+
<td> Black </td>
|
|
49
|
+
<td> Accessories </td>
|
|
50
|
+
<td> $99 </td>
|
|
51
|
+
<td> <a href="#">Edit</a> </td>
|
|
52
|
+
</tr>
|
|
53
|
+
<tr>
|
|
54
|
+
<th scope="row"> Google Pixel Phone </th>
|
|
55
|
+
<td> Gray </td>
|
|
56
|
+
<td> Phone </td>
|
|
57
|
+
<td> $799 </td>
|
|
58
|
+
<td> <a href="#">Edit</a> </td>
|
|
59
|
+
</tr>
|
|
60
|
+
<tr class="bdr-blue-40">
|
|
61
|
+
<th scope="row"> Apple Watch 5 </th>
|
|
62
|
+
<td> Red </td>
|
|
63
|
+
<td> Wearables </td>
|
|
64
|
+
<td> $999 </td>
|
|
65
|
+
<td> <a href="#">Edit</a> </td>
|
|
66
|
+
</tr>
|
|
67
|
+
</tbody>
|
|
68
|
+
</table>
|
|
69
|
+
</div>
|
|
70
|
+
<hr>
|
|
71
|
+
<div class="overflow-x-auto rounded-lg">
|
|
72
|
+
<table>
|
|
73
|
+
<thead class="txt-upper txt-white bg-blue-600">
|
|
74
|
+
<tr>
|
|
75
|
+
<th scope="col"> Product name </th>
|
|
76
|
+
<th scope="col"> Color </th>
|
|
77
|
+
<th scope="col"> Category </th>
|
|
78
|
+
<th scope="col"> Price </th>
|
|
79
|
+
<th scope="col"> Action </th>
|
|
80
|
+
</tr>
|
|
81
|
+
</thead>
|
|
82
|
+
<tbody>
|
|
83
|
+
<tr class="bg-blue-500 bdr-b bdr-light">
|
|
84
|
+
<th scope="row"> Apple MacBook Pro 17" </th>
|
|
85
|
+
<td> Silver </td>
|
|
86
|
+
<td> Laptop </td>
|
|
87
|
+
<td> $2999 </td>
|
|
88
|
+
<td> <a href="#">Edit</a> </td>
|
|
89
|
+
</tr>
|
|
90
|
+
<tr class="bg-blue-500 bdr-b bdr-light">
|
|
91
|
+
<th scope="row">
|
|
92
|
+
Microsoft Surface Pro
|
|
93
|
+
</th>
|
|
94
|
+
<td> White </td>
|
|
95
|
+
<td> Laptop PC </td>
|
|
96
|
+
<td> $1999 </td>
|
|
97
|
+
<td> <a href="#">Edit</a> </td>
|
|
98
|
+
</tr>
|
|
99
|
+
<tr class="bg-blue-500 bdr-b bdr-light">
|
|
100
|
+
<th scope="row"> Magic Mouse 2 </th>
|
|
101
|
+
<td> Black </td>
|
|
102
|
+
<td> Accessories </td>
|
|
103
|
+
<td> $99 </td>
|
|
104
|
+
<td> <a href="#">Edit</a> </td>
|
|
105
|
+
</tr>
|
|
106
|
+
<tr class="bg-blue-500 bdr-b bdr-light">
|
|
107
|
+
<th scope="row"> Google Pixel Phone </th>
|
|
108
|
+
<td> Gray </td>
|
|
109
|
+
<td> Phone </td>
|
|
110
|
+
<td> $799 </td>
|
|
111
|
+
<td> <a href="#">Edit</a> </td>
|
|
112
|
+
</tr>
|
|
113
|
+
<tr class="bg-blue-500 bdr-blue-40">
|
|
114
|
+
<th scope="row"> Apple Watch 5 </th>
|
|
115
|
+
<td> Red </td>
|
|
116
|
+
<td> Wearables </td>
|
|
117
|
+
<td> $999 </td>
|
|
118
|
+
<td> <a href="#">Edit</a> </td>
|
|
119
|
+
</tr>
|
|
120
|
+
</tbody>
|
|
121
|
+
</table>
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
|
|
88
125
|
|
|
89
|
-
<section
|
|
126
|
+
<section id="tailwind-pagination-example">
|
|
127
|
+
<nav aria-label="Page navigation example">
|
|
128
|
+
<ul class="flex items-center -space-x-px h-8 text-sm">
|
|
129
|
+
<li>
|
|
130
|
+
<a href="#" class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
|
|
131
|
+
<span class="sr-only">Previous</span>
|
|
132
|
+
<svg class="w-2.5 h-2.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
|
133
|
+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
|
|
134
|
+
</svg>
|
|
135
|
+
</a>
|
|
136
|
+
</li>
|
|
137
|
+
<li>
|
|
138
|
+
<a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">1</a>
|
|
139
|
+
</li>
|
|
140
|
+
<li>
|
|
141
|
+
<a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">2</a>
|
|
142
|
+
</li>
|
|
143
|
+
<li>
|
|
144
|
+
<a href="#" aria-current="page" class="z-10 flex items-center justify-center px-3 h-8 leading-tight text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">3</a>
|
|
145
|
+
</li>
|
|
146
|
+
<li>
|
|
147
|
+
<a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">4</a>
|
|
148
|
+
</li>
|
|
149
|
+
<li>
|
|
150
|
+
<a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">5</a>
|
|
151
|
+
</li>
|
|
152
|
+
<li>
|
|
153
|
+
<a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
|
|
154
|
+
<span class="sr-only">Next</span>
|
|
155
|
+
<svg class="w-2.5 h-2.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
|
156
|
+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
|
|
157
|
+
</svg>
|
|
158
|
+
</a>
|
|
159
|
+
</li>
|
|
160
|
+
</ul>
|
|
161
|
+
</nav>
|
|
162
|
+
<nav aria-label="Page navigation example">
|
|
163
|
+
<ul class="flex items-center -space-x-px h-10 text-base">
|
|
164
|
+
<li>
|
|
165
|
+
<a href="#" class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
|
|
166
|
+
<span class="sr-only">Previous</span>
|
|
167
|
+
<svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
|
168
|
+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
|
|
169
|
+
</svg>
|
|
170
|
+
</a>
|
|
171
|
+
</li>
|
|
172
|
+
<li>
|
|
173
|
+
<a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">1</a>
|
|
174
|
+
</li>
|
|
175
|
+
<li>
|
|
176
|
+
<a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">2</a>
|
|
177
|
+
</li>
|
|
178
|
+
<li>
|
|
179
|
+
<a href="#" aria-current="page" class="z-10 flex items-center justify-center px-4 h-10 leading-tight text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">3</a>
|
|
180
|
+
</li>
|
|
181
|
+
<li>
|
|
182
|
+
<a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">4</a>
|
|
183
|
+
</li>
|
|
184
|
+
<li>
|
|
185
|
+
<a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">5</a>
|
|
186
|
+
</li>
|
|
187
|
+
<li>
|
|
188
|
+
<a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
|
|
189
|
+
<span class="sr-only">Next</span>
|
|
190
|
+
<svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
|
191
|
+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
|
|
192
|
+
</svg>
|
|
193
|
+
</a>
|
|
194
|
+
</li>
|
|
195
|
+
</ul>
|
|
196
|
+
</nav>
|
|
197
|
+
</section>
|
|
198
|
+
<section id="table-testing" class="py-3">
|
|
199
|
+
<div class="container">
|
|
200
|
+
<h2 class="title txt-blue">Tables</h2>
|
|
201
|
+
<h4>Base Table</h4>
|
|
202
|
+
<table>
|
|
203
|
+
<thead>
|
|
204
|
+
<tr>
|
|
205
|
+
<th>Product</th>
|
|
206
|
+
<th>Description</th>
|
|
207
|
+
<th>Price</th>
|
|
208
|
+
<th>Stock</th>
|
|
209
|
+
</tr>
|
|
210
|
+
</thead>
|
|
211
|
+
<tbody>
|
|
212
|
+
<tr>
|
|
213
|
+
<td>Wireless Mouse</td>
|
|
214
|
+
<td>Ergonomic mouse with USB receiver</td>
|
|
215
|
+
<td>$29.95</td>
|
|
216
|
+
<td>54</td>
|
|
217
|
+
</tr>
|
|
218
|
+
<tr>
|
|
219
|
+
<td>Keyboard</td>
|
|
220
|
+
<td>Compact mechanical keyboard</td>
|
|
221
|
+
<td>$69.00</td>
|
|
222
|
+
<td>21</td>
|
|
223
|
+
</tr>
|
|
224
|
+
<tr>
|
|
225
|
+
<td>Monitor</td>
|
|
226
|
+
<td>24" 1080p IPS display</td>
|
|
227
|
+
<td>$189.50</td>
|
|
228
|
+
<td>12</td>
|
|
229
|
+
</tr>
|
|
230
|
+
</tbody>
|
|
231
|
+
</table>
|
|
232
|
+
</div>
|
|
233
|
+
</section>
|
|
234
|
+
<section id="responsive-testing" class="py-3">
|
|
90
235
|
<div class="container">
|
|
91
236
|
<h2 class="title txt-blue">Responsive Testing</h2>
|
|
92
237
|
|
|
@@ -133,7 +278,7 @@
|
|
|
133
278
|
</div>
|
|
134
279
|
</div>
|
|
135
280
|
</section>
|
|
136
|
-
<section class="py-3">
|
|
281
|
+
<section id="outline-testing" class="py-3">
|
|
137
282
|
<div class="container">
|
|
138
283
|
<h2 class="title txt-blue">Outline</h2>
|
|
139
284
|
<h4>Outline Widths</h4>
|
|
@@ -183,7 +328,7 @@
|
|
|
183
328
|
|
|
184
329
|
</div>
|
|
185
330
|
</section>
|
|
186
|
-
<section class="py-3">
|
|
331
|
+
<section id="border-testing" class="py-3">
|
|
187
332
|
<div class="container">
|
|
188
333
|
<h2 class="title txt-blue">Borders</h2>
|
|
189
334
|
<h4>Border Widths</h4>
|
|
@@ -275,8 +420,7 @@
|
|
|
275
420
|
</div>
|
|
276
421
|
</div>
|
|
277
422
|
</section>
|
|
278
|
-
|
|
279
|
-
<section id="colors" class="py-3">
|
|
423
|
+
<section id="colortesting" class="py-3">
|
|
280
424
|
<div class="container-xl">
|
|
281
425
|
<h2 class="title">Colors</h2>
|
|
282
426
|
<p>This compares the tailwind <code>-500</code> color to the colors in the <code>base-colors</code></p>
|
|
@@ -399,7 +543,7 @@
|
|
|
399
543
|
</div>
|
|
400
544
|
</div>
|
|
401
545
|
</section>
|
|
402
|
-
<section>
|
|
546
|
+
<section id="positional-utilities" class="py-3">
|
|
403
547
|
<div class="container">
|
|
404
548
|
<h2>Positional Utilities</h2>
|
|
405
549
|
<div class="flex gap justify-between items-start">
|
|
@@ -450,65 +594,7 @@
|
|
|
450
594
|
|
|
451
595
|
</div>
|
|
452
596
|
</section>
|
|
453
|
-
<section>
|
|
454
|
-
<div class="container">
|
|
455
|
-
<h2>Positional Utilities</h2>
|
|
456
|
-
<div class="flex gap justify-between items-start">
|
|
457
|
-
<div class="bg-stripes-pink rounded">
|
|
458
|
-
<div class="bx bg-pink-100 pxy mxy-1"><code>pxy</code></div>
|
|
459
|
-
</div>
|
|
460
|
-
<div class="bg-stripes-pink rounded">
|
|
461
|
-
<div class="bx bg-pink-100 pxy-2 mxy-1"><code>pxy-2</code></div>
|
|
462
|
-
</div>
|
|
463
|
-
<div class="bg-stripes-pink rounded">
|
|
464
|
-
<div class="bx bg-pink-100 pxy-3 mxy-1"><code>pxy-3</code></div>
|
|
465
|
-
</div>
|
|
466
|
-
</div>
|
|
467
|
-
<div class="flex gap justify-between items-start">
|
|
468
|
-
<div class="bg-stripes-blue bdr-blue">
|
|
469
|
-
<div class="bx lh-1 mxy"><code>mxy</code></div>
|
|
470
|
-
</div>
|
|
471
|
-
<div class="bg-stripes-blue bdr-blue">
|
|
472
|
-
<div class="bx lh-1 mxy-2"><code>mxy-2</code></div>
|
|
473
|
-
</div>
|
|
474
|
-
<div class="bg-stripes-blue bdr-blue">
|
|
475
|
-
<div class="bx lh-1 mxy-3"><code>mxy-3</code></div>
|
|
476
|
-
</div>
|
|
477
|
-
</div>
|
|
478
|
-
<div class="flex gap justify-between items-start">
|
|
479
|
-
<div class="bg-stripes-blue bdr-blue">
|
|
480
|
-
<div class="bx lh-1 mx"><code>mx</code></div>
|
|
481
|
-
</div>
|
|
482
|
-
<div class="bg-stripes-blue bdr-blue">
|
|
483
|
-
<div class="bx lh-1 my"><code>my</code></div>
|
|
484
|
-
</div>
|
|
485
|
-
<div class="bg-stripes-blue bdr-blue">
|
|
486
|
-
<div class="bx lh-1 mt"><code>mt</code></div>
|
|
487
|
-
</div>
|
|
488
|
-
<div class="bg-stripes-blue bdr-blue">
|
|
489
|
-
<div class="bx lh-1 mb"><code>mb</code></div>
|
|
490
|
-
</div>
|
|
491
|
-
<div class="bg-stripes-blue bdr-blue">
|
|
492
|
-
<div class="bx lh-1 ml"><code>ml</code></div>
|
|
493
|
-
</div>
|
|
494
|
-
<div class="bg-stripes-blue bdr-blue">
|
|
495
|
-
<div class="bx lh-1 mr"><code>mr</code></div>
|
|
496
|
-
</div>
|
|
497
597
|
|
|
498
|
-
</div>
|
|
499
|
-
<div class="flex gap justify-between items-start">
|
|
500
|
-
<div class="bg-stripes-blue bdr-blue">
|
|
501
|
-
<div class="bx lh-1 my"><code>my</code></div>
|
|
502
|
-
</div>
|
|
503
|
-
<div class="bg-stripes-blue bdr-blue">
|
|
504
|
-
<div class="bx lh-1 my-2"><code>my-2</code></div>
|
|
505
|
-
</div>
|
|
506
|
-
<div class="bg-stripes-blue bdr-blue">
|
|
507
|
-
<div class="bx lh-1 my-3"><code>my-3</code></div>
|
|
508
|
-
</div>
|
|
509
|
-
</div>
|
|
510
|
-
</div>
|
|
511
|
-
</section>
|
|
512
598
|
|
|
513
599
|
|
|
514
600
|
<div class="container-sm py-5">
|
|
@@ -628,6 +714,11 @@
|
|
|
628
714
|
</div>
|
|
629
715
|
|
|
630
716
|
|
|
717
|
+
<blockquote class="border-l-4 border-gray-500 italic">
|
|
718
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
719
|
+
<cite class="block tar txt-gray-600">- John Doe</cite>
|
|
720
|
+
</blockquote>
|
|
721
|
+
|
|
631
722
|
<div class="green pxy">sdf</div>
|
|
632
723
|
<section id="form-controls" class="py-3">
|
|
633
724
|
<div class="container">
|
|
@@ -1027,153 +1118,8 @@
|
|
|
1027
1118
|
|
|
1028
1119
|
|
|
1029
1120
|
|
|
1030
|
-
<!-- dev area -->
|
|
1031
|
-
<div class="container py">
|
|
1032
|
-
<blockquote class="border-l-4 border-gray-500 italic">
|
|
1033
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
1034
|
-
<cite class="block tar txt-gray-600">- John Doe</cite>
|
|
1035
|
-
</blockquote>
|
|
1036
|
-
<hr>
|
|
1037
|
-
Clickable table header are buttons inside <code>th</code>
|
|
1038
|
-
<table>
|
|
1039
|
-
<thead class="bg-gray-100 bdr-b">
|
|
1040
|
-
<tr>
|
|
1041
|
-
<!-- use flex to control alignment -->
|
|
1042
|
-
<!-- -->
|
|
1043
|
-
<th class="bdr bdr-red ">
|
|
1044
|
-
<button class="bdr bdr-green flex w-full ha-c">
|
|
1045
|
-
<span>TITLE</span>
|
|
1046
|
-
<svg class="icon txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
|
1047
|
-
<path d="m12.191 15.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H6.715C6.325 8 6 8.406 6 8.91c0 .244.081.471.211.634l4.973 6.321a.65.65 0 0 0 .504.26c.194 0 .357-.098.503-.26Z"></path>
|
|
1048
|
-
</svg>
|
|
1049
|
-
</button>
|
|
1050
|
-
</th>
|
|
1051
|
-
<!-- or just add text alignment classes to the `th` -->
|
|
1052
|
-
<th class="bdr bdr-green tac">
|
|
1053
|
-
<button class="bdr bdr-red w-full">
|
|
1054
|
-
<span>TITLE</span>
|
|
1055
|
-
<svg class="icon txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
|
1056
|
-
<path d="m12.191 15.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H6.715C6.325 8 6 8.406 6 8.91c0 .244.081.471.211.634l4.973 6.321a.65.65 0 0 0 .504.26c.194 0 .357-.098.503-.26Z"></path>
|
|
1057
|
-
</svg>
|
|
1058
|
-
</button>
|
|
1059
|
-
</th>
|
|
1060
|
-
</tr>
|
|
1061
|
-
</thead>
|
|
1062
|
-
</table>
|
|
1063
|
-
</div>
|
|
1064
|
-
<main class="main-content-quick-hide-wrapper zebra">
|
|
1065
|
-
|
|
1066
|
-
<!-- table and components -->
|
|
1067
|
-
<section id="table" class="py-3">
|
|
1068
|
-
<div class="container">
|
|
1069
|
-
<h2 class="title txt-3">Tables</h2>
|
|
1070
|
-
<!-- base table -->
|
|
1071
|
-
<table>
|
|
1072
|
-
<thead>
|
|
1073
|
-
<tr>
|
|
1074
|
-
<th>Product</th>
|
|
1075
|
-
<th>Description</th>
|
|
1076
|
-
<th>Price</th>
|
|
1077
|
-
<th>Stock</th>
|
|
1078
|
-
</tr>
|
|
1079
|
-
</thead>
|
|
1080
|
-
<tbody>
|
|
1081
|
-
<tr>
|
|
1082
|
-
<td>Wireless Mouse</td>
|
|
1083
|
-
<td>Ergonomic mouse with USB receiver</td>
|
|
1084
|
-
<td>$29.95</td>
|
|
1085
|
-
<td>54</td>
|
|
1086
|
-
</tr>
|
|
1087
|
-
<tr>
|
|
1088
|
-
<td>Keyboard</td>
|
|
1089
|
-
<td>Compact mechanical keyboard</td>
|
|
1090
|
-
<td>$69.00</td>
|
|
1091
|
-
<td>21</td>
|
|
1092
|
-
</tr>
|
|
1093
|
-
<tr>
|
|
1094
|
-
<td>Monitor</td>
|
|
1095
|
-
<td>24" 1080p IPS display</td>
|
|
1096
|
-
<td>$189.50</td>
|
|
1097
|
-
<td>12</td>
|
|
1098
|
-
</tr>
|
|
1099
|
-
</tbody>
|
|
1100
|
-
</table>
|
|
1101
|
-
<hr class="bdr-secondary">
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
1121
|
|
|
1105
1122
|
|
|
1106
|
-
<!-- When using sortable tables, you need to apply some additional styles as they are buttons -->
|
|
1107
|
-
<table class="w-20">
|
|
1108
|
-
<tr>
|
|
1109
|
-
<th class="bdr bdr-red tac">
|
|
1110
|
-
<button class="btn">
|
|
1111
|
-
<span>Product</span>
|
|
1112
|
-
<svg class="icon txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
|
1113
|
-
<path d="m12.191 15.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H6.715C6.325 8 6 8.406 6 8.91c0 .244.081.471.211.634l4.973 6.321a.65.65 0 0 0 .504.26c.194 0 .357-.098.503-.26Z"></path>
|
|
1114
|
-
</svg>
|
|
1115
|
-
</button>
|
|
1116
|
-
</th>
|
|
1117
|
-
</tr>
|
|
1118
|
-
</table>
|
|
1119
|
-
<svg class="wh-1 txt-muted" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
|
1120
|
-
<path d="m7.191 20.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H1.715c-.39 0-.715.406-.715.91 0 .244.081.471.211.634l4.973 6.321c.13.163.308.26.503.26.196 0 .358-.098.504-.26ZM6.184 2.26 1.21 8.581c-.13.163-.211.39-.211.634 0 .488.325.91.715.91h9.945c.39 0 .715-.406.715-.91 0-.244-.081-.471-.211-.634L7.19 2.26A.647.647 0 0 0 6.688 2c-.196 0-.358.098-.504.26Z" />
|
|
1121
|
-
</svg>
|
|
1122
|
-
<svg class="wh-1 txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
|
1123
|
-
<path d="M11.184 8.26 6.21 14.581c-.13.163-.211.39-.211.634 0 .488.325.91.715.91h9.945c.39 0 .715-.406.715-.91 0-.244-.081-.471-.211-.634L12.19 8.26a.647.647 0 0 0-.504-.26c-.194 0-.357.098-.503.26Z" />
|
|
1124
|
-
</svg>
|
|
1125
|
-
<svg class="wh-1 txt-purple" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
|
1126
|
-
<path d="m12.191 15.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H6.715C6.325 8 6 8.406 6 8.91c0 .244.081.471.211.634l4.973 6.321a.65.65 0 0 0 .504.26c.194 0 .357-.098.503-.26Z" />
|
|
1127
|
-
</svg>
|
|
1128
|
-
<table>
|
|
1129
|
-
<thead>
|
|
1130
|
-
<tr>
|
|
1131
|
-
<th class="bdr bdr-red">
|
|
1132
|
-
<button class="btn">
|
|
1133
|
-
<span>Product</span>
|
|
1134
|
-
<svg class="icon txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
|
1135
|
-
<path d="m12.191 15.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H6.715C6.325 8 6 8.406 6 8.91c0 .244.081.471.211.634l4.973 6.321a.65.65 0 0 0 .504.26c.194 0 .357-.098.503-.26Z"></path>
|
|
1136
|
-
</svg>
|
|
1137
|
-
</button>
|
|
1138
|
-
</th>
|
|
1139
|
-
<th class="bdr bdr-blue">
|
|
1140
|
-
<button class="" btn>
|
|
1141
|
-
<span>Product</span>
|
|
1142
|
-
<svg class="icon txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
|
1143
|
-
<path d="m12.191 15.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H6.715C6.325 8 6 8.406 6 8.91c0 .244.081.471.211.634l4.973 6.321a.65.65 0 0 0 .504.26c.194 0 .357-.098.503-.26Z"></path>
|
|
1144
|
-
</svg>
|
|
1145
|
-
</button>
|
|
1146
|
-
</th>
|
|
1147
|
-
<th>Product</th>
|
|
1148
|
-
<th>Description</th>
|
|
1149
|
-
<th>Price</th>
|
|
1150
|
-
<th>Stock</th>
|
|
1151
|
-
</tr>
|
|
1152
|
-
</thead>
|
|
1153
|
-
<tbody>
|
|
1154
|
-
<tr>
|
|
1155
|
-
<td>Wireless Mouse</td>
|
|
1156
|
-
<td>Ergonomic mouse with USB receiver</td>
|
|
1157
|
-
<td>$29.95</td>
|
|
1158
|
-
<td>54</td>
|
|
1159
|
-
</tr>
|
|
1160
|
-
<tr>
|
|
1161
|
-
<td>Keyboard</td>
|
|
1162
|
-
<td>Compact mechanical keyboard</td>
|
|
1163
|
-
<td>$69.00</td>
|
|
1164
|
-
<td>21</td>
|
|
1165
|
-
</tr>
|
|
1166
|
-
<tr>
|
|
1167
|
-
<td>Monitor</td>
|
|
1168
|
-
<td>24" 1080p IPS display</td>
|
|
1169
|
-
<td>$189.50</td>
|
|
1170
|
-
<td>12</td>
|
|
1171
|
-
</tr>
|
|
1172
|
-
</tbody>
|
|
1173
|
-
</table>
|
|
1174
|
-
</div>
|
|
1175
|
-
</section>
|
|
1176
|
-
</main>
|
|
1177
1123
|
|
|
1178
1124
|
|
|
1179
1125
|
|
|
@@ -1899,167 +1845,7 @@
|
|
|
1899
1845
|
</section>
|
|
1900
1846
|
</div>
|
|
1901
1847
|
|
|
1902
|
-
|
|
1903
|
-
<!-- -->
|
|
1904
|
-
<!-- THIS IS ALL OVER THE PLACE AND NEEDS TO BE TIDIED UP! -->
|
|
1905
|
-
<!-- -->
|
|
1906
|
-
<!-- -->
|
|
1907
|
-
<div class="container py-5">
|
|
1908
|
-
<div class="overflow-x-auto rounded-lg bdr">
|
|
1909
|
-
<table>
|
|
1910
|
-
<thead class="txt-upper">
|
|
1911
|
-
<tr>
|
|
1912
|
-
<th scope="col" class=""> Product name </th>
|
|
1913
|
-
<th scope="col" class=""> Color </th>
|
|
1914
|
-
<th scope="col" class=""> Category </th>
|
|
1915
|
-
<th scope="col" class=""> Price </th>
|
|
1916
|
-
<th scope="col" class=""> Action </th>
|
|
1917
|
-
</tr>
|
|
1918
|
-
</thead>
|
|
1919
|
-
<tbody class="divide-y bdr-t">
|
|
1920
|
-
<tr class="">
|
|
1921
|
-
<th scope="row" class=""> Apple MacBook Pro 17" </th>
|
|
1922
|
-
<td class=""> Silver </td>
|
|
1923
|
-
<td class=""> Laptop </td>
|
|
1924
|
-
<td class=""> $2999 </td>
|
|
1925
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1926
|
-
</tr>
|
|
1927
|
-
<tr class="bdr-green bdr5">
|
|
1928
|
-
<th scope="row" class=""> Microsoft Surface Pro </th>
|
|
1929
|
-
<td class=""> White </td>
|
|
1930
|
-
<td class=""> Laptop PC </td>
|
|
1931
|
-
<td class=""> $1999 </td>
|
|
1932
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1933
|
-
</tr>
|
|
1934
|
-
<tr class="">
|
|
1935
|
-
<th scope="row" class=""> Magic Mouse 2 </th>
|
|
1936
|
-
<td class=""> Black </td>
|
|
1937
|
-
<td class=""> Accessories </td>
|
|
1938
|
-
<td class=""> $99 </td>
|
|
1939
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1940
|
-
</tr>
|
|
1941
|
-
<tr class="">
|
|
1942
|
-
<th scope="row" class=""> Google Pixel Phone </th>
|
|
1943
|
-
<td class=""> Gray </td>
|
|
1944
|
-
<td class=""> Phone </td>
|
|
1945
|
-
<td class=""> $799 </td>
|
|
1946
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1947
|
-
</tr>
|
|
1948
|
-
<tr class="">
|
|
1949
|
-
<th scope="row" class=""> Apple Watch 5 </th>
|
|
1950
|
-
<td class=""> Red </td>
|
|
1951
|
-
<td class=""> Wearables </td>
|
|
1952
|
-
<td class=""> $999 </td>
|
|
1953
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1954
|
-
</tr>
|
|
1955
|
-
</tbody>
|
|
1956
|
-
</table>
|
|
1957
|
-
</div>
|
|
1958
|
-
<hr>
|
|
1959
|
-
<div class="overflow-x-auto rounded-lg bdr">
|
|
1960
|
-
<table>
|
|
1961
|
-
<thead class="txt-upper">
|
|
1962
|
-
<tr>
|
|
1963
|
-
<th scope="col" class=""> Product name </th>
|
|
1964
|
-
<th scope="col" class=""> Color </th>
|
|
1965
|
-
<th scope="col" class=""> Category </th>
|
|
1966
|
-
<th scope="col" class=""> Price </th>
|
|
1967
|
-
<th scope="col" class=""> Action </th>
|
|
1968
|
-
</tr>
|
|
1969
|
-
</thead>
|
|
1970
|
-
<tbody class="divide-y">
|
|
1971
|
-
<tr class="bdr-b bdr-light">
|
|
1972
|
-
<th scope="row" class=""> Apple MacBook Pro 17" </th>
|
|
1973
|
-
<td class=""> Silver </td>
|
|
1974
|
-
<td class=""> Laptop </td>
|
|
1975
|
-
<td class=""> $2999 </td>
|
|
1976
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1977
|
-
</tr>
|
|
1978
|
-
<tr class="bdr-b bdr-light">
|
|
1979
|
-
<th scope="row" class=""> Microsoft Surface Pro </th>
|
|
1980
|
-
<td class=""> White </td>
|
|
1981
|
-
<td class=""> Laptop PC </td>
|
|
1982
|
-
<td class=""> $1999 </td>
|
|
1983
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1984
|
-
</tr>
|
|
1985
|
-
<tr class="bdr-b bdr-light">
|
|
1986
|
-
<th scope="row" class=""> Magic Mouse 2 </th>
|
|
1987
|
-
<td class=""> Black </td>
|
|
1988
|
-
<td class=""> Accessories </td>
|
|
1989
|
-
<td class=""> $99 </td>
|
|
1990
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1991
|
-
</tr>
|
|
1992
|
-
<tr class="bdr-b bdr-light">
|
|
1993
|
-
<th scope="row" class=""> Google Pixel Phone </th>
|
|
1994
|
-
<td class=""> Gray </td>
|
|
1995
|
-
<td class=""> Phone </td>
|
|
1996
|
-
<td class=""> $799 </td>
|
|
1997
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1998
|
-
</tr>
|
|
1999
|
-
<tr class="bdr-blue-40">
|
|
2000
|
-
<th scope="row" class=""> Apple Watch 5 </th>
|
|
2001
|
-
<td class=""> Red </td>
|
|
2002
|
-
<td class=""> Wearables </td>
|
|
2003
|
-
<td class=""> $999 </td>
|
|
2004
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
2005
|
-
</tr>
|
|
2006
|
-
</tbody>
|
|
2007
|
-
</table>
|
|
2008
|
-
</div>
|
|
2009
|
-
<hr>
|
|
2010
|
-
<div class="overflow-x-auto rounded-lg">
|
|
2011
|
-
<table>
|
|
2012
|
-
<thead class="txt-upper txt-white bg-blue-600">
|
|
2013
|
-
<tr>
|
|
2014
|
-
<th scope="col" class=""> Product name </th>
|
|
2015
|
-
<th scope="col" class=""> Color </th>
|
|
2016
|
-
<th scope="col" class=""> Category </th>
|
|
2017
|
-
<th scope="col" class=""> Price </th>
|
|
2018
|
-
<th scope="col" class=""> Action </th>
|
|
2019
|
-
</tr>
|
|
2020
|
-
</thead>
|
|
2021
|
-
<tbody>
|
|
2022
|
-
<tr class="bg-blue-500 bdr-b bdr-light">
|
|
2023
|
-
<th scope="row" class=""> Apple MacBook Pro 17" </th>
|
|
2024
|
-
<td class=""> Silver </td>
|
|
2025
|
-
<td class=""> Laptop </td>
|
|
2026
|
-
<td class=""> $2999 </td>
|
|
2027
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
2028
|
-
</tr>
|
|
2029
|
-
<tr class="bg-blue-500 bdr-b bdr-light">
|
|
2030
|
-
<th scope="row" class="">
|
|
2031
|
-
Microsoft Surface Pro
|
|
2032
|
-
</th>
|
|
2033
|
-
<td class=""> White </td>
|
|
2034
|
-
<td class=""> Laptop PC </td>
|
|
2035
|
-
<td class=""> $1999 </td>
|
|
2036
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
2037
|
-
</tr>
|
|
2038
|
-
<tr class="bg-blue-500 bdr-b bdr-light">
|
|
2039
|
-
<th scope="row" class=""> Magic Mouse 2 </th>
|
|
2040
|
-
<td class=""> Black </td>
|
|
2041
|
-
<td class=""> Accessories </td>
|
|
2042
|
-
<td class=""> $99 </td>
|
|
2043
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
2044
|
-
</tr>
|
|
2045
|
-
<tr class="bg-blue-500 bdr-b bdr-light">
|
|
2046
|
-
<th scope="row" class=""> Google Pixel Phone </th>
|
|
2047
|
-
<td class=""> Gray </td>
|
|
2048
|
-
<td class=""> Phone </td>
|
|
2049
|
-
<td class=""> $799 </td>
|
|
2050
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
2051
|
-
</tr>
|
|
2052
|
-
<tr class="bg-blue-500 bdr-blue-40">
|
|
2053
|
-
<th scope="row" class=""> Apple Watch 5 </th>
|
|
2054
|
-
<td class=""> Red </td>
|
|
2055
|
-
<td class=""> Wearables </td>
|
|
2056
|
-
<td class=""> $999 </td>
|
|
2057
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
2058
|
-
</tr>
|
|
2059
|
-
</tbody>
|
|
2060
|
-
</table>
|
|
2061
|
-
</div>
|
|
2062
|
-
</div>
|
|
1848
|
+
|
|
2063
1849
|
|
|
2064
1850
|
<div>
|
|
2065
1851
|
<div class="quick-hide-wrapper zebra c-py-5-3-2">
|
package/package.json
CHANGED
|
@@ -27,11 +27,7 @@
|
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
|
|
30
|
-
|
|
31
|
-
// properties are set as !important but works great otherwise.
|
|
32
|
-
.divide-y > :not([hidden]) ~ :not([hidden]) {
|
|
33
|
-
border-top: 1px solid $border-color;
|
|
34
|
-
}
|
|
30
|
+
|
|
35
31
|
|
|
36
32
|
//
|
|
37
33
|
// -----------------------------------
|
package/src/base/_base.scss
CHANGED
|
@@ -242,6 +242,10 @@ table {
|
|
|
242
242
|
width: 100%;
|
|
243
243
|
}
|
|
244
244
|
|
|
245
|
+
thead {
|
|
246
|
+
border-color: inherit;
|
|
247
|
+
}
|
|
248
|
+
|
|
245
249
|
th {
|
|
246
250
|
font-weight: 600;
|
|
247
251
|
vertical-align: middle;
|
|
@@ -250,10 +254,11 @@ th {
|
|
|
250
254
|
|
|
251
255
|
th,
|
|
252
256
|
td {
|
|
253
|
-
font-size:
|
|
257
|
+
font-size: inherit; // allow font sizing to be set on table
|
|
254
258
|
padding-inline: $table-padding-x;
|
|
255
259
|
padding-block: $table-padding-y;
|
|
256
260
|
text-align: left;
|
|
261
|
+
border-color: inherit;
|
|
257
262
|
}
|
|
258
263
|
|
|
259
264
|
// -- Controls --
|
package/src/build.scss
CHANGED
package/src/extras/_nk-docs.scss
CHANGED
|
@@ -35,13 +35,10 @@ p:has(question) + p {
|
|
|
35
35
|
// ==========================================================================
|
|
36
36
|
|
|
37
37
|
/*
|
|
38
|
-
Margin and rounding are personal preferences,
|
|
39
38
|
overflow-x-auto is recommended.
|
|
40
39
|
*/
|
|
41
40
|
pre {
|
|
42
41
|
border-radius: 0.25rem;
|
|
43
|
-
margin-bottom: 1rem;
|
|
44
|
-
margin-top: 1rem;
|
|
45
42
|
overflow-x: auto;
|
|
46
43
|
}
|
|
47
44
|
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
@use '../common-tools' as *;
|
|
2
|
+
|
|
3
|
+
// ==========================================================================
|
|
4
|
+
// Miscellaneous Utilities
|
|
5
|
+
// ==========================================================================
|
|
6
|
+
// Several of these should be added to the main build. They are placed here
|
|
7
|
+
// temporarily for quick testing before being integrated into the main build.
|
|
8
|
+
|
|
9
|
+
// this is not easy to override on the child element unless the
|
|
10
|
+
// properties are set as !important but works great otherwise.
|
|
11
|
+
.divide-y > :not([hidden]) ~ :not([hidden]) {
|
|
12
|
+
border-top: 1px solid $border-color;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// .divide-y {
|
|
16
|
+
// --divide-color: #{$border-color};
|
|
17
|
+
// }
|
|
18
|
+
|
|
19
|
+
// .divide-y > :not([hidden]) ~ :not([hidden]) {
|
|
20
|
+
// border-top: 1px solid var(--divide-color, #{$border-color});
|
|
21
|
+
// }
|
|
@@ -43,52 +43,3 @@ $themes-map: ();
|
|
|
43
43
|
@each $theme-name, $map in map.merge($themes-map, $advanced-themes) {
|
|
44
44
|
@include build-basic-theme($theme-name, $map);
|
|
45
45
|
}
|
|
46
|
-
|
|
47
|
-
// // ==========================================================================
|
|
48
|
-
// // ENHANCED THEMING SYSTEM
|
|
49
|
-
// // ==========================================================================
|
|
50
|
-
|
|
51
|
-
// // Enhanced theme configuration with semantic naming and better defaults
|
|
52
|
-
// $enhanced-themes: (
|
|
53
|
-
// 'danger': (
|
|
54
|
-
// 'base': map-get-dot('red.50', $tailwind-colors),
|
|
55
|
-
// 'color': map-get-dot('red.700', $tailwind-colors),
|
|
56
|
-
// 'border-color': map-get-dot('red.500', $tailwind-colors),
|
|
57
|
-
// 'accent': #ef4444 // red-500
|
|
58
|
-
// ),
|
|
59
|
-
|
|
60
|
-
// // // Brand themes with better color harmony
|
|
61
|
-
// // 'primary': (
|
|
62
|
-
// // 'base': #2563eb,
|
|
63
|
-
// // // blue-600
|
|
64
|
-
// // 'color': white,
|
|
65
|
-
// // 'border-color': #1d4ed8,
|
|
66
|
-
// // // blue-700
|
|
67
|
-
// // 'hover-bg': #1d4ed8,
|
|
68
|
-
// // // blue-700
|
|
69
|
-
// // 'active-bg': #1e40af // blue-800
|
|
70
|
-
// // )
|
|
71
|
-
// );
|
|
72
|
-
|
|
73
|
-
// // Generate enhanced themes with state support
|
|
74
|
-
// @each $theme-name, $theme-map in $enhanced-themes {
|
|
75
|
-
// @include build-enhanced-theme($theme-name, $theme-map);
|
|
76
|
-
// }
|
|
77
|
-
|
|
78
|
-
// // Smart theme generator for quick single-color themes
|
|
79
|
-
// $auto-themes: (
|
|
80
|
-
// 'emerald': #10b981,
|
|
81
|
-
// // emerald-500
|
|
82
|
-
// 'purple': #8b5cf6,
|
|
83
|
-
// // purple-500
|
|
84
|
-
// 'pink': #ec4899,
|
|
85
|
-
// // pink-500
|
|
86
|
-
// 'indigo': #6366f1 // indigo-500
|
|
87
|
-
// );
|
|
88
|
-
|
|
89
|
-
// // @each $name, $color in $auto-themes {
|
|
90
|
-
// // @include build-smart-theme($name, $color);
|
|
91
|
-
// // }
|
|
92
|
-
// @each $name, $color in $color-map {
|
|
93
|
-
// @include build-smart-theme($name, $color);
|
|
94
|
-
// }
|