nk_jtb 0.8.6 → 0.9.0
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/.prettierignore +1 -0
- package/.prettierrc +3 -0
- package/.vscode/settings.json +3 -0
- package/index.html +225 -3
- package/package.json +7 -7
- package/readme.md +17 -1
- package/src/_nk.scss +48 -14
- package/src/base/_base.scss +20 -12
- package/src/base/_content_gap.scss +33 -0
- package/src/base/_root.scss +1 -1
- package/src/base/index.scss +3 -0
- package/src/color/_shades.scss +31 -14
- package/src/color/_themes.scss +12 -16
- package/src/{scss/components → components}/_accordion.scss +1 -1
- package/src/{scss/components → components}/_article.scss +2 -2
- package/src/components/_banner.scss +17 -0
- package/src/{scss/components → components}/_box.scss +2 -3
- package/src/components/_button.scss +5 -5
- package/src/{scss/components → components}/_dropdown.scss +6 -6
- package/src/{scss/components → components}/_icon.scss +6 -3
- package/src/{scss/components → components}/_list.scss +1 -2
- package/src/{scss/components → components}/_menu.scss +2 -3
- package/src/components/_misc.scss +44 -0
- package/src/{scss/components → components}/_navbar.scss +4 -4
- package/src/{scss/components → components}/_other.scss +2 -2
- package/src/components/_sidebar.scss +10 -0
- package/src/components-extended/_hero.scss +45 -0
- package/src/extras/_code.scss +1 -1
- package/src/extras/agate.css +139 -139
- package/src/extras/github-dark-dimmed.css +124 -124
- package/src/extras/monokai-sublime.css +80 -80
- package/src/extras/panda-syntax-dark.css +99 -99
- package/src/forms/_choices.scss +3 -3
- package/src/forms/_control.scss +41 -22
- package/src/forms/_form.scss +54 -33
- package/src/forms/_index.scss +5 -0
- package/src/{scss/forms → forms}/_toggle.scss +1 -2
- package/src/functions/_colorFunctions.scss +1 -1
- package/src/functions/helpers/_map-and-list.scss +39 -0
- package/src/functions/helpers/_naming-and-formatting.scss +72 -0
- package/src/functions/helpers/_string.scss +34 -0
- package/src/functions/helpers/_strippers.scss +55 -0
- package/src/functions/helpers/_validation.scss +13 -0
- package/src/functions/helpers/index.scss +7 -0
- package/src/jtb.scss +40 -37
- package/src/mixins/_class-helpers.scss +180 -0
- package/src/mixins/_classGenerators.scss +14 -0
- package/src/mixins/{_colorShadeClasses.scss → _colorThemeGenerators.scss} +20 -7
- package/src/mixins/_common.scss +11 -0
- package/src/mixins/_extendedThemeClass.scss +9 -9
- package/src/mixins/_magicClassGenerators.scss +103 -0
- package/src/{scss/mixins/_makeMagicGridEqualWidths.scss → mixins/_magicGridGenerators.scss} +26 -4
- package/src/mixins/_media.scss +4 -4
- package/src/mixins/_state.scss +17 -0
- package/src/mixins/generators/_generate-classes.scss +26 -0
- package/src/mixins/generators/_generate-from-values.scss +40 -0
- package/src/mixins/generators/_generate-utilities.scss +57 -0
- package/src/play.scss +151 -27
- package/src/utilities/_border.scss +78 -0
- package/src/utilities/_container.scss +31 -0
- package/src/utilities/_effects.scss +15 -0
- package/src/utilities/_flexbox.scss +93 -0
- package/src/utilities/_grid.scss +63 -43
- package/src/utilities/_layout.scss +21 -0
- package/src/utilities/_margin.scss +21 -0
- package/src/utilities/_misc.scss +16 -0
- package/src/utilities/_padding.scss +26 -0
- package/src/utilities/_position.scss +21 -0
- package/src/utilities/_sizing.scss +60 -0
- package/src/utilities/_space.scss +29 -0
- package/src/utilities/_state.scss +31 -0
- package/src/utilities/_typography.scss +185 -0
- package/src/utilities/_visibility-display.scss +37 -0
- package/src/{base/_vars_base.scss → variables/_base.scss} +7 -14
- package/src/{base/_vars_colors.scss → variables/_colors.scss} +2 -2
- package/src/{scss/base/_vars_components.scss → variables/_components.scss} +32 -6
- package/src/variables/_identifiers.scss +22 -0
- package/src/variables/_utility_maps.scss +127 -0
- package/src/variables/index.scss +6 -0
- package/tmp/_general.scss +56 -0
- package/tmp/_nk.scss +57 -0
- package/tmp/_state.scss +0 -0
- package/src/base/_vars_all.scss +0 -6
- package/src/base/_vars_class_names.scss +0 -7
- package/src/base/_vars_components.scss +0 -1
- package/src/base/_vars_utility_maps.scss +0 -112
- package/src/functions/_helpers.scss +0 -59
- package/src/mixins/_responsiveClassCreators.scss +0 -96
- package/src/mixins/_utilityClassCreators.scss +0 -37
- package/src/mixins/helpers/_basicColorScheme.scss +0 -7
- package/src/mixins/helpers/_classCreators.scss +0 -12
- package/src/mixins/helpers/_index.scss +0 -3
- package/src/mixins/helpers/_propertyCreators.scss +0 -34
- package/src/scss/_nk.scss +0 -111
- package/src/scss/base/_content_gap.scss +0 -29
- package/src/scss/components/_hero.scss +0 -34
- package/src/scss/components/_sidebar.scss +0 -26
- package/src/scss/forms/_index.scss +0 -4
- package/src/scss/functions/_classNaming.scss +0 -26
- package/src/scss/layouts/__two-column.scss +0 -32
- package/src/scss/mixins/_createState.scss +0 -33
- package/src/scss/mixins/_makeMagicClass.scss +0 -80
- package/src/scss/mixins/_makeMagicGrid2Cols.scss +0 -70
- package/src/scss/mixins/_positionUtilityClasses.scss +0 -50
- package/src/scss/utilities/_border.scss +0 -126
- package/src/scss/utilities/_display_visibility.scss +0 -70
- package/src/scss/utilities/_flex.scss +0 -173
- package/src/scss/utilities/_general.scss +0 -127
- package/src/scss/utilities/_grid.scss +0 -66
- package/src/scss/utilities/_opacity.scss +0 -8
- package/src/scss/utilities/_position.scss +0 -87
- package/src/scss/utilities/_sizes.scss +0 -125
- package/src/scss/utilities/_spacing.scss +0 -247
- package/src/scss/utilities/_state.scss +0 -37
- package/src/scss/utilities/_text.scss +0 -177
- package/src/scss/utilities/_themes.scss +0 -33
- package/src/utilities/_general.scss +0 -8
- package/src/utilities/_size.scss +0 -16
- package/src/utilities/_text.scss +0 -15
- package/src/utilities/_utilities.scss +0 -25
- /package/src/{scss/forms → forms}/_file.scss +0 -0
- /package/src/{_properties.scss → functions/helpers/_numeric.scss} +0 -0
- /package/src/{scss/utilities/_translate.scss → utilities/_transforms.scss} +0 -0
package/.prettierignore
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
functions
|
package/.prettierrc
ADDED
package/index.html
CHANGED
|
@@ -6,11 +6,203 @@
|
|
|
6
6
|
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
|
|
7
7
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
8
8
|
<title>NayKel JTB</title>
|
|
9
|
-
|
|
9
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
10
10
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
11
11
|
</head>
|
|
12
12
|
|
|
13
13
|
<body>
|
|
14
|
+
|
|
15
|
+
<section>
|
|
16
|
+
<div class="container">
|
|
17
|
+
<div class="flex-col">
|
|
18
|
+
<div class="bx pink h-2"></div>
|
|
19
|
+
<div class="bx pink h-2"></div>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="bx">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit laboriosam aliquid commodi animi magni excepturi inventore qui nemo, sapiente quasi eum beatae ducimus iusto molestiae dolorum obcaecati in eaque vitae.</div>
|
|
22
|
+
</div>
|
|
23
|
+
</section>
|
|
24
|
+
|
|
25
|
+
<section>
|
|
26
|
+
<div class="container">
|
|
27
|
+
<div class="flex-col lg:flex-row">
|
|
28
|
+
<div class="bx pink h-24"></div>
|
|
29
|
+
<div class="bx pink h-24"></div>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</section>
|
|
33
|
+
|
|
34
|
+
<div class="container py-5">
|
|
35
|
+
<div class="overflow-x-auto rounded-lg bdr">
|
|
36
|
+
<table>
|
|
37
|
+
<thead class="txt-upper">
|
|
38
|
+
<tr>
|
|
39
|
+
<th scope="col" class=""> Product name </th>
|
|
40
|
+
<th scope="col" class=""> Color </th>
|
|
41
|
+
<th scope="col" class=""> Category </th>
|
|
42
|
+
<th scope="col" class=""> Price </th>
|
|
43
|
+
<th scope="col" class=""> Action </th>
|
|
44
|
+
</tr>
|
|
45
|
+
</thead>
|
|
46
|
+
<tbody class="divide-y bdr-t">
|
|
47
|
+
<tr class="">
|
|
48
|
+
<th scope="row" class=""> Apple MacBook Pro 17" </th>
|
|
49
|
+
<td class=""> Silver </td>
|
|
50
|
+
<td class=""> Laptop </td>
|
|
51
|
+
<td class=""> $2999 </td>
|
|
52
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
53
|
+
</tr>
|
|
54
|
+
<tr class="bdr-green bdr5">
|
|
55
|
+
<th scope="row" class=""> Microsoft Surface Pro </th>
|
|
56
|
+
<td class=""> White </td>
|
|
57
|
+
<td class=""> Laptop PC </td>
|
|
58
|
+
<td class=""> $1999 </td>
|
|
59
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
60
|
+
</tr>
|
|
61
|
+
<tr class="">
|
|
62
|
+
<th scope="row" class=""> Magic Mouse 2 </th>
|
|
63
|
+
<td class=""> Black </td>
|
|
64
|
+
<td class=""> Accessories </td>
|
|
65
|
+
<td class=""> $99 </td>
|
|
66
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
67
|
+
</tr>
|
|
68
|
+
<tr class="">
|
|
69
|
+
<th scope="row" class=""> Google Pixel Phone </th>
|
|
70
|
+
<td class=""> Gray </td>
|
|
71
|
+
<td class=""> Phone </td>
|
|
72
|
+
<td class=""> $799 </td>
|
|
73
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
74
|
+
</tr>
|
|
75
|
+
<tr class="">
|
|
76
|
+
<th scope="row" class=""> Apple Watch 5 </th>
|
|
77
|
+
<td class=""> Red </td>
|
|
78
|
+
<td class=""> Wearables </td>
|
|
79
|
+
<td class=""> $999 </td>
|
|
80
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
81
|
+
</tr>
|
|
82
|
+
</tbody>
|
|
83
|
+
</table>
|
|
84
|
+
</div>
|
|
85
|
+
<hr>
|
|
86
|
+
<div class="overflow-x-auto rounded-lg bdr">
|
|
87
|
+
<table>
|
|
88
|
+
<thead class="txt-upper">
|
|
89
|
+
<tr>
|
|
90
|
+
<th scope="col" class=""> Product name </th>
|
|
91
|
+
<th scope="col" class=""> Color </th>
|
|
92
|
+
<th scope="col" class=""> Category </th>
|
|
93
|
+
<th scope="col" class=""> Price </th>
|
|
94
|
+
<th scope="col" class=""> Action </th>
|
|
95
|
+
</tr>
|
|
96
|
+
</thead>
|
|
97
|
+
<tbody class="divide-y">
|
|
98
|
+
<tr class="bdr-b bdr-light">
|
|
99
|
+
<th scope="row" class=""> Apple MacBook Pro 17" </th>
|
|
100
|
+
<td class=""> Silver </td>
|
|
101
|
+
<td class=""> Laptop </td>
|
|
102
|
+
<td class=""> $2999 </td>
|
|
103
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
104
|
+
</tr>
|
|
105
|
+
<tr class="bdr-b bdr-light">
|
|
106
|
+
<th scope="row" class=""> Microsoft Surface Pro </th>
|
|
107
|
+
<td class=""> White </td>
|
|
108
|
+
<td class=""> Laptop PC </td>
|
|
109
|
+
<td class=""> $1999 </td>
|
|
110
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
111
|
+
</tr>
|
|
112
|
+
<tr class="bdr-b bdr-light">
|
|
113
|
+
<th scope="row" class=""> Magic Mouse 2 </th>
|
|
114
|
+
<td class=""> Black </td>
|
|
115
|
+
<td class=""> Accessories </td>
|
|
116
|
+
<td class=""> $99 </td>
|
|
117
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
118
|
+
</tr>
|
|
119
|
+
<tr class="bdr-b bdr-light">
|
|
120
|
+
<th scope="row" class=""> Google Pixel Phone </th>
|
|
121
|
+
<td class=""> Gray </td>
|
|
122
|
+
<td class=""> Phone </td>
|
|
123
|
+
<td class=""> $799 </td>
|
|
124
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
125
|
+
</tr>
|
|
126
|
+
<tr class="bdr-blue-40">
|
|
127
|
+
<th scope="row" class=""> Apple Watch 5 </th>
|
|
128
|
+
<td class=""> Red </td>
|
|
129
|
+
<td class=""> Wearables </td>
|
|
130
|
+
<td class=""> $999 </td>
|
|
131
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
132
|
+
</tr>
|
|
133
|
+
</tbody>
|
|
134
|
+
</table>
|
|
135
|
+
</div>
|
|
136
|
+
<hr>
|
|
137
|
+
<div class="overflow-x-auto rounded-lg">
|
|
138
|
+
<table>
|
|
139
|
+
<thead class="txt-upper txt-white bg-blue-600">
|
|
140
|
+
<tr>
|
|
141
|
+
<th scope="col" class=""> Product name </th>
|
|
142
|
+
<th scope="col" class=""> Color </th>
|
|
143
|
+
<th scope="col" class=""> Category </th>
|
|
144
|
+
<th scope="col" class=""> Price </th>
|
|
145
|
+
<th scope="col" class=""> Action </th>
|
|
146
|
+
</tr>
|
|
147
|
+
</thead>
|
|
148
|
+
<tbody>
|
|
149
|
+
<tr class="bg-blue-500 bdr-b bdr-light">
|
|
150
|
+
<th scope="row" class=""> Apple MacBook Pro 17" </th>
|
|
151
|
+
<td class=""> Silver </td>
|
|
152
|
+
<td class=""> Laptop </td>
|
|
153
|
+
<td class=""> $2999 </td>
|
|
154
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
155
|
+
</tr>
|
|
156
|
+
<tr class="bg-blue-500 bdr-b bdr-light">
|
|
157
|
+
<th scope="row" class="">
|
|
158
|
+
Microsoft Surface Pro
|
|
159
|
+
</th>
|
|
160
|
+
<td class=""> White </td>
|
|
161
|
+
<td class=""> Laptop PC </td>
|
|
162
|
+
<td class=""> $1999 </td>
|
|
163
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
164
|
+
</tr>
|
|
165
|
+
<tr class="bg-blue-500 bdr-b bdr-light">
|
|
166
|
+
<th scope="row" class=""> Magic Mouse 2 </th>
|
|
167
|
+
<td class=""> Black </td>
|
|
168
|
+
<td class=""> Accessories </td>
|
|
169
|
+
<td class=""> $99 </td>
|
|
170
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
171
|
+
</tr>
|
|
172
|
+
<tr class="bg-blue-500 bdr-b bdr-light">
|
|
173
|
+
<th scope="row" class=""> Google Pixel Phone </th>
|
|
174
|
+
<td class=""> Gray </td>
|
|
175
|
+
<td class=""> Phone </td>
|
|
176
|
+
<td class=""> $799 </td>
|
|
177
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
178
|
+
</tr>
|
|
179
|
+
<tr class="bg-blue-500 bdr-blue-40">
|
|
180
|
+
<th scope="row" class=""> Apple Watch 5 </th>
|
|
181
|
+
<td class=""> Red </td>
|
|
182
|
+
<td class=""> Wearables </td>
|
|
183
|
+
<td class=""> $999 </td>
|
|
184
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
185
|
+
</tr>
|
|
186
|
+
</tbody>
|
|
187
|
+
</table>
|
|
188
|
+
</div>
|
|
189
|
+
|
|
190
|
+
</div>
|
|
191
|
+
<div class="flex gap-1 va-c">
|
|
192
|
+
<div class="bx tac wh-5 pink lh-1 rounded-xs">xs</div>
|
|
193
|
+
<div class="bx tac wh-5 pink lh-1 rounded-sm">sm</div>
|
|
194
|
+
<div class="bx tac wh-5 pink lh-1 rounded">base</div>
|
|
195
|
+
<div class="bx tac wh-5 pink lh-1 rounded-lg">lg</div>
|
|
196
|
+
<div class="bx tac wh-5 pink lh-1 rounded-xl">xl</div>
|
|
197
|
+
<div class="bx tac wh-5 pink lh-1 rounded-full">full</div>
|
|
198
|
+
</div>
|
|
199
|
+
|
|
200
|
+
<section class="container maxw-md mt-2 ">
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
</section>
|
|
204
|
+
|
|
205
|
+
|
|
14
206
|
<div>
|
|
15
207
|
<header id="nk-header" class="container py">
|
|
16
208
|
<div class="container flex space-between">
|
|
@@ -237,6 +429,7 @@
|
|
|
237
429
|
<li><a class="menu-item" href="">Parent</a></li>
|
|
238
430
|
<li><a class="menu-item active" href="">Active</a></li>
|
|
239
431
|
</ul>
|
|
432
|
+
|
|
240
433
|
</div>
|
|
241
434
|
<h4>Collapse</h4>
|
|
242
435
|
</div>
|
|
@@ -244,6 +437,15 @@
|
|
|
244
437
|
<section id="button-theme-examples">
|
|
245
438
|
<div class="container">
|
|
246
439
|
<h2 class="title txt-3">Buttons</h2>
|
|
440
|
+
<h4>Button sizes</h4>
|
|
441
|
+
<div class="flex va-c space-x-05">
|
|
442
|
+
<button class="btn primary xs">Extra Small</button>
|
|
443
|
+
<button class="btn primary sm">Small</button>
|
|
444
|
+
<button class="btn primary">Base</button>
|
|
445
|
+
<button class="btn primary lg">Large</button>
|
|
446
|
+
<button class="btn primary xl">Extra Large</button>
|
|
447
|
+
</div>
|
|
448
|
+
<h4>Buttons with icon (TBD)</h4>
|
|
247
449
|
<h4>Base Colors</h4>
|
|
248
450
|
<div class="grid-1 cols-9">
|
|
249
451
|
<button class="btn stone">stone</button>
|
|
@@ -360,6 +562,26 @@
|
|
|
360
562
|
</section>
|
|
361
563
|
<section id="button-and-form-controls">
|
|
362
564
|
<div class="container">
|
|
565
|
+
|
|
566
|
+
<label><input type="radio" name="abc">Default Radio</label>
|
|
567
|
+
<label><input type="radio" name="abc">Checked State</label>
|
|
568
|
+
|
|
569
|
+
<div class="frm-row">
|
|
570
|
+
<label><input type="radio" name="abc">Default Radio</label>
|
|
571
|
+
<label><input type="radio" name="abc">Checked State</label>
|
|
572
|
+
</div>
|
|
573
|
+
|
|
574
|
+
|
|
575
|
+
<hr>
|
|
576
|
+
<label><input class="wh-3" type="radio" name="abc">Default Radio</label>
|
|
577
|
+
<label><input class="wh-3" type="radio" name="abc">Checked State</label>
|
|
578
|
+
<hr>
|
|
579
|
+
<label class="inline-flex va-c"><input class="wh-3" type="radio" name="abc">Default Radio</label>
|
|
580
|
+
<label class="inline-flex va-c"><input class="wh-3" type="radio" name="abc">Checked State</label>
|
|
581
|
+
|
|
582
|
+
|
|
583
|
+
|
|
584
|
+
|
|
363
585
|
<h2 class="title">Buttons and Form Controls</h2>
|
|
364
586
|
|
|
365
587
|
<div class="my">
|
|
@@ -378,7 +600,7 @@
|
|
|
378
600
|
|
|
379
601
|
<div class="frm-row">
|
|
380
602
|
<label for="error" class="block mb-2 text-sm font-medium text-red-700 dark:text-red-500">Your name</label>
|
|
381
|
-
<input type="text" id="error" class="bg-red-50
|
|
603
|
+
<input type="text" id="error" class="bg-red-50 bdr bdr-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:bdr-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:bdr-red-500" placeholder="Error input">
|
|
382
604
|
<p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oh, snapp!</span> Some error message.</p>
|
|
383
605
|
</div>
|
|
384
606
|
|
|
@@ -418,7 +640,7 @@
|
|
|
418
640
|
</div>
|
|
419
641
|
</section>
|
|
420
642
|
|
|
421
|
-
<select id="countries" class="bg-gray-50
|
|
643
|
+
<select id="countries" class="bg-gray-50 bdr bdr-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:bdr-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:bdr-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:bdr-blue-500">
|
|
422
644
|
<option selected>Choose a country</option>
|
|
423
645
|
<option value="US">United States</option>
|
|
424
646
|
<option value="CA">Canada</option>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nk_jtb",
|
|
3
3
|
"description": "Yet another utility based framework.",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.9.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/naykel76/nk_jtb.git"
|
|
@@ -22,11 +22,11 @@
|
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
24
|
"@fullhuman/postcss-purgecss": "^5.0.0",
|
|
25
|
-
"alpinejs": "^3.
|
|
26
|
-
"autoprefixer": "^10.4.
|
|
27
|
-
"postcss": "^8.4.
|
|
28
|
-
"postcss-cli": "^
|
|
29
|
-
"sass": "^1.
|
|
30
|
-
"vite": "^
|
|
25
|
+
"alpinejs": "^3.13",
|
|
26
|
+
"autoprefixer": "^10.4.16",
|
|
27
|
+
"postcss": "^8.4.33",
|
|
28
|
+
"postcss-cli": "^11.0.0",
|
|
29
|
+
"sass": "^1.69.7",
|
|
30
|
+
"vite": "^5.0.11"
|
|
31
31
|
}
|
|
32
32
|
}
|
package/readme.md
CHANGED
|
@@ -2,7 +2,23 @@
|
|
|
2
2
|
|
|
3
3
|
# NAYKEL JTB
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Why!
|
|
6
6
|
|
|
7
7
|
> Because without reinventing the wheel we wouldn’t have fast cars.
|
|
8
8
|
> -- Nathan Watts
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
**How can I add a value to a utility map?**
|
|
12
|
+
|
|
13
|
+
**How can I override a value in a utility map?**
|
|
14
|
+
|
|
15
|
+
**How can I override all values in utility map?**
|
|
16
|
+
|
|
17
|
+
**How can I add a value to a property map?**
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
height: (
|
|
22
|
+
prefix: "h-",
|
|
23
|
+
values: ( full: 100%, screen: 100vh, fit: fit-content, max: max-content, min: min-content ),
|
|
24
|
+
)
|
package/src/_nk.scss
CHANGED
|
@@ -1,6 +1,42 @@
|
|
|
1
|
-
@use "./
|
|
1
|
+
@use "./variables" as *;
|
|
2
2
|
@use "./mixins/media" as *;
|
|
3
3
|
|
|
4
|
+
// ==========================================================================
|
|
5
|
+
// -- LAYOUT ELEMENTS --
|
|
6
|
+
// ==========================================================================
|
|
7
|
+
|
|
8
|
+
body {
|
|
9
|
+
min-height: 100vh; // set height to push footer to the bottom
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
#nk-header {
|
|
15
|
+
background: $header-bg;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
#nk-main {
|
|
19
|
+
flex: 1; // 1. allow to grow to fill height
|
|
20
|
+
background-color: $main-bg;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
#nk-footer {
|
|
24
|
+
background-color: $footer-bg;
|
|
25
|
+
margin-top: auto; // force footer to the bottom
|
|
26
|
+
color: #ccc;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.copyright {
|
|
30
|
+
color: $copyright-text-color;
|
|
31
|
+
background-color: $copyright-bg;
|
|
32
|
+
padding: 0.5rem;
|
|
33
|
+
text-align: center;
|
|
34
|
+
font-size: 0.9rem;
|
|
35
|
+
border: 0; // remove border from colour scheme
|
|
36
|
+
width: 100%;
|
|
37
|
+
margin-top: 0;
|
|
38
|
+
}
|
|
39
|
+
|
|
4
40
|
// ==========================================================================
|
|
5
41
|
// -- MARKDOWN --
|
|
6
42
|
// ==========================================================================
|
|
@@ -15,6 +51,7 @@
|
|
|
15
51
|
margin-top: $content-gap;
|
|
16
52
|
font-size: 0.85em;
|
|
17
53
|
}
|
|
54
|
+
|
|
18
55
|
code-first-col {
|
|
19
56
|
+ table tbody {
|
|
20
57
|
@extend %markdown-table;
|
|
@@ -23,6 +60,7 @@ code-first-col {
|
|
|
23
60
|
}
|
|
24
61
|
}
|
|
25
62
|
}
|
|
63
|
+
|
|
26
64
|
code-second-col {
|
|
27
65
|
+ table tbody {
|
|
28
66
|
@extend %markdown-table;
|
|
@@ -68,11 +106,6 @@ code-first-second-col {
|
|
|
68
106
|
margin-bottom: 1.5em;
|
|
69
107
|
}
|
|
70
108
|
|
|
71
|
-
// this is a hack solution to an ugly problem when using x-gt-markdown
|
|
72
|
-
.markdown pre {
|
|
73
|
-
overflow: auto;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
109
|
.markdown {
|
|
77
110
|
// hack to remove indented when using @verbatim
|
|
78
111
|
.-ml-2 pre code {
|
|
@@ -111,12 +144,13 @@ code-first-second-col {
|
|
|
111
144
|
margin-bottom: $content-gap;
|
|
112
145
|
}
|
|
113
146
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
147
|
+
// squiggle line
|
|
148
|
+
// h2::before {
|
|
149
|
+
// content: " ";
|
|
150
|
+
// display: block;
|
|
151
|
+
// width: 100%;
|
|
152
|
+
// margin-bottom: 2rem;
|
|
153
|
+
// height: 12px;
|
|
154
|
+
// background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20px' height='12px' viewBox='0 0 20 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='square'%3e%3cpath d='M25,1 C20,1 20,11 15,11 C10,11 10,1 5,1 C0,1 0,11 -5,11 C-10,11 -10,1 -15,1' id='Line' stroke='%23CBD5DF' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
|
|
155
|
+
// }
|
|
122
156
|
}
|
package/src/base/_base.scss
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
@use "
|
|
2
|
-
@use "./vars_colors" as *;
|
|
1
|
+
@use "../variables" as *;
|
|
3
2
|
|
|
4
3
|
// 1. Remove the default margin and padding and opt-in as needed
|
|
5
4
|
|
|
@@ -99,12 +98,19 @@ strong {
|
|
|
99
98
|
font-weight: bolder;
|
|
100
99
|
}
|
|
101
100
|
|
|
101
|
+
//
|
|
102
|
+
pre {
|
|
103
|
+
overflow: auto;
|
|
104
|
+
white-space: pre;
|
|
105
|
+
word-wrap: normal;
|
|
106
|
+
}
|
|
107
|
+
|
|
102
108
|
code,
|
|
103
109
|
kbd,
|
|
104
110
|
samp,
|
|
105
111
|
pre {
|
|
106
112
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
107
|
-
font-size:
|
|
113
|
+
font-size: .875rem;
|
|
108
114
|
color: #f0506e;
|
|
109
115
|
border-radius: 0.25rem;
|
|
110
116
|
}
|
|
@@ -113,7 +119,6 @@ pre {
|
|
|
113
119
|
pre code {
|
|
114
120
|
line-height: 1.8;
|
|
115
121
|
padding: 1.25rem !important; // 1
|
|
116
|
-
// overflow: auto;
|
|
117
122
|
}
|
|
118
123
|
|
|
119
124
|
small {
|
|
@@ -140,26 +145,27 @@ sup {
|
|
|
140
145
|
|
|
141
146
|
// -- Tables --
|
|
142
147
|
// ==========================================================================
|
|
143
|
-
//
|
|
144
|
-
// respectable out of the box!
|
|
145
|
-
|
|
148
|
+
//
|
|
146
149
|
table {
|
|
147
150
|
text-indent: 0;
|
|
148
151
|
border-color: inherit;
|
|
149
152
|
border-collapse: collapse;
|
|
150
|
-
width: 100%;
|
|
153
|
+
width: 100%;
|
|
151
154
|
}
|
|
152
155
|
|
|
153
|
-
|
|
156
|
+
thead {
|
|
154
157
|
font-weight: 600;
|
|
155
|
-
background: #
|
|
158
|
+
background: #f9fafb;
|
|
159
|
+
font-size: 0.875rem;
|
|
160
|
+
vertical-align: middle;
|
|
156
161
|
}
|
|
157
162
|
|
|
158
163
|
th,
|
|
159
164
|
td {
|
|
160
|
-
padding:
|
|
165
|
+
padding-inline: 1rem;
|
|
166
|
+
padding-block: 0.75rem;
|
|
167
|
+
vertical-align: inherit;
|
|
161
168
|
text-align: left;
|
|
162
|
-
vertical-align: top;
|
|
163
169
|
}
|
|
164
170
|
|
|
165
171
|
// 1. Change the font styles in all browsers.
|
|
@@ -290,6 +296,8 @@ nav ul {
|
|
|
290
296
|
list-style: none;
|
|
291
297
|
margin: 0; // reset nested
|
|
292
298
|
}
|
|
299
|
+
|
|
300
|
+
// -- Controls --
|
|
293
301
|
// ==========================================================================
|
|
294
302
|
|
|
295
303
|
// 1. Prevent resizing textareas horizontally by default.
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
@use "../variables" as *;
|
|
2
|
+
|
|
3
|
+
// any adjacent (excludes first child)
|
|
4
|
+
:where(blockquote, p, pre, form, table, ol, ul, h1, h2, h3, h4, h5, h6) + * {
|
|
5
|
+
margin-top: $content-gap;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
// this may be more hassle than it is worth but it is handy to place elements
|
|
9
|
+
// with the need for a wrapper element.
|
|
10
|
+
* + :where(table, form) {
|
|
11
|
+
margin-top: $content-gap;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
:where(.bx, .bx-title, .bx-content, .frm-row, .container) + :where(*):not(.dd-content) {
|
|
15
|
+
margin-top: $content-gap;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// exclude section to give more control
|
|
19
|
+
:where([class^="flex"], [class^="grid"]) + :where(*):not(:is([class*="flex"], [class*="grid"], section)) {
|
|
20
|
+
margin-top: $content-gap;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
// opt-out
|
|
25
|
+
// - Remove margin from all direct child elements of "flex" or
|
|
26
|
+
// "grid" because it is too inconsistent to manage.
|
|
27
|
+
// - excluding .flex + input is experimental.the exclusion makes it
|
|
28
|
+
// easier to add tool-tips with a label
|
|
29
|
+
|
|
30
|
+
:is([class*="flex"], [class*="grid"]) > *,
|
|
31
|
+
.flex + input {
|
|
32
|
+
margin: 0;
|
|
33
|
+
}
|
package/src/base/_root.scss
CHANGED
package/src/color/_shades.scss
CHANGED
|
@@ -1,18 +1,35 @@
|
|
|
1
|
-
@use "../
|
|
2
|
-
@use "../
|
|
3
|
-
@use "
|
|
4
|
-
@use "../mixins/colorShadeClasses" as *;
|
|
1
|
+
@use "../mixins/common" as *;
|
|
2
|
+
// @use "../mixins/magicClassGenerators" as *;
|
|
3
|
+
// @use "sass:map";
|
|
5
4
|
|
|
6
|
-
@
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}
|
|
5
|
+
// @use "../variables" as *;
|
|
6
|
+
// @use "../config" as *;
|
|
7
|
+
// @use "../functions/get" as *;
|
|
8
|
+
// @use "../mixins/colorThemeGenerators" as *;
|
|
11
9
|
|
|
12
|
-
|
|
13
|
-
@each $color, $value in $base-colors {
|
|
14
|
-
@include colorShadeClasses($color, $value);
|
|
15
|
-
}
|
|
16
|
-
}
|
|
10
|
+
// just use tailwind???
|
|
17
11
|
|
|
12
|
+
// @if (get("shades.create-base", $config)) {
|
|
13
|
+
// @each $color, $value in $base-colors {
|
|
14
|
+
// @include colorShadeClasses($color, $value);
|
|
15
|
+
// }
|
|
16
|
+
// }
|
|
18
17
|
|
|
18
|
+
// @if (get("shades.create-theme", $config)) {
|
|
19
|
+
// @each $color, $value in $base-colors {
|
|
20
|
+
// @include colorShadeClasses($color, $value);
|
|
21
|
+
// }
|
|
22
|
+
// }
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
// prettier-ignore
|
|
27
|
+
$colors-map: (
|
|
28
|
+
background-color: (
|
|
29
|
+
prefix: #{$bg-identifier},
|
|
30
|
+
values:( white, black ),
|
|
31
|
+
breakpoints: ("sm", "md", "lg", "xl")
|
|
32
|
+
),
|
|
33
|
+
);
|
|
34
|
+
|
|
35
|
+
@include generate-utilities($colors-map);
|