nk_jtb 0.3.0 → 0.5.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 +8 -4
- package/public/images/logo.svg +1 -25
- package/scss/_nk.scss +33 -19
- package/scss/base/_base.scss +2 -16
- 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/_accordion.scss +87 -20
- 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/_form.scss +7 -11
- package/scss/forms/_index.scss +1 -0
- package/scss/forms/_toggle.scss +57 -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 +76 -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 +15 -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.5.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/naykel76/nk_jtb.git"
|
|
@@ -11,14 +11,18 @@
|
|
|
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
|
-
"play": "sass --watch --no-source-map ./scss/
|
|
16
|
+
"play": "sass --watch --no-source-map ./scss/play.scss:dist/css/play.css",
|
|
16
17
|
"dev": "vite --open",
|
|
17
18
|
"build": "vite build",
|
|
18
19
|
"preview": "vite preview"
|
|
19
20
|
},
|
|
20
21
|
"devDependencies": {
|
|
21
|
-
"sass": "^1.
|
|
22
|
-
"vite": "^
|
|
22
|
+
"sass": "^1.60.0",
|
|
23
|
+
"vite": "^4.2.1"
|
|
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,35 @@ 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
|
+
}
|
|
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
|
@@ -123,7 +123,7 @@ pre {
|
|
|
123
123
|
// Add the correct font size in all browsers.
|
|
124
124
|
|
|
125
125
|
small {
|
|
126
|
-
font-size:
|
|
126
|
+
font-size: 75%;
|
|
127
127
|
}
|
|
128
128
|
|
|
129
129
|
// Prevent `sub` and `sup` elements from affecting the line height in all browsers.
|
|
@@ -304,25 +304,11 @@ textarea {
|
|
|
304
304
|
resize: vertical;
|
|
305
305
|
}
|
|
306
306
|
|
|
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
307
|
|
|
322
308
|
input::placeholder,
|
|
323
309
|
textarea::placeholder {
|
|
324
310
|
opacity: 1; // 1
|
|
325
|
-
color: #
|
|
311
|
+
color: #c5c5c5; // 2
|
|
326
312
|
}
|
|
327
313
|
|
|
328
314
|
// Set the default cursor for buttons.
|
|
@@ -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,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
|
}
|
|
@@ -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;
|