nk_jtb 0.9.10 → 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 +17 -2
- package/package.json +1 -1
- package/src/base/_base.scss +8 -2
- package/src/base/_content_gap.scss +6 -23
- package/src/utilities/_flexbox.scss +9 -4
package/index.html
CHANGED
|
@@ -8,9 +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
|
-
<body
|
|
22
|
+
<body>
|
|
14
23
|
<div class="quick-hide-div zebra">
|
|
15
24
|
<section id="typography" class="py-3">
|
|
16
25
|
<div class="container">
|
|
@@ -80,6 +89,12 @@
|
|
|
80
89
|
</div>
|
|
81
90
|
</div>
|
|
82
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>
|
|
83
98
|
<label class="file">
|
|
84
99
|
<input type="file" name="name">
|
|
85
100
|
<span> Select file... </span>
|
|
@@ -1490,6 +1505,6 @@
|
|
|
1490
1505
|
|
|
1491
1506
|
<div id="app"></div>
|
|
1492
1507
|
<script type="module" src="/main.js"></script>
|
|
1493
|
-
|
|
1508
|
+
</body>
|
|
1494
1509
|
|
|
1495
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,31 +1,14 @@
|
|
|
1
1
|
@use "../variables" as *;
|
|
2
2
|
|
|
3
|
-
:
|
|
4
|
-
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
// this may be more hassle than it is worth but it is handy to place elements
|
|
8
|
-
// with the need for a wrapper element.
|
|
9
|
-
* + :where(table, form) {
|
|
10
|
-
margin-top: $content-gap;
|
|
11
|
-
}
|
|
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";
|
|
12
5
|
|
|
13
|
-
|
|
6
|
+
// Content gap
|
|
7
|
+
:where(#{$html-elements}, #{$common-classes}) + :where(*) {
|
|
14
8
|
margin-top: $content-gap;
|
|
15
9
|
}
|
|
16
10
|
|
|
17
|
-
//
|
|
18
|
-
:where([class
|
|
19
|
-
margin-top: $content-gap;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
// opt-out
|
|
23
|
-
// - Remove margin from all direct child elements of "flex" or
|
|
24
|
-
// "grid" because it is too inconsistent to manage.
|
|
25
|
-
// - excluding .flex + input is experimental.the exclusion makes it
|
|
26
|
-
// easier to add tool-tips with a label
|
|
27
|
-
|
|
28
|
-
:is([class*="flex"], [class*="grid"]) > *,
|
|
29
|
-
.flex + input {
|
|
11
|
+
// opt out for `flex` and `grid` element and use `gap` instead.
|
|
12
|
+
:where([class*="flex"], [class*="grid"]) > * {
|
|
30
13
|
margin: 0;
|
|
31
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
|
-
|