nk_jtb 0.11.2 → 0.12.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/index.html +155 -75
- package/package.json +1 -1
- package/src/base/_base.scss +34 -30
- package/src/base/_content_gap.scss +10 -4
- package/src/components/_box.scss +2 -2
- package/src/components/_menu.scss +1 -2
- package/src/components/_tabs.scss +28 -0
- package/src/extras/_nk-docs.scss +30 -3
- package/src/jtb.scss +1 -0
- package/src/utilities/_typography.scss +7 -3
- package/src/variables/_utility_maps.scss +1 -1
package/index.html
CHANGED
|
@@ -13,7 +13,103 @@
|
|
|
13
13
|
|
|
14
14
|
<body>
|
|
15
15
|
|
|
16
|
+
<div class="container py">
|
|
17
|
+
<h2>List Styles</h2>
|
|
18
|
+
<div class="flex space-x">
|
|
19
|
+
<ul class="bx">
|
|
20
|
+
<li>Item one</li>
|
|
21
|
+
<li>Item two</li>
|
|
22
|
+
<li>Item three</li>
|
|
23
|
+
</ul>
|
|
24
|
+
<ul class="bx list-none">
|
|
25
|
+
<li>Item one</li>
|
|
26
|
+
<li>Item two</li>
|
|
27
|
+
<li>Item three</li>
|
|
28
|
+
</ul>
|
|
29
|
+
<ul class="bx list-decimal">
|
|
30
|
+
<li>Item one</li>
|
|
31
|
+
<li>Item two</li>
|
|
32
|
+
<li>Item three</li>
|
|
33
|
+
</ul>
|
|
34
|
+
<ul class="bx list-square">
|
|
35
|
+
<li>Item one</li>
|
|
36
|
+
<li>Item two</li>
|
|
37
|
+
<li>Item three</li>
|
|
38
|
+
</ul>
|
|
39
|
+
<ul class="bx list-circle">
|
|
40
|
+
<li>Item one</li>
|
|
41
|
+
<li>Item two</li>
|
|
42
|
+
<li>Item three</li>
|
|
43
|
+
</ul>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
<div class="space-x">
|
|
47
|
+
<div class="inline-flex gap-3 bx">
|
|
48
|
+
<ul>
|
|
49
|
+
<li>List item one</li>
|
|
50
|
+
<li>List item two</li>
|
|
51
|
+
<li>List item three</li>
|
|
52
|
+
</ul>
|
|
53
|
+
<ol>
|
|
54
|
+
<li>List item one</li>
|
|
55
|
+
<li>List item two</li>
|
|
56
|
+
<li>List item three</li>
|
|
57
|
+
</ol>
|
|
58
|
+
</div>
|
|
16
59
|
|
|
60
|
+
<div class="inline-flex gap-3 bx">
|
|
61
|
+
<ul>
|
|
62
|
+
<li>
|
|
63
|
+
List item one
|
|
64
|
+
<ol>
|
|
65
|
+
<li>Nested list item one</li>
|
|
66
|
+
<li>Nested list item two</li>
|
|
67
|
+
<li>Nested list item three</li>
|
|
68
|
+
</ol>
|
|
69
|
+
</li>
|
|
70
|
+
<li>
|
|
71
|
+
List item two
|
|
72
|
+
<p>paragraph inside a list item</p>
|
|
73
|
+
</li>
|
|
74
|
+
<li>List item three</li>
|
|
75
|
+
</ul>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
<div class="container pxy bx">
|
|
83
|
+
<div x-data="{ activeTab: 'home' }">
|
|
84
|
+
<!-- Tabs Navigation -->
|
|
85
|
+
<div class="tabs">
|
|
86
|
+
<button
|
|
87
|
+
@click="activeTab = 'home'"
|
|
88
|
+
:class="activeTab === 'home' ? 'tab-active' : 'tab-inactive'"
|
|
89
|
+
class="tab-btn">
|
|
90
|
+
Home
|
|
91
|
+
</button>
|
|
92
|
+
<button
|
|
93
|
+
@click="activeTab = 'profile'"
|
|
94
|
+
:class="activeTab === 'profile' ? 'tab-active' : 'tab-inactive'"
|
|
95
|
+
class="tab-btn">
|
|
96
|
+
Profile
|
|
97
|
+
</button>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<!-- Tabs Content -->
|
|
101
|
+
<div class="mt">
|
|
102
|
+
<div x-show="activeTab === 'home'">
|
|
103
|
+
<h2>Home</h2>
|
|
104
|
+
<p>This is the home tab content.</p>
|
|
105
|
+
</div>
|
|
106
|
+
<div x-show="activeTab === 'profile'">
|
|
107
|
+
<h2>Profile</h2>
|
|
108
|
+
<p>This is the profile tab content.</p>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
17
113
|
<style>
|
|
18
114
|
.fade-out-mask {
|
|
19
115
|
-webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
|
|
@@ -29,26 +125,6 @@
|
|
|
29
125
|
}
|
|
30
126
|
</style>
|
|
31
127
|
|
|
32
|
-
<div class="container relative">
|
|
33
|
-
<div class="badge green">Badge</div>
|
|
34
|
-
|
|
35
|
-
<div class="absolute inline-flex items-center justify-center wh-1.5 txt-xs red rounded-full"> 20</div>
|
|
36
|
-
|
|
37
|
-
<div class="round-badge red">3</div>
|
|
38
|
-
|
|
39
|
-
<!-- <button type="button"
|
|
40
|
-
class="relative inline-flex items-center p-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
|
41
|
-
<svg class="" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
|
|
42
|
-
<path d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z" />
|
|
43
|
-
<path
|
|
44
|
-
d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z" />
|
|
45
|
-
</svg>
|
|
46
|
-
<span class="sr-only">Notifications</span>
|
|
47
|
-
<div
|
|
48
|
-
class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 -end-2 dark:border-gray-900">
|
|
49
|
-
20</div>
|
|
50
|
-
</button> -->
|
|
51
|
-
</div>
|
|
52
128
|
|
|
53
129
|
<div class="container-md py-5">
|
|
54
130
|
<div x-data="{ expanded: false }" class="container-md py-5">
|
|
@@ -290,6 +366,64 @@
|
|
|
290
366
|
</div>
|
|
291
367
|
</div>
|
|
292
368
|
</section>
|
|
369
|
+
<section id="menu-component" class="py-3">
|
|
370
|
+
<div class="container space-y">
|
|
371
|
+
<h2 class="title txt-3">Menu Component</h2>
|
|
372
|
+
<h4>Base Component</h4>
|
|
373
|
+
<div class="bx grid md:cols-3">
|
|
374
|
+
<div class="menu">
|
|
375
|
+
<div class="menu-title"><code><div class="menu"></code></div>
|
|
376
|
+
<div class="menu-title">Menu Title</div>
|
|
377
|
+
<a href="">Item</a>
|
|
378
|
+
<a href="">Parent</a>
|
|
379
|
+
<a href="" class="active">Active</a>
|
|
380
|
+
<a href="" class="disabled">Disabled</a>
|
|
381
|
+
</div>
|
|
382
|
+
<nav class="menu">
|
|
383
|
+
<div class="menu-title"><code><nav class="menu"></code></div>
|
|
384
|
+
<div class="menu-title">Menu Title</div>
|
|
385
|
+
<a href="">Item</a>
|
|
386
|
+
<a href="">Parent</a>
|
|
387
|
+
<a href="" class="active">Active</a>
|
|
388
|
+
<a href="" class="disabled">Disabled</a>
|
|
389
|
+
</nav>
|
|
390
|
+
<ul class="menu">
|
|
391
|
+
<div class="menu-title"><code><ul class="menu"></code></div>
|
|
392
|
+
<div class="menu-title">Menu Title</div>
|
|
393
|
+
<li><a href="">Item</a></li>
|
|
394
|
+
<li><a href="">Parent</a></li>
|
|
395
|
+
<li><a href="" class="active">Active</a></li>
|
|
396
|
+
<li><a href="" class="disabled">Disabled</a></li>
|
|
397
|
+
</ul>
|
|
398
|
+
</div>
|
|
399
|
+
<h4>With Menu-Item</h4>
|
|
400
|
+
<div class="bx grid md:cols-3">
|
|
401
|
+
<div class="menu">
|
|
402
|
+
<div class="menu-title"><code><div class="menu"></code></div>
|
|
403
|
+
<div class="menu-title">Menu Title</div>
|
|
404
|
+
<a class="menu-item" href="">Item</a>
|
|
405
|
+
<a class="menu-item" href="">Parent</a>
|
|
406
|
+
<a class="menu-item active" href="">Active</a>
|
|
407
|
+
<a class="menu-item disabled" href="">Disabled</a>
|
|
408
|
+
</div>
|
|
409
|
+
<nav class="menu">
|
|
410
|
+
<div class="menu-title"><code><nav class="menu"></code></div>
|
|
411
|
+
<div class="menu-title">Menu Title</div>
|
|
412
|
+
<a class="menu-item" href="">Item</a>
|
|
413
|
+
<a class="menu-item" href="">Parent</a>
|
|
414
|
+
<a class="menu-item active" href="">Active</a>
|
|
415
|
+
<a class="menu-item disabled" href="">Disabled</a>
|
|
416
|
+
</nav>
|
|
417
|
+
<ul class="menu">
|
|
418
|
+
<div class="menu-title"><code><ul class="menu"></code></div>
|
|
419
|
+
<div class="menu-title">Menu Title</div>
|
|
420
|
+
<li><a class="menu-item" href="">Item</a></li>
|
|
421
|
+
<li><a class="menu-item" href="">Parent</a></li>
|
|
422
|
+
<li><a class="menu-item active" href="">Active</a></li>
|
|
423
|
+
<li><a class="menu-item disabled" href="">Disabled</a></li>
|
|
424
|
+
</ul>
|
|
425
|
+
</div>
|
|
426
|
+
</section>
|
|
293
427
|
<section class="py-3">
|
|
294
428
|
<div class="container-sm py-3 bx">
|
|
295
429
|
<div class="grid cols-2">
|
|
@@ -442,7 +576,7 @@
|
|
|
442
576
|
message.</p>
|
|
443
577
|
</div>
|
|
444
578
|
<div class="frm-row">
|
|
445
|
-
<label for="error" class="block mb-2 text-sm
|
|
579
|
+
<label for="error" class="block mb-2 text-sm text-red-700 dark:text-red-500">Your
|
|
446
580
|
name</label>
|
|
447
581
|
<input type="text" id="error"
|
|
448
582
|
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"
|
|
@@ -893,61 +1027,7 @@
|
|
|
893
1027
|
|
|
894
1028
|
<div class="quick-hide-wrapper zebra c-py-5-3-2">
|
|
895
1029
|
|
|
896
|
-
<section id="menu">
|
|
897
|
-
<div class="container">
|
|
898
|
-
<h2 class="title txt-3">Menu Component</h2>
|
|
899
|
-
<h4>Base Component</h4>
|
|
900
|
-
<div class="bx grid md:cols-3">
|
|
901
|
-
<div class="menu">
|
|
902
|
-
<div class="menu-title"><code><div class="menu"></code></div>
|
|
903
|
-
<div class="menu-title">Menu Title</div>
|
|
904
|
-
<a href="">Item</a>
|
|
905
|
-
<a href="">Parent</a>
|
|
906
|
-
<a href="" class="active">Active</a>
|
|
907
|
-
</div>
|
|
908
|
-
<nav class="menu">
|
|
909
|
-
<div class="menu-title"><code><nav class="menu"></code></div>
|
|
910
|
-
<div class="menu-title">Menu Title</div>
|
|
911
|
-
<a href="">Item</a>
|
|
912
|
-
<a href="">Parent</a>
|
|
913
|
-
<a href="" class="active">Active</a>
|
|
914
|
-
</nav>
|
|
915
|
-
<ul class="menu">
|
|
916
|
-
<div class="menu-title"><code><ul class="menu"></code></div>
|
|
917
|
-
<div class="menu-title">Menu Title</div>
|
|
918
|
-
<li><a href="">Item</a></li>
|
|
919
|
-
<li><a href="">Parent</a></li>
|
|
920
|
-
<li><a href="" class="active">Active</a></li>
|
|
921
|
-
</ul>
|
|
922
|
-
</div>
|
|
923
|
-
<h4>With Menu-Item</h4>
|
|
924
|
-
<div class="bx grid md:cols-3">
|
|
925
|
-
<div class="menu">
|
|
926
|
-
<div class="menu-title"><code><div class="menu"></code></div>
|
|
927
|
-
<div class="menu-title">Menu Title</div>
|
|
928
|
-
<a class="menu-item" href="">Item</a>
|
|
929
|
-
<a class="menu-item" href="">Parent</a>
|
|
930
|
-
<a class="menu-item active" href="">Active</a>
|
|
931
|
-
</div>
|
|
932
|
-
<nav class="menu">
|
|
933
|
-
<div class="menu-title"><code><nav class="menu"></code></div>
|
|
934
|
-
<div class="menu-title">Menu Title</div>
|
|
935
|
-
<a class="menu-item" href="">Item</a>
|
|
936
|
-
<a class="menu-item" href="">Parent</a>
|
|
937
|
-
<a class="menu-item active" href="">Active</a>
|
|
938
|
-
</nav>
|
|
939
|
-
<ul class="menu">
|
|
940
|
-
<div class="menu-title"><code><ul class="menu"></code></div>
|
|
941
|
-
<div class="menu-title">Menu Title</div>
|
|
942
|
-
<li><a class="menu-item" href="">Item</a></li>
|
|
943
|
-
<li><a class="menu-item" href="">Parent</a></li>
|
|
944
|
-
<li><a class="menu-item active" href="">Active</a></li>
|
|
945
|
-
</ul>
|
|
946
1030
|
|
|
947
|
-
</div>
|
|
948
|
-
<h4>Collapse</h4>
|
|
949
|
-
</div>
|
|
950
|
-
</section>
|
|
951
1031
|
|
|
952
1032
|
<section id="theme-examples">
|
|
953
1033
|
<div class="container">
|
package/package.json
CHANGED
package/src/base/_base.scss
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@use
|
|
1
|
+
@use '../variables' as *;
|
|
2
2
|
|
|
3
3
|
// 1. Remove the default margin and padding and opt-in as needed
|
|
4
4
|
|
|
@@ -116,7 +116,7 @@ code,
|
|
|
116
116
|
kbd,
|
|
117
117
|
samp,
|
|
118
118
|
pre {
|
|
119
|
-
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
|
119
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
|
120
120
|
font-size: 0.875rem;
|
|
121
121
|
color: #d9558c;
|
|
122
122
|
border-radius: 0.25rem;
|
|
@@ -198,9 +198,9 @@ select {
|
|
|
198
198
|
// 2. Remove default button styles.
|
|
199
199
|
|
|
200
200
|
button,
|
|
201
|
-
[type=
|
|
202
|
-
[type=
|
|
203
|
-
[type=
|
|
201
|
+
[type='button'],
|
|
202
|
+
[type='reset'],
|
|
203
|
+
[type='submit'] {
|
|
204
204
|
-webkit-appearance: button; // 1
|
|
205
205
|
background-color: transparent; // 2
|
|
206
206
|
background-image: none; // 2
|
|
@@ -234,7 +234,7 @@ progress {
|
|
|
234
234
|
// 1. Correct the odd appearance in Chrome and Safari.
|
|
235
235
|
// 2. Correct the outline style in Safari.
|
|
236
236
|
|
|
237
|
-
[type=
|
|
237
|
+
[type='search'] {
|
|
238
238
|
-webkit-appearance: textfield; // 1
|
|
239
239
|
outline-offset: -2px; // 2
|
|
240
240
|
}
|
|
@@ -262,31 +262,16 @@ summary {
|
|
|
262
262
|
// -- Lists --
|
|
263
263
|
// ==========================================================================
|
|
264
264
|
|
|
265
|
-
// 1. set style-position outside to align text
|
|
266
|
-
// 2.
|
|
267
|
-
|
|
268
|
-
ol
|
|
269
|
-
ul {
|
|
265
|
+
// 1. set style-position outside to align text when wrapping
|
|
266
|
+
// 2. indent to align text with the rest of the content
|
|
267
|
+
ul,
|
|
268
|
+
ol {
|
|
270
269
|
list-style-position: outside; // 1
|
|
271
|
-
margin-
|
|
270
|
+
margin-inline-start: $content-gap; // 2
|
|
272
271
|
}
|
|
273
272
|
|
|
274
|
-
|
|
275
|
-
//
|
|
276
|
-
|
|
277
|
-
// 1. keep consistent spacing
|
|
278
|
-
li ul,
|
|
279
|
-
li ol {
|
|
280
|
-
margin-top: $base-list-spacing; // 1
|
|
281
|
-
margin-left: 1rem;
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
// These list styles are quite opinionated, however they seem to be
|
|
285
|
-
// a good fit overall and should be easy enough to override
|
|
286
|
-
|
|
287
|
-
// 1. keep consistent spacing.
|
|
288
|
-
:is(li:not(:first-child):not(nav li):not(.menu li)) {
|
|
289
|
-
margin-top: $base-list-spacing; // 1
|
|
273
|
+
li {
|
|
274
|
+
margin-block-start: $base-list-spacing; // Add consistent spacing for list items
|
|
290
275
|
}
|
|
291
276
|
|
|
292
277
|
ul {
|
|
@@ -297,6 +282,25 @@ ol {
|
|
|
297
282
|
list-style-type: decimal;
|
|
298
283
|
}
|
|
299
284
|
|
|
285
|
+
// -- Nested Lists --
|
|
286
|
+
|
|
287
|
+
// NK::COMMENT these have been disabled because there were some tweaks made
|
|
288
|
+
// above. I do not think they are necessary anymore.
|
|
289
|
+
|
|
290
|
+
// // 1. keep consistent spacing
|
|
291
|
+
// li ul,
|
|
292
|
+
// li ol {
|
|
293
|
+
// margin-top: $base-list-spacing; // 1
|
|
294
|
+
// margin-left: 1rem;
|
|
295
|
+
// }
|
|
296
|
+
|
|
297
|
+
// These list styles are quite opinionated, however they seem to be
|
|
298
|
+
// a good fit overall and should be easy enough to override
|
|
299
|
+
|
|
300
|
+
// :is(li:not(:first-child):not(nav li):not(.menu li)) {
|
|
301
|
+
// margin-block-start: $base-list-spacing; // consistent spacing between list items
|
|
302
|
+
// }
|
|
303
|
+
|
|
300
304
|
nav ul {
|
|
301
305
|
list-style: none;
|
|
302
306
|
margin: 0; // reset nested
|
|
@@ -323,7 +327,7 @@ textarea::placeholder {
|
|
|
323
327
|
// 1. Set the default cursor for buttons.
|
|
324
328
|
|
|
325
329
|
button,
|
|
326
|
-
[role=
|
|
330
|
+
[role='button'] {
|
|
327
331
|
cursor: pointer; // 1
|
|
328
332
|
}
|
|
329
333
|
|
|
@@ -370,6 +374,6 @@ input::-webkit-inner-spin-button {
|
|
|
370
374
|
}
|
|
371
375
|
|
|
372
376
|
// Remove number spinner Firefox
|
|
373
|
-
input[type=
|
|
377
|
+
input[type='number'] {
|
|
374
378
|
-moz-appearance: textfield;
|
|
375
379
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
@use
|
|
1
|
+
@use '../variables' as *;
|
|
2
2
|
|
|
3
3
|
// don't be tempted to add div here, it creates more problems than it solves
|
|
4
4
|
$html-elements: blockquote, p, pre, form, table, ol, ul, h1, h2, h3, h4, h5, h6;
|
|
5
|
-
$common-classes:
|
|
5
|
+
$common-classes: '.bx', '.bx-content', '.bx-title', "[class*='container']", '.frm-row', '.grid', "[class*='flex']:not(.inline-flex)";
|
|
6
6
|
|
|
7
7
|
// Content gap
|
|
8
8
|
:where(#{$html-elements}, #{$common-classes}) + :where(*) {
|
|
@@ -17,11 +17,17 @@ $common-classes: ".bx", ".bx-content", ".bx-title", "[class*='container']", ".fr
|
|
|
17
17
|
|
|
18
18
|
// catch the strays (use with caution). The :where selector is to kill the
|
|
19
19
|
// specificity for easier override
|
|
20
|
-
:where(*:not([class*=
|
|
20
|
+
:where(*:not([class*='flex']):not([class*='grid'])) > :where(.frm-row, table, form, pre):not(:first-child) {
|
|
21
21
|
margin-top: $content-gap;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
// opt out for `flex` and `grid` element and use `gap` instead.
|
|
25
|
-
:where([class*=
|
|
25
|
+
:where([class*='flex'], [class*='grid']) > * {
|
|
26
26
|
margin: 0;
|
|
27
27
|
}
|
|
28
|
+
|
|
29
|
+
// adjust margin for the `ul` when the `li` has `flex` class. This is needed
|
|
30
|
+
// because flex automatically removes the bullets leaving the margin
|
|
31
|
+
ul:has(.flex) {
|
|
32
|
+
margin-inline: 0;
|
|
33
|
+
}
|
package/src/components/_box.scss
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@use
|
|
1
|
+
@use '../variables' as *;
|
|
2
2
|
@use '../functions/colorFunctions' as *;
|
|
3
3
|
|
|
4
4
|
%box {
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
.bx {
|
|
14
14
|
@extend %box;
|
|
15
|
-
|
|
15
|
+
overflow: hidden; // prevent image from overflowing when using border-radius
|
|
16
16
|
// remove margin from any first element in a box to allow box padding to do the work
|
|
17
17
|
& > *:first-child {
|
|
18
18
|
margin-top: 0;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
.tabs {
|
|
2
|
+
display: flex;
|
|
3
|
+
border-bottom: 1px solid #e5e7eb;
|
|
4
|
+
gap: 1rem;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.tab-btn {
|
|
8
|
+
padding: 0.5rem 1rem;
|
|
9
|
+
font-weight: 500;
|
|
10
|
+
border-bottom-width: 2px;
|
|
11
|
+
transition:
|
|
12
|
+
color 0.3s,
|
|
13
|
+
border-color 0.3s;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.tab-active {
|
|
17
|
+
color: #4f46e5;
|
|
18
|
+
border-color: #4f46e5;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.tab-inactive {
|
|
22
|
+
color: #6b7280;
|
|
23
|
+
border-color: transparent;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.tab-inactive:hover {
|
|
27
|
+
color: #374151;
|
|
28
|
+
}
|
package/src/extras/_nk-docs.scss
CHANGED
|
@@ -6,9 +6,10 @@
|
|
|
6
6
|
// NAYKEL DOCS --
|
|
7
7
|
// ==========================================================================
|
|
8
8
|
//
|
|
9
|
-
//
|
|
10
|
-
// documentation. They
|
|
11
|
-
//
|
|
9
|
+
// NOTE: The styles in this file are specifically designed for the Naykel
|
|
10
|
+
// documentation. They should be wrapped in the `nk-docs` class to prevent
|
|
11
|
+
// conflicts. These styles are not included in the main build by default and
|
|
12
|
+
// need to be manually imported.
|
|
12
13
|
//
|
|
13
14
|
// tr:not(.ignore-nk-styles + table tr - ignores the next table from the styles
|
|
14
15
|
|
|
@@ -20,6 +21,32 @@ $td-bdr-color: map-get($tailwind-colors, 'slate', '100') !default;
|
|
|
20
21
|
$code-color: #f0506e !default;
|
|
21
22
|
$question-color: #2299dd !default;
|
|
22
23
|
|
|
24
|
+
// ==========================================================================
|
|
25
|
+
// -- SPACING --
|
|
26
|
+
// ==========================================================================
|
|
27
|
+
|
|
28
|
+
.nk-docs {
|
|
29
|
+
// Fix spacing issues caused by common mark wrapping all li in p tags
|
|
30
|
+
// whenever you add any elements in a markdown list.
|
|
31
|
+
//
|
|
32
|
+
// <ul>
|
|
33
|
+
// <li>List item one</li>
|
|
34
|
+
// </ul>
|
|
35
|
+
//
|
|
36
|
+
// <ul>
|
|
37
|
+
// <li>
|
|
38
|
+
// <p>List item one</p>
|
|
39
|
+
// <p>This paragraph will add <li> to to all <li></p>
|
|
40
|
+
// </li>
|
|
41
|
+
// </ul>
|
|
42
|
+
//
|
|
43
|
+
// This is a hack to fix the spacing issue caused by the above problem and
|
|
44
|
+
// it is not yet clear i this will cause any side effects.
|
|
45
|
+
li > p {
|
|
46
|
+
margin-block-start: $base-list-spacing;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
23
50
|
.nk-docs {
|
|
24
51
|
// ==========================================================================
|
|
25
52
|
// -- TABLE --
|
package/src/jtb.scss
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@use
|
|
1
|
+
@use '../mixins/common' as *;
|
|
2
|
+
@use 'sass:map';
|
|
3
3
|
|
|
4
4
|
// ==========================================================================
|
|
5
5
|
// -- PROPERTY MAPS --
|
|
6
6
|
// ==========================================================================
|
|
7
7
|
// remove from the colour map
|
|
8
|
-
$text-colors: map.remove($color-map,
|
|
8
|
+
$text-colors: map.remove($color-map, 'danger', 'dark', 'info', 'light', 'success', 'warning');
|
|
9
9
|
|
|
10
10
|
$text-rem-sizes: (1, 1.5, 2, 2.5, 3, 4) !default;
|
|
11
11
|
|
|
@@ -118,6 +118,10 @@ $typography-properties-map: (
|
|
|
118
118
|
text-wrap: (
|
|
119
119
|
prefix: "#{$text-identifier}",
|
|
120
120
|
values: ( wrap, balance, nowrap, pretty )
|
|
121
|
+
),
|
|
122
|
+
list-style-type: (
|
|
123
|
+
prefix: "list-",
|
|
124
|
+
values: (none, disc, decimal, circle, square)
|
|
121
125
|
)
|
|
122
126
|
);
|
|
123
127
|
|
|
@@ -84,7 +84,7 @@ $padding-variants: (default: $content-padding) !default;
|
|
|
84
84
|
// ==========================================================================
|
|
85
85
|
|
|
86
86
|
$sizing-pixels: (200px, 250px, 300px, 400px, 600px) !default; // include unit to make merge easier
|
|
87
|
-
$sizing-rem: (0, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24) !default;
|
|
87
|
+
$sizing-rem: (0, 1, 1.25, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24) !default;
|
|
88
88
|
|
|
89
89
|
// The debate is if these should be related to the breakpoints or not. I think it would be better if
|
|
90
90
|
// they are related to the breakpoints because it makes it easier to think in terms of the layout. I
|