nk_jtb 0.5.0 → 0.6.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 +32 -9
- package/package.json +2 -4
- package/scss/base/_base.scss +5 -13
- package/scss/base/_content_gap.scss +5 -2
- package/scss/base/_vars_colors.scss +1 -2
- package/scss/forms/_control.scss +1 -0
- package/scss/play.scss +0 -61
- package/scss/utilities/_sizes.scss +24 -17
- package/scss/utilities/_spacing.scss +9 -0
package/index.html
CHANGED
|
@@ -11,23 +11,46 @@
|
|
|
11
11
|
<!-- <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script> -->
|
|
12
12
|
|
|
13
13
|
<style>
|
|
14
|
-
.
|
|
15
|
-
|
|
16
|
-
grid-template-columns: 1fr minmax(24rem, 30rem);
|
|
14
|
+
.abc {
|
|
15
|
+
grid-template-columns: 3rem 8rem 1fr 5rem;
|
|
17
16
|
}
|
|
18
17
|
|
|
19
|
-
|
|
20
|
-
|
|
21
18
|
</style>
|
|
22
19
|
</head>
|
|
23
20
|
|
|
24
21
|
<body>
|
|
25
22
|
|
|
26
|
-
<div class="container
|
|
23
|
+
<div class="container pxy-5">
|
|
24
|
+
|
|
25
|
+
<h2>Create a css grid that can be used in a data table layout</h2>
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
<div class="grid abc">
|
|
29
|
+
<div class="bx blue"></div>
|
|
30
|
+
<div class="bx blue"></div>
|
|
31
|
+
<div class="bx blue"></div>
|
|
32
|
+
<div class="bx blue"></div>
|
|
33
|
+
<div class="bx blue"></div>
|
|
34
|
+
<div class="bx orange"></div>
|
|
35
|
+
<div class="bx orange"></div>
|
|
36
|
+
<div class="bx orange"></div>
|
|
37
|
+
<div class="bx orange"></div>
|
|
38
|
+
<div class="bx orange"></div>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<style>
|
|
42
|
+
.special {
|
|
43
|
+
grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.item {
|
|
47
|
+
grid-column: 100px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
</style>
|
|
51
|
+
|
|
52
|
+
<div class="grid special">
|
|
27
53
|
|
|
28
|
-
<div class="flex-col green bdr vh60">
|
|
29
|
-
<div class="bx mxy-0 dark"></div>
|
|
30
|
-
<div class="bx mxy-0 light flex-1"></div>
|
|
31
54
|
</div>
|
|
32
55
|
|
|
33
56
|
</div>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nk_jtb",
|
|
3
3
|
"description": "Yet another utility based framework.",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.6.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/naykel76/nk_jtb.git"
|
|
@@ -19,10 +19,8 @@
|
|
|
19
19
|
"preview": "vite preview"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
|
+
"alpinejs": "^3.12",
|
|
22
23
|
"sass": "^1.60.0",
|
|
23
24
|
"vite": "^4.2.1"
|
|
24
|
-
},
|
|
25
|
-
"dependencies": {
|
|
26
|
-
"alpinejs": "^3.10.5"
|
|
27
25
|
}
|
|
28
26
|
}
|
package/scss/base/_base.scss
CHANGED
|
@@ -169,7 +169,6 @@ th {
|
|
|
169
169
|
th,
|
|
170
170
|
td {
|
|
171
171
|
padding: 0.5em;
|
|
172
|
-
// border: 1px solid $base-border-color;
|
|
173
172
|
text-align: left;
|
|
174
173
|
vertical-align: top;
|
|
175
174
|
}
|
|
@@ -278,6 +277,11 @@ ul {
|
|
|
278
277
|
list-style-type: disc;
|
|
279
278
|
}
|
|
280
279
|
|
|
280
|
+
// this may be to too opinionated but using :is should make it easy to override
|
|
281
|
+
:is(li:not(:first-child)) {
|
|
282
|
+
margin-top: 0.25em;
|
|
283
|
+
}
|
|
284
|
+
|
|
281
285
|
// nested lists
|
|
282
286
|
// ====================
|
|
283
287
|
|
|
@@ -288,23 +292,12 @@ li ol {
|
|
|
288
292
|
margin-left: 1rem;
|
|
289
293
|
}
|
|
290
294
|
|
|
291
|
-
// .list-none {
|
|
292
|
-
// list-style-type: none;
|
|
293
|
-
// }
|
|
294
|
-
// .list-disc {
|
|
295
|
-
// list-style-type: disc;
|
|
296
|
-
// }
|
|
297
|
-
// .list-decimal {
|
|
298
|
-
// list-style-type: decimal;
|
|
299
|
-
// }
|
|
300
|
-
|
|
301
295
|
// Prevent resizing text areas horizontally by default.
|
|
302
296
|
|
|
303
297
|
textarea {
|
|
304
298
|
resize: vertical;
|
|
305
299
|
}
|
|
306
300
|
|
|
307
|
-
|
|
308
301
|
input::placeholder,
|
|
309
302
|
textarea::placeholder {
|
|
310
303
|
opacity: 1; // 1
|
|
@@ -362,7 +355,6 @@ video {
|
|
|
362
355
|
height: auto; // 2
|
|
363
356
|
}
|
|
364
357
|
|
|
365
|
-
|
|
366
358
|
// Ensure the default browser behavior of the `hidden` attribute.
|
|
367
359
|
|
|
368
360
|
[hidden] {
|
|
@@ -5,6 +5,11 @@
|
|
|
5
5
|
margin-top: $content-gap;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
+
// this may turn out to be more hassle than it is worth!
|
|
9
|
+
* + :where(table) {
|
|
10
|
+
margin-top: $content-gap;
|
|
11
|
+
}
|
|
12
|
+
|
|
8
13
|
:where(.bx, .bx-title, .bx-content, .frm-row, .container) + :where(*):not(.dd-content) {
|
|
9
14
|
margin-top: $content-gap;
|
|
10
15
|
}
|
|
@@ -18,5 +23,3 @@
|
|
|
18
23
|
:is(.flex, [class^="grid"]) > * {
|
|
19
24
|
margin: 0;
|
|
20
25
|
}
|
|
21
|
-
|
|
22
|
-
|
|
@@ -25,8 +25,7 @@ $color-map: (
|
|
|
25
25
|
"secondary": $secondary,
|
|
26
26
|
"light": hsl(0, 0%, 98%),
|
|
27
27
|
"dark": hsl(0, 0%, 13%),
|
|
28
|
-
|
|
29
|
-
"muted": hsl(0, 4%, 51%),
|
|
28
|
+
"muted": hsl(208, 7%, 46%),
|
|
30
29
|
"danger": hsl(354, 70%, 54%),
|
|
31
30
|
"success": hsl(134, 61%, 41%),
|
|
32
31
|
"info": hsl(204, 83%, 53%),
|
package/scss/forms/_control.scss
CHANGED
package/scss/play.scss
CHANGED
|
@@ -13,64 +13,3 @@
|
|
|
13
13
|
// add accordion component variables here instead of the main
|
|
14
14
|
|
|
15
15
|
|
|
16
|
-
// $midnight: #2c3e50;
|
|
17
|
-
// .accordion {
|
|
18
|
-
// color: white;
|
|
19
|
-
// overflow: hidden;
|
|
20
|
-
// label {
|
|
21
|
-
// display: flex;
|
|
22
|
-
// justify-content: space-between;
|
|
23
|
-
// padding: 1em;
|
|
24
|
-
// background: $midnight;
|
|
25
|
-
// font-weight: bold;
|
|
26
|
-
// cursor: pointer;
|
|
27
|
-
// /* Icon */
|
|
28
|
-
// &:hover {
|
|
29
|
-
// background: darken($midnight, 10%);
|
|
30
|
-
// }
|
|
31
|
-
// &::after {
|
|
32
|
-
// content: "\276F";
|
|
33
|
-
// width: 1em;
|
|
34
|
-
// height: 1em;
|
|
35
|
-
// text-align: center;
|
|
36
|
-
// transition: all 0.35s;
|
|
37
|
-
// }
|
|
38
|
-
// }
|
|
39
|
-
// &-content {
|
|
40
|
-
// max-height: 0;
|
|
41
|
-
// padding: 0 1em;
|
|
42
|
-
// color: $midnight;
|
|
43
|
-
// background: white;
|
|
44
|
-
// transition: all 0.35s;
|
|
45
|
-
// }
|
|
46
|
-
// &-close {
|
|
47
|
-
// display: flex;
|
|
48
|
-
// justify-content: flex-end;
|
|
49
|
-
// padding: 1em;
|
|
50
|
-
// font-size: 0.75em;
|
|
51
|
-
// background: $midnight;
|
|
52
|
-
// cursor: pointer;
|
|
53
|
-
// &:hover {
|
|
54
|
-
// background: darken($midnight, 10%);
|
|
55
|
-
// }
|
|
56
|
-
// }
|
|
57
|
-
|
|
58
|
-
// input {
|
|
59
|
-
// position: absolute;
|
|
60
|
-
// opacity: 0;
|
|
61
|
-
// z-index: -1;
|
|
62
|
-
// // checked toggles open and closed
|
|
63
|
-
// &:checked {
|
|
64
|
-
// + label {
|
|
65
|
-
// background: darken($midnight, 10%);
|
|
66
|
-
// &::after {
|
|
67
|
-
// transform: rotate(90deg);
|
|
68
|
-
// }
|
|
69
|
-
// }
|
|
70
|
-
// ~ .accordion-content {
|
|
71
|
-
// max-height: 100vh;
|
|
72
|
-
// padding: 1em;
|
|
73
|
-
// }
|
|
74
|
-
// }
|
|
75
|
-
// }
|
|
76
|
-
// }
|
|
@@ -4,36 +4,40 @@
|
|
|
4
4
|
@use "../mixins/makeMagicClass" as *;
|
|
5
5
|
@use "sass:map";
|
|
6
6
|
|
|
7
|
-
// width utilities w-{n}rem or w-{n}px
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
7
|
// --------------------------------------------------------------------------
|
|
12
|
-
// -- WIDTH UTILITY CLASSES --
|
|
8
|
+
// -- WIDTH AND HEIGHT UTILITY CLASSES --
|
|
13
9
|
// --------------------------------------------------------------------------
|
|
14
10
|
|
|
15
|
-
$
|
|
11
|
+
$size-utilities: (
|
|
16
12
|
"width": (
|
|
17
|
-
"property": "width",
|
|
18
13
|
"prefix": "w-",
|
|
19
14
|
"values": (
|
|
20
15
|
fc: fit-content,
|
|
21
16
|
full: 100%,
|
|
22
|
-
|
|
17
|
+
screen: 100vw,
|
|
23
18
|
// min: min-content,
|
|
24
19
|
// max: max-content,
|
|
25
|
-
// fit: fit-content
|
|
20
|
+
// fit: fit-content,,,,,
|
|
21
|
+
),
|
|
22
|
+
),
|
|
23
|
+
"height": (
|
|
24
|
+
"prefix": "h-",
|
|
25
|
+
"values": (
|
|
26
|
+
fc: fit-content,
|
|
27
|
+
full: 100%,
|
|
28
|
+
screen: 100vh,
|
|
26
29
|
),
|
|
27
30
|
),
|
|
28
31
|
);
|
|
29
32
|
|
|
30
|
-
@each $property, $map in $
|
|
31
|
-
|
|
32
|
-
$
|
|
33
|
+
@each $property, $map in $size-utilities {
|
|
34
|
+
|
|
35
|
+
$prefix: map-get($map, "prefix");
|
|
33
36
|
$values: map-get($map, "values");
|
|
34
37
|
|
|
35
38
|
@each $key, $v in $values {
|
|
36
|
-
|
|
39
|
+
|
|
40
|
+
.#{$prefix}#{$key} {
|
|
37
41
|
#{$property}: $v;
|
|
38
42
|
}
|
|
39
43
|
}
|
|
@@ -46,7 +50,6 @@ $width-utilities: (
|
|
|
46
50
|
$magic-width-sizes: ((16 "full"), (20, "full"), (24, "full")) !default;
|
|
47
51
|
@include makeMagicClass("width", "w", ($magic-width-sizes));
|
|
48
52
|
|
|
49
|
-
|
|
50
53
|
// --------------------------------------------------------------------------
|
|
51
54
|
// -- MAKE UTILITY SIZE CLASSES --
|
|
52
55
|
// --------------------------------------------------------------------------
|
|
@@ -94,7 +97,7 @@ $fractional-sizes: (1\/4: 25%, 1\/3: 33.33%, 1\/2: 50%, 3\/4: 75%);
|
|
|
94
97
|
$v-heights: (
|
|
95
98
|
60: 60vh,
|
|
96
99
|
80: 80vh,
|
|
97
|
-
100: 100vh
|
|
100
|
+
100: 100vh,
|
|
98
101
|
);
|
|
99
102
|
|
|
100
103
|
// vertical heights
|
|
@@ -111,14 +114,18 @@ $max-min-sizes: (
|
|
|
111
114
|
400: 400px,
|
|
112
115
|
600: 600px,
|
|
113
116
|
800: 800px,
|
|
114
|
-
|
|
115
|
-
|
|
117
|
+
"md": $md,
|
|
118
|
+
"lg": $lg,
|
|
116
119
|
);
|
|
117
120
|
|
|
118
121
|
.h-1\/1 {
|
|
119
122
|
height: 100%;
|
|
120
123
|
}
|
|
121
124
|
|
|
125
|
+
.maxw-full {
|
|
126
|
+
max-width: 100%;
|
|
127
|
+
}
|
|
128
|
+
|
|
122
129
|
@each $key, $value in $max-min-sizes {
|
|
123
130
|
.minw-#{$key} {
|
|
124
131
|
// this seems very redundant!!
|