nk_jtb 0.11.3 → 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 +141 -72
- 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/variables/_utility_maps.scss +1 -1
package/index.html
CHANGED
|
@@ -13,23 +13,6 @@
|
|
|
13
13
|
|
|
14
14
|
<body>
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
<style>
|
|
19
|
-
.fade-out-mask {
|
|
20
|
-
-webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
|
|
21
|
-
mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
|
|
22
|
-
max-height: 10em;
|
|
23
|
-
overflow: hidden;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.expanded {
|
|
27
|
-
-webkit-mask-image: none;
|
|
28
|
-
mask-image: none;
|
|
29
|
-
max-height: none;
|
|
30
|
-
}
|
|
31
|
-
</style>
|
|
32
|
-
|
|
33
16
|
<div class="container py">
|
|
34
17
|
<h2>List Styles</h2>
|
|
35
18
|
<div class="flex space-x">
|
|
@@ -59,8 +42,90 @@
|
|
|
59
42
|
<li>Item three</li>
|
|
60
43
|
</ul>
|
|
61
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>
|
|
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>
|
|
62
78
|
</div>
|
|
63
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>
|
|
113
|
+
<style>
|
|
114
|
+
.fade-out-mask {
|
|
115
|
+
-webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
|
|
116
|
+
mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
|
|
117
|
+
max-height: 10em;
|
|
118
|
+
overflow: hidden;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.expanded {
|
|
122
|
+
-webkit-mask-image: none;
|
|
123
|
+
mask-image: none;
|
|
124
|
+
max-height: none;
|
|
125
|
+
}
|
|
126
|
+
</style>
|
|
127
|
+
|
|
128
|
+
|
|
64
129
|
<div class="container-md py-5">
|
|
65
130
|
<div x-data="{ expanded: false }" class="container-md py-5">
|
|
66
131
|
<div :class="{'fade-out-mask': !expanded}" class="overflow-hidden">
|
|
@@ -301,6 +366,64 @@
|
|
|
301
366
|
</div>
|
|
302
367
|
</div>
|
|
303
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>
|
|
304
427
|
<section class="py-3">
|
|
305
428
|
<div class="container-sm py-3 bx">
|
|
306
429
|
<div class="grid cols-2">
|
|
@@ -453,7 +576,7 @@
|
|
|
453
576
|
message.</p>
|
|
454
577
|
</div>
|
|
455
578
|
<div class="frm-row">
|
|
456
|
-
<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
|
|
457
580
|
name</label>
|
|
458
581
|
<input type="text" id="error"
|
|
459
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"
|
|
@@ -904,61 +1027,7 @@
|
|
|
904
1027
|
|
|
905
1028
|
<div class="quick-hide-wrapper zebra c-py-5-3-2">
|
|
906
1029
|
|
|
907
|
-
<section id="menu">
|
|
908
|
-
<div class="container">
|
|
909
|
-
<h2 class="title txt-3">Menu Component</h2>
|
|
910
|
-
<h4>Base Component</h4>
|
|
911
|
-
<div class="bx grid md:cols-3">
|
|
912
|
-
<div class="menu">
|
|
913
|
-
<div class="menu-title"><code><div class="menu"></code></div>
|
|
914
|
-
<div class="menu-title">Menu Title</div>
|
|
915
|
-
<a href="">Item</a>
|
|
916
|
-
<a href="">Parent</a>
|
|
917
|
-
<a href="" class="active">Active</a>
|
|
918
|
-
</div>
|
|
919
|
-
<nav class="menu">
|
|
920
|
-
<div class="menu-title"><code><nav class="menu"></code></div>
|
|
921
|
-
<div class="menu-title">Menu Title</div>
|
|
922
|
-
<a href="">Item</a>
|
|
923
|
-
<a href="">Parent</a>
|
|
924
|
-
<a href="" class="active">Active</a>
|
|
925
|
-
</nav>
|
|
926
|
-
<ul class="menu">
|
|
927
|
-
<div class="menu-title"><code><ul class="menu"></code></div>
|
|
928
|
-
<div class="menu-title">Menu Title</div>
|
|
929
|
-
<li><a href="">Item</a></li>
|
|
930
|
-
<li><a href="">Parent</a></li>
|
|
931
|
-
<li><a href="" class="active">Active</a></li>
|
|
932
|
-
</ul>
|
|
933
|
-
</div>
|
|
934
|
-
<h4>With Menu-Item</h4>
|
|
935
|
-
<div class="bx grid md:cols-3">
|
|
936
|
-
<div class="menu">
|
|
937
|
-
<div class="menu-title"><code><div class="menu"></code></div>
|
|
938
|
-
<div class="menu-title">Menu Title</div>
|
|
939
|
-
<a class="menu-item" href="">Item</a>
|
|
940
|
-
<a class="menu-item" href="">Parent</a>
|
|
941
|
-
<a class="menu-item active" href="">Active</a>
|
|
942
|
-
</div>
|
|
943
|
-
<nav class="menu">
|
|
944
|
-
<div class="menu-title"><code><nav class="menu"></code></div>
|
|
945
|
-
<div class="menu-title">Menu Title</div>
|
|
946
|
-
<a class="menu-item" href="">Item</a>
|
|
947
|
-
<a class="menu-item" href="">Parent</a>
|
|
948
|
-
<a class="menu-item active" href="">Active</a>
|
|
949
|
-
</nav>
|
|
950
|
-
<ul class="menu">
|
|
951
|
-
<div class="menu-title"><code><ul class="menu"></code></div>
|
|
952
|
-
<div class="menu-title">Menu Title</div>
|
|
953
|
-
<li><a class="menu-item" href="">Item</a></li>
|
|
954
|
-
<li><a class="menu-item" href="">Parent</a></li>
|
|
955
|
-
<li><a class="menu-item active" href="">Active</a></li>
|
|
956
|
-
</ul>
|
|
957
1030
|
|
|
958
|
-
</div>
|
|
959
|
-
<h4>Collapse</h4>
|
|
960
|
-
</div>
|
|
961
|
-
</section>
|
|
962
1031
|
|
|
963
1032
|
<section id="theme-examples">
|
|
964
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
|
@@ -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
|