nk_jtb 0.9.11 → 0.9.12
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 +16 -49
- package/package.json +1 -1
- package/src/base/_base.scss +8 -2
- package/src/base/_content_gap.scss +6 -24
- package/src/utilities/_flexbox.scss +9 -4
package/index.html
CHANGED
|
@@ -8,57 +8,18 @@
|
|
|
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
|
+
<style>
|
|
12
|
+
.sibling {
|
|
13
|
+
background-color: #3b82f6;
|
|
14
|
+
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
15
|
+
color: hsl(0, 0%, 100%);
|
|
16
|
+
padding-inline: 1rem;
|
|
17
|
+
width: 100%;
|
|
18
|
+
}
|
|
19
|
+
</style>
|
|
11
20
|
</head>
|
|
12
21
|
|
|
13
22
|
<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
|
-
|
|
62
23
|
<div class="quick-hide-div zebra">
|
|
63
24
|
<section id="typography" class="py-3">
|
|
64
25
|
<div class="container">
|
|
@@ -128,6 +89,12 @@
|
|
|
128
89
|
</div>
|
|
129
90
|
</div>
|
|
130
91
|
<div id="file-input">
|
|
92
|
+
<div class="my">
|
|
93
|
+
<input type="file" name="name">
|
|
94
|
+
<!-- <button type="submit" class="btn">Upload</button> -->
|
|
95
|
+
<input type="text">
|
|
96
|
+
</div>
|
|
97
|
+
<hr>
|
|
131
98
|
<label class="file">
|
|
132
99
|
<input type="file" name="name">
|
|
133
100
|
<span> Select file... </span>
|
|
@@ -1538,6 +1505,6 @@
|
|
|
1538
1505
|
|
|
1539
1506
|
<div id="app"></div>
|
|
1540
1507
|
<script type="module" src="/main.js"></script>
|
|
1541
|
-
|
|
1508
|
+
</body>
|
|
1542
1509
|
|
|
1543
1510
|
</html>
|
package/package.json
CHANGED
package/src/base/_base.scss
CHANGED
|
@@ -60,7 +60,7 @@ abbr:where([title]) {
|
|
|
60
60
|
text-decoration: underline dotted; // 1
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
-
// --
|
|
63
|
+
// -- Typography --
|
|
64
64
|
// ==========================================================================
|
|
65
65
|
|
|
66
66
|
@for $size from 1 through length($heading-sizes) {
|
|
@@ -83,6 +83,12 @@ abbr:where([title]) {
|
|
|
83
83
|
margin-top: 2em; // 1
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
+
// 1. Don't leave a single word on a line by itself
|
|
87
|
+
|
|
88
|
+
p {
|
|
89
|
+
text-wrap: pretty; // 1
|
|
90
|
+
}
|
|
91
|
+
|
|
86
92
|
// DO NOT reset for opt-in unless you want to keep adding and
|
|
87
93
|
// overriding classes. Use :is() makes it easier to override
|
|
88
94
|
:is(a) {
|
|
@@ -112,7 +118,7 @@ kbd,
|
|
|
112
118
|
samp,
|
|
113
119
|
pre {
|
|
114
120
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
115
|
-
font-size: .875rem;
|
|
121
|
+
font-size: 0.875rem;
|
|
116
122
|
color: #f0506e;
|
|
117
123
|
border-radius: 0.25rem;
|
|
118
124
|
}
|
|
@@ -1,32 +1,14 @@
|
|
|
1
1
|
@use "../variables" as *;
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
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.
|
|
3
|
+
$html-elements: blockquote, p, pre, form, table, ol, ul, h1, h2, h3, h4, h5, h6;
|
|
4
|
+
$common-classes: ".bx", ".bx-title", ".flex", ".grid", ".bx-content", ".frm-row", ".container";
|
|
11
5
|
|
|
12
|
-
|
|
6
|
+
// Content gap
|
|
7
|
+
:where(#{$html-elements}, #{$common-classes}) + :where(*) {
|
|
13
8
|
margin-top: $content-gap;
|
|
14
9
|
}
|
|
15
10
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
// opt-out
|
|
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;
|
|
28
|
-
|
|
29
|
-
:is([class*="flex"]:not(.flex-col), [class*="grid"]) > *,
|
|
30
|
-
:is([class*="flex"]:not(.flex-col), [class*="grid"]) > *:is(#{$margin-opt-out-list}) {
|
|
11
|
+
// opt out for `flex` and `grid` element and use `gap` instead.
|
|
12
|
+
:where([class*="flex"], [class*="grid"]) > * {
|
|
31
13
|
margin: 0;
|
|
32
14
|
}
|
|
@@ -28,8 +28,15 @@ $flex-properties-map: (
|
|
|
28
28
|
)
|
|
29
29
|
),
|
|
30
30
|
align-self: (
|
|
31
|
-
prefix: "
|
|
32
|
-
values: (
|
|
31
|
+
prefix: "self-",
|
|
32
|
+
values: (
|
|
33
|
+
auto: auto,
|
|
34
|
+
baseline: baseline,
|
|
35
|
+
center: center,
|
|
36
|
+
end: flex-end,
|
|
37
|
+
start: flex-start,
|
|
38
|
+
stretch: stretch
|
|
39
|
+
)
|
|
33
40
|
),
|
|
34
41
|
flex-direction: (
|
|
35
42
|
prefix: #{$flex-identifier},
|
|
@@ -89,5 +96,3 @@ $flex-classes-map: (
|
|
|
89
96
|
);
|
|
90
97
|
|
|
91
98
|
@include generate-classes($flex-classes-map);
|
|
92
|
-
|
|
93
|
-
|