nk_jtb 0.9.10 → 0.9.11
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 +49 -1
- package/package.json +1 -1
- package/src/base/_content_gap.scss +18 -17
package/index.html
CHANGED
|
@@ -10,7 +10,55 @@
|
|
|
10
10
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
11
11
|
</head>
|
|
12
12
|
|
|
13
|
-
<body
|
|
13
|
+
<body>
|
|
14
|
+
|
|
15
|
+
<div class="container py space-y">
|
|
16
|
+
<h4>Testing for the "content-gap" opt out rules</h4>
|
|
17
|
+
<div class="flex-col">
|
|
18
|
+
<div class="bx pink fg1"></div>
|
|
19
|
+
<div class="bx pink fg1"></div>
|
|
20
|
+
<div class="bx pink fg1"></div>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="flex-col">
|
|
23
|
+
<p class="h-3 pink fg1"></p>
|
|
24
|
+
<p class="h-3 pink fg1"></p>
|
|
25
|
+
<p class="h-3 pink fg1"></p>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="flex-col">
|
|
28
|
+
<form action=""><input class="fg1"></form>
|
|
29
|
+
<form action=""><input class="fg1"></form>
|
|
30
|
+
<form action=""><input class="fg1"></form>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
<div class="container py space-y">
|
|
34
|
+
<h4>Testing for the "content-gap" opt out rules</h4>
|
|
35
|
+
<div class="flex gap">
|
|
36
|
+
<div class="bx pink fg1"></div>
|
|
37
|
+
<div class="bx pink fg1"></div>
|
|
38
|
+
<div class="bx pink fg1"></div>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="flex gap">
|
|
41
|
+
<p class="h-3 pink fg1"></p>
|
|
42
|
+
<p class="h-3 pink fg1"></p>
|
|
43
|
+
<p class="h-3 pink fg1"></p>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="flex gap">
|
|
46
|
+
<input class="fg1">
|
|
47
|
+
<input class="fg1">
|
|
48
|
+
<input class="fg1">
|
|
49
|
+
</div>
|
|
50
|
+
<div class="flex gap">
|
|
51
|
+
<div class="frm-row fg1"><textarea></textarea></div>
|
|
52
|
+
<div class="frm-row fg1"><textarea></textarea></div>
|
|
53
|
+
<div class="frm-row fg1"><textarea></textarea></div>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="grid cols-3">
|
|
56
|
+
<textarea name=""></textarea>
|
|
57
|
+
<textarea name=""></textarea>
|
|
58
|
+
<textarea name=""></textarea>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
14
62
|
<div class="quick-hide-div zebra">
|
|
15
63
|
<section id="typography" class="py-3">
|
|
16
64
|
<div class="container">
|
package/package.json
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
@use "../variables" as *;
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
// ==========================================================================
|
|
4
|
+
// -- FUTURE NATHAN --
|
|
5
|
+
// ==========================================================================
|
|
6
|
+
// you may be tempted to try and come up with a more generic solution to
|
|
7
|
+
// manage flex and grid spacing. This works fine when working with rows, but
|
|
8
|
+
// when you start working with columns, you will quickly find that you need to
|
|
9
|
+
// add more and more exceptions to the list. I think the easiest solution is
|
|
10
|
+
// to use gap instead of margin.
|
|
6
11
|
|
|
7
|
-
|
|
8
|
-
// with the need for a wrapper element.
|
|
9
|
-
* + :where(table, form) {
|
|
12
|
+
:where(blockquote, p, pre, form, table, ol, ul, h1, h2, h3, h4, h5, h6) + *:not(label) {
|
|
10
13
|
margin-top: $content-gap;
|
|
11
14
|
}
|
|
12
15
|
|
|
@@ -14,18 +17,16 @@
|
|
|
14
17
|
margin-top: $content-gap;
|
|
15
18
|
}
|
|
16
19
|
|
|
17
|
-
// exclude section to give more control
|
|
18
|
-
:where([class^="flex"], [class^="grid"]) + :where(*):not(:is([class*="flex"], [class*="grid"], section)) {
|
|
19
|
-
margin-top: $content-gap;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
20
|
// opt-out
|
|
23
|
-
// - Remove margin from all direct child elements of "flex" or
|
|
24
|
-
//
|
|
25
|
-
//
|
|
26
|
-
//
|
|
21
|
+
// - Remove margin from all direct child elements of "flex" or "grid"
|
|
22
|
+
// otherwise you are constantly fighting other $content-gap rules.
|
|
23
|
+
//
|
|
24
|
+
// - The opt-out list is to increase the specificity of the selector so that
|
|
25
|
+
// it overrides other $content-gap rules.
|
|
26
|
+
|
|
27
|
+
$margin-opt-out-list: ".bx", ".frm-row", input;
|
|
27
28
|
|
|
28
|
-
:is([class*="flex"], [class*="grid"]) > *,
|
|
29
|
-
.flex
|
|
29
|
+
:is([class*="flex"]:not(.flex-col), [class*="grid"]) > *,
|
|
30
|
+
:is([class*="flex"]:not(.flex-col), [class*="grid"]) > *:is(#{$margin-opt-out-list}) {
|
|
30
31
|
margin: 0;
|
|
31
32
|
}
|