nk_jtb 0.2.0 → 0.3.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/composer.lock +1286 -0
- package/index.html +85 -7
- package/main.js +1 -1
- package/package.json +4 -6
- package/scss/_nk.scss +28 -24
- package/scss/_play.scss +34 -0
- package/scss/base/_base.scss +38 -15
- package/scss/base/_content_gap.scss +1 -3
- package/scss/base/_vars_base.scss +26 -7
- package/scss/base/_vars_colors.scss +8 -1
- package/scss/base/_vars_utility_maps.scss +16 -11
- package/scss/components/_menu.scss +3 -3
- package/scss/components/_navbar.scss +0 -1
- package/scss/forms/_control.scss +4 -3
- package/scss/forms/_form.scss +36 -39
- package/scss/jtb.scss +1 -6
- package/scss/mixins/_media.scss +1 -6
- package/scss/mixins/_positionUtilityClasses.scss +5 -2
- package/scss/utilities/_border.scss +53 -65
- package/scss/utilities/{_display.scss → _display_visibility.scss} +66 -0
- package/scss/utilities/_flex.scss +10 -2
- package/scss/utilities/_general.scss +5 -4
- package/scss/utilities/_grid.scss +9 -18
- package/scss/utilities/_position.scss +5 -22
- package/scss/utilities/_sizes.scss +35 -16
- package/scss/utilities/_spacing.scss +47 -3
- package/scss/utilities/_text.scss +7 -3
- package/scss/utilities/_themes.scss +25 -10
- package/scss/layout/_grid_old.scss +0 -88
package/index.html
CHANGED
|
@@ -2,15 +2,93 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
|
|
4
4
|
<head>
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<link rel="icon" type="image/svg+xml" href="/nk.svg" />
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
8
|
+
<title>NayKel JTB</title>
|
|
9
9
|
</head>
|
|
10
10
|
|
|
11
|
-
<body>
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
<body class="py" style="vh: 500px;">
|
|
12
|
+
|
|
13
|
+
<div class="pxy-5">
|
|
14
|
+
|
|
15
|
+
<div class="bx">
|
|
16
|
+
<div class="frm-row inline">
|
|
17
|
+
<label>Label</label>
|
|
18
|
+
<div class="flex-col">
|
|
19
|
+
<input id="input" name="input" type="text" placeholder="Text Input">
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
<div class="frm-row inline">
|
|
24
|
+
<label for="input">Input</label>
|
|
25
|
+
<div class="flex-col fullwidth">
|
|
26
|
+
|
|
27
|
+
<input name="input" id="input" class="fg1 bdr-red" for="input" label="input" inline="inline" help-text="Add some help text to guide the user!">
|
|
28
|
+
<div class="help mb-025 txt-muted">
|
|
29
|
+
<small>Add some help text to guide the user!</small>
|
|
30
|
+
</div>
|
|
31
|
+
<small class="txt-red" role="alert"> The input field is required. </small>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
<div class="frm-row">
|
|
37
|
+
<div class="withAddons">
|
|
38
|
+
<div class="leadingAddon dark">leading</div>
|
|
39
|
+
<input type="text">
|
|
40
|
+
<div class="trailingAddon blue">trailing</div>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<div class="frm-row">
|
|
45
|
+
<div class="withAddons">
|
|
46
|
+
<div class="leadingAddon dark">leading</div>
|
|
47
|
+
<input type="text">
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<div class="frm-row">
|
|
52
|
+
<div class="withAddons">
|
|
53
|
+
<input type="text">
|
|
54
|
+
<div class="trailingAddon blue">trailing</div>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
<svg class="icon trailingAddon">
|
|
60
|
+
<use xlink:href="/svg/naykel-ui-SVG-sprite.svg#checked-1"></use>
|
|
61
|
+
</svg>
|
|
62
|
+
<div class="frm-row">
|
|
63
|
+
<div class="withAddons ">
|
|
64
|
+
<div class="leadingAddon ">
|
|
65
|
+
<svg class="icon">
|
|
66
|
+
<use xlink:href="/svg/naykel-ui-SVG-sprite.svg#save"></use>
|
|
67
|
+
</svg>
|
|
68
|
+
|
|
69
|
+
</div>
|
|
70
|
+
<input type="text">
|
|
71
|
+
<div class="trailingAddon blue">trailing</div>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
<hr>
|
|
76
|
+
|
|
77
|
+
<div class="frm-row inline">
|
|
78
|
+
<label for="">Inline</label>
|
|
79
|
+
<div class="withAddons">
|
|
80
|
+
<div class="leadingAddon">leading</div>
|
|
81
|
+
<input type="text">
|
|
82
|
+
<div class="trailingAddon">trailing</div>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<div id="app" class="pxy-5"></div>
|
|
89
|
+
<script type="module" src="/main.js"></script>
|
|
90
|
+
|
|
91
|
+
|
|
14
92
|
</body>
|
|
15
93
|
|
|
16
94
|
</html>
|
package/main.js
CHANGED
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.3.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/naykel76/nk_jtb.git"
|
|
@@ -9,13 +9,11 @@
|
|
|
9
9
|
"private": false,
|
|
10
10
|
"type": "module",
|
|
11
11
|
"scripts": {
|
|
12
|
-
"watch": "sass --watch --no-source-map ./scss/jtb.scss:dist/css/jtb.css",
|
|
13
12
|
"border": "sass --watch --no-source-map ./scss/utilities/_border.scss:dist/css/border.css",
|
|
14
|
-
"flex": "sass --watch --no-source-map ./scss/utilities/_flex.scss:dist/css/flex.css",
|
|
15
|
-
"grid": "sass --watch --no-source-map ./scss/utilities/_grid.scss:dist/css/grid.css",
|
|
16
13
|
"spacing": "sass --watch --no-source-map ./scss/utilities/_spacing.scss:dist/css/spacing.css",
|
|
17
|
-
"
|
|
18
|
-
"
|
|
14
|
+
"grid": "sass --watch --no-source-map ./scss/utilities/_grid.scss:dist/css/grid.css",
|
|
15
|
+
"play": "sass --watch --no-source-map ./scss/_play.scss:dist/css/play.css",
|
|
16
|
+
"dev": "vite --open",
|
|
19
17
|
"build": "vite build",
|
|
20
18
|
"preview": "vite preview"
|
|
21
19
|
},
|
package/scss/_nk.scss
CHANGED
|
@@ -1,21 +1,6 @@
|
|
|
1
1
|
@use "./base/vars_all" as *;
|
|
2
2
|
@use "./mixins/media" as *;
|
|
3
3
|
|
|
4
|
-
// ==========================================================================
|
|
5
|
-
// -- NAYKEL STYLES --
|
|
6
|
-
// ==========================================================================
|
|
7
|
-
// These styles are specific to naykel template layouts
|
|
8
|
-
|
|
9
|
-
$header-bg: #074464 !default;
|
|
10
|
-
|
|
11
|
-
$main-bg: transparent !default;
|
|
12
|
-
|
|
13
|
-
$footer-bg: #303030 !default;
|
|
14
|
-
$footer-text-color: rgb(204, 204, 204) !default;
|
|
15
|
-
|
|
16
|
-
$copyright-bg: darken($footer-bg, 2%) !default;
|
|
17
|
-
$copyright-text-color: $footer-text-color !default;
|
|
18
|
-
|
|
19
4
|
// ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
|
|
20
5
|
//
|
|
21
6
|
// It is best not to add padding to the main mk-elements, as it
|
|
@@ -28,19 +13,18 @@ $copyright-text-color: $footer-text-color !default;
|
|
|
28
13
|
|
|
29
14
|
#nk-header {
|
|
30
15
|
// background-color: $header-bg;
|
|
31
|
-
// When is adding padding here not a good idea?
|
|
32
|
-
// Why do I keep changing my mind?
|
|
33
|
-
// Should I just use a utility class?
|
|
34
|
-
padding: 2rem;
|
|
35
16
|
}
|
|
36
17
|
|
|
18
|
+
// This needs to be reviewed because it is too specific and causes problems
|
|
19
|
+
// for some layouts I have removed because of the QMH site but I am not sure
|
|
20
|
+
// what else it affects
|
|
37
21
|
#nk-header,
|
|
38
22
|
#nk-header > .#{$container-class} {
|
|
39
|
-
display: flex;
|
|
40
|
-
justify-content: space-between;
|
|
41
|
-
align-items: flex-start;
|
|
42
|
-
grid-gap: 2.5rem;
|
|
43
|
-
flex-wrap: wrap;
|
|
23
|
+
// display: flex;
|
|
24
|
+
// justify-content: space-between;
|
|
25
|
+
// align-items: flex-start;
|
|
26
|
+
// grid-gap: 2.5rem;
|
|
27
|
+
// flex-wrap: wrap;
|
|
44
28
|
|
|
45
29
|
#search {
|
|
46
30
|
display: flex;
|
|
@@ -87,6 +71,7 @@ $copyright-text-color: $footer-text-color !default;
|
|
|
87
71
|
font-size: 0.9rem;
|
|
88
72
|
border: 0; // remove border from colour scheme
|
|
89
73
|
width: 100%;
|
|
74
|
+
margin-top: 0;
|
|
90
75
|
}
|
|
91
76
|
|
|
92
77
|
.logo a:hover {
|
|
@@ -102,3 +87,22 @@ $copyright-text-color: $footer-text-color !default;
|
|
|
102
87
|
background-image: linear-gradient(to right top, #20242a, #1e1f27, #1e1a23, #1f141d, #1f0e16, #250e15, #2c0e12, #310f0c, #40140e, #4e1a0e, #5c210c, #692906);
|
|
103
88
|
}
|
|
104
89
|
}
|
|
90
|
+
|
|
91
|
+
// ==========================================================================
|
|
92
|
+
// -- BITS AND BOB'S --
|
|
93
|
+
// ==========================================================================
|
|
94
|
+
|
|
95
|
+
// make code block comments stand out
|
|
96
|
+
.hljs-comment {
|
|
97
|
+
color: hsl(120, 98%, 35%) !important;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
pre code.hljs{
|
|
101
|
+
padding: 1.5em !important;
|
|
102
|
+
line-height: 2;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
trix-editor {
|
|
106
|
+
background: white !important;
|
|
107
|
+
min-height: 100px !important;
|
|
108
|
+
}
|
package/scss/_play.scss
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
// @use "base/root";
|
|
2
|
+
// @use "base/base";
|
|
3
|
+
// @use "base/content_gap";
|
|
4
|
+
|
|
5
|
+
// // @use "nk_components";
|
|
6
|
+
// @forward "nk";
|
|
7
|
+
// @forward "forms";
|
|
8
|
+
// @forward "layout/grid_old";
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
// @forward "components/accordion";
|
|
12
|
+
// @forward "components/box";
|
|
13
|
+
// @forward "components/button";
|
|
14
|
+
// @forward "components/dropdown";
|
|
15
|
+
// @forward "components/hero"; // has problems with img
|
|
16
|
+
// @forward "components/icon";
|
|
17
|
+
// @forward "components/menu";
|
|
18
|
+
// @forward "components/navbar";
|
|
19
|
+
// @forward "components/other";
|
|
20
|
+
// @forward "components/sidebar";
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
// @forward "utilities/border";
|
|
24
|
+
// @forward "utilities/display_visibility";
|
|
25
|
+
// @forward "utilities/flex";
|
|
26
|
+
// @forward "utilities/general";
|
|
27
|
+
// @forward "utilities/grid";
|
|
28
|
+
// @forward "utilities/position";
|
|
29
|
+
// @forward "utilities/sizes";
|
|
30
|
+
@forward "utilities/spacing";
|
|
31
|
+
// @forward "utilities/state";
|
|
32
|
+
// @forward "utilities/text";
|
|
33
|
+
// @forward "utilities/themes";
|
|
34
|
+
|
package/scss/base/_base.scss
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@use "../base/vars_base" as *;
|
|
2
|
+
@use "../base/vars_colors" as *;
|
|
2
3
|
|
|
3
4
|
// 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
|
4
5
|
// 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
|
|
@@ -77,12 +78,16 @@ abbr:where([title]) {
|
|
|
77
78
|
margin-top: 2em; // 1
|
|
78
79
|
}
|
|
79
80
|
|
|
80
|
-
// DO NOT
|
|
81
|
-
//
|
|
82
|
-
a {
|
|
83
|
-
color:
|
|
81
|
+
// DO NOT reset for opt-in unless you want to keep adding and
|
|
82
|
+
// overriding classes. Use :is() makes it easier to override
|
|
83
|
+
:is(a) {
|
|
84
|
+
color: $link-color;
|
|
84
85
|
text-decoration: inherit;
|
|
85
86
|
cursor: pointer;
|
|
87
|
+
|
|
88
|
+
&:hover {
|
|
89
|
+
color: $link-hover-color;
|
|
90
|
+
}
|
|
86
91
|
}
|
|
87
92
|
|
|
88
93
|
// Add the correct font weight in Edge and Safari.
|
|
@@ -102,13 +107,13 @@ pre {
|
|
|
102
107
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; // 1
|
|
103
108
|
font-size: 0.85em; // 2
|
|
104
109
|
color: #f0506e;
|
|
105
|
-
padding: 1px 0.25rem;
|
|
106
110
|
border-radius: 0.25rem;
|
|
107
111
|
}
|
|
108
112
|
|
|
109
|
-
code
|
|
110
|
-
|
|
111
|
-
|
|
113
|
+
// this gets in the way o code highlighters
|
|
114
|
+
// code {
|
|
115
|
+
// background-color: rgb(226, 232, 240);
|
|
116
|
+
// }
|
|
112
117
|
|
|
113
118
|
pre {
|
|
114
119
|
line-height: 1.6;
|
|
@@ -257,14 +262,20 @@ summary {
|
|
|
257
262
|
// Lists
|
|
258
263
|
// ====================
|
|
259
264
|
|
|
260
|
-
// 1.
|
|
265
|
+
// 1. set style-position outside to align text on second line
|
|
266
|
+
// 2. align to other content
|
|
267
|
+
|
|
268
|
+
ul,
|
|
261
269
|
ol {
|
|
262
|
-
|
|
270
|
+
list-style-position: outside;
|
|
271
|
+
margin-left: 1rem;
|
|
263
272
|
}
|
|
264
273
|
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
274
|
+
// default lists have bullets. assumption is lists that do not
|
|
275
|
+
// require bullets will be removed in some other class
|
|
276
|
+
|
|
277
|
+
ul {
|
|
278
|
+
list-style-type: disc;
|
|
268
279
|
}
|
|
269
280
|
|
|
270
281
|
// nested lists
|
|
@@ -277,6 +288,16 @@ li ol {
|
|
|
277
288
|
margin-left: 1rem;
|
|
278
289
|
}
|
|
279
290
|
|
|
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
|
+
|
|
280
301
|
// Prevent resizing text areas horizontally by default.
|
|
281
302
|
|
|
282
303
|
textarea {
|
|
@@ -346,14 +367,16 @@ svg {
|
|
|
346
367
|
// 1. Constrain images and videos to the parent width and preserve
|
|
347
368
|
// their intrinsic aspect ratio.
|
|
348
369
|
// (https://github.com/mozdevs/cssremedy/issues/14)
|
|
349
|
-
// 2.
|
|
370
|
+
// 2. use height:auto instead of max-heigh:100% to prevent scaling
|
|
371
|
+
// issues.
|
|
350
372
|
|
|
351
373
|
img,
|
|
352
374
|
video {
|
|
353
375
|
max-width: 100%; // 1.
|
|
354
|
-
|
|
376
|
+
height: auto; // 2
|
|
355
377
|
}
|
|
356
378
|
|
|
379
|
+
|
|
357
380
|
// Ensure the default browser behavior of the `hidden` attribute.
|
|
358
381
|
|
|
359
382
|
[hidden] {
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
@use "vars_base" as *;
|
|
2
2
|
|
|
3
3
|
// any adjacent (excludes first child)
|
|
4
|
-
:where(p, pre, form, table, ol, ul, h1, h2, h3, h4, h5, h6) + * {
|
|
4
|
+
:where(blockquote, p, pre, form, table, ol, ul, h1, h2, h3, h4, h5, h6) + * {
|
|
5
5
|
margin-top: $content-gap;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
|
|
9
8
|
:where(.flex, .grid, .bx, .bx-title, .bx-content, .frm-row, .container) + :where(*):not(.dd-content) {
|
|
10
9
|
margin-top: $content-gap;
|
|
11
10
|
}
|
|
@@ -15,4 +14,3 @@
|
|
|
15
14
|
margin: 0;
|
|
16
15
|
}
|
|
17
16
|
|
|
18
|
-
// :is(.frm-row:not(* > :first-child):not(input[type="hidden"] + *)),
|
|
@@ -13,7 +13,7 @@ $img-path: "/src/images" !default;
|
|
|
13
13
|
$base-bg: hsl(64, 100%, 99%) !default;
|
|
14
14
|
$base-color: #333 !default;
|
|
15
15
|
|
|
16
|
-
$base-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
16
|
+
$base-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
|
|
17
17
|
// $base-font-family: 'Nunito', sans-serif;
|
|
18
18
|
// $base-font-family: Montserrat, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
19
19
|
$base-font-weight: normal !default;
|
|
@@ -34,6 +34,7 @@ $heading-color: inherit !default;
|
|
|
34
34
|
$heading-font-weight: 700;
|
|
35
35
|
|
|
36
36
|
$link-color: #5850ec !default;
|
|
37
|
+
// color: blueviolet;
|
|
37
38
|
$link-hover-color: indianred !default;
|
|
38
39
|
|
|
39
40
|
// ==========================================================================
|
|
@@ -55,21 +56,23 @@ $content-gap-xl: 5em;
|
|
|
55
56
|
// -- Responsive Sizes and Breakpoints --
|
|
56
57
|
// ==========================================================================
|
|
57
58
|
$breakpoints: (
|
|
58
|
-
xs: 0,
|
|
59
59
|
sm: 576px,
|
|
60
60
|
md: 768px,
|
|
61
61
|
lg: 992px,
|
|
62
62
|
xl: 1200px,
|
|
63
63
|
xxl: 1600px,
|
|
64
|
-
);
|
|
64
|
+
) !default;
|
|
65
|
+
|
|
66
|
+
// create an empty map to update or add defaults
|
|
67
|
+
$breakpoints-custom: () !default;
|
|
68
|
+
|
|
69
|
+
// merge together
|
|
70
|
+
$breakpoints: map-merge($breakpoints, $breakpoints-custom);
|
|
65
71
|
|
|
66
72
|
// translate breakpoints into user friendly names for easy reference
|
|
67
73
|
// IMPORTANT: in terms of device-only, mobile is anything under 767px
|
|
68
74
|
|
|
69
|
-
$xs: map-get($breakpoints, xs);
|
|
70
75
|
$sm: map-get($breakpoints, sm);
|
|
71
|
-
$mobile-portrait: map-get($breakpoints, xs);
|
|
72
|
-
$mobile-landscape: map-get($breakpoints, sm);
|
|
73
76
|
$tablet: map-get($breakpoints, md);
|
|
74
77
|
$laptop: map-get($breakpoints, lg);
|
|
75
78
|
$desktop: map-get($breakpoints, xl);
|
|
@@ -88,5 +91,21 @@ $num-grid-cols: 6 !default; // number of classes to make
|
|
|
88
91
|
// alway be a gap on smaller devices removing the need to media
|
|
89
92
|
// queries based on the defaults the container will be a maximum
|
|
90
93
|
// of 90% up to a maximum of 1200px
|
|
91
|
-
$container-max:
|
|
94
|
+
$container-max: 95%;
|
|
92
95
|
$container-max-widescreen: 75rem !default; // 1200px
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
// ==========================================================================
|
|
99
|
+
// -- NAYKEL STYLES --
|
|
100
|
+
// ==========================================================================
|
|
101
|
+
// These styles are specific to naykel template layouts
|
|
102
|
+
|
|
103
|
+
$header-bg: #074464 !default;
|
|
104
|
+
|
|
105
|
+
$main-bg: transparent !default;
|
|
106
|
+
|
|
107
|
+
$footer-bg: #1D1D1C !default;
|
|
108
|
+
$footer-text-color: rgb(204, 204, 204) !default;
|
|
109
|
+
|
|
110
|
+
$copyright-bg: darken($footer-bg, 2%) !default;
|
|
111
|
+
$copyright-text-color: $footer-text-color !default;
|
|
@@ -35,4 +35,11 @@ $color-map: (
|
|
|
35
35
|
"info-light": hsl(206, 70%, 96%),
|
|
36
36
|
"success-light": hsl(142, 52%, 96%),
|
|
37
37
|
"warning-light": hsl(48, 100%, 96%),
|
|
38
|
-
);
|
|
38
|
+
)!default;
|
|
39
|
+
|
|
40
|
+
// create an empty map to update or add colors
|
|
41
|
+
$color-map-custom: () !default;
|
|
42
|
+
|
|
43
|
+
// merge together
|
|
44
|
+
$color-map: map-merge($color-map, $color-map-custom);
|
|
45
|
+
|
|
@@ -2,13 +2,24 @@
|
|
|
2
2
|
@use "vars_colors" as *;
|
|
3
3
|
|
|
4
4
|
// ==========================================================================
|
|
5
|
-
// -- axis and positions map for creating position based utility
|
|
5
|
+
// -- axis and positions map for creating position based utility
|
|
6
|
+
// classes --
|
|
6
7
|
// ==========================================================================
|
|
7
|
-
// uses 'direction' or 'axis' for the key and lists the
|
|
8
|
-
//
|
|
9
|
-
|
|
8
|
+
// uses 'direction' or 'axis' for the key and lists the css
|
|
9
|
+
// 'positions' required to build
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
// !--IMPORTANT--!
|
|
14
|
+
// The order of this map matters
|
|
10
15
|
|
|
11
16
|
$axis-position-map: (
|
|
17
|
+
"xy": (
|
|
18
|
+
"top",
|
|
19
|
+
"bottom",
|
|
20
|
+
"left",
|
|
21
|
+
"right",
|
|
22
|
+
),
|
|
12
23
|
"x": (
|
|
13
24
|
"left",
|
|
14
25
|
"right",
|
|
@@ -17,12 +28,6 @@ $axis-position-map: (
|
|
|
17
28
|
"top",
|
|
18
29
|
"bottom",
|
|
19
30
|
),
|
|
20
|
-
"xy": (
|
|
21
|
-
"top",
|
|
22
|
-
"bottom",
|
|
23
|
-
"left",
|
|
24
|
-
"right",
|
|
25
|
-
),
|
|
26
31
|
"t": "top",
|
|
27
32
|
"b": "bottom",
|
|
28
33
|
"l": "left",
|
|
@@ -32,7 +37,6 @@ $axis-position-map: (
|
|
|
32
37
|
$tblr-positions-map: map-remove($axis-position-map, "x", "y");
|
|
33
38
|
$xy-positions-map: map-remove($axis-position-map, "t", "b", "l", "r");
|
|
34
39
|
|
|
35
|
-
|
|
36
40
|
// --------------------------------------------------------------
|
|
37
41
|
// rem sizes map commonly used (but not limited) for creating
|
|
38
42
|
// margin and padding utilities
|
|
@@ -50,4 +54,5 @@ $rem-sizes-map: (
|
|
|
50
54
|
"3": 3rem,
|
|
51
55
|
"4": 4rem,
|
|
52
56
|
"5": 5rem,
|
|
57
|
+
"10": 10rem,
|
|
53
58
|
);
|
|
@@ -8,11 +8,11 @@
|
|
|
8
8
|
line-height: 1.25;
|
|
9
9
|
list-style: none;
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
// add div to
|
|
12
|
+
:where(a, li a, .menu-item) {
|
|
13
13
|
color: $menu-link-color;
|
|
14
14
|
padding: $menu-padding-y $menu-padding-x;
|
|
15
|
-
|
|
15
|
+
display: block;
|
|
16
16
|
|
|
17
17
|
&:hover {
|
|
18
18
|
color: $menu-link-hover-color;
|
package/scss/forms/_control.scss
CHANGED
|
@@ -28,7 +28,10 @@ $ctrl-line-height: 1.5 !default;
|
|
|
28
28
|
// 1. line height is required to get consistent heights
|
|
29
29
|
// 2. creates control and button sizes sm, md, lg
|
|
30
30
|
%control {
|
|
31
|
-
border: $ctrl-border;
|
|
31
|
+
border-top: $ctrl-border;
|
|
32
|
+
border-bottom: $ctrl-border;
|
|
33
|
+
border-left: $ctrl-border;
|
|
34
|
+
border-right: $ctrl-border;
|
|
32
35
|
border-radius: $ctrl-border-radius;
|
|
33
36
|
font-size: $ctrl-font-size;
|
|
34
37
|
padding: $ctrl-padding-y $ctrl-padding-x;
|
|
@@ -37,7 +40,6 @@ $ctrl-line-height: 1.5 !default;
|
|
|
37
40
|
align-items: center;
|
|
38
41
|
position: relative;
|
|
39
42
|
background-color: $ctrl-bg-color;
|
|
40
|
-
// cursor: text;
|
|
41
43
|
|
|
42
44
|
// create control sizes
|
|
43
45
|
@each $size, $value in $control-sizes {
|
|
@@ -47,4 +49,3 @@ $ctrl-line-height: 1.5 !default;
|
|
|
47
49
|
}
|
|
48
50
|
}
|
|
49
51
|
|
|
50
|
-
// use button hover styles?
|
package/scss/forms/_form.scss
CHANGED
|
@@ -57,59 +57,56 @@ select {
|
|
|
57
57
|
gap: 1rem;
|
|
58
58
|
|
|
59
59
|
label {
|
|
60
|
-
width:
|
|
60
|
+
width: 10rem; // use flex-basis to override
|
|
61
61
|
flex-shrink: 0; // prevent shrink for 100%
|
|
62
62
|
margin-top: 4px; // better alignment
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
//
|
|
78
|
-
// 2. allow everything to align vertically
|
|
79
|
-
// 3. inputs using trailing icons must be 100%
|
|
80
|
-
|
|
81
|
-
.with-addons {
|
|
82
|
-
position: relative;
|
|
83
|
-
display: flex; // 1.
|
|
84
|
-
align-items: center; // 1.
|
|
85
|
-
|
|
86
|
-
.leadingAddon,
|
|
87
|
-
.trailingAddon {
|
|
88
|
-
position: absolute;
|
|
89
|
-
pointer-events: none;
|
|
90
|
-
// z-index: 10;
|
|
91
|
-
color: $placeholder-color;
|
|
92
|
-
line-height: 1; // 2.
|
|
67
|
+
.withAddons {
|
|
68
|
+
display: flex;
|
|
69
|
+
align-items: center;
|
|
70
|
+
flex: 1 1 0%;
|
|
71
|
+
|
|
72
|
+
input {
|
|
73
|
+
flex-grow: 1;
|
|
74
|
+
// border-top-left-radius: 0;
|
|
75
|
+
// border-bottom-left-radius: 0;
|
|
76
|
+
// border-top-right-radius: 0;
|
|
77
|
+
// border-bottom-right-radius: 0;
|
|
93
78
|
}
|
|
94
79
|
|
|
95
80
|
.leadingAddon {
|
|
96
|
-
left: $
|
|
81
|
+
border-top-left-radius: $ctrl-border-radius;
|
|
82
|
+
border-bottom-left-radius: $ctrl-border-radius;
|
|
97
83
|
}
|
|
98
84
|
|
|
99
85
|
.trailingAddon {
|
|
100
|
-
right: $
|
|
86
|
+
border-top-right-radius: $ctrl-border-radius;
|
|
87
|
+
border-bottom-right-radius: $ctrl-border-radius;
|
|
101
88
|
}
|
|
102
89
|
|
|
103
|
-
//
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
90
|
+
// style addons the same as the control
|
|
91
|
+
.leadingAddon,
|
|
92
|
+
.trailingAddon {
|
|
93
|
+
border: $ctrl-border;
|
|
94
|
+
font-size: $ctrl-font-size;
|
|
95
|
+
padding: $ctrl-padding-y $ctrl-padding-x;
|
|
96
|
+
line-height: $ctrl-line-height; // 1
|
|
97
|
+
display: inline-flex;
|
|
110
98
|
}
|
|
99
|
+
}
|
|
111
100
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
101
|
+
|
|
102
|
+
.withAddons:has(.leadingAddon){
|
|
103
|
+
background: green;
|
|
115
104
|
}
|
|
105
|
+
// the width of the addon will vary depending on the content
|
|
106
|
+
// :where(input) {
|
|
107
|
+
// padding-left: 2rem;
|
|
108
|
+
// width: 100%; // 3.
|
|
109
|
+
// &:focus ~ * {
|
|
110
|
+
// color: rgb(73, 73, 73);
|
|
111
|
+
// }
|
|
112
|
+
// }
|