nk_jtb 0.9.11 → 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 +301 -212
- package/package.json +1 -1
- package/src/_nk.scss +18 -51
- package/src/base/_base.scss +25 -21
- package/src/base/_content_gap.scss +14 -20
- 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 +22 -2
- 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,126 +8,203 @@
|
|
|
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
|
+
|
|
11
12
|
</head>
|
|
12
13
|
|
|
13
14
|
<body>
|
|
14
15
|
|
|
15
|
-
<div class="container py space-y">
|
|
16
|
-
<h4>Testing for the "content-gap" opt out rules</h4>
|
|
17
|
-
<div class="flex-col">
|
|
18
|
-
<div class="bx pink fg1"></div>
|
|
19
|
-
<div class="bx pink fg1"></div>
|
|
20
|
-
<div class="bx pink fg1"></div>
|
|
21
|
-
</div>
|
|
22
|
-
<div class="flex-col">
|
|
23
|
-
<p class="h-3 pink fg1"></p>
|
|
24
|
-
<p class="h-3 pink fg1"></p>
|
|
25
|
-
<p class="h-3 pink fg1"></p>
|
|
26
|
-
</div>
|
|
27
|
-
<div class="flex-col">
|
|
28
|
-
<form action=""><input class="fg1"></form>
|
|
29
|
-
<form action=""><input class="fg1"></form>
|
|
30
|
-
<form action=""><input class="fg1"></form>
|
|
31
|
-
</div>
|
|
32
|
-
</div>
|
|
33
|
-
<div class="container py space-y">
|
|
34
|
-
<h4>Testing for the "content-gap" opt out rules</h4>
|
|
35
|
-
<div class="flex gap">
|
|
36
|
-
<div class="bx pink fg1"></div>
|
|
37
|
-
<div class="bx pink fg1"></div>
|
|
38
|
-
<div class="bx pink fg1"></div>
|
|
39
|
-
</div>
|
|
40
|
-
<div class="flex gap">
|
|
41
|
-
<p class="h-3 pink fg1"></p>
|
|
42
|
-
<p class="h-3 pink fg1"></p>
|
|
43
|
-
<p class="h-3 pink fg1"></p>
|
|
44
|
-
</div>
|
|
45
|
-
<div class="flex gap">
|
|
46
|
-
<input class="fg1">
|
|
47
|
-
<input class="fg1">
|
|
48
|
-
<input class="fg1">
|
|
49
|
-
</div>
|
|
50
|
-
<div class="flex gap">
|
|
51
|
-
<div class="frm-row fg1"><textarea></textarea></div>
|
|
52
|
-
<div class="frm-row fg1"><textarea></textarea></div>
|
|
53
|
-
<div class="frm-row fg1"><textarea></textarea></div>
|
|
54
|
-
</div>
|
|
55
|
-
<div class="grid cols-3">
|
|
56
|
-
<textarea name=""></textarea>
|
|
57
|
-
<textarea name=""></textarea>
|
|
58
|
-
<textarea name=""></textarea>
|
|
59
|
-
</div>
|
|
60
|
-
</div>
|
|
61
16
|
|
|
62
17
|
<div class="quick-hide-div zebra">
|
|
63
|
-
<section id="
|
|
64
|
-
<div class="container">
|
|
65
|
-
<h2 class="title
|
|
66
|
-
<div
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
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>
|
|
83
42
|
|
|
84
|
-
|
|
43
|
+
</section>
|
|
85
44
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
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>
|
|
92
110
|
</div>
|
|
93
111
|
</div>
|
|
94
112
|
</div>
|
|
95
113
|
</section>
|
|
96
114
|
<section id="form-controls" class="py-3">
|
|
97
115
|
<div class="container grid cols-2">
|
|
98
|
-
<div
|
|
99
|
-
<
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
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>
|
|
104
142
|
</div>
|
|
105
|
-
<
|
|
106
|
-
<div
|
|
107
|
-
<
|
|
108
|
-
<
|
|
109
|
-
|
|
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>
|
|
110
175
|
</div>
|
|
111
|
-
<
|
|
112
|
-
|
|
113
|
-
<
|
|
114
|
-
<
|
|
115
|
-
<
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
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>
|
|
128
199
|
</div>
|
|
129
200
|
</div>
|
|
130
201
|
<div id="file-input">
|
|
202
|
+
<div class="my">
|
|
203
|
+
<input type="file" name="name">
|
|
204
|
+
<!-- <button type="submit" class="btn">Upload</button> -->
|
|
205
|
+
<input type="text">
|
|
206
|
+
</div>
|
|
207
|
+
<hr>
|
|
131
208
|
<label class="file">
|
|
132
209
|
<input type="file" name="name">
|
|
133
210
|
<span> Select file... </span>
|
|
@@ -140,13 +217,46 @@
|
|
|
140
217
|
<div class="frm-row my">
|
|
141
218
|
<label class="file btn">
|
|
142
219
|
<input type="file" name="">
|
|
143
|
-
<svg class="wh-1.25 mr-075" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
144
|
-
|
|
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" />
|
|
145
225
|
</svg>
|
|
146
226
|
<span>Choose a file...</span>
|
|
147
227
|
</label>
|
|
148
228
|
</div>
|
|
149
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>
|
|
150
260
|
</div>
|
|
151
261
|
</div>
|
|
152
262
|
</section>
|
|
@@ -156,7 +266,8 @@
|
|
|
156
266
|
<div class="grid cols-3">
|
|
157
267
|
<div class="bx">
|
|
158
268
|
<div class="bx-title">Super Awesome Title</div>
|
|
159
|
-
<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>
|
|
160
271
|
</div>
|
|
161
272
|
</div>
|
|
162
273
|
</div>
|
|
@@ -195,6 +306,66 @@
|
|
|
195
306
|
</div>
|
|
196
307
|
</div>
|
|
197
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>
|
|
198
369
|
</div>
|
|
199
370
|
|
|
200
371
|
<!-- -->
|
|
@@ -367,14 +538,16 @@
|
|
|
367
538
|
<nav>
|
|
368
539
|
<ul>
|
|
369
540
|
<li><a class="active" href="#">Home</a></li>
|
|
370
|
-
<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">
|
|
371
543
|
<a href="#">
|
|
372
544
|
Services
|
|
373
545
|
<svg class="icon sm">
|
|
374
546
|
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
375
547
|
</svg>
|
|
376
548
|
</a>
|
|
377
|
-
<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;">
|
|
378
551
|
<ul class="menu bx pxy-0 w-full">
|
|
379
552
|
<li><a href="#">Graphic Design</a></li>
|
|
380
553
|
<li><a href="#">Digital Marketing</a></li>
|
|
@@ -413,14 +586,16 @@
|
|
|
413
586
|
</ul>
|
|
414
587
|
</div>
|
|
415
588
|
</li>
|
|
416
|
-
<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">
|
|
417
591
|
<a href="#">
|
|
418
592
|
Parent (alpine hover)
|
|
419
593
|
<svg class="icon sm">
|
|
420
594
|
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
421
595
|
</svg>
|
|
422
596
|
</a>
|
|
423
|
-
<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;">
|
|
424
599
|
<ul class="menu bx pxy-0 w-full">
|
|
425
600
|
<li><a class="txt-red" href="#">Child Override</a></li>
|
|
426
601
|
<li><a href="#">Child</a></li>
|
|
@@ -435,7 +610,8 @@
|
|
|
435
610
|
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
436
611
|
</svg>
|
|
437
612
|
</a>
|
|
438
|
-
<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;">
|
|
439
615
|
<ul class="menu bx pxy-0 w-full">
|
|
440
616
|
<li><a class="txt-red" href="#">Child Override</a></li>
|
|
441
617
|
<li><a href="#">Child</a></li>
|
|
@@ -469,14 +645,16 @@
|
|
|
469
645
|
</ul>
|
|
470
646
|
</div>
|
|
471
647
|
</li>
|
|
472
|
-
<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">
|
|
473
650
|
<a href="#">
|
|
474
651
|
Parent (alpine hover)
|
|
475
652
|
<svg class="icon sm">
|
|
476
653
|
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
477
654
|
</svg>
|
|
478
655
|
</a>
|
|
479
|
-
<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;">
|
|
480
658
|
<ul class="menu bx pxy-0 w-full">
|
|
481
659
|
<li><a href="#">Child</a></li>
|
|
482
660
|
<li><a href="#">Child</a></li>
|
|
@@ -491,7 +669,8 @@
|
|
|
491
669
|
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
492
670
|
</svg>
|
|
493
671
|
</a>
|
|
494
|
-
<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;">
|
|
495
674
|
<ul class="menu bx pxy-0 w-full">
|
|
496
675
|
<li><a href="#">Child</a></li>
|
|
497
676
|
<li><a href="#">Child</a></li>
|
|
@@ -561,54 +740,7 @@
|
|
|
561
740
|
<h4>Collapse</h4>
|
|
562
741
|
</div>
|
|
563
742
|
</section>
|
|
564
|
-
|
|
565
|
-
<div class="container">
|
|
566
|
-
<h2 class="title txt-3">Buttons</h2>
|
|
567
|
-
<h4>Button sizes</h4>
|
|
568
|
-
<div class="flex va-c space-x-05">
|
|
569
|
-
<button class="btn primary xs">Extra Small</button>
|
|
570
|
-
<button class="btn primary sm">Small</button>
|
|
571
|
-
<button class="btn primary">Base</button>
|
|
572
|
-
<button class="btn primary lg">Large</button>
|
|
573
|
-
<button class="btn primary xl">Extra Large</button>
|
|
574
|
-
</div>
|
|
575
|
-
<h4>Buttons with icon (TBD)</h4>
|
|
576
|
-
<h4>Base Colors</h4>
|
|
577
|
-
<div class="grid-1 cols-9">
|
|
578
|
-
<button class="btn stone">stone</button>
|
|
579
|
-
<button class="btn brown">brown</button>
|
|
580
|
-
<button class="btn red">red</button>
|
|
581
|
-
<button class="btn orange">orange</button>
|
|
582
|
-
<button class="btn amber">amber</button>
|
|
583
|
-
<button class="btn yellow">yellow</button>
|
|
584
|
-
<button class="btn lime">lime</button>
|
|
585
|
-
<button class="btn emerald">emerald</button>
|
|
586
|
-
<button class="btn green">green</button>
|
|
587
|
-
<button class="btn teal">teal</button>
|
|
588
|
-
<button class="btn cyan">cyan</button>
|
|
589
|
-
<button class="btn sky">sky</button>
|
|
590
|
-
<button class="btn blue">blue</button>
|
|
591
|
-
<button class="btn indigo">indigo</button>
|
|
592
|
-
<button class="btn purple">purple</button>
|
|
593
|
-
<button class="btn fuchsia">fuchsia</button>
|
|
594
|
-
<button class="btn pink">pink</button>
|
|
595
|
-
<button class="btn rose">rose</button>
|
|
596
|
-
</div>
|
|
597
|
-
<h4>Theme Colors and Alert Colors</h4>
|
|
598
|
-
<div class="grid cols-10">
|
|
599
|
-
<button class="btn primary">primary</button>
|
|
600
|
-
<button class="btn secondary">secondary</button>
|
|
601
|
-
<button class="btn accent">accent</button>
|
|
602
|
-
<button class="btn light">light</button>
|
|
603
|
-
<button class="btn dark">dark</button>
|
|
604
|
-
<button class="btn muted">muted</button>
|
|
605
|
-
<button class="btn danger">danger</button>
|
|
606
|
-
<button class="btn info">info</button>
|
|
607
|
-
<button class="btn success">success</button>
|
|
608
|
-
<button class="btn warning">warning</button>
|
|
609
|
-
</div>
|
|
610
|
-
</div>
|
|
611
|
-
</section>
|
|
743
|
+
|
|
612
744
|
<section id="theme-examples">
|
|
613
745
|
<div class="container">
|
|
614
746
|
<h2 class="title txt-3">Basic Themes</h2>
|
|
@@ -687,73 +819,30 @@
|
|
|
687
819
|
</div>
|
|
688
820
|
</div>
|
|
689
821
|
</section>
|
|
690
|
-
<section id="button-and-form-controls">
|
|
691
|
-
<div class="container">
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
<h2 class="title">Buttons and Form Controls</h2>
|
|
699
|
-
|
|
700
|
-
<div class="my">
|
|
701
|
-
<button class="btn primary">primary</button>
|
|
702
|
-
<input id="input" name="input" type="text" placeholder="Text Input">
|
|
703
|
-
<button type="button">Button</button>
|
|
704
|
-
<button type="reset">Reset</button>
|
|
705
|
-
<button type="submit">Submit</button>
|
|
706
|
-
</div>
|
|
707
|
-
|
|
708
|
-
<div class="frm-row">
|
|
709
|
-
<label for="success" class="txt-success-light">Your name</label>
|
|
710
|
-
<input type="text" id="success" class="success-light" placeholder="Success input">
|
|
711
|
-
<p class="txt-success-light txt-sm"><span class="font-medium">Well done!</span> Some success message.</p>
|
|
712
|
-
</div>
|
|
713
|
-
|
|
714
|
-
<div class="frm-row">
|
|
715
|
-
<label for="error" class="block mb-2 text-sm font-medium text-red-700 dark:text-red-500">Your name</label>
|
|
716
|
-
<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">
|
|
717
|
-
<p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oh, snapp!</span> Some error message.</p>
|
|
718
|
-
</div>
|
|
719
822
|
|
|
720
|
-
<div class="frm-row">
|
|
721
|
-
<div class="withAddons">
|
|
722
|
-
<div class="leadingAddon light">
|
|
723
|
-
<svg class="icon txt-muted">
|
|
724
|
-
<use xlink:href="/svg/naykel-ui.svg#user"></use>
|
|
725
|
-
</svg>
|
|
726
|
-
</div>
|
|
727
|
-
<div class="trailingAddon light">
|
|
728
|
-
<svg class="icon txt-muted">
|
|
729
|
-
<use xlink:href="/svg/naykel-ui.svg#tick-round"></use>
|
|
730
|
-
</svg>
|
|
731
|
-
</div>
|
|
732
|
-
<input type="text">
|
|
733
|
-
</div>
|
|
734
|
-
</div>
|
|
735
|
-
|
|
736
|
-
</div>
|
|
737
|
-
</section>
|
|
738
823
|
</div>
|
|
739
824
|
|
|
740
825
|
<main class="container maxw-lg c-py-3-2">
|
|
741
826
|
<section>
|
|
742
827
|
<h2>Theme Boxes</h2>
|
|
743
828
|
<div class="grid cols-3 my">
|
|
744
|
-
<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.
|
|
745
831
|
<a href="">Link</a>
|
|
746
832
|
</div>
|
|
747
|
-
<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.
|
|
748
835
|
<a href="">Link</a>
|
|
749
836
|
</div>
|
|
750
|
-
<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.
|
|
751
839
|
<a href="">Link</a>
|
|
752
840
|
</div>
|
|
753
841
|
</div>
|
|
754
842
|
</section>
|
|
755
843
|
|
|
756
|
-
<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">
|
|
757
846
|
<option selected>Choose a country</option>
|
|
758
847
|
<option value="US">United States</option>
|
|
759
848
|
<option value="CA">Canada</option>
|
|
@@ -1538,6 +1627,6 @@
|
|
|
1538
1627
|
|
|
1539
1628
|
<div id="app"></div>
|
|
1540
1629
|
<script type="module" src="/main.js"></script>
|
|
1541
|
-
|
|
1630
|
+
</body>
|
|
1542
1631
|
|
|
1543
1632
|
</html>
|