nk_jtb 0.3.0 → 0.4.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 +16 -71
- package/main.js +1 -0
- package/package.json +5 -1
- package/public/images/logo.svg +1 -25
- package/scss/_nk.scss +10 -19
- package/scss/base/_base.scss +1 -1
- package/scss/base/_content_gap.scss +8 -2
- package/scss/base/_vars_base.scss +15 -4
- package/scss/base/_vars_colors.scss +3 -8
- package/scss/base/_vars_components.scss +17 -32
- package/scss/base/_vars_utility_maps.scss +17 -0
- package/scss/components/_box.scss +1 -1
- package/scss/components/_button.scss +1 -12
- package/scss/components/_dropdown.scss +0 -12
- package/scss/components/_hero.scss +2 -2
- package/scss/components/_icon.scss +1 -4
- package/scss/components/_list.scss +32 -0
- package/scss/components/_menu.scss +12 -6
- package/scss/components/_navbar.scss +10 -2
- package/scss/components/_other.scss +11 -16
- package/scss/components/_sidebar.scss +20 -6
- package/scss/forms/_index.scss +1 -0
- package/scss/forms/_toggle.scss +54 -0
- package/scss/functions/_colorFunctions.scss +35 -0
- package/scss/functions/_helpers.scss +4 -0
- package/scss/jtb.scss +6 -2
- package/scss/layouts/__two-column.scss +32 -0
- package/scss/mixins/_colorSchemeSimple.scss +1 -1
- package/scss/mixins/_createState.scss +1 -1
- package/scss/mixins/_makeColorSchemeAdvanced.scss +1 -1
- package/scss/mixins/_makeCssPropertyMixins.scss +8 -3
- package/scss/mixins/_makeMagicClass.scss +61 -0
- package/scss/mixins/_makeMagicGrid2Cols.scss +70 -0
- package/scss/mixins/_makeMagicGridFixedWidth.scss +55 -0
- package/scss/mixins/_makeResponsiveClasses.scss +91 -0
- package/scss/mixins/_makeResponsivePositionUtilities.scss +3 -3
- package/scss/mixins/_media.scss +25 -24
- package/scss/play.scss +30 -0
- package/scss/utilities/_border.scss +24 -0
- package/scss/utilities/_display_visibility.scss +21 -148
- package/scss/utilities/_flex.scss +11 -1
- package/scss/utilities/_general.scss +12 -19
- package/scss/utilities/_grid.scss +44 -126
- package/scss/utilities/_opacity.scss +8 -0
- package/scss/utilities/_position.scss +11 -14
- package/scss/utilities/_sizes.scss +24 -34
- package/scss/utilities/_spacing.scss +53 -29
- package/scss/utilities/_state.scss +7 -0
- package/scss/utilities/_text.scss +39 -12
- package/scss/utilities/_themes.scss +46 -35
- package/scss/utilities/_transition.scss +5 -0
- package/scss/utilities/_translate.scss +32 -0
- package/public/images/hero-lg.jpg +0 -0
- package/public/images/hero-md.jpg +0 -0
- package/public/images/hero-sm.jpg +0 -0
- package/public/images/hero-xl.jpg +0 -0
- package/public/images/logo-alt.svg +0 -24
- package/public/images/logo.png +0 -0
- package/public/images/painting.jpg +0 -0
- package/scss/_play.scss +0 -34
- package/scss/functions/_setTextColor.scss +0 -12
- package/tests.html +0 -252
package/index.html
CHANGED
|
@@ -6,89 +6,34 @@
|
|
|
6
6
|
<link rel="icon" type="image/svg+xml" href="/nk.svg" />
|
|
7
7
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
8
8
|
<title>NayKel JTB</title>
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
<
|
|
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>
|
|
9
|
+
<link rel="stylesheet" href="">
|
|
10
|
+
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
|
|
11
|
+
<!-- <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script> -->
|
|
22
12
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
13
|
+
<style>
|
|
14
|
+
.cols-24-full {
|
|
15
|
+
/* grid-template-columns: repeat(auto-fit, minmax(25%, 400px)); */
|
|
16
|
+
grid-template-columns: 1fr minmax(24rem, 30rem);
|
|
17
|
+
}
|
|
26
18
|
|
|
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
19
|
|
|
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
20
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
<input type="text">
|
|
54
|
-
<div class="trailingAddon blue">trailing</div>
|
|
55
|
-
</div>
|
|
56
|
-
</div>
|
|
21
|
+
</style>
|
|
22
|
+
</head>
|
|
57
23
|
|
|
24
|
+
<body>
|
|
58
25
|
|
|
59
|
-
|
|
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>
|
|
26
|
+
<div class="container py-5">
|
|
68
27
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
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>
|
|
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>
|
|
84
31
|
</div>
|
|
85
32
|
|
|
86
33
|
</div>
|
|
87
34
|
|
|
88
|
-
<div id="app"
|
|
35
|
+
<div id="app"></div>
|
|
89
36
|
<script type="module" src="/main.js"></script>
|
|
90
|
-
|
|
91
|
-
|
|
92
37
|
</body>
|
|
93
38
|
|
|
94
39
|
</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.4.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/naykel76/nk_jtb.git"
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
"scripts": {
|
|
12
12
|
"border": "sass --watch --no-source-map ./scss/utilities/_border.scss:dist/css/border.css",
|
|
13
13
|
"spacing": "sass --watch --no-source-map ./scss/utilities/_spacing.scss:dist/css/spacing.css",
|
|
14
|
+
"flex": "sass --watch --no-source-map ./scss/utilities/_flex.scss:dist/css/flex.css",
|
|
14
15
|
"grid": "sass --watch --no-source-map ./scss/utilities/_grid.scss:dist/css/grid.css",
|
|
15
16
|
"play": "sass --watch --no-source-map ./scss/_play.scss:dist/css/play.css",
|
|
16
17
|
"dev": "vite --open",
|
|
@@ -20,5 +21,8 @@
|
|
|
20
21
|
"devDependencies": {
|
|
21
22
|
"sass": "^1.54.0",
|
|
22
23
|
"vite": "^3.0.0"
|
|
24
|
+
},
|
|
25
|
+
"dependencies": {
|
|
26
|
+
"alpinejs": "^3.10.5"
|
|
23
27
|
}
|
|
24
28
|
}
|
package/public/images/logo.svg
CHANGED
|
@@ -1,25 +1 @@
|
|
|
1
|
-
|
|
2
|
-
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
-
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
4
|
-
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
5
|
-
viewBox="0 0 257.14 74" xml:space="preserve">
|
|
6
|
-
<g>
|
|
7
|
-
<polyline fill="#D72638" points="145.914,42.262 140.211,48.402 140.211,63.604 129.244,63.604 129.244,10.394 140.211,10.394
|
|
8
|
-
140.211,34.514 145.037,27.9 158.6,10.394 172.095,10.394 153.193,34.039 172.641,63.604 159.59,63.604 145.914,42.262 "/>
|
|
9
|
-
<polyline fill="#D72638" points="206.746,40.545 185.688,40.545 185.688,54.797 210.4,54.797 210.4,63.604 174.72,63.604
|
|
10
|
-
174.72,10.394 210.332,10.394 210.332,19.276 185.688,19.276 185.688,31.956 206.746,31.956 206.746,40.545 "/>
|
|
11
|
-
<polyline fill="#D72638" points="223.452,54.797 246.742,54.797 246.742,63.604 212.484,63.604 212.484,10.394 223.452,10.394
|
|
12
|
-
223.452,54.797 "/>
|
|
13
|
-
<polyline fill="#13365B" points="104.095,34.366 115.171,10.394 127.163,10.394 109.687,44.311 109.687,63.604 98.536,63.604
|
|
14
|
-
98.536,44.311 81.061,10.394 93.09,10.394 104.095,34.366 "/>
|
|
15
|
-
<polygon fill="none" points="63.648,43.761 76.958,43.761 70.268,23.842 "/>
|
|
16
|
-
<path fill="#13365B" d="M75.348,10.394H65.185L45.369,63.604h11.662l3.657-10.963h19.229l3.693,10.963h11.662L75.348,10.394z
|
|
17
|
-
M63.648,43.761l6.619-19.919l6.69,19.919H63.648z"/>
|
|
18
|
-
<path fill="#D72638" d="M248.82,74c4.59,0,8.318-3.726,8.318-8.316l0,0V8.316c0-4.593-3.729-8.316-8.318-8.316l0,0H103.208
|
|
19
|
-
l24.959,8.316h118.575c1.147,0,2.078,0.931,2.078,2.078l0,0v26.604v26.605c0,1.147-0.931,2.08-2.078,2.08l0,0h-87.379L134.404,74
|
|
20
|
-
H248.82z"/>
|
|
21
|
-
<path fill="#13365B" d="M43.288,63.604H32.32L10.97,28.594v35.009c0,1.147,0.932,2.08,2.079,2.08l0,0h146.314L134.404,74H8.321
|
|
22
|
-
c-4.593,0-8.319-3.726-8.319-8.316l0,0v-55.29H10.97l21.388,35.083V8.316c0-4.593,3.729-8.316,8.32-8.316l0,0h62.53l24.959,8.316
|
|
23
|
-
H45.369c-1.147,0-2.081,0.931-2.081,2.078l0,0V63.604z"/>
|
|
24
|
-
</g>
|
|
25
|
-
</svg>
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="136" height="40" viewBox="0 0 136 40"><g transform="translate(54.585)"><g transform="translate(0)"><path d="M209.454,101.2l-3.016,3.32v8.217h-5.8V83.977h5.8V97.015l2.552-3.575,7.174-9.463H223.3l-10,12.781,10.285,15.981h-6.9L209.454,101.2" transform="translate(-186.866 -78.359)" fill="#efefef"/><path d="M260.593,100.275H249.455v7.7h13.071v4.76H243.654V83.977H262.49v4.8H249.455v6.854h11.138v4.643" transform="translate(-205.832 -78.359)" fill="#efefef"/><path d="M285.18,107.979H297.5v4.76H279.379V83.977h5.8v24" transform="translate(-221.582 -78.359)" fill="#efefef"/><path d="M253.023,114.145a4.45,4.45,0,0,0,4.4-4.495h0V78.64a4.45,4.45,0,0,0-4.4-4.5H176.008l13.2,4.5h62.715a1.111,1.111,0,0,1,1.1,1.123h0v28.762a1.113,1.113,0,0,1-1.1,1.125H205.709l-13.2,4.495Z" transform="translate(-176.008 -74.145)" fill="#efefef"/></g></g><path d="M167.241,96.935,173.1,83.977h6.343L170.2,102.31v10.429h-5.9V102.31l-9.243-18.334h6.362l5.821,12.959" transform="translate(-112.186 -78.359)" fill="#00477b"/><path d="M137.152,83.977h-5.375L121.3,112.739h6.168l1.934-5.926H139.57l1.952,5.926h6.169Zm-6.187,18.037,3.5-10.768L138,102.014Z" transform="translate(-97.302 -78.359)" fill="#00477b"/><path d="M101.275,108.525h-5.8L84.182,89.6v18.924a1.114,1.114,0,0,0,1.1,1.125h77.386l-13.2,4.495H82.782a4.45,4.45,0,0,1-4.4-4.495h0V79.763h5.8L95.494,98.727V78.64a4.45,4.45,0,0,1,4.4-4.5h33.072l13.2,4.5H102.376a1.112,1.112,0,0,0-1.1,1.123h0Z" transform="translate(-78.381 -74.145)" fill="#00477b"/></svg>
|
package/scss/_nk.scss
CHANGED
|
@@ -11,20 +11,11 @@
|
|
|
11
11
|
// NK::TD this could be made into a special layout because it
|
|
12
12
|
// could be a common pattern. Another example would be the navbar
|
|
13
13
|
|
|
14
|
-
#nk-header {
|
|
15
|
-
// background-color: $header-bg;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
14
|
// This needs to be reviewed because it is too specific and causes problems
|
|
19
15
|
// for some layouts I have removed because of the QMH site but I am not sure
|
|
20
16
|
// what else it affects
|
|
21
17
|
#nk-header,
|
|
22
18
|
#nk-header > .#{$container-class} {
|
|
23
|
-
// display: flex;
|
|
24
|
-
// justify-content: space-between;
|
|
25
|
-
// align-items: flex-start;
|
|
26
|
-
// grid-gap: 2.5rem;
|
|
27
|
-
// flex-wrap: wrap;
|
|
28
19
|
|
|
29
20
|
#search {
|
|
30
21
|
display: flex;
|
|
@@ -35,7 +26,7 @@
|
|
|
35
26
|
margin-right: 4px;
|
|
36
27
|
}
|
|
37
28
|
|
|
38
|
-
@include
|
|
29
|
+
@include to-xl {
|
|
39
30
|
flex: 1 1 100%;
|
|
40
31
|
order: 3;
|
|
41
32
|
}
|
|
@@ -52,15 +43,6 @@
|
|
|
52
43
|
background-color: $footer-bg;
|
|
53
44
|
margin-top: auto; // forces footer to the bottom
|
|
54
45
|
color: #ccc;
|
|
55
|
-
|
|
56
|
-
a {
|
|
57
|
-
color: #ccc;
|
|
58
|
-
font-size: 0.8rem;
|
|
59
|
-
|
|
60
|
-
&:hover {
|
|
61
|
-
color: #ddd;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
46
|
}
|
|
65
47
|
|
|
66
48
|
.copyright {
|
|
@@ -106,3 +88,12 @@ trix-editor {
|
|
|
106
88
|
background: white !important;
|
|
107
89
|
min-height: 100px !important;
|
|
108
90
|
}
|
|
91
|
+
|
|
92
|
+
.filepond {
|
|
93
|
+
&--root {
|
|
94
|
+
margin-bottom: 0 !important;
|
|
95
|
+
}
|
|
96
|
+
&--credits {
|
|
97
|
+
display: none;
|
|
98
|
+
}
|
|
99
|
+
}
|
package/scss/base/_base.scss
CHANGED
|
@@ -5,12 +5,18 @@
|
|
|
5
5
|
margin-top: $content-gap;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
:where(.
|
|
8
|
+
:where(.bx, .bx-title, .bx-content, .frm-row, .container) + :where(*):not(.dd-content) {
|
|
9
|
+
margin-top: $content-gap;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
// exclude section to give more control
|
|
13
|
+
:where([class^="flex"], [class^="grid"]) + :where(*):not(:is([class^="flex"], [class^="grid"], section)) {
|
|
9
14
|
margin-top: $content-gap;
|
|
10
15
|
}
|
|
11
16
|
|
|
12
17
|
// opt-out
|
|
13
|
-
:is(.flex,
|
|
18
|
+
:is(.flex, [class^="grid"]) > * {
|
|
14
19
|
margin: 0;
|
|
15
20
|
}
|
|
16
21
|
|
|
22
|
+
|
|
@@ -10,7 +10,7 @@ $img-path: "/src/images" !default;
|
|
|
10
10
|
// -- Base Styles --
|
|
11
11
|
// ==========================================================================
|
|
12
12
|
|
|
13
|
-
$base-bg: hsl(
|
|
13
|
+
$base-bg: hsl(0, 0%, 100%) !default;
|
|
14
14
|
$base-color: #333 !default;
|
|
15
15
|
|
|
16
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;
|
|
@@ -72,16 +72,22 @@ $breakpoints: map-merge($breakpoints, $breakpoints-custom);
|
|
|
72
72
|
// translate breakpoints into user friendly names for easy reference
|
|
73
73
|
// IMPORTANT: in terms of device-only, mobile is anything under 767px
|
|
74
74
|
|
|
75
|
-
$
|
|
75
|
+
$small: map-get($breakpoints, sm);
|
|
76
76
|
$tablet: map-get($breakpoints, md);
|
|
77
77
|
$laptop: map-get($breakpoints, lg);
|
|
78
78
|
$desktop: map-get($breakpoints, xl);
|
|
79
79
|
$widescreen: map-get($breakpoints, xxl);
|
|
80
80
|
|
|
81
|
+
$sm: map-get($breakpoints, sm);
|
|
82
|
+
$md: map-get($breakpoints, md);
|
|
83
|
+
$lg: map-get($breakpoints, lg);
|
|
84
|
+
$xl: map-get($breakpoints, xl);
|
|
85
|
+
$xxl: map-get($breakpoints, xxl);
|
|
86
|
+
|
|
81
87
|
// ==========================================================================
|
|
82
88
|
// -- Grid --
|
|
83
89
|
// ==========================================================================
|
|
84
|
-
$num-grid-cols:
|
|
90
|
+
$num-grid-cols: 8 !default; // number of classes to make
|
|
85
91
|
|
|
86
92
|
// ==========================================================================
|
|
87
93
|
// -- Container --
|
|
@@ -92,7 +98,12 @@ $num-grid-cols: 6 !default; // number of classes to make
|
|
|
92
98
|
// queries based on the defaults the container will be a maximum
|
|
93
99
|
// of 90% up to a maximum of 1200px
|
|
94
100
|
$container-max: 95%;
|
|
95
|
-
|
|
101
|
+
|
|
102
|
+
$container-max-lg: $lg !default; // 1200px
|
|
103
|
+
$container-max-xxl: 75rem !default; // 1200px
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
96
107
|
|
|
97
108
|
|
|
98
109
|
// ==========================================================================
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
|
|
4
4
|
$primary: hsl(201, 100%, 14%) !default;
|
|
5
5
|
$secondary: hsl(31, 100%, 48%) !default;
|
|
6
|
-
$contrast: hsl(329, 92%, 47%) !default;
|
|
7
6
|
$primary-light: lighten($primary, 10) !default;
|
|
8
7
|
|
|
9
8
|
|
|
@@ -11,7 +10,8 @@ $color-map: (
|
|
|
11
10
|
"white": #fff,
|
|
12
11
|
"red": hsl(354, 70%, 54%),
|
|
13
12
|
"green": hsl(134, 61%, 41%),
|
|
14
|
-
"blue": hsl(204, 83%, 53%),
|
|
13
|
+
// "blue": hsl(204, 83%, 53%),
|
|
14
|
+
"blue": #1e3a8a,
|
|
15
15
|
"turquoise": hsl(171, 100%, 41%),
|
|
16
16
|
"purple": hsl(261, 51%, 51%),
|
|
17
17
|
"darkblue": hsl(201, 100%, 14%),
|
|
@@ -25,6 +25,7 @@ $color-map: (
|
|
|
25
25
|
"secondary": $secondary,
|
|
26
26
|
"light": hsl(0, 0%, 98%),
|
|
27
27
|
"dark": hsl(0, 0%, 13%),
|
|
28
|
+
// "dark": hsl(221, 39%, 11%),
|
|
28
29
|
"muted": hsl(0, 4%, 51%),
|
|
29
30
|
"danger": hsl(354, 70%, 54%),
|
|
30
31
|
"success": hsl(134, 61%, 41%),
|
|
@@ -37,9 +38,3 @@ $color-map: (
|
|
|
37
38
|
"warning-light": hsl(48, 100%, 96%),
|
|
38
39
|
)!default;
|
|
39
40
|
|
|
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
|
-
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
@use "vars_base" as *;
|
|
2
2
|
@use "vars_colors" as *;
|
|
3
|
-
@use "../functions/
|
|
3
|
+
@use "../functions/colorFunctions" as *;
|
|
4
4
|
|
|
5
5
|
// box
|
|
6
6
|
// --------------------------------
|
|
@@ -14,18 +14,14 @@ $bx-title-font-size: 1.2rem !default;
|
|
|
14
14
|
|
|
15
15
|
// button
|
|
16
16
|
// --------------------------------
|
|
17
|
-
$btn-bg: rgb(
|
|
17
|
+
$btn-bg: rgb(240, 240, 240) !default;
|
|
18
18
|
$btn-color: setTextColor($btn-bg) !default;
|
|
19
19
|
|
|
20
|
-
$btn-link-color: $link-color;
|
|
21
|
-
$btn-link-hover-color: $link-hover-color;
|
|
20
|
+
$btn-link-color: $link-color !default;
|
|
21
|
+
$btn-link-hover-color: $link-hover-color !default;
|
|
22
22
|
|
|
23
23
|
$btn-text-transform: capitalize;
|
|
24
24
|
|
|
25
|
-
// dropdown
|
|
26
|
-
// --------------------------------
|
|
27
|
-
$dropdown-toggle-gap: 0.25rem !default; // gap between toggle and content
|
|
28
|
-
|
|
29
25
|
// icons
|
|
30
26
|
// --------------------------------
|
|
31
27
|
$icon-xy-sm: 1em !default;
|
|
@@ -37,44 +33,33 @@ $icon-color: inherit !default;
|
|
|
37
33
|
// menu
|
|
38
34
|
// --------------------------------
|
|
39
35
|
$menu-padding-y: 0.5rem !default;
|
|
40
|
-
$menu-padding-x: 0.
|
|
36
|
+
$menu-padding-x: 0.5rem !default;
|
|
41
37
|
|
|
42
|
-
$menu-hover-bg:
|
|
38
|
+
$menu-hover-bg: hsl(0, 0%, 95%) !default;
|
|
43
39
|
|
|
44
40
|
$menu-link-color: $base-color !default;
|
|
45
|
-
$menu-link-hover-color: $
|
|
46
|
-
|
|
47
|
-
|
|
41
|
+
$menu-link-hover-color: setTextColor($menu-hover-bg) !default;
|
|
48
42
|
|
|
49
43
|
// navbar
|
|
50
44
|
// --------------------------------
|
|
51
|
-
$navbar-bg:
|
|
45
|
+
$navbar-bg: $primary !default;
|
|
52
46
|
$navbar-padding-x: 1rem !default;
|
|
53
|
-
$navbar-padding-y: .5rem !default;
|
|
47
|
+
$navbar-padding-y: 0.5rem !default;
|
|
54
48
|
|
|
55
|
-
$navbar-nav-font-color: setTextColor($navbar-bg) !default;
|
|
56
|
-
// $navbar-nav-item-bg: transparent !default;
|
|
57
|
-
$navbar-nav-item-bg: hsl(215, 28%, 21%) !default;
|
|
58
49
|
$navbar-nav-padding-x: 1em !default;
|
|
59
50
|
$navbar-nav-padding-y: 0.75em !default;
|
|
60
51
|
|
|
61
|
-
$navbar-nav-
|
|
62
|
-
$navbar-nav-
|
|
63
|
-
// $navbar-nav-hover-color: $navbar-nav-font-color !default;
|
|
64
|
-
$navbar-nav-active-bg: rgba(0,0,0,.1) !default;
|
|
52
|
+
$navbar-nav-item-bg: $navbar-bg !default;
|
|
53
|
+
$navbar-nav-item-color: setTextColor($navbar-bg) !default;
|
|
65
54
|
|
|
55
|
+
$navbar-nav-hover-bg: darken($navbar-nav-item-bg, 3%) !default;
|
|
56
|
+
$navbar-nav-hover-color: setTextColor($navbar-bg) !default;
|
|
66
57
|
|
|
58
|
+
$navbar-nav-active-bg: $navbar-nav-hover-bg !default;
|
|
59
|
+
$navbar-nav-active-color: setTextColor($navbar-bg) !default;
|
|
67
60
|
|
|
68
61
|
// lists
|
|
69
62
|
// --------------------------------
|
|
70
|
-
|
|
71
|
-
// $color: ;
|
|
72
|
-
// $border-color: ;
|
|
73
|
-
$list-font-size: .875rem !default;
|
|
74
|
-
$list-color: rgb(44,82,130) !default;
|
|
75
|
-
|
|
76
|
-
$list-link-color: rgb(44,82,130) !default;
|
|
77
|
-
$list-link-hover-color: rgb(49,130,206) !default;
|
|
63
|
+
$icon-list-color: inherit !default;
|
|
78
64
|
|
|
79
|
-
|
|
80
|
-
// $hover-color: ;
|
|
65
|
+
$icon-tick: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path fill='#{$icon-list-color}' d='M10,0A10,10,0,1,0,20,10,10.011,10.011,0,0,0,10,0Zm5.575,6.665L9.421,13.588a.77.77,0,0,1-1.056.09L4.519,10.6A.769.769,0,0,1,5.48,9.4l3.276,2.62,5.669-6.377a.769.769,0,0,1,1.15,1.023Z'/></svg>");
|
|
@@ -46,6 +46,7 @@ $xy-positions-map: map-remove($axis-position-map, "t", "b", "l", "r");
|
|
|
46
46
|
$rem-sizes-map: (
|
|
47
47
|
"0": 0,
|
|
48
48
|
"025": 0.25rem,
|
|
49
|
+
"0375": 0.375rem,
|
|
49
50
|
"05": 0.5rem,
|
|
50
51
|
"075": 0.75rem,
|
|
51
52
|
"1": 1rem,
|
|
@@ -56,3 +57,19 @@ $rem-sizes-map: (
|
|
|
56
57
|
"5": 5rem,
|
|
57
58
|
"10": 10rem,
|
|
58
59
|
);
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
// grid column fr conversion map for two column layouts. The map key specifies the percentage width of the 1st column
|
|
63
|
+
$fr-map-2-col: (
|
|
64
|
+
20: (1fr, 4fr),
|
|
65
|
+
25: (1fr, 3fr),
|
|
66
|
+
30: (3fr, 7fr),
|
|
67
|
+
33: (1fr, 2fr),
|
|
68
|
+
40: (2fr, 3fr),
|
|
69
|
+
50: (1fr, 1fr),
|
|
70
|
+
60: (3fr, 2fr),
|
|
71
|
+
67: (2fr, 1fr),
|
|
72
|
+
70: (7fr, 3fr),
|
|
73
|
+
75: (3fr 1fr),
|
|
74
|
+
80: (4fr, 1fr)
|
|
75
|
+
);
|
|
@@ -1,22 +1,11 @@
|
|
|
1
1
|
@use "../base/vars_all" as *;
|
|
2
2
|
@use "../forms/control" as *;
|
|
3
|
-
@use "../functions/
|
|
3
|
+
@use "../functions/colorFunctions" as *;
|
|
4
4
|
@use "../mixins/createState" as *;
|
|
5
5
|
|
|
6
6
|
// base class
|
|
7
7
|
// ----------------------------
|
|
8
8
|
|
|
9
|
-
// [class*="#{$button-class}"] {
|
|
10
|
-
// &.focus,
|
|
11
|
-
// &:focus {
|
|
12
|
-
// outline: none;
|
|
13
|
-
// }
|
|
14
|
-
// }
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
// DO NOT add <button> here, it is best to add the class for more
|
|
18
|
-
// flexibility using button in livewire components
|
|
19
|
-
|
|
20
9
|
.#{$button-class} {
|
|
21
10
|
@extend %control;
|
|
22
11
|
background: $btn-bg;
|
|
@@ -16,7 +16,6 @@
|
|
|
16
16
|
opacity: 0;
|
|
17
17
|
transform: translateY(-2em);
|
|
18
18
|
top: calc(100% + 4px); // push to bottom of toggle element
|
|
19
|
-
// top: calc(100% + $dropdown-toggle-gap); // push to bottom of toggle element
|
|
20
19
|
left: 0;
|
|
21
20
|
transition: all 0.1s ease-in-out 1s, visibility 0s linear 0.1s, z-index 0s linear 0.01s;
|
|
22
21
|
z-index: 1000;
|
|
@@ -33,14 +32,3 @@
|
|
|
33
32
|
transition-delay: 0s, 0s, 0.1s; // this removes the transition delay so the menu will be visible while the other styles transition
|
|
34
33
|
}
|
|
35
34
|
}
|
|
36
|
-
|
|
37
|
-
// ?????????????
|
|
38
|
-
.dd-item {
|
|
39
|
-
letter-spacing: -0.025em;
|
|
40
|
-
line-height: 1.25rem;
|
|
41
|
-
padding: 0.25rem 0.75rem;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.dd-item:hover {
|
|
45
|
-
background-color: rgb(243, 244, 246);
|
|
46
|
-
}
|
|
@@ -16,7 +16,7 @@ $hero-gradient: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4));
|
|
|
16
16
|
font-size: 2.25rem;
|
|
17
17
|
|
|
18
18
|
// font size never is or will be a one size fits all! STOP changing!!!
|
|
19
|
-
@include from-
|
|
19
|
+
@include from-md {
|
|
20
20
|
font-size: 3rem;
|
|
21
21
|
}
|
|
22
22
|
}
|
|
@@ -27,7 +27,7 @@ $hero-gradient: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4));
|
|
|
27
27
|
color: $hero-subtitle-color;
|
|
28
28
|
font-size: 1.5rem;
|
|
29
29
|
|
|
30
|
-
@include from-
|
|
30
|
+
@include from-xl {
|
|
31
31
|
font-size: 2.1rem;
|
|
32
32
|
}
|
|
33
33
|
}
|
|
@@ -1,15 +1,12 @@
|
|
|
1
1
|
@use '../base/vars_all' as *;
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
// 1. aligns better
|
|
4
|
+
// 1. aligns better text to text when inline
|
|
5
5
|
// 2. better alignment rather than changing size
|
|
6
6
|
|
|
7
7
|
.#{$icon-class} {
|
|
8
8
|
width: $icon-xy;
|
|
9
9
|
height: $icon-xy;
|
|
10
|
-
// align-items: center;
|
|
11
|
-
// display: inline-flex;
|
|
12
|
-
// justify-content: center;
|
|
13
10
|
vertical-align: bottom; // 1
|
|
14
11
|
color: $icon-color;
|
|
15
12
|
padding: 2px; // 2
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
@use "../base/vars_colors" as *;
|
|
2
|
+
@use "../base/vars_components" as *;
|
|
3
|
+
|
|
4
|
+
// --------------------------------------------------------------------------
|
|
5
|
+
// -- TICK ICON LIST --
|
|
6
|
+
// --------------------------------------------------------------------------
|
|
7
|
+
//
|
|
8
|
+
|
|
9
|
+
.icon-list {
|
|
10
|
+
// leave as fallback?
|
|
11
|
+
// list-style: none;
|
|
12
|
+
ul {
|
|
13
|
+
margin-left: 0;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
:where(svg) {
|
|
17
|
+
margin-right: 1rem;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
& li {
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
background-repeat: no-repeat;
|
|
24
|
+
background-position: left center;
|
|
25
|
+
padding-block: 0.25rem;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&.tick-svg li {
|
|
29
|
+
background-image: $icon-tick;
|
|
30
|
+
padding-left: 2rem;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
@use "../base/vars_all" as *;
|
|
2
|
-
@use "../functions/
|
|
2
|
+
@use "../functions/colorFunctions" as *;
|
|
3
3
|
|
|
4
4
|
.menu {
|
|
5
5
|
flex-wrap: wrap;
|
|
@@ -7,23 +7,29 @@
|
|
|
7
7
|
flex-direction: column;
|
|
8
8
|
line-height: 1.25;
|
|
9
9
|
list-style: none;
|
|
10
|
+
margin-left: 0; // remove margin for ul
|
|
10
11
|
|
|
11
|
-
// add div to
|
|
12
12
|
:where(a, li a, .menu-item) {
|
|
13
|
-
color:
|
|
13
|
+
color: inherit;
|
|
14
14
|
padding: $menu-padding-y $menu-padding-x;
|
|
15
|
-
display
|
|
15
|
+
// this was initially set to display block but it is too difficult to
|
|
16
|
+
// work with icons and chevrons on the anchor element.
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
16
19
|
|
|
20
|
+
&.active,
|
|
17
21
|
&:hover {
|
|
22
|
+
cursor: pointer;
|
|
18
23
|
color: $menu-link-hover-color;
|
|
19
|
-
background: $menu-hover-bg;
|
|
24
|
+
background-color: $menu-hover-bg;
|
|
20
25
|
}
|
|
21
26
|
}
|
|
22
27
|
|
|
23
28
|
.menu-title {
|
|
24
29
|
font-weight: 600;
|
|
25
|
-
color: #7a7a7a;
|
|
26
30
|
letter-spacing: 0.05em;
|
|
31
|
+
margin-left: $menu-padding-x;
|
|
32
|
+
margin-bottom: 0.5em;
|
|
27
33
|
|
|
28
34
|
&:not(:first-child) {
|
|
29
35
|
margin-top: $content-gap;
|
|
@@ -11,8 +11,15 @@
|
|
|
11
11
|
background: $navbar-bg;
|
|
12
12
|
padding: $navbar-padding-y $navbar-padding-x;
|
|
13
13
|
position: relative;
|
|
14
|
+
box-shadow: 1px 2px 5px #2a2a2b;
|
|
14
15
|
|
|
15
|
-
|
|
16
|
+
li {
|
|
17
|
+
list-style: none;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
nav,
|
|
21
|
+
ul {
|
|
22
|
+
margin: 0; // this may be a problem for nested elements
|
|
16
23
|
display: flex;
|
|
17
24
|
}
|
|
18
25
|
|
|
@@ -20,7 +27,7 @@
|
|
|
20
27
|
padding: $navbar-nav-padding-y $navbar-nav-padding-x;
|
|
21
28
|
display: block; // 1. allowing the navbar to grow in height
|
|
22
29
|
background: $navbar-nav-item-bg;
|
|
23
|
-
color: $navbar-nav-
|
|
30
|
+
color: $navbar-nav-item-color;
|
|
24
31
|
line-height: 1.2rem;
|
|
25
32
|
|
|
26
33
|
&:hover {
|
|
@@ -29,6 +36,7 @@
|
|
|
29
36
|
}
|
|
30
37
|
|
|
31
38
|
&.active {
|
|
39
|
+
color: $navbar-nav-active-color;
|
|
32
40
|
background: $navbar-nav-active-bg;
|
|
33
41
|
}
|
|
34
42
|
}
|