nk_jtb 0.9.12 → 0.9.14
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 +296 -174
- package/package.json +1 -1
- package/src/_nk.scss +18 -51
- package/src/base/_base.scss +17 -19
- package/src/base/_content_gap.scss +13 -1
- package/src/color/_shades.scss +0 -23
- package/src/color/_themes.scss +1 -9
- package/src/color/index.scss +14 -2
- package/src/components/_box.scss +1 -1
- package/src/components/_icon.scss +2 -1
- package/src/components/_navbar.scss +2 -1
- package/src/extras/_code.scss +1 -1
- package/src/extras/_naykel-docs.scss +97 -0
- package/src/forms/_control.scss +3 -3
- package/src/functions/_colorFunctions.scss +7 -7
- package/src/functions/helpers/_naming-and-formatting.scss +2 -2
- package/src/jtb.scss +2 -3
- package/src/mixins/_classGenerators.scss +1 -1
- package/src/play.scss +13 -150
- package/src/utilities/_border.scss +1 -1
- package/src/utilities/_container.scss +11 -14
- package/src/utilities/_effects.scss +0 -12
- package/src/utilities/_flexbox.scss +15 -0
- package/src/utilities/_grid.scss +12 -1
- package/src/utilities/_misc.scss +12 -0
- package/src/utilities/_opacity.scss +20 -0
- package/src/utilities/_padding.scss +3 -0
- package/src/utilities/_sizing.scss +2 -2
- package/src/utilities/_space.scss +1 -1
- package/src/utilities/_typography.scss +37 -24
- package/src/variables/_base.scss +7 -20
- package/src/variables/_components.scss +2 -2
- package/src/variables/_identifiers.scss +4 -0
- package/src/{color → variables}/_tailwind-colors.scss +0 -10
- package/src/variables/_utility_maps.scss +10 -8
- package/tmp/_general.scss +0 -56
- package/tmp/_nk.scss +0 -57
- package/tmp/_state.scss +0 -0
package/index.html
CHANGED
|
@@ -8,84 +8,194 @@
|
|
|
8
8
|
<title>NayKel JTB</title>
|
|
9
9
|
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
|
|
10
10
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
11
|
-
|
|
12
|
-
.sibling {
|
|
13
|
-
background-color: #3b82f6;
|
|
14
|
-
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
15
|
-
color: hsl(0, 0%, 100%);
|
|
16
|
-
padding-inline: 1rem;
|
|
17
|
-
width: 100%;
|
|
18
|
-
}
|
|
19
|
-
</style>
|
|
11
|
+
|
|
20
12
|
</head>
|
|
21
13
|
|
|
22
14
|
<body>
|
|
15
|
+
|
|
16
|
+
|
|
23
17
|
<div class="quick-hide-div zebra">
|
|
24
|
-
<section id="
|
|
25
|
-
<div class="container">
|
|
26
|
-
<h2 class="title
|
|
27
|
-
<div
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
18
|
+
<section id="button-control-sizes-examples" class="py-3">
|
|
19
|
+
<div class="container space-y">
|
|
20
|
+
<h2 class="title txt-3">Button and Control Sizes</h2>
|
|
21
|
+
<div>
|
|
22
|
+
<button class="btn primary xs">Extra Small</button>
|
|
23
|
+
<input class="xs" placeholder="Text Input">
|
|
24
|
+
</div>
|
|
25
|
+
<div>
|
|
26
|
+
<button class="btn primary sm">Small</button>
|
|
27
|
+
<input class="sm" placeholder="Text Input">
|
|
28
|
+
</div>
|
|
29
|
+
<div>
|
|
30
|
+
<button class="btn primary">Base</button>
|
|
31
|
+
<input placeholder="Text Input">
|
|
32
|
+
</div>
|
|
33
|
+
<div>
|
|
34
|
+
<button class="btn primary lg">Large</button>
|
|
35
|
+
<input class="lg" placeholder="Text Input">
|
|
36
|
+
</div>
|
|
37
|
+
<div>
|
|
38
|
+
<button class="btn primary xl">Extra Large</button>
|
|
39
|
+
<input class="xl" placeholder="Text Input">
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
44
42
|
|
|
45
|
-
|
|
43
|
+
</section>
|
|
46
44
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
45
|
+
<section id="button-theme-examples" class="py-3">
|
|
46
|
+
<div class="container">
|
|
47
|
+
<h2 class="title txt-3">Buttons</h2>
|
|
48
|
+
<h4>Buttons with icon (TBD)</h4>
|
|
49
|
+
<h4>Base Colors</h4>
|
|
50
|
+
<div class="grid-1 cols-9">
|
|
51
|
+
<button class="btn stone">stone</button>
|
|
52
|
+
<button class="btn brown">brown</button>
|
|
53
|
+
<button class="btn red">red</button>
|
|
54
|
+
<button class="btn orange">orange</button>
|
|
55
|
+
<button class="btn amber">amber</button>
|
|
56
|
+
<button class="btn yellow">yellow</button>
|
|
57
|
+
<button class="btn lime">lime</button>
|
|
58
|
+
<button class="btn emerald">emerald</button>
|
|
59
|
+
<button class="btn green">green</button>
|
|
60
|
+
<button class="btn teal">teal</button>
|
|
61
|
+
<button class="btn cyan">cyan</button>
|
|
62
|
+
<button class="btn sky">sky</button>
|
|
63
|
+
<button class="btn blue">blue</button>
|
|
64
|
+
<button class="btn indigo">indigo</button>
|
|
65
|
+
<button class="btn purple">purple</button>
|
|
66
|
+
<button class="btn fuchsia">fuchsia</button>
|
|
67
|
+
<button class="btn pink">pink</button>
|
|
68
|
+
<button class="btn rose">rose</button>
|
|
69
|
+
</div>
|
|
70
|
+
<h4>Theme Colors and Alert Colors</h4>
|
|
71
|
+
<div class="grid cols-10">
|
|
72
|
+
<button class="btn primary">primary</button>
|
|
73
|
+
<button class="btn secondary">secondary</button>
|
|
74
|
+
<button class="btn accent">accent</button>
|
|
75
|
+
<button class="btn light">light</button>
|
|
76
|
+
<button class="btn dark">dark</button>
|
|
77
|
+
<button class="btn muted">muted</button>
|
|
78
|
+
<button class="btn danger">danger</button>
|
|
79
|
+
<button class="btn info">info</button>
|
|
80
|
+
<button class="btn success">success</button>
|
|
81
|
+
<button class="btn warning">warning</button>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
</section>
|
|
85
|
+
<section class="py-3">
|
|
86
|
+
<div class="container-sm py-3 bx">
|
|
87
|
+
<div class="grid cols-2">
|
|
88
|
+
<div class="frm-row">
|
|
89
|
+
<label for="">Firstname</label>
|
|
90
|
+
<div class="flex-col w-full my-0">
|
|
91
|
+
<input name="name" id="name" class="" for="name" label="Name"
|
|
92
|
+
placeholder="Enter your name...">
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="frm-row">
|
|
96
|
+
<label for="">Lastname</label>
|
|
97
|
+
<div class="flex-col w-full my-0">
|
|
98
|
+
<input name="name" id="name" class="" for="name" label="Name"
|
|
99
|
+
placeholder="Enter your name...">
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
<div class="frm-row">
|
|
104
|
+
<label for="form.country"> Country <span class="txt-red">*</span> </label>
|
|
105
|
+
<div class="flex-col w-full my-0">
|
|
106
|
+
<select name="form.country" id="form.country" class="" wire:model="form.country" req="req">
|
|
107
|
+
<option value="AU">Australia</option>
|
|
108
|
+
<option value="NZ">New Zealand</option>
|
|
109
|
+
</select>
|
|
53
110
|
</div>
|
|
54
111
|
</div>
|
|
55
112
|
</div>
|
|
56
113
|
</section>
|
|
57
114
|
<section id="form-controls" class="py-3">
|
|
58
115
|
<div class="container grid cols-2">
|
|
59
|
-
<div
|
|
60
|
-
<
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
116
|
+
<div>
|
|
117
|
+
<div class="frm-row">
|
|
118
|
+
<div class="flex va-c space-between mb-05">
|
|
119
|
+
<label for="name"> Name </label>
|
|
120
|
+
<span x-data="{open:false}" class="relative" x-on:mouseenter="open=true"
|
|
121
|
+
x-on:mouseleave="open=false">
|
|
122
|
+
<div class="flex va-c">
|
|
123
|
+
<svg class="txt-muted" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
124
|
+
fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
|
125
|
+
aria-hidden="true" data-slot="icon">
|
|
126
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
127
|
+
d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z">
|
|
128
|
+
</path>
|
|
129
|
+
</svg>
|
|
130
|
+
</div>
|
|
131
|
+
<div class="absolute pos-r minw-18 z-100 bx pxy-075 mt-05 txt-sm fw4 bg-stone-50"
|
|
132
|
+
x-show="open" x-transition.duration="" style="display: none;">
|
|
133
|
+
Lorem ipsum dolor, rerum minus magnam consequatur eos ut aliquam aspernatur sapiente
|
|
134
|
+
veniam! Repudiandae voluptatum eius ducimus?
|
|
135
|
+
</div>
|
|
136
|
+
</span>
|
|
137
|
+
</div>
|
|
138
|
+
<div class="flex-col w-full my-0">
|
|
139
|
+
<input name="name" id="name" class="" for="name" label="Name"
|
|
140
|
+
placeholder="Enter your name...">
|
|
141
|
+
</div>
|
|
65
142
|
</div>
|
|
66
|
-
<
|
|
67
|
-
<div
|
|
68
|
-
<
|
|
69
|
-
<
|
|
70
|
-
|
|
143
|
+
<hr>
|
|
144
|
+
<div id="radio-check-toggle">
|
|
145
|
+
<h5>Radio</h5>
|
|
146
|
+
<div class="space-x">
|
|
147
|
+
<label><input type="radio" name="abc">Option</label>
|
|
148
|
+
<label><input type="radio" name="abc" checked>Checked</label>
|
|
149
|
+
<label><input type="radio" name="abc" disabled>Disabled</label>
|
|
150
|
+
</div>
|
|
151
|
+
<h5>Checkbox</h5>
|
|
152
|
+
<div class="space-x">
|
|
153
|
+
<label><input type="checkbox">Option</label>
|
|
154
|
+
<label><input type="checkbox" checked>Checked</label>
|
|
155
|
+
<label><input type="checkbox" disabled>Disabled</label>
|
|
156
|
+
</div>
|
|
157
|
+
<h5>Slider</h5>
|
|
158
|
+
<div class="space-x">
|
|
159
|
+
<label class="toggle">
|
|
160
|
+
<input type="checkbox">
|
|
161
|
+
<div class="slider"></div>
|
|
162
|
+
<span>Option</span>
|
|
163
|
+
</label>
|
|
164
|
+
<label class="toggle">
|
|
165
|
+
<input type="checkbox" checked>
|
|
166
|
+
<div class="slider"></div>
|
|
167
|
+
<span>Checked</span>
|
|
168
|
+
</label>
|
|
169
|
+
<label class="toggle">
|
|
170
|
+
<input type="checkbox" disabled>
|
|
171
|
+
<div class="slider"></div>
|
|
172
|
+
<span>Disabled</span>
|
|
173
|
+
</label>
|
|
174
|
+
</div>
|
|
71
175
|
</div>
|
|
72
|
-
<
|
|
73
|
-
|
|
74
|
-
<
|
|
75
|
-
<
|
|
76
|
-
<
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
176
|
+
<div id="label-with-tooltip">
|
|
177
|
+
<h5 class="my">Label with Tooltip</h5>
|
|
178
|
+
<div class="flex va-c space-between mb-05 bdr">
|
|
179
|
+
<label> My Label </label>
|
|
180
|
+
<span x-data="{open:false}" class="relative" x-on:mouseenter="open=true"
|
|
181
|
+
x-on:mouseleave="open=false">
|
|
182
|
+
<div class="flex va-c">
|
|
183
|
+
<svg class="txt-muted" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
184
|
+
fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
|
185
|
+
aria-hidden="true" data-slot="icon">
|
|
186
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
187
|
+
d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z">
|
|
188
|
+
</path>
|
|
189
|
+
</svg>
|
|
190
|
+
</div>
|
|
191
|
+
<div class="absolute pos-r minw-18 z-100 bx pxy-075 mt-05 txt-sm fw4 bg-stone-50"
|
|
192
|
+
x-show="open" x-transition.duration="" style="display: none;">
|
|
193
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur vitae
|
|
194
|
+
perspiciatis officiis iste omnis, iure quasi, rerum minus magnam consequatur eos ut
|
|
195
|
+
aliquam aspernatur sapiente veniam! Repudiandae voluptatum eius ducimus?
|
|
196
|
+
</div>
|
|
197
|
+
</span>
|
|
198
|
+
</div>
|
|
89
199
|
</div>
|
|
90
200
|
</div>
|
|
91
201
|
<div id="file-input">
|
|
@@ -107,13 +217,46 @@
|
|
|
107
217
|
<div class="frm-row my">
|
|
108
218
|
<label class="file btn">
|
|
109
219
|
<input type="file" name="">
|
|
110
|
-
<svg class="wh-1.25 mr-075" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
111
|
-
|
|
220
|
+
<svg class="wh-1.25 mr-075" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
221
|
+
viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
|
|
222
|
+
<path fill-rule="evenodd"
|
|
223
|
+
d="M11.47 2.47a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06l-3.22-3.22V16.5a.75.75 0 0 1-1.5 0V4.81L8.03 8.03a.75.75 0 0 1-1.06-1.06l4.5-4.5ZM3 15.75a.75.75 0 0 1 .75.75v2.25a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5V16.5a.75.75 0 0 1 1.5 0v2.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V16.5a.75.75 0 0 1 .75-.75Z"
|
|
224
|
+
clip-rule="evenodd" />
|
|
112
225
|
</svg>
|
|
113
226
|
<span>Choose a file...</span>
|
|
114
227
|
</label>
|
|
115
228
|
</div>
|
|
116
229
|
</div>
|
|
230
|
+
<div class="frm-row">
|
|
231
|
+
<label for="success" class="txt-success-light">Your name</label>
|
|
232
|
+
<input type="text" id="success" class="success-light" placeholder="Success input">
|
|
233
|
+
<p class="txt-success-light txt-sm"><span class="font-medium">Well done!</span> Some success
|
|
234
|
+
message.</p>
|
|
235
|
+
</div>
|
|
236
|
+
<div class="frm-row">
|
|
237
|
+
<label for="error" class="block mb-2 text-sm font-medium text-red-700 dark:text-red-500">Your
|
|
238
|
+
name</label>
|
|
239
|
+
<input type="text" id="error"
|
|
240
|
+
class="bg-red-50 bdr bdr-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:bdr-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:bdr-red-500"
|
|
241
|
+
placeholder="Error input">
|
|
242
|
+
<p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oh,
|
|
243
|
+
snapp!</span> Some error message.</p>
|
|
244
|
+
</div>
|
|
245
|
+
<div class="frm-row">
|
|
246
|
+
<div class="withAddons">
|
|
247
|
+
<div class="leadingAddon light">
|
|
248
|
+
<svg class="icon txt-muted">
|
|
249
|
+
<use xlink:href="/svg/naykel-ui.svg#user"></use>
|
|
250
|
+
</svg>
|
|
251
|
+
</div>
|
|
252
|
+
<div class="trailingAddon light">
|
|
253
|
+
<svg class="icon txt-muted">
|
|
254
|
+
<use xlink:href="/svg/naykel-ui.svg#tick-round"></use>
|
|
255
|
+
</svg>
|
|
256
|
+
</div>
|
|
257
|
+
<input type="text">
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
117
260
|
</div>
|
|
118
261
|
</div>
|
|
119
262
|
</section>
|
|
@@ -123,7 +266,8 @@
|
|
|
123
266
|
<div class="grid cols-3">
|
|
124
267
|
<div class="bx">
|
|
125
268
|
<div class="bx-title">Super Awesome Title</div>
|
|
126
|
-
<p>Lorem ipsum dolor sit amet consectetur pepe adipisicing elit. Quas debitis unde aut, sed
|
|
269
|
+
<p>Lorem ipsum dolor sit amet consectetur pepe adipisicing elit. Quas debitis unde aut, sed
|
|
270
|
+
repellendus tempora, molestiae eveniet.</p>
|
|
127
271
|
</div>
|
|
128
272
|
</div>
|
|
129
273
|
</div>
|
|
@@ -162,6 +306,66 @@
|
|
|
162
306
|
</div>
|
|
163
307
|
</div>
|
|
164
308
|
</section>
|
|
309
|
+
<section id="typography" class="py-3">
|
|
310
|
+
<div class="container">
|
|
311
|
+
<h2 class="title mb-3">Typography</h2>
|
|
312
|
+
<div class="grid-3 cols-2">
|
|
313
|
+
<div id="headings">
|
|
314
|
+
<h1>Heading 1</h1>
|
|
315
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
316
|
+
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
317
|
+
<h2>Heading 2</h2>
|
|
318
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
319
|
+
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
320
|
+
<h3>Heading 3</h3>
|
|
321
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
322
|
+
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
323
|
+
<h4>Heading 4</h4>
|
|
324
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
325
|
+
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
326
|
+
<h5>Heading 5</h5>
|
|
327
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
328
|
+
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
329
|
+
<h6>Heading 6</h6>
|
|
330
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
331
|
+
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
332
|
+
</div>
|
|
333
|
+
<div>
|
|
334
|
+
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sed aperiam
|
|
335
|
+
quibusdam adipisci sequi deserunt nesciunt vel illum voluptatibus maxime soluta repudiandae
|
|
336
|
+
numquam sapiente exercitationem, culpa, omnis expedita tempore? Similique.</p>
|
|
337
|
+
|
|
338
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at corporis deserunt sint eum
|
|
339
|
+
laboriosam quae nulla fugit, error, tempore quibusdam temporibus fuga adipisci. Nam
|
|
340
|
+
architecto sunt cupiditate soluta molestias ipsum delectus numquam illo magnam! Praesentium
|
|
341
|
+
quos deserunt sed, maxime, eligendi quasi, sequi fugiat facere neque harum debitis laborum
|
|
342
|
+
ipsam!</p>
|
|
343
|
+
|
|
344
|
+
<h3 class="title">Text Sizes</h3>
|
|
345
|
+
<p class="txt-xs">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
|
|
346
|
+
asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
|
|
347
|
+
similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
|
|
348
|
+
repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
349
|
+
<p class="txt-sm">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
|
|
350
|
+
asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
|
|
351
|
+
similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
|
|
352
|
+
repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
353
|
+
<p class="txt-base">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto
|
|
354
|
+
delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam
|
|
355
|
+
exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam
|
|
356
|
+
deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
357
|
+
<p class="txt-lg">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
|
|
358
|
+
asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
|
|
359
|
+
similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
|
|
360
|
+
repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
361
|
+
<p class="txt-xl">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
|
|
362
|
+
asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
|
|
363
|
+
similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
|
|
364
|
+
repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
365
|
+
</div>
|
|
366
|
+
</div>
|
|
367
|
+
</div>
|
|
368
|
+
</section>
|
|
165
369
|
</div>
|
|
166
370
|
|
|
167
371
|
<!-- -->
|
|
@@ -334,14 +538,16 @@
|
|
|
334
538
|
<nav>
|
|
335
539
|
<ul>
|
|
336
540
|
<li><a class="active" href="#">Home</a></li>
|
|
337
|
-
<li class="relative" x-data="{showChildren:false}" x-on:mouseenter="showChildren=true"
|
|
541
|
+
<li class="relative" x-data="{showChildren:false}" x-on:mouseenter="showChildren=true"
|
|
542
|
+
x-on:mouseleave="showChildren=false">
|
|
338
543
|
<a href="#">
|
|
339
544
|
Services
|
|
340
545
|
<svg class="icon sm">
|
|
341
546
|
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
342
547
|
</svg>
|
|
343
548
|
</a>
|
|
344
|
-
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren"
|
|
549
|
+
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren"
|
|
550
|
+
x-transition.duration.200ms style="display: none;">
|
|
345
551
|
<ul class="menu bx pxy-0 w-full">
|
|
346
552
|
<li><a href="#">Graphic Design</a></li>
|
|
347
553
|
<li><a href="#">Digital Marketing</a></li>
|
|
@@ -380,14 +586,16 @@
|
|
|
380
586
|
</ul>
|
|
381
587
|
</div>
|
|
382
588
|
</li>
|
|
383
|
-
<li class="relative" x-data="{showChildren:true}" x-on:mouseenter="showChildren=true"
|
|
589
|
+
<li class="relative" x-data="{showChildren:true}" x-on:mouseenter="showChildren=true"
|
|
590
|
+
x-on:mouseleave="showChildren=true">
|
|
384
591
|
<a href="#">
|
|
385
592
|
Parent (alpine hover)
|
|
386
593
|
<svg class="icon sm">
|
|
387
594
|
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
388
595
|
</svg>
|
|
389
596
|
</a>
|
|
390
|
-
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
597
|
+
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
598
|
+
style="display: none;">
|
|
391
599
|
<ul class="menu bx pxy-0 w-full">
|
|
392
600
|
<li><a class="txt-red" href="#">Child Override</a></li>
|
|
393
601
|
<li><a href="#">Child</a></li>
|
|
@@ -402,7 +610,8 @@
|
|
|
402
610
|
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
403
611
|
</svg>
|
|
404
612
|
</a>
|
|
405
|
-
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
613
|
+
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
614
|
+
style="display: none;">
|
|
406
615
|
<ul class="menu bx pxy-0 w-full">
|
|
407
616
|
<li><a class="txt-red" href="#">Child Override</a></li>
|
|
408
617
|
<li><a href="#">Child</a></li>
|
|
@@ -436,14 +645,16 @@
|
|
|
436
645
|
</ul>
|
|
437
646
|
</div>
|
|
438
647
|
</li>
|
|
439
|
-
<li class="relative" x-data="{showChildren:false}" x-on:mouseenter="showChildren=true"
|
|
648
|
+
<li class="relative" x-data="{showChildren:false}" x-on:mouseenter="showChildren=true"
|
|
649
|
+
x-on:mouseleave="showChildren=false">
|
|
440
650
|
<a href="#">
|
|
441
651
|
Parent (alpine hover)
|
|
442
652
|
<svg class="icon sm">
|
|
443
653
|
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
444
654
|
</svg>
|
|
445
655
|
</a>
|
|
446
|
-
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
656
|
+
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
657
|
+
style="display: none;">
|
|
447
658
|
<ul class="menu bx pxy-0 w-full">
|
|
448
659
|
<li><a href="#">Child</a></li>
|
|
449
660
|
<li><a href="#">Child</a></li>
|
|
@@ -458,7 +669,8 @@
|
|
|
458
669
|
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
459
670
|
</svg>
|
|
460
671
|
</a>
|
|
461
|
-
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
672
|
+
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
673
|
+
style="display: none;">
|
|
462
674
|
<ul class="menu bx pxy-0 w-full">
|
|
463
675
|
<li><a href="#">Child</a></li>
|
|
464
676
|
<li><a href="#">Child</a></li>
|
|
@@ -528,54 +740,7 @@
|
|
|
528
740
|
<h4>Collapse</h4>
|
|
529
741
|
</div>
|
|
530
742
|
</section>
|
|
531
|
-
|
|
532
|
-
<div class="container">
|
|
533
|
-
<h2 class="title txt-3">Buttons</h2>
|
|
534
|
-
<h4>Button sizes</h4>
|
|
535
|
-
<div class="flex va-c space-x-05">
|
|
536
|
-
<button class="btn primary xs">Extra Small</button>
|
|
537
|
-
<button class="btn primary sm">Small</button>
|
|
538
|
-
<button class="btn primary">Base</button>
|
|
539
|
-
<button class="btn primary lg">Large</button>
|
|
540
|
-
<button class="btn primary xl">Extra Large</button>
|
|
541
|
-
</div>
|
|
542
|
-
<h4>Buttons with icon (TBD)</h4>
|
|
543
|
-
<h4>Base Colors</h4>
|
|
544
|
-
<div class="grid-1 cols-9">
|
|
545
|
-
<button class="btn stone">stone</button>
|
|
546
|
-
<button class="btn brown">brown</button>
|
|
547
|
-
<button class="btn red">red</button>
|
|
548
|
-
<button class="btn orange">orange</button>
|
|
549
|
-
<button class="btn amber">amber</button>
|
|
550
|
-
<button class="btn yellow">yellow</button>
|
|
551
|
-
<button class="btn lime">lime</button>
|
|
552
|
-
<button class="btn emerald">emerald</button>
|
|
553
|
-
<button class="btn green">green</button>
|
|
554
|
-
<button class="btn teal">teal</button>
|
|
555
|
-
<button class="btn cyan">cyan</button>
|
|
556
|
-
<button class="btn sky">sky</button>
|
|
557
|
-
<button class="btn blue">blue</button>
|
|
558
|
-
<button class="btn indigo">indigo</button>
|
|
559
|
-
<button class="btn purple">purple</button>
|
|
560
|
-
<button class="btn fuchsia">fuchsia</button>
|
|
561
|
-
<button class="btn pink">pink</button>
|
|
562
|
-
<button class="btn rose">rose</button>
|
|
563
|
-
</div>
|
|
564
|
-
<h4>Theme Colors and Alert Colors</h4>
|
|
565
|
-
<div class="grid cols-10">
|
|
566
|
-
<button class="btn primary">primary</button>
|
|
567
|
-
<button class="btn secondary">secondary</button>
|
|
568
|
-
<button class="btn accent">accent</button>
|
|
569
|
-
<button class="btn light">light</button>
|
|
570
|
-
<button class="btn dark">dark</button>
|
|
571
|
-
<button class="btn muted">muted</button>
|
|
572
|
-
<button class="btn danger">danger</button>
|
|
573
|
-
<button class="btn info">info</button>
|
|
574
|
-
<button class="btn success">success</button>
|
|
575
|
-
<button class="btn warning">warning</button>
|
|
576
|
-
</div>
|
|
577
|
-
</div>
|
|
578
|
-
</section>
|
|
743
|
+
|
|
579
744
|
<section id="theme-examples">
|
|
580
745
|
<div class="container">
|
|
581
746
|
<h2 class="title txt-3">Basic Themes</h2>
|
|
@@ -654,73 +819,30 @@
|
|
|
654
819
|
</div>
|
|
655
820
|
</div>
|
|
656
821
|
</section>
|
|
657
|
-
<section id="button-and-form-controls">
|
|
658
|
-
<div class="container">
|
|
659
822
|
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
<h2 class="title">Buttons and Form Controls</h2>
|
|
666
|
-
|
|
667
|
-
<div class="my">
|
|
668
|
-
<button class="btn primary">primary</button>
|
|
669
|
-
<input id="input" name="input" type="text" placeholder="Text Input">
|
|
670
|
-
<button type="button">Button</button>
|
|
671
|
-
<button type="reset">Reset</button>
|
|
672
|
-
<button type="submit">Submit</button>
|
|
673
|
-
</div>
|
|
674
|
-
|
|
675
|
-
<div class="frm-row">
|
|
676
|
-
<label for="success" class="txt-success-light">Your name</label>
|
|
677
|
-
<input type="text" id="success" class="success-light" placeholder="Success input">
|
|
678
|
-
<p class="txt-success-light txt-sm"><span class="font-medium">Well done!</span> Some success message.</p>
|
|
679
|
-
</div>
|
|
680
|
-
|
|
681
|
-
<div class="frm-row">
|
|
682
|
-
<label for="error" class="block mb-2 text-sm font-medium text-red-700 dark:text-red-500">Your name</label>
|
|
683
|
-
<input type="text" id="error" class="bg-red-50 bdr bdr-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:bdr-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:bdr-red-500" placeholder="Error input">
|
|
684
|
-
<p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oh, snapp!</span> Some error message.</p>
|
|
685
|
-
</div>
|
|
686
|
-
|
|
687
|
-
<div class="frm-row">
|
|
688
|
-
<div class="withAddons">
|
|
689
|
-
<div class="leadingAddon light">
|
|
690
|
-
<svg class="icon txt-muted">
|
|
691
|
-
<use xlink:href="/svg/naykel-ui.svg#user"></use>
|
|
692
|
-
</svg>
|
|
693
|
-
</div>
|
|
694
|
-
<div class="trailingAddon light">
|
|
695
|
-
<svg class="icon txt-muted">
|
|
696
|
-
<use xlink:href="/svg/naykel-ui.svg#tick-round"></use>
|
|
697
|
-
</svg>
|
|
698
|
-
</div>
|
|
699
|
-
<input type="text">
|
|
700
|
-
</div>
|
|
701
|
-
</div>
|
|
702
|
-
|
|
703
|
-
</div>
|
|
704
|
-
</section>
|
|
705
823
|
</div>
|
|
706
824
|
|
|
707
825
|
<main class="container maxw-lg c-py-3-2">
|
|
708
826
|
<section>
|
|
709
827
|
<h2>Theme Boxes</h2>
|
|
710
828
|
<div class="grid cols-3 my">
|
|
711
|
-
<div class="bx primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla
|
|
829
|
+
<div class="bx primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla
|
|
830
|
+
debitis molestiae expedita reiciendis molestias.
|
|
712
831
|
<a href="">Link</a>
|
|
713
832
|
</div>
|
|
714
|
-
<div class="bx secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla
|
|
833
|
+
<div class="bx secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla
|
|
834
|
+
debitis molestiae expedita reiciendis molestias.
|
|
715
835
|
<a href="">Link</a>
|
|
716
836
|
</div>
|
|
717
|
-
<div class="bx accent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla
|
|
837
|
+
<div class="bx accent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla
|
|
838
|
+
debitis molestiae expedita reiciendis molestias.
|
|
718
839
|
<a href="">Link</a>
|
|
719
840
|
</div>
|
|
720
841
|
</div>
|
|
721
842
|
</section>
|
|
722
843
|
|
|
723
|
-
<select id="countries"
|
|
844
|
+
<select id="countries"
|
|
845
|
+
class="bg-gray-50 bdr bdr-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:bdr-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:bdr-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:bdr-blue-500">
|
|
724
846
|
<option selected>Choose a country</option>
|
|
725
847
|
<option value="US">United States</option>
|
|
726
848
|
<option value="CA">Canada</option>
|