nk_jtb 0.2.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/composer.lock +1286 -0
- package/index.html +29 -6
- package/main.js +2 -1
- package/package.json +7 -5
- package/public/images/logo.svg +1 -25
- package/scss/_nk.scss +33 -38
- package/scss/base/_base.scss +39 -16
- package/scss/base/_content_gap.scss +8 -4
- package/scss/base/_vars_base.scss +41 -11
- package/scss/base/_vars_colors.scss +5 -3
- package/scss/base/_vars_components.scss +17 -32
- package/scss/base/_vars_utility_maps.scss +33 -11
- 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 +13 -7
- package/scss/components/_navbar.scss +10 -3
- package/scss/components/_other.scss +11 -16
- package/scss/components/_sidebar.scss +20 -6
- package/scss/forms/_control.scss +4 -3
- package/scss/forms/_form.scss +36 -39
- 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 +7 -8
- 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 +23 -27
- package/scss/mixins/_positionUtilityClasses.scss +5 -2
- package/scss/play.scss +30 -0
- package/scss/utilities/_border.scss +76 -64
- package/scss/utilities/_display_visibility.scss +66 -0
- package/scss/utilities/_flex.scss +21 -3
- package/scss/utilities/_general.scss +15 -21
- package/scss/utilities/_grid.scss +44 -135
- package/scss/utilities/_opacity.scss +8 -0
- package/scss/utilities/_position.scss +16 -36
- package/scss/utilities/_sizes.scss +32 -23
- package/scss/utilities/_spacing.scss +95 -27
- package/scss/utilities/_state.scss +7 -0
- package/scss/utilities/_text.scss +44 -13
- package/scss/utilities/_themes.scss +69 -43
- 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/functions/_setTextColor.scss +0 -12
- package/scss/layout/_grid_old.scss +0 -88
- package/scss/utilities/_display.scss +0 -127
- package/tests.html +0 -252
package/index.html
CHANGED
|
@@ -2,15 +2,38 @@
|
|
|
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
|
+
<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> -->
|
|
12
|
+
|
|
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
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
</style>
|
|
9
22
|
</head>
|
|
10
23
|
|
|
11
24
|
<body>
|
|
12
|
-
|
|
13
|
-
|
|
25
|
+
|
|
26
|
+
<div class="container py-5">
|
|
27
|
+
|
|
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
|
+
</div>
|
|
32
|
+
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<div id="app"></div>
|
|
36
|
+
<script type="module" src="/main.js"></script>
|
|
14
37
|
</body>
|
|
15
38
|
|
|
16
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"
|
|
@@ -9,18 +9,20 @@
|
|
|
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",
|
|
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
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"dev": "vite",
|
|
16
|
+
"play": "sass --watch --no-source-map ./scss/_play.scss:dist/css/play.css",
|
|
17
|
+
"dev": "vite --open",
|
|
19
18
|
"build": "vite build",
|
|
20
19
|
"preview": "vite preview"
|
|
21
20
|
},
|
|
22
21
|
"devDependencies": {
|
|
23
22
|
"sass": "^1.54.0",
|
|
24
23
|
"vite": "^3.0.0"
|
|
24
|
+
},
|
|
25
|
+
"dependencies": {
|
|
26
|
+
"alpinejs": "^3.10.5"
|
|
25
27
|
}
|
|
26
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
|
@@ -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
|
|
@@ -26,21 +11,11 @@ $copyright-text-color: $footer-text-color !default;
|
|
|
26
11
|
// NK::TD this could be made into a special layout because it
|
|
27
12
|
// could be a common pattern. Another example would be the navbar
|
|
28
13
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
// Why do I keep changing my mind?
|
|
33
|
-
// Should I just use a utility class?
|
|
34
|
-
padding: 2rem;
|
|
35
|
-
}
|
|
36
|
-
|
|
14
|
+
// This needs to be reviewed because it is too specific and causes problems
|
|
15
|
+
// for some layouts I have removed because of the QMH site but I am not sure
|
|
16
|
+
// what else it affects
|
|
37
17
|
#nk-header,
|
|
38
18
|
#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;
|
|
44
19
|
|
|
45
20
|
#search {
|
|
46
21
|
display: flex;
|
|
@@ -51,7 +26,7 @@ $copyright-text-color: $footer-text-color !default;
|
|
|
51
26
|
margin-right: 4px;
|
|
52
27
|
}
|
|
53
28
|
|
|
54
|
-
@include
|
|
29
|
+
@include to-xl {
|
|
55
30
|
flex: 1 1 100%;
|
|
56
31
|
order: 3;
|
|
57
32
|
}
|
|
@@ -68,15 +43,6 @@ $copyright-text-color: $footer-text-color !default;
|
|
|
68
43
|
background-color: $footer-bg;
|
|
69
44
|
margin-top: auto; // forces footer to the bottom
|
|
70
45
|
color: #ccc;
|
|
71
|
-
|
|
72
|
-
a {
|
|
73
|
-
color: #ccc;
|
|
74
|
-
font-size: 0.8rem;
|
|
75
|
-
|
|
76
|
-
&:hover {
|
|
77
|
-
color: #ddd;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
46
|
}
|
|
81
47
|
|
|
82
48
|
.copyright {
|
|
@@ -87,6 +53,7 @@ $copyright-text-color: $footer-text-color !default;
|
|
|
87
53
|
font-size: 0.9rem;
|
|
88
54
|
border: 0; // remove border from colour scheme
|
|
89
55
|
width: 100%;
|
|
56
|
+
margin-top: 0;
|
|
90
57
|
}
|
|
91
58
|
|
|
92
59
|
.logo a:hover {
|
|
@@ -102,3 +69,31 @@ $copyright-text-color: $footer-text-color !default;
|
|
|
102
69
|
background-image: linear-gradient(to right top, #20242a, #1e1f27, #1e1a23, #1f141d, #1f0e16, #250e15, #2c0e12, #310f0c, #40140e, #4e1a0e, #5c210c, #692906);
|
|
103
70
|
}
|
|
104
71
|
}
|
|
72
|
+
|
|
73
|
+
// ==========================================================================
|
|
74
|
+
// -- BITS AND BOB'S --
|
|
75
|
+
// ==========================================================================
|
|
76
|
+
|
|
77
|
+
// make code block comments stand out
|
|
78
|
+
.hljs-comment {
|
|
79
|
+
color: hsl(120, 98%, 35%) !important;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
pre code.hljs{
|
|
83
|
+
padding: 1.5em !important;
|
|
84
|
+
line-height: 2;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
trix-editor {
|
|
88
|
+
background: white !important;
|
|
89
|
+
min-height: 100px !important;
|
|
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
|
@@ -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;
|
|
@@ -118,7 +123,7 @@ pre {
|
|
|
118
123
|
// Add the correct font size in all browsers.
|
|
119
124
|
|
|
120
125
|
small {
|
|
121
|
-
font-size:
|
|
126
|
+
font-size: 75%;
|
|
122
127
|
}
|
|
123
128
|
|
|
124
129
|
// Prevent `sub` and `sup` elements from affecting the line height in all browsers.
|
|
@@ -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,18 +1,22 @@
|
|
|
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
|
+
:where(.bx, .bx-title, .bx-content, .frm-row, .container) + :where(*):not(.dd-content) {
|
|
9
|
+
margin-top: $content-gap;
|
|
10
|
+
}
|
|
8
11
|
|
|
9
|
-
|
|
12
|
+
// exclude section to give more control
|
|
13
|
+
:where([class^="flex"], [class^="grid"]) + :where(*):not(:is([class^="flex"], [class^="grid"], section)) {
|
|
10
14
|
margin-top: $content-gap;
|
|
11
15
|
}
|
|
12
16
|
|
|
13
17
|
// opt-out
|
|
14
|
-
:is(.flex,
|
|
18
|
+
:is(.flex, [class^="grid"]) > * {
|
|
15
19
|
margin: 0;
|
|
16
20
|
}
|
|
17
21
|
|
|
18
|
-
|
|
22
|
+
|
|
@@ -10,10 +10,10 @@ $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
|
-
$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,30 +56,38 @@ $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
|
-
$
|
|
70
|
-
$sm: map-get($breakpoints, sm);
|
|
71
|
-
$mobile-portrait: map-get($breakpoints, xs);
|
|
72
|
-
$mobile-landscape: map-get($breakpoints, sm);
|
|
75
|
+
$small: 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);
|
|
76
79
|
$widescreen: map-get($breakpoints, xxl);
|
|
77
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
|
+
|
|
78
87
|
// ==========================================================================
|
|
79
88
|
// -- Grid --
|
|
80
89
|
// ==========================================================================
|
|
81
|
-
$num-grid-cols:
|
|
90
|
+
$num-grid-cols: 8 !default; // number of classes to make
|
|
82
91
|
|
|
83
92
|
// ==========================================================================
|
|
84
93
|
// -- Container --
|
|
@@ -88,5 +97,26 @@ $num-grid-cols: 6 !default; // number of classes to make
|
|
|
88
97
|
// alway be a gap on smaller devices removing the need to media
|
|
89
98
|
// queries based on the defaults the container will be a maximum
|
|
90
99
|
// of 90% up to a maximum of 1200px
|
|
91
|
-
$container-max:
|
|
92
|
-
|
|
100
|
+
$container-max: 95%;
|
|
101
|
+
|
|
102
|
+
$container-max-lg: $lg !default; // 1200px
|
|
103
|
+
$container-max-xxl: 75rem !default; // 1200px
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
// ==========================================================================
|
|
110
|
+
// -- NAYKEL STYLES --
|
|
111
|
+
// ==========================================================================
|
|
112
|
+
// These styles are specific to naykel template layouts
|
|
113
|
+
|
|
114
|
+
$header-bg: #074464 !default;
|
|
115
|
+
|
|
116
|
+
$main-bg: transparent !default;
|
|
117
|
+
|
|
118
|
+
$footer-bg: #1D1D1C !default;
|
|
119
|
+
$footer-text-color: rgb(204, 204, 204) !default;
|
|
120
|
+
|
|
121
|
+
$copyright-bg: darken($footer-bg, 2%) !default;
|
|
122
|
+
$copyright-text-color: $footer-text-color !default;
|
|
@@ -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%),
|
|
@@ -35,4 +36,5 @@ $color-map: (
|
|
|
35
36
|
"info-light": hsl(206, 70%, 96%),
|
|
36
37
|
"success-light": hsl(142, 52%, 96%),
|
|
37
38
|
"warning-light": hsl(48, 100%, 96%),
|
|
38
|
-
);
|
|
39
|
+
)!default;
|
|
40
|
+
|
|
@@ -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>");
|
|
@@ -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
|
|
@@ -42,6 +46,7 @@ $xy-positions-map: map-remove($axis-position-map, "t", "b", "l", "r");
|
|
|
42
46
|
$rem-sizes-map: (
|
|
43
47
|
"0": 0,
|
|
44
48
|
"025": 0.25rem,
|
|
49
|
+
"0375": 0.375rem,
|
|
45
50
|
"05": 0.5rem,
|
|
46
51
|
"075": 0.75rem,
|
|
47
52
|
"1": 1rem,
|
|
@@ -50,4 +55,21 @@ $rem-sizes-map: (
|
|
|
50
55
|
"3": 3rem,
|
|
51
56
|
"4": 4rem,
|
|
52
57
|
"5": 5rem,
|
|
58
|
+
"10": 10rem,
|
|
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)
|
|
53
75
|
);
|