nk_jtb 0.8.1 → 0.8.3
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 +1 -75
- package/package.json +1 -1
- package/src/_nk.scss +10 -0
- package/src/components/_button.scss +1 -1
- package/src/forms/_choices.scss +1 -1
- package/src/{scss/forms → forms}/_control.scss +3 -2
- package/src/forms/_form.scss +1 -1
- package/src/functions/_colorFunctions.scss +10 -4
- package/src/play.scss +9 -4
- package/src/scss/utilities/_grid.scss +0 -18
- package/src/scss/utilities/_sizes.scss +1 -14
- package/src/scss/utilities/_spacing.scss +5 -0
- package/src/utilities/_grid.scss +29 -1
- package/src/utilities/_size.scss +1 -29
package/index.html
CHANGED
|
@@ -10,81 +10,7 @@
|
|
|
10
10
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
11
11
|
</head>
|
|
12
12
|
|
|
13
|
-
<body
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
<style>
|
|
17
|
-
@keyframes pulse {
|
|
18
|
-
50% {
|
|
19
|
-
opacity: .5
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.animate-pulse-slow {
|
|
24
|
-
animation: pulse 13s ease-in-out infinite;
|
|
25
|
-
}
|
|
26
|
-
</style>
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
<section class="light bdr-0">
|
|
30
|
-
|
|
31
|
-
<div class="container flex gg-5">
|
|
32
|
-
<div class="relative">
|
|
33
|
-
<img src="/images/naykel-400.png" alt="naykel">
|
|
34
|
-
<img style=" position: absolute; width: 700px; height: 700px; left: -5%; bottom: -240px; animation-duration: 44s; " src="/svg/blur-red.svg" class="animate-pulse-slow">
|
|
35
|
-
</div>
|
|
36
|
-
<div>
|
|
37
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique vel ratione eius veniam sapiente corporis quod nihil, quos perspiciatis expedita!</p>
|
|
38
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda reiciendis, mollitia sed non corporis ex quasi vel aperiam sequi autem consectetur adipisci eligendi ipsum labore aliquid est at nesciunt quia porro neque nihil impedit. Ipsam dolorem libero consectetur ut expedita.</p>
|
|
39
|
-
</div>
|
|
40
|
-
</div>
|
|
41
|
-
|
|
42
|
-
</section>
|
|
43
|
-
|
|
44
|
-
<div class="relative overflow-x-clip h-24">
|
|
45
|
-
|
|
46
|
-
<img style=" position: absolute; width: 700px; height: 700px; left: -5%; bottom: -240px; animation-duration: 4s; " src="/svg/blur-red.svg" class="animate-pulse-slow">
|
|
47
|
-
<img style="
|
|
48
|
-
position: absolute;
|
|
49
|
-
width: 700px;
|
|
50
|
-
height: 700px;
|
|
51
|
-
right: 200px;
|
|
52
|
-
bottom: -120px;
|
|
53
|
-
animation-duration: 5s;
|
|
54
|
-
animation-delay: 1.5s;
|
|
55
|
-
" src="/svg/blur-red.svg" class="animate-pulse-slow">
|
|
56
|
-
|
|
57
|
-
</div>
|
|
58
|
-
|
|
59
|
-
<div class="relative overflow-x-clip h-24 light">
|
|
60
|
-
|
|
61
|
-
<img style="
|
|
62
|
-
position: absolute;
|
|
63
|
-
width: 700px;
|
|
64
|
-
height: 700px;
|
|
65
|
-
right: -5%;
|
|
66
|
-
bottom: -240px;
|
|
67
|
-
animation-duration: 4s;
|
|
68
|
-
" src="/svg/blur-red.svg" class="animate-pulse-slow">
|
|
69
|
-
|
|
70
|
-
<img style="
|
|
71
|
-
position: absolute;
|
|
72
|
-
width: 700px;
|
|
73
|
-
height: 700px;
|
|
74
|
-
right: 200px;
|
|
75
|
-
bottom: -120px;
|
|
76
|
-
animation-duration: 5s;
|
|
77
|
-
animation-delay: 1.5s;
|
|
78
|
-
" src="/svg/blur-red.svg" class="animate-pulse-slow">
|
|
79
|
-
|
|
80
|
-
</div>
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
<!-- <img src="/svg/blur-red.svg" class="animate-pulse-slow">
|
|
85
|
-
|
|
86
|
-
<img style=" animation-duration: 30s; " src="/svg/blur.svg" class="animate-pulse-slow"> -->
|
|
87
|
-
|
|
13
|
+
<body>
|
|
88
14
|
<div>
|
|
89
15
|
<header id="nk-header" class="container py">
|
|
90
16
|
<div class="container flex space-between">
|
package/package.json
CHANGED
package/src/_nk.scss
CHANGED
|
@@ -64,6 +64,10 @@ code-first-second-col {
|
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
+
#toc {
|
|
68
|
+
margin-bottom: 1.5em;
|
|
69
|
+
}
|
|
70
|
+
|
|
67
71
|
// this is a hack solution to an ugly problem when using x-gt-markdown
|
|
68
72
|
.markdown pre {
|
|
69
73
|
overflow: auto;
|
|
@@ -89,6 +93,12 @@ code-first-second-col {
|
|
|
89
93
|
.-ml-7 pre code {
|
|
90
94
|
margin-left: -7rem;
|
|
91
95
|
}
|
|
96
|
+
.-ml-8 pre code {
|
|
97
|
+
margin-left: -8rem;
|
|
98
|
+
}
|
|
99
|
+
.-ml-9 pre code {
|
|
100
|
+
margin-left: -9rem;
|
|
101
|
+
}
|
|
92
102
|
|
|
93
103
|
tab-size: 0;
|
|
94
104
|
table {
|
package/src/forms/_choices.scss
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@use "sass:color";
|
|
2
2
|
@use '../functions/colorFunctions' as *;
|
|
3
3
|
@use '../base/vars_base' as *;
|
|
4
|
-
@use '../
|
|
4
|
+
@use '../forms/control' as *; // gives access access to variables
|
|
5
5
|
|
|
6
6
|
$choices-selector: "choices" !default;
|
|
7
7
|
$choices-font-size-lg: 16px !default;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
@use '
|
|
1
|
+
@use '../functions/colorFunctions' as *;
|
|
2
|
+
|
|
2
3
|
$ctrl-border-radius: 0.25rem !default;
|
|
3
4
|
$ctrl-border: 1px solid rgba(0, 0, 0, 0.15);
|
|
4
5
|
|
|
@@ -10,7 +11,7 @@ $ctrl-bg-color: #fff !default;
|
|
|
10
11
|
$ctrl-color: setTextColor($ctrl-bg-color) !default;
|
|
11
12
|
|
|
12
13
|
// Control and Button padding use em making them relative to the font-size
|
|
13
|
-
$ctrl-padding-x:
|
|
14
|
+
$ctrl-padding-x: 1rem !default;
|
|
14
15
|
$ctrl-padding-y: 0.625em !default;
|
|
15
16
|
|
|
16
17
|
$control-sizes: (
|
package/src/forms/_form.scss
CHANGED
|
@@ -4,8 +4,14 @@
|
|
|
4
4
|
// set text colour based on the background
|
|
5
5
|
// ------------------------------------------------------------------
|
|
6
6
|
|
|
7
|
-
@function setTextColor($
|
|
8
|
-
|
|
7
|
+
@function setTextColor($bg) {
|
|
8
|
+
|
|
9
|
+
// return the default color if transparent
|
|
10
|
+
@if alpha($bg) == 0 {
|
|
11
|
+
@return $text;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
$color-brightness: round((red($bg) * 299) + (green($bg) * 587) + calc((blue($bg) * 114) / 1000));
|
|
9
15
|
$light-color: round((red(#ffffff) * 299) + (green(#ffffff) * 587) + calc((blue(#ffffff) * 114) / 1000));
|
|
10
16
|
// if background is dark, then the text color should be light
|
|
11
17
|
@if abs($color-brightness) < calc($light-color / 2) {
|
|
@@ -32,8 +38,8 @@
|
|
|
32
38
|
// have a low lightness, and visa-versa, but it is good enough.
|
|
33
39
|
//
|
|
34
40
|
|
|
35
|
-
@function setBorderShadeColor($
|
|
36
|
-
$lightness: lightness($
|
|
41
|
+
@function setBorderShadeColor($bg, $opacity: 0.15) {
|
|
42
|
+
$lightness: lightness($bg);
|
|
37
43
|
@if ($lightness > 50) {
|
|
38
44
|
@return rgba(0, 0, 0, $opacity); // Black
|
|
39
45
|
} @else {
|
package/src/play.scss
CHANGED
|
@@ -12,20 +12,25 @@
|
|
|
12
12
|
// @use "./color/shades" as *;
|
|
13
13
|
// @use "./color/tailwind-colors" as *;
|
|
14
14
|
// @use "./color/themes" as *;
|
|
15
|
-
// @use "./functions/colorFunctions" as *;
|
|
16
15
|
// @use "./functions/colorShades" as *;
|
|
17
|
-
@use "./functions/helpers" as *;
|
|
18
16
|
// @use "./mixins/basicColorScheme" as *;
|
|
19
17
|
// @use "./mixins/extendedThemeClass" as *;
|
|
20
|
-
@use "./mixins/helpers" as *;
|
|
21
|
-
@use "./mixins/utilityClassCreators" as *;
|
|
22
18
|
// @use "./mixins/media" as *;
|
|
23
19
|
// @use "./mixins/responsiveClassCreators" as *;
|
|
24
20
|
// @use "./scss/components/button"as *;
|
|
25
21
|
// @use "./scss/utilities/spacing" as *;
|
|
26
22
|
// @use "./utilities/grid" as *;
|
|
27
23
|
// @use "./utilities/text" as *;
|
|
24
|
+
@use "./functions/colorFunctions" as *;
|
|
25
|
+
@use "./functions/helpers" as *;
|
|
26
|
+
@use "./mixins/helpers" as *;
|
|
27
|
+
@use "./mixins/utilityClassCreators" as *;
|
|
28
28
|
@use "sass:list";
|
|
29
29
|
@use "sass:map";
|
|
30
30
|
@use "sass:string";
|
|
31
31
|
|
|
32
|
+
$x: setTextColor(transparent) !default;
|
|
33
|
+
|
|
34
|
+
@debug $x;
|
|
35
|
+
|
|
36
|
+
|
|
@@ -16,24 +16,6 @@
|
|
|
16
16
|
|
|
17
17
|
$equal-width-magic-columns: ((4, 2, 1), (4, 3, 2, 1), (3, 2, 1), (3, 1, 1), (2, 1)) !default;
|
|
18
18
|
$grid-gap-magic-sizes: ((5, 3, 2), (5, 3), (4, 2), (3, 1)) !default;
|
|
19
|
-
$grid-gap-sizes: (0, 0.5, 1, 1.25, 1.5, 2, 3, 4, 5) !default;
|
|
20
|
-
|
|
21
|
-
// ------------------------------------------------------------------
|
|
22
|
-
// -- GRID GAP --
|
|
23
|
-
// ------------------------------------------------------------------
|
|
24
|
-
|
|
25
|
-
@each $size in $grid-gap-sizes {
|
|
26
|
-
$class: escapeDecimal($size);
|
|
27
|
-
|
|
28
|
-
.grid-#{$class} {
|
|
29
|
-
display: grid;
|
|
30
|
-
gap: #{$size}rem;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.gg-#{$class} {
|
|
34
|
-
gap: #{$size}rem;
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
19
|
|
|
38
20
|
// ------------------------------------------------------------------
|
|
39
21
|
// -- MAGIC CLASSES --
|
|
@@ -89,22 +89,9 @@ $fractional-sizes: (1\/4: 25%, 1\/3: 33.33%, 1\/2: 50%, 3\/4: 75%);
|
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
91
|
|
|
92
|
-
$v-heights: (
|
|
93
|
-
60: 60vh,
|
|
94
|
-
80: 80vh,
|
|
95
|
-
100: 100vh,
|
|
96
|
-
);
|
|
97
|
-
|
|
98
|
-
// vertical heights
|
|
99
|
-
// ----------------------------
|
|
100
|
-
@each $key, $value in $v-heights {
|
|
101
|
-
.vh#{$key} {
|
|
102
|
-
height: $value;
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
|
|
106
92
|
$max-min-sizes: (
|
|
107
93
|
200: 200px,
|
|
94
|
+
250: 250px,
|
|
108
95
|
300: 300px,
|
|
109
96
|
400: 400px,
|
|
110
97
|
600: 600px,
|
package/src/utilities/_grid.scss
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
@use "../config" as *;
|
|
2
2
|
@use "../functions/get" as *;
|
|
3
|
+
@use "../functions/helpers" as *;
|
|
3
4
|
@use "../mixins/media" as *;
|
|
4
5
|
|
|
5
6
|
$num-grid-cols: get("grid.num-grid-cols", $config);
|
|
6
7
|
|
|
7
8
|
// ------------------------------------------------------------------
|
|
8
|
-
// --
|
|
9
|
+
// -- GRID --
|
|
9
10
|
// ------------------------------------------------------------------
|
|
10
11
|
.grid {
|
|
11
12
|
display: grid;
|
|
@@ -16,6 +17,30 @@ $num-grid-cols: get("grid.num-grid-cols", $config);
|
|
|
16
17
|
gap: get("grid.default-gap", $config);
|
|
17
18
|
}
|
|
18
19
|
|
|
20
|
+
// ------------------------------------------------------------------
|
|
21
|
+
// -- GRID GAP --
|
|
22
|
+
// ------------------------------------------------------------------
|
|
23
|
+
|
|
24
|
+
$grid-gap-sizes: (0, 1, 1.25, 1.5, 2, 3, 4, 5) !default;
|
|
25
|
+
|
|
26
|
+
@each $size in $grid-gap-sizes {
|
|
27
|
+
$class: escapeDecimal($size);
|
|
28
|
+
|
|
29
|
+
.grid-#{$class} {
|
|
30
|
+
display: grid;
|
|
31
|
+
gap: #{$size}rem;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.gg-#{$class} {
|
|
35
|
+
gap: #{$size}rem;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// 05 does not play well in the map
|
|
40
|
+
.gg-05 {
|
|
41
|
+
gap: 0.5rem;
|
|
42
|
+
}
|
|
43
|
+
|
|
19
44
|
// ------------------------------------------------------------------
|
|
20
45
|
// -- EQUAL WIDTHS COLUMNS(NON-RESPONSIVE) --
|
|
21
46
|
// ------------------------------------------------------------------
|
|
@@ -42,5 +67,8 @@ $num-grid-cols: get("grid.num-grid-cols", $config);
|
|
|
42
67
|
&cols-3 {
|
|
43
68
|
grid-template-columns: repeat(3, 1fr);
|
|
44
69
|
}
|
|
70
|
+
&cols-9 {
|
|
71
|
+
grid-template-columns: repeat(4, 1fr);
|
|
72
|
+
}
|
|
45
73
|
}
|
|
46
74
|
}
|
package/src/utilities/_size.scss
CHANGED
|
@@ -1,22 +1,11 @@
|
|
|
1
1
|
@use "../mixins/media" as *;
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
// @include from-md {
|
|
5
|
-
// width: 24rem;
|
|
6
|
-
// }
|
|
7
|
-
// }
|
|
3
|
+
|
|
8
4
|
|
|
9
5
|
// ------------------------------------------------------------------
|
|
10
6
|
// -- RESPONSIVE SIZES --
|
|
11
7
|
// ------------------------------------------------------------------
|
|
12
8
|
|
|
13
|
-
// Create responsive classes
|
|
14
|
-
// - for multiple sizes and multiple values
|
|
15
|
-
|
|
16
|
-
// @include makeFromBreakpoint(display, map-, "hide", "sm", "md");
|
|
17
|
-
|
|
18
|
-
// @include makeFromBreakpoint($property, $value, $identifier, $breakpoints...)
|
|
19
|
-
|
|
20
9
|
@include from-md {
|
|
21
10
|
.md\:w-16 {
|
|
22
11
|
width: 16rem;
|
|
@@ -25,20 +14,3 @@
|
|
|
25
14
|
width: 20rem;
|
|
26
15
|
}
|
|
27
16
|
}
|
|
28
|
-
// @include from-md {
|
|
29
|
-
// .md\:w-16 {
|
|
30
|
-
// width: 16rem;
|
|
31
|
-
// }
|
|
32
|
-
// }
|
|
33
|
-
|
|
34
|
-
// @include from-lg {
|
|
35
|
-
// .lg\:w-16 {
|
|
36
|
-
// width: 16rem;
|
|
37
|
-
// }
|
|
38
|
-
// }
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
// THIS SYSTEM NEEDS MORE CONSIDERATION !!
|
|
42
|
-
|
|
43
|
-
// $magic-width-sizes: ((16, "full"), (20, "full"), (24, "full")) !default;
|
|
44
|
-
// @include makeMagicClass(width, ($magic-width-sizes), "w");
|