nk_jtb 0.4.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 +5 -7
- package/scss/_nk.scss +23 -0
- package/scss/base/_base.scss +6 -28
- package/scss/base/_content_gap.scss +5 -2
- package/scss/base/_vars_colors.scss +1 -2
- package/scss/components/_accordion.scss +87 -20
- package/scss/forms/_control.scss +1 -0
- package/scss/forms/_form.scss +7 -11
- package/scss/forms/_toggle.scss +15 -12
- package/scss/play.scss +13 -28
- package/scss/utilities/_display_visibility.scss +2 -2
- package/scss/utilities/_grid.scss +1 -1
- package/scss/utilities/_position.scss +4 -0
- 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"
|
|
@@ -13,16 +13,14 @@
|
|
|
13
13
|
"spacing": "sass --watch --no-source-map ./scss/utilities/_spacing.scss:dist/css/spacing.css",
|
|
14
14
|
"flex": "sass --watch --no-source-map ./scss/utilities/_flex.scss:dist/css/flex.css",
|
|
15
15
|
"grid": "sass --watch --no-source-map ./scss/utilities/_grid.scss:dist/css/grid.css",
|
|
16
|
-
"play": "sass --watch --no-source-map ./scss/
|
|
16
|
+
"play": "sass --watch --no-source-map ./scss/play.scss:dist/css/play.css",
|
|
17
17
|
"dev": "vite --open",
|
|
18
18
|
"build": "vite build",
|
|
19
19
|
"preview": "vite preview"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
|
|
25
|
-
"dependencies": {
|
|
26
|
-
"alpinejs": "^3.10.5"
|
|
22
|
+
"alpinejs": "^3.12",
|
|
23
|
+
"sass": "^1.60.0",
|
|
24
|
+
"vite": "^4.2.1"
|
|
27
25
|
}
|
|
28
26
|
}
|
package/scss/_nk.scss
CHANGED
|
@@ -97,3 +97,26 @@ trix-editor {
|
|
|
97
97
|
display: none;
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
// ==========================================================================
|
|
103
|
+
// -- Primary banner for page layouts --
|
|
104
|
+
// ==========================================================================
|
|
105
|
+
$banner-height: 450px !default;
|
|
106
|
+
$banner-bg: transparent !default;
|
|
107
|
+
$banner-text-bg: transparent !default;
|
|
108
|
+
|
|
109
|
+
.banner {
|
|
110
|
+
background-repeat: no-repeat;
|
|
111
|
+
background-position: right center;
|
|
112
|
+
height: $banner-height;
|
|
113
|
+
background-color: $banner-bg;
|
|
114
|
+
|
|
115
|
+
// banner-text is the wrapper
|
|
116
|
+
&-text {
|
|
117
|
+
// color: white;
|
|
118
|
+
background-color: $banner-text-bg;
|
|
119
|
+
padding: 1rem;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
|
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,41 +292,16 @@ 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
|
-
// 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
|
|
308
|
-
// 2. Set the default placeholder color to the user's configured gray 400 color.
|
|
309
|
-
|
|
310
|
-
input::-moz-placeholder,
|
|
311
|
-
textarea::-moz-placeholder {
|
|
312
|
-
opacity: 1; // 1
|
|
313
|
-
color: #9ca3af; // 2
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
input:-ms-input-placeholder,
|
|
317
|
-
textarea:-ms-input-placeholder {
|
|
318
|
-
opacity: 1; // 1
|
|
319
|
-
color: #9ca3af; // 2
|
|
320
|
-
}
|
|
321
|
-
|
|
322
301
|
input::placeholder,
|
|
323
302
|
textarea::placeholder {
|
|
324
303
|
opacity: 1; // 1
|
|
325
|
-
color: #
|
|
304
|
+
color: #c5c5c5; // 2
|
|
326
305
|
}
|
|
327
306
|
|
|
328
307
|
// Set the default cursor for buttons.
|
|
@@ -376,7 +355,6 @@ video {
|
|
|
376
355
|
height: auto; // 2
|
|
377
356
|
}
|
|
378
357
|
|
|
379
|
-
|
|
380
358
|
// Ensure the default browser behavior of the `hidden` attribute.
|
|
381
359
|
|
|
382
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%),
|
|
@@ -1,36 +1,103 @@
|
|
|
1
|
+
@use "../base/vars_base" as *;
|
|
2
|
+
// add accordion component variables here instead of the main
|
|
3
|
+
// component variable file.
|
|
1
4
|
$accordion-bg: rgb(245, 245, 245) !default;
|
|
5
|
+
$accordion-border: $border !default;
|
|
6
|
+
$accordion-hover-bg: darken($accordion-bg, 5%) !default;
|
|
2
7
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
8
|
+
$midnight: #2c3e50;
|
|
9
|
+
|
|
10
|
+
// ---------------- BEFORE YOU DO ANYTHING CRAZY ------------------
|
|
11
|
+
// These styles are for the CSS accordion, not the Alpine accordion.
|
|
12
|
+
// You should focus the accordion behaviour and limit opinionated
|
|
13
|
+
// styles to make it easier to apply utility classes.
|
|
14
|
+
// ---------------- BEFORE YOU DO ANYTHING CRAZY ------------------
|
|
7
15
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
width: 100%;
|
|
13
|
-
transition: 0.4s;
|
|
14
|
-
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
15
|
-
display: flex;
|
|
16
|
-
justify-content: space-between;
|
|
17
|
-
align-items: center;
|
|
18
|
-
padding: 1rem;
|
|
16
|
+
// style the toggle
|
|
17
|
+
:where(.accordion label) {
|
|
18
|
+
font-weight: bold;
|
|
19
|
+
// background: #000;
|
|
19
20
|
}
|
|
20
21
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
.accordion {
|
|
23
|
+
overflow: hidden;
|
|
24
|
+
margin-bottom: 0.5rem;
|
|
25
|
+
border: $border;
|
|
26
|
+
|
|
27
|
+
// title and label are used to toggle the accordion
|
|
28
|
+
&-title,
|
|
29
|
+
label {
|
|
30
|
+
width: 100%;
|
|
31
|
+
transition: 0.3s;
|
|
32
|
+
display: flex;
|
|
33
|
+
justify-content: space-between;
|
|
34
|
+
padding: 1em;
|
|
35
|
+
background: $accordion-bg;
|
|
36
|
+
cursor: pointer;
|
|
37
|
+
|
|
38
|
+
&:hover {
|
|
39
|
+
background: $accordion-hover-bg;
|
|
40
|
+
}
|
|
41
|
+
/* Icon */
|
|
42
|
+
&::after {
|
|
43
|
+
content: "\276F";
|
|
44
|
+
text-align: center;
|
|
45
|
+
transition: all 0.3s;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&-content {
|
|
50
|
+
padding: 0 1em;
|
|
51
|
+
max-height: 0;
|
|
52
|
+
transition: all 0.3s;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&-close {
|
|
56
|
+
display: flex;
|
|
57
|
+
justify-content: flex-end;
|
|
58
|
+
font-size: 0.75em;
|
|
59
|
+
cursor: pointer;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
input {
|
|
63
|
+
position: absolute;
|
|
64
|
+
opacity: 0;
|
|
65
|
+
z-index: -1;
|
|
66
|
+
// checked toggles open and closed
|
|
67
|
+
&:checked {
|
|
68
|
+
+ label {
|
|
69
|
+
background: $accordion-hover-bg;
|
|
70
|
+
&::after {
|
|
71
|
+
transform: rotate(90deg);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
~ .accordion-content {
|
|
75
|
+
max-height: 999vh; // prevent cutting off content
|
|
76
|
+
padding: 1em;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.active {
|
|
82
|
+
content: "\276F";
|
|
83
|
+
text-align: center;
|
|
84
|
+
transition: all 0.3s;
|
|
85
|
+
&::after {
|
|
86
|
+
transform: rotate(90deg);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
25
89
|
}
|
|
26
90
|
|
|
91
|
+
// ---------------- BEFORE YOU DO ANYTHING CRAZY ------------------
|
|
92
|
+
// This is only used in an alpine accordion and will be DEPRECIATED
|
|
93
|
+
// ---------------- BEFORE YOU DO ANYTHING CRAZY ------------------
|
|
94
|
+
|
|
27
95
|
.accordion-body {
|
|
28
96
|
display: block;
|
|
29
97
|
overflow: hidden;
|
|
30
98
|
border-radius: 0;
|
|
31
99
|
|
|
32
100
|
> div {
|
|
33
|
-
border-top: none;
|
|
34
101
|
&:hover {
|
|
35
102
|
background-color: rgba(250, 221, 230, 0.15);
|
|
36
103
|
}
|
package/scss/forms/_control.scss
CHANGED
package/scss/forms/_form.scss
CHANGED
|
@@ -3,8 +3,6 @@
|
|
|
3
3
|
|
|
4
4
|
// @use "../base/vars_base" as *;
|
|
5
5
|
|
|
6
|
-
$placeholder-color: #bbbbbb !default;
|
|
7
|
-
|
|
8
6
|
// -- Base Elements --
|
|
9
7
|
// ==========================================================================
|
|
10
8
|
label {
|
|
@@ -26,12 +24,6 @@ select {
|
|
|
26
24
|
cursor: pointer;
|
|
27
25
|
}
|
|
28
26
|
|
|
29
|
-
::placeholder {
|
|
30
|
-
color: $placeholder-color;
|
|
31
|
-
opacity: 1;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
//
|
|
35
27
|
.checkbox,
|
|
36
28
|
.radio {
|
|
37
29
|
cursor: pointer;
|
|
@@ -41,6 +33,7 @@ select {
|
|
|
41
33
|
|
|
42
34
|
// -- frm-row --
|
|
43
35
|
// ==========================================================================
|
|
36
|
+
|
|
44
37
|
.frm-row {
|
|
45
38
|
position: relative;
|
|
46
39
|
display: flex;
|
|
@@ -57,7 +50,11 @@ select {
|
|
|
57
50
|
gap: 1rem;
|
|
58
51
|
|
|
59
52
|
label {
|
|
60
|
-
width
|
|
53
|
+
// exclude width class to make it easier to override or
|
|
54
|
+
// can also use flex-basis to override width
|
|
55
|
+
&:not([class*="w-"]) {
|
|
56
|
+
width: 10rem;
|
|
57
|
+
}
|
|
61
58
|
flex-shrink: 0; // prevent shrink for 100%
|
|
62
59
|
margin-top: 4px; // better alignment
|
|
63
60
|
}
|
|
@@ -98,8 +95,7 @@ select {
|
|
|
98
95
|
}
|
|
99
96
|
}
|
|
100
97
|
|
|
101
|
-
|
|
102
|
-
.withAddons:has(.leadingAddon){
|
|
98
|
+
.withAddons:has(.leadingAddon) {
|
|
103
99
|
background: green;
|
|
104
100
|
}
|
|
105
101
|
// the width of the addon will vary depending on the content
|
package/scss/forms/_toggle.scss
CHANGED
|
@@ -12,7 +12,9 @@ $toggle-gap: 0.25rem;
|
|
|
12
12
|
cursor: pointer;
|
|
13
13
|
|
|
14
14
|
input[type="checkbox"] {
|
|
15
|
-
|
|
15
|
+
height: 0;
|
|
16
|
+
width: 0;
|
|
17
|
+
visibility: hidden;
|
|
16
18
|
}
|
|
17
19
|
|
|
18
20
|
// toggle body
|
|
@@ -29,7 +31,8 @@ $toggle-gap: 0.25rem;
|
|
|
29
31
|
height: calc($toggle-body-height - $toggle-gap);
|
|
30
32
|
width: calc($toggle-body-height - $toggle-gap);
|
|
31
33
|
top: calc($toggle-gap / 2);
|
|
32
|
-
left: calc($toggle-gap / 2);
|
|
34
|
+
left: calc($toggle-gap + $toggle-gap / 2);
|
|
35
|
+
// left: calc($toggle-gap + .1125rem);
|
|
33
36
|
background-color: hsl(0, 0%, 100%);
|
|
34
37
|
border-color: rgba(0, 0, 0, 0.15);
|
|
35
38
|
border-radius: 9999px;
|
|
@@ -37,18 +40,18 @@ $toggle-gap: 0.25rem;
|
|
|
37
40
|
@extend .transition;
|
|
38
41
|
}
|
|
39
42
|
}
|
|
40
|
-
}
|
|
41
43
|
|
|
42
|
-
input[type="checkbox"]:checked {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
@extend .transition;
|
|
47
|
-
// toggle when checked
|
|
48
|
-
&::after {
|
|
49
|
-
// background-color: hsl(50, 10%, 10%);
|
|
50
|
-
transform: translateX(calc($toggle-body-width - $toggle-body-height));
|
|
44
|
+
input[type="checkbox"]:checked {
|
|
45
|
+
// toggle body on (checked)
|
|
46
|
+
~ div {
|
|
47
|
+
background-color: hsl(100, 70%, 40%);
|
|
51
48
|
@extend .transition;
|
|
49
|
+
// toggle when checked
|
|
50
|
+
&::after {
|
|
51
|
+
// background-color: hsl(50, 10%, 10%);
|
|
52
|
+
transform: translateX(calc($toggle-body-width - $toggle-body-height));
|
|
53
|
+
@extend .transition;
|
|
54
|
+
}
|
|
52
55
|
}
|
|
53
56
|
}
|
|
54
57
|
}
|
package/scss/play.scss
CHANGED
|
@@ -1,30 +1,15 @@
|
|
|
1
|
-
@use "./base/vars_all" as *;
|
|
2
|
-
@use "./base/vars_base" as *;
|
|
3
|
-
@use "./base/vars_utility_maps" as *;
|
|
4
|
-
@use "./functions/helpers" as *;
|
|
5
|
-
@use "./mixins/makeCssPropertyMixins" as *;
|
|
6
|
-
@use "./mixins/makeMagicClass" as *;
|
|
7
|
-
@use "./mixins/makeMagicGrid2Cols" as *;
|
|
8
|
-
@use "./mixins/media" as *;
|
|
9
|
-
@use "./mixins/positionUtilityClasses" as *;
|
|
10
|
-
@use "sass:list";
|
|
11
|
-
@use "sass:map";
|
|
12
|
-
@use "sass:string";
|
|
1
|
+
// @use "./base/vars_all" as *;
|
|
2
|
+
// @use "./base/vars_base" as *;
|
|
3
|
+
// @use "./base/vars_utility_maps" as *;
|
|
4
|
+
// @use "./functions/helpers" as *;
|
|
5
|
+
// @use "./mixins/makeCssPropertyMixins" as *;
|
|
6
|
+
// @use "./mixins/makeMagicClass" as *;
|
|
7
|
+
// @use "./mixins/makeMagicGrid2Cols" as *;
|
|
8
|
+
// @use "./mixins/media" as *;
|
|
9
|
+
// @use "./mixins/positionUtilityClasses" as *;
|
|
10
|
+
// @use "sass:list";
|
|
11
|
+
// @use "sass:map";
|
|
12
|
+
// @use "sass:string";
|
|
13
|
+
// add accordion component variables here instead of the main
|
|
13
14
|
|
|
14
|
-
$magic-width-sizes: ((16, "full"), (24, "full")) !default;
|
|
15
|
-
@include makeMagicClass("width", "w", ($magic-width-sizes));
|
|
16
15
|
|
|
17
|
-
// $magic-grid-sizes-2cols: ((25, 25), (25, 25));
|
|
18
|
-
// @include makeMagicGrid2Cols($magic-grid-sizes-2cols);
|
|
19
|
-
|
|
20
|
-
// (sfw) single fixed width
|
|
21
|
-
@media (min-width: 576px) {
|
|
22
|
-
.cols-sfw-25_25 {
|
|
23
|
-
grid-template-columns: 1fr 14rem;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
@media (min-width: 768px) {
|
|
27
|
-
.cols-sfw-25_25 {
|
|
28
|
-
grid-template-columns: 1fr 20rem;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
@@ -65,7 +65,7 @@ $grid-gap-magic-sizes: ((5, 3, 2), (5, 3), (4, 2), (3, 1)) !default;
|
|
|
65
65
|
// --------------------------------------------------------------------------
|
|
66
66
|
|
|
67
67
|
// currently starts at md, (anything under is final size) . not convinced I need to go smaller
|
|
68
|
-
$fixed-width-columns-map: ((4, 2, 1), (3, 2, 1), (2, 1)) !default;
|
|
68
|
+
$fixed-width-columns-map: ((4, 2, 1), (3, 2, 1), (3, 1, 1), (2, 1)) !default;
|
|
69
69
|
@include makeMagicGridFixedWidth($fixed-width-columns-map);
|
|
70
70
|
|
|
71
71
|
// --------------------------------------------------------------------------
|
|
@@ -18,6 +18,10 @@
|
|
|
18
18
|
.z-100 {
|
|
19
19
|
z-index: 100;
|
|
20
20
|
}
|
|
21
|
+
|
|
22
|
+
.z-top {
|
|
23
|
+
z-index: 999;
|
|
24
|
+
}
|
|
21
25
|
// ==========================================================================
|
|
22
26
|
// Element Position
|
|
23
27
|
// ==========================================================================
|
|
@@ -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!!
|