nk_jtb 0.10.0 → 0.11.1
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 +21 -6
- package/package.json +1 -1
- package/src/components/_other.scss +13 -13
- package/src/extras/_nk-app.scss +31 -0
- package/src/extras/_nk-docs.scss +17 -8
- package/src/play.scss +1 -14
- package/src/utilities/_flexbox.scss +11 -5
- package/src/utilities/_grid.scss +11 -12
- package/src/utilities/_sizing.scss +8 -0
- /package/src/{components-extended → extras}/_hero.scss +0 -0
package/index.html
CHANGED
|
@@ -13,12 +13,6 @@
|
|
|
13
13
|
|
|
14
14
|
<body>
|
|
15
15
|
|
|
16
|
-
<!-- create a element with max height and overflow hidden, then add a class to the element that you want to show/hide and set the max height to 0 and overflow to hidden. Then use alpine to toggle the class on the element you want to show/hide. -->
|
|
17
|
-
|
|
18
|
-
set max height
|
|
19
|
-
hide overflow
|
|
20
|
-
fade out content
|
|
21
|
-
show more to display overflow content
|
|
22
16
|
|
|
23
17
|
<style>
|
|
24
18
|
.fade-out-mask {
|
|
@@ -35,6 +29,27 @@
|
|
|
35
29
|
}
|
|
36
30
|
</style>
|
|
37
31
|
|
|
32
|
+
<div class="container relative">
|
|
33
|
+
<div class="badge green">Badge</div>
|
|
34
|
+
|
|
35
|
+
<div class="absolute inline-flex items-center justify-center wh-1.5 txt-xs red rounded-full"> 20</div>
|
|
36
|
+
|
|
37
|
+
<div class="round-badge red">3</div>
|
|
38
|
+
|
|
39
|
+
<!-- <button type="button"
|
|
40
|
+
class="relative inline-flex items-center p-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
|
41
|
+
<svg class="" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
|
|
42
|
+
<path d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z" />
|
|
43
|
+
<path
|
|
44
|
+
d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z" />
|
|
45
|
+
</svg>
|
|
46
|
+
<span class="sr-only">Notifications</span>
|
|
47
|
+
<div
|
|
48
|
+
class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 -end-2 dark:border-gray-900">
|
|
49
|
+
20</div>
|
|
50
|
+
</button> -->
|
|
51
|
+
</div>
|
|
52
|
+
|
|
38
53
|
<div class="container-md py-5">
|
|
39
54
|
<div x-data="{ expanded: false }" class="container-md py-5">
|
|
40
55
|
<div :class="{'fade-out-mask': !expanded}" class="overflow-hidden">
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@use
|
|
1
|
+
@use '../variables' as *;
|
|
2
2
|
|
|
3
3
|
// ==========================================================================
|
|
4
4
|
// -- Icon Button --
|
|
@@ -24,16 +24,16 @@
|
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
27
|
+
// this is intended to be a round notification badge
|
|
28
|
+
:where(.round-badge) {
|
|
29
|
+
display: inline-flex;
|
|
30
|
+
align-items: center;
|
|
31
|
+
justify-content: center;
|
|
32
|
+
position: absolute;
|
|
33
|
+
top: 3px;
|
|
34
|
+
right: 3px;
|
|
35
|
+
width: 1.375rem;
|
|
36
|
+
height: 1.375rem;
|
|
37
|
+
border-radius: 50%;
|
|
38
|
+
font-size: 0.75rem;
|
|
39
39
|
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
@use '../mixins/common' as *;
|
|
2
|
+
@use '../variables/tailwind-colors' as *;
|
|
3
|
+
@use 'sass:map';
|
|
4
|
+
|
|
5
|
+
// ==========================================================================
|
|
6
|
+
// NAYKEL DOCS --
|
|
7
|
+
// ==========================================================================
|
|
8
|
+
//
|
|
9
|
+
// The styles in this file are specifically tailored for the Naykel Laravel
|
|
10
|
+
// applications. They are not included in the main build by default. To use
|
|
11
|
+
// these styles, you need to manually import this file.
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
// ==========================================================================
|
|
15
|
+
// BUTTONS
|
|
16
|
+
// ==========================================================================
|
|
17
|
+
|
|
18
|
+
// opinionated button for create, edit, delete, and view actions. Works well
|
|
19
|
+
// with resource actions in tables and lists.
|
|
20
|
+
.action-button {
|
|
21
|
+
display: inline-flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
color: $color;
|
|
24
|
+
padding-inline: 0.25rem;
|
|
25
|
+
padding-block: 0.25rem;
|
|
26
|
+
border-radius: 0.5rem;
|
|
27
|
+
opacity: 0.7;
|
|
28
|
+
&:hover {
|
|
29
|
+
background: map.get($tailwind-colors, 'rose', '100');
|
|
30
|
+
}
|
|
31
|
+
}
|
package/src/extras/_nk-docs.scss
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@use
|
|
3
|
-
@use
|
|
1
|
+
@use '../mixins/common' as *;
|
|
2
|
+
@use '../variables/tailwind-colors' as *;
|
|
3
|
+
@use 'sass:map';
|
|
4
4
|
|
|
5
|
-
// ==========================================================================
|
|
5
|
+
// ==========================================================================
|
|
6
6
|
// NAYKEL DOCS --
|
|
7
7
|
// ==========================================================================
|
|
8
8
|
//
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
|
|
15
15
|
$table-bg: white !default;
|
|
16
16
|
|
|
17
|
-
$th-bdr-color: map-get($tailwind-colors,
|
|
18
|
-
$td-bdr-color: map-get($tailwind-colors,
|
|
17
|
+
$th-bdr-color: map-get($tailwind-colors, 'slate', '200') !default;
|
|
18
|
+
$td-bdr-color: map-get($tailwind-colors, 'slate', '100') !default;
|
|
19
19
|
|
|
20
20
|
$code-color: #f0506e !default;
|
|
21
21
|
$question-color: #2299dd !default;
|
|
@@ -47,6 +47,11 @@ $question-color: #2299dd !default;
|
|
|
47
47
|
// padding-inline: 0.75rem;
|
|
48
48
|
// }
|
|
49
49
|
// }
|
|
50
|
+
|
|
51
|
+
.all-list-spacing-05 ~ ul li {
|
|
52
|
+
margin-top: 0.5rem;
|
|
53
|
+
margin-bottom: 0.5rem;
|
|
54
|
+
}
|
|
50
55
|
}
|
|
51
56
|
|
|
52
57
|
// ==========================================================================
|
|
@@ -54,7 +59,7 @@ $question-color: #2299dd !default;
|
|
|
54
59
|
// ==========================================================================
|
|
55
60
|
|
|
56
61
|
%code {
|
|
57
|
-
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
|
62
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
|
58
63
|
color: $code-color;
|
|
59
64
|
// color: rgb(14, 165, 233);
|
|
60
65
|
border-radius: 0.25rem;
|
|
@@ -175,6 +180,7 @@ h3 {
|
|
|
175
180
|
}
|
|
176
181
|
|
|
177
182
|
.spaced-out-all ~ ul li {
|
|
183
|
+
background: red;
|
|
178
184
|
margin-top: 0.5rem !important;
|
|
179
185
|
}
|
|
180
186
|
}
|
|
@@ -186,7 +192,10 @@ h3 {
|
|
|
186
192
|
|
|
187
193
|
// this is good when making a list when you want to use the toc for an overview
|
|
188
194
|
.small-headings {
|
|
195
|
+
~ h1 {
|
|
196
|
+
font-size: 2em;
|
|
197
|
+
}
|
|
189
198
|
~ h3 {
|
|
190
|
-
font-size: 1.
|
|
199
|
+
font-size: 1.25em;
|
|
191
200
|
}
|
|
192
201
|
}
|
package/src/play.scss
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// @use './color/shades' as *;
|
|
2
2
|
// @use './extras/naykel-docs' as *;
|
|
3
|
-
@use './utilities/
|
|
3
|
+
@use './utilities/padding' as *;
|
|
4
4
|
// @use './utilities/display-visibility' as *;
|
|
5
5
|
// @use './utilities/opacity' as *;
|
|
6
6
|
// @use './utilities/typography' as *;
|
|
@@ -10,16 +10,3 @@
|
|
|
10
10
|
@use 'sass:list';
|
|
11
11
|
@use 'sass:map';
|
|
12
12
|
@use 'sass:string';
|
|
13
|
-
|
|
14
|
-
// this is not easy to override on the child element unless the
|
|
15
|
-
// properties are set as !important but works great otherwise.
|
|
16
|
-
// .divide-y > :not([hidden]) ~ :not([hidden]) {
|
|
17
|
-
// border-top: 1px solid blue;
|
|
18
|
-
// }
|
|
19
|
-
|
|
20
|
-
// .divide-y-red > :not([hidden]) ~ :not([hidden]) {
|
|
21
|
-
// border-top: 1px solid red;
|
|
22
|
-
// }
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
// change the color and with by using the border classes
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@use
|
|
1
|
+
@use '../mixins/common' as *;
|
|
2
2
|
|
|
3
3
|
// prettier-ignore
|
|
4
4
|
$flex-properties-map: (
|
|
@@ -77,7 +77,8 @@ $flex-properties-map: (
|
|
|
77
77
|
order: (
|
|
78
78
|
property: order,
|
|
79
79
|
prefix: "order-",
|
|
80
|
-
values: ( 1, 2, 3, 4, 5, 6, 7, 8 )
|
|
80
|
+
values: ( 1, 2, 3, 4, 5, 6, 7, 8 ),
|
|
81
|
+
breakpoints: ("sm", "md", "lg", "xl")
|
|
81
82
|
),
|
|
82
83
|
);
|
|
83
84
|
|
|
@@ -103,10 +104,15 @@ $special-classes: (
|
|
|
103
104
|
props: (
|
|
104
105
|
display: flex,
|
|
105
106
|
align-items: center,
|
|
106
|
-
justify-content: center
|
|
107
|
+
justify-content: center
|
|
107
108
|
),
|
|
108
|
-
breakpoints: (
|
|
109
|
-
|
|
109
|
+
breakpoints: (
|
|
110
|
+
'sm',
|
|
111
|
+
'md',
|
|
112
|
+
'lg',
|
|
113
|
+
'xl'
|
|
114
|
+
)
|
|
115
|
+
)
|
|
110
116
|
);
|
|
111
117
|
|
|
112
118
|
@include generate-classes($special-classes);
|
package/src/utilities/_grid.scss
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@use
|
|
3
|
-
@use
|
|
4
|
-
@use
|
|
5
|
-
@use
|
|
6
|
-
@use
|
|
1
|
+
@use '../config' as *;
|
|
2
|
+
@use '../functions/get' as *;
|
|
3
|
+
@use '../mixins/common' as *;
|
|
4
|
+
@use '../mixins/generate-magic-classes' as *;
|
|
5
|
+
@use '../mixins/magicGridGenerators' as *;
|
|
6
|
+
@use '../mixins/make-responsive-class-mixins' as *;
|
|
7
7
|
|
|
8
|
-
$gap: get(
|
|
8
|
+
$gap: get('grid.default-gap', $config);
|
|
9
9
|
$gap-sizes: (0, 0.25, 0.5, 1, 1.25, 1.5, 2, 3, 4, 5) !default;
|
|
10
|
-
$num-grid-cols: get(
|
|
10
|
+
$num-grid-cols: get('grid.num-grid-cols', $config);
|
|
11
11
|
|
|
12
12
|
// ==========================================================================
|
|
13
13
|
// -- GRID --
|
|
@@ -31,7 +31,6 @@ $num-grid-cols: get("grid.num-grid-cols", $config);
|
|
|
31
31
|
gap: $gap;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
|
|
35
34
|
// ==========================================================================
|
|
36
35
|
// -- GENERAL --
|
|
37
36
|
// ==========================================================================
|
|
@@ -89,8 +88,8 @@ $grid-properties-map: (
|
|
|
89
88
|
$props: (
|
|
90
89
|
grid-template-columns: repeat($i, minmax(0, 1fr))
|
|
91
90
|
);
|
|
92
|
-
$breakpoints: (
|
|
93
|
-
$class:
|
|
91
|
+
$breakpoints: ('base', 'sm', 'md', 'lg', 'xl');
|
|
92
|
+
$class: 'cols-#{$i}';
|
|
94
93
|
@include make-from-breakpoint($props, $class, $breakpoints);
|
|
95
94
|
}
|
|
96
95
|
|
|
@@ -105,7 +104,7 @@ $grid-properties-map: (
|
|
|
105
104
|
// ---------------- BEFORE YOU DO ANYTHING CRAZY ------------------
|
|
106
105
|
|
|
107
106
|
$grid-gap-magic-sizes: ((5, 3, 2), (5, 3), (4, 2), (3, 1)) !default;
|
|
108
|
-
@include generate-magic-classes(grid-gap, ($grid-gap-magic-sizes),
|
|
107
|
+
@include generate-magic-classes(grid-gap, ($grid-gap-magic-sizes), 'gap');
|
|
109
108
|
|
|
110
109
|
$equal-width-magic-columns: ((4, 2, 1), (4, 3, 2, 1), (3, 2, 1), (3, 1, 1)) !default;
|
|
111
110
|
@include magicGridEqualWidths($equal-width-magic-columns);
|
|
File without changes
|