nk_jtb 0.9.12 → 0.9.15
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 +305 -174
- package/package.json +1 -1
- package/src/_nk.scss +18 -51
- package/src/base/_base.scss +17 -20
- 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 +28 -89
- package/src/variables/_base.scss +12 -24
- 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 -38
- package/tmp/_general.scss +0 -56
- package/tmp/_nk.scss +0 -57
- package/tmp/_state.scss +0 -0
package/index.html
CHANGED
|
@@ -6,86 +6,205 @@
|
|
|
6
6
|
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
|
|
7
7
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
8
8
|
<title>NayKel JTB</title>
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
|
|
9
10
|
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
|
|
10
11
|
<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>
|
|
12
|
+
|
|
20
13
|
</head>
|
|
21
14
|
|
|
22
15
|
<body>
|
|
16
|
+
|
|
17
|
+
<div class="container mt">
|
|
18
|
+
<div class="grid cols-2">
|
|
19
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur alias a omnis ipsa perferendis dolorum suscipit facere excepturi atque totam illo, exercitationem voluptas accusamus libero ipsum harum, rerum explicabo ducimus.</p>
|
|
20
|
+
<p class="font-serif">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae magni placeat eligendi. Officiis, voluptate. Eligendi id nesciunt, totam ipsam nobis officia ex voluptate eveniet voluptatem voluptatibus animi molestias dignissimos nulla.</p>
|
|
21
|
+
<p class="font-sans-serif">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur laborum est exercitationem asperiores voluptate, dolor id magnam, eligendi veniam quo natus numquam vel culpa obcaecati ullam ipsam eveniet velit sunt?</p>
|
|
22
|
+
<p class="font-mono">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure delectus excepturi dolorum. Eum consequuntur natus eveniet illo consequatur? Inventore, incidunt! Aspernatur laudantium officia veniam! Temporibus eaque qui nemo recusandae similique.</p>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
|
|
23
26
|
<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
|
-
|
|
27
|
+
<section id="button-control-sizes-examples" class="py-3">
|
|
28
|
+
<div class="container space-y">
|
|
29
|
+
<h2 class="title txt-3">Button and Control Sizes</h2>
|
|
30
|
+
<div>
|
|
31
|
+
<button class="btn primary xs">Extra Small</button>
|
|
32
|
+
<input class="xs" placeholder="Text Input">
|
|
33
|
+
</div>
|
|
34
|
+
<div>
|
|
35
|
+
<button class="btn primary sm">Small</button>
|
|
36
|
+
<input class="sm" placeholder="Text Input">
|
|
37
|
+
</div>
|
|
38
|
+
<div>
|
|
39
|
+
<button class="btn primary">Base</button>
|
|
40
|
+
<input placeholder="Text Input">
|
|
41
|
+
</div>
|
|
42
|
+
<div>
|
|
43
|
+
<button class="btn primary lg">Large</button>
|
|
44
|
+
<input class="lg" placeholder="Text Input">
|
|
45
|
+
</div>
|
|
46
|
+
<div>
|
|
47
|
+
<button class="btn primary xl">Extra Large</button>
|
|
48
|
+
<input class="xl" placeholder="Text Input">
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
44
51
|
|
|
45
|
-
|
|
52
|
+
</section>
|
|
46
53
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
54
|
+
<section id="button-theme-examples" class="py-3">
|
|
55
|
+
<div class="container">
|
|
56
|
+
<h2 class="title txt-3">Buttons</h2>
|
|
57
|
+
<h4>Buttons with icon (TBD)</h4>
|
|
58
|
+
<h4>Base Colors</h4>
|
|
59
|
+
<div class="grid-1 cols-9">
|
|
60
|
+
<button class="btn stone">stone</button>
|
|
61
|
+
<button class="btn brown">brown</button>
|
|
62
|
+
<button class="btn red">red</button>
|
|
63
|
+
<button class="btn orange">orange</button>
|
|
64
|
+
<button class="btn amber">amber</button>
|
|
65
|
+
<button class="btn yellow">yellow</button>
|
|
66
|
+
<button class="btn lime">lime</button>
|
|
67
|
+
<button class="btn emerald">emerald</button>
|
|
68
|
+
<button class="btn green">green</button>
|
|
69
|
+
<button class="btn teal">teal</button>
|
|
70
|
+
<button class="btn cyan">cyan</button>
|
|
71
|
+
<button class="btn sky">sky</button>
|
|
72
|
+
<button class="btn blue">blue</button>
|
|
73
|
+
<button class="btn indigo">indigo</button>
|
|
74
|
+
<button class="btn purple">purple</button>
|
|
75
|
+
<button class="btn fuchsia">fuchsia</button>
|
|
76
|
+
<button class="btn pink">pink</button>
|
|
77
|
+
<button class="btn rose">rose</button>
|
|
78
|
+
</div>
|
|
79
|
+
<h4>Theme Colors and Alert Colors</h4>
|
|
80
|
+
<div class="grid cols-10">
|
|
81
|
+
<button class="btn primary">primary</button>
|
|
82
|
+
<button class="btn secondary">secondary</button>
|
|
83
|
+
<button class="btn accent">accent</button>
|
|
84
|
+
<button class="btn light">light</button>
|
|
85
|
+
<button class="btn dark">dark</button>
|
|
86
|
+
<button class="btn muted">muted</button>
|
|
87
|
+
<button class="btn danger">danger</button>
|
|
88
|
+
<button class="btn info">info</button>
|
|
89
|
+
<button class="btn success">success</button>
|
|
90
|
+
<button class="btn warning">warning</button>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
</section>
|
|
94
|
+
<section class="py-3">
|
|
95
|
+
<div class="container-sm py-3 bx">
|
|
96
|
+
<div class="grid cols-2">
|
|
97
|
+
<div class="frm-row">
|
|
98
|
+
<label for="">Firstname</label>
|
|
99
|
+
<div class="flex-col w-full my-0">
|
|
100
|
+
<input name="name" id="name" class="" for="name" label="Name"
|
|
101
|
+
placeholder="Enter your name...">
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="frm-row">
|
|
105
|
+
<label for="">Lastname</label>
|
|
106
|
+
<div class="flex-col w-full my-0">
|
|
107
|
+
<input name="name" id="name" class="" for="name" label="Name"
|
|
108
|
+
placeholder="Enter your name...">
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
<div class="frm-row">
|
|
113
|
+
<label for="form.country"> Country <span class="txt-red">*</span> </label>
|
|
114
|
+
<div class="flex-col w-full my-0">
|
|
115
|
+
<select name="form.country" id="form.country" class="" wire:model="form.country" req="req">
|
|
116
|
+
<option value="AU">Australia</option>
|
|
117
|
+
<option value="NZ">New Zealand</option>
|
|
118
|
+
</select>
|
|
53
119
|
</div>
|
|
54
120
|
</div>
|
|
55
121
|
</div>
|
|
56
122
|
</section>
|
|
57
123
|
<section id="form-controls" class="py-3">
|
|
58
124
|
<div class="container grid cols-2">
|
|
59
|
-
<div
|
|
60
|
-
<
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
125
|
+
<div>
|
|
126
|
+
<div class="frm-row">
|
|
127
|
+
<div class="flex va-c space-between mb-05">
|
|
128
|
+
<label for="name"> Name </label>
|
|
129
|
+
<span x-data="{open:false}" class="relative" x-on:mouseenter="open=true"
|
|
130
|
+
x-on:mouseleave="open=false">
|
|
131
|
+
<div class="flex va-c">
|
|
132
|
+
<svg class="txt-muted" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
133
|
+
fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
|
134
|
+
aria-hidden="true" data-slot="icon">
|
|
135
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
136
|
+
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">
|
|
137
|
+
</path>
|
|
138
|
+
</svg>
|
|
139
|
+
</div>
|
|
140
|
+
<div class="absolute pos-r minw-18 z-100 bx pxy-075 mt-05 txt-sm fw4 bg-stone-50"
|
|
141
|
+
x-show="open" x-transition.duration="" style="display: none;">
|
|
142
|
+
Lorem ipsum dolor, rerum minus magnam consequatur eos ut aliquam aspernatur sapiente
|
|
143
|
+
veniam! Repudiandae voluptatum eius ducimus?
|
|
144
|
+
</div>
|
|
145
|
+
</span>
|
|
146
|
+
</div>
|
|
147
|
+
<div class="flex-col w-full my-0">
|
|
148
|
+
<input name="name" id="name" class="" for="name" label="Name"
|
|
149
|
+
placeholder="Enter your name...">
|
|
150
|
+
</div>
|
|
65
151
|
</div>
|
|
66
|
-
<
|
|
67
|
-
<div
|
|
68
|
-
<
|
|
69
|
-
<
|
|
70
|
-
|
|
152
|
+
<hr>
|
|
153
|
+
<div id="radio-check-toggle">
|
|
154
|
+
<h5>Radio</h5>
|
|
155
|
+
<div class="space-x">
|
|
156
|
+
<label><input type="radio" name="abc">Option</label>
|
|
157
|
+
<label><input type="radio" name="abc" checked>Checked</label>
|
|
158
|
+
<label><input type="radio" name="abc" disabled>Disabled</label>
|
|
159
|
+
</div>
|
|
160
|
+
<h5>Checkbox</h5>
|
|
161
|
+
<div class="space-x">
|
|
162
|
+
<label><input type="checkbox">Option</label>
|
|
163
|
+
<label><input type="checkbox" checked>Checked</label>
|
|
164
|
+
<label><input type="checkbox" disabled>Disabled</label>
|
|
165
|
+
</div>
|
|
166
|
+
<h5>Slider</h5>
|
|
167
|
+
<div class="space-x">
|
|
168
|
+
<label class="toggle">
|
|
169
|
+
<input type="checkbox">
|
|
170
|
+
<div class="slider"></div>
|
|
171
|
+
<span>Option</span>
|
|
172
|
+
</label>
|
|
173
|
+
<label class="toggle">
|
|
174
|
+
<input type="checkbox" checked>
|
|
175
|
+
<div class="slider"></div>
|
|
176
|
+
<span>Checked</span>
|
|
177
|
+
</label>
|
|
178
|
+
<label class="toggle">
|
|
179
|
+
<input type="checkbox" disabled>
|
|
180
|
+
<div class="slider"></div>
|
|
181
|
+
<span>Disabled</span>
|
|
182
|
+
</label>
|
|
183
|
+
</div>
|
|
71
184
|
</div>
|
|
72
|
-
<
|
|
73
|
-
|
|
74
|
-
<
|
|
75
|
-
<
|
|
76
|
-
<
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
185
|
+
<div id="label-with-tooltip">
|
|
186
|
+
<h5 class="my">Label with Tooltip</h5>
|
|
187
|
+
<div class="flex va-c space-between mb-05 bdr">
|
|
188
|
+
<label> My Label </label>
|
|
189
|
+
<span x-data="{open:false}" class="relative" x-on:mouseenter="open=true"
|
|
190
|
+
x-on:mouseleave="open=false">
|
|
191
|
+
<div class="flex va-c">
|
|
192
|
+
<svg class="txt-muted" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
193
|
+
fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
|
194
|
+
aria-hidden="true" data-slot="icon">
|
|
195
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
196
|
+
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">
|
|
197
|
+
</path>
|
|
198
|
+
</svg>
|
|
199
|
+
</div>
|
|
200
|
+
<div class="absolute pos-r minw-18 z-100 bx pxy-075 mt-05 txt-sm fw4 bg-stone-50"
|
|
201
|
+
x-show="open" x-transition.duration="" style="display: none;">
|
|
202
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur vitae
|
|
203
|
+
perspiciatis officiis iste omnis, iure quasi, rerum minus magnam consequatur eos ut
|
|
204
|
+
aliquam aspernatur sapiente veniam! Repudiandae voluptatum eius ducimus?
|
|
205
|
+
</div>
|
|
206
|
+
</span>
|
|
207
|
+
</div>
|
|
89
208
|
</div>
|
|
90
209
|
</div>
|
|
91
210
|
<div id="file-input">
|
|
@@ -107,13 +226,46 @@
|
|
|
107
226
|
<div class="frm-row my">
|
|
108
227
|
<label class="file btn">
|
|
109
228
|
<input type="file" name="">
|
|
110
|
-
<svg class="wh-1.25 mr-075" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
111
|
-
|
|
229
|
+
<svg class="wh-1.25 mr-075" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
230
|
+
viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
|
|
231
|
+
<path fill-rule="evenodd"
|
|
232
|
+
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"
|
|
233
|
+
clip-rule="evenodd" />
|
|
112
234
|
</svg>
|
|
113
235
|
<span>Choose a file...</span>
|
|
114
236
|
</label>
|
|
115
237
|
</div>
|
|
116
238
|
</div>
|
|
239
|
+
<div class="frm-row">
|
|
240
|
+
<label for="success" class="txt-success-light">Your name</label>
|
|
241
|
+
<input type="text" id="success" class="success-light" placeholder="Success input">
|
|
242
|
+
<p class="txt-success-light txt-sm"><span class="font-medium">Well done!</span> Some success
|
|
243
|
+
message.</p>
|
|
244
|
+
</div>
|
|
245
|
+
<div class="frm-row">
|
|
246
|
+
<label for="error" class="block mb-2 text-sm font-medium text-red-700 dark:text-red-500">Your
|
|
247
|
+
name</label>
|
|
248
|
+
<input type="text" id="error"
|
|
249
|
+
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"
|
|
250
|
+
placeholder="Error input">
|
|
251
|
+
<p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oh,
|
|
252
|
+
snapp!</span> Some error message.</p>
|
|
253
|
+
</div>
|
|
254
|
+
<div class="frm-row">
|
|
255
|
+
<div class="withAddons">
|
|
256
|
+
<div class="leadingAddon light">
|
|
257
|
+
<svg class="icon txt-muted">
|
|
258
|
+
<use xlink:href="/svg/naykel-ui.svg#user"></use>
|
|
259
|
+
</svg>
|
|
260
|
+
</div>
|
|
261
|
+
<div class="trailingAddon light">
|
|
262
|
+
<svg class="icon txt-muted">
|
|
263
|
+
<use xlink:href="/svg/naykel-ui.svg#tick-round"></use>
|
|
264
|
+
</svg>
|
|
265
|
+
</div>
|
|
266
|
+
<input type="text">
|
|
267
|
+
</div>
|
|
268
|
+
</div>
|
|
117
269
|
</div>
|
|
118
270
|
</div>
|
|
119
271
|
</section>
|
|
@@ -123,7 +275,8 @@
|
|
|
123
275
|
<div class="grid cols-3">
|
|
124
276
|
<div class="bx">
|
|
125
277
|
<div class="bx-title">Super Awesome Title</div>
|
|
126
|
-
<p>Lorem ipsum dolor sit amet consectetur pepe adipisicing elit. Quas debitis unde aut, sed
|
|
278
|
+
<p>Lorem ipsum dolor sit amet consectetur pepe adipisicing elit. Quas debitis unde aut, sed
|
|
279
|
+
repellendus tempora, molestiae eveniet.</p>
|
|
127
280
|
</div>
|
|
128
281
|
</div>
|
|
129
282
|
</div>
|
|
@@ -162,6 +315,66 @@
|
|
|
162
315
|
</div>
|
|
163
316
|
</div>
|
|
164
317
|
</section>
|
|
318
|
+
<section id="typography" class="py-3">
|
|
319
|
+
<div class="container">
|
|
320
|
+
<h2 class="title mb-3">Typography</h2>
|
|
321
|
+
<div class="grid-3 cols-2">
|
|
322
|
+
<div id="headings">
|
|
323
|
+
<h1>Heading 1</h1>
|
|
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
|
+
<h2>Heading 2</h2>
|
|
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
|
+
<h3>Heading 3</h3>
|
|
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
|
+
<h4>Heading 4</h4>
|
|
333
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
334
|
+
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
335
|
+
<h5>Heading 5</h5>
|
|
336
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
337
|
+
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
338
|
+
<h6>Heading 6</h6>
|
|
339
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
340
|
+
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
341
|
+
</div>
|
|
342
|
+
<div>
|
|
343
|
+
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sed aperiam
|
|
344
|
+
quibusdam adipisci sequi deserunt nesciunt vel illum voluptatibus maxime soluta repudiandae
|
|
345
|
+
numquam sapiente exercitationem, culpa, omnis expedita tempore? Similique.</p>
|
|
346
|
+
|
|
347
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at corporis deserunt sint eum
|
|
348
|
+
laboriosam quae nulla fugit, error, tempore quibusdam temporibus fuga adipisci. Nam
|
|
349
|
+
architecto sunt cupiditate soluta molestias ipsum delectus numquam illo magnam! Praesentium
|
|
350
|
+
quos deserunt sed, maxime, eligendi quasi, sequi fugiat facere neque harum debitis laborum
|
|
351
|
+
ipsam!</p>
|
|
352
|
+
|
|
353
|
+
<h3 class="title">Text Sizes</h3>
|
|
354
|
+
<p class="txt-xs">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
|
|
355
|
+
asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
|
|
356
|
+
similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
|
|
357
|
+
repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
358
|
+
<p class="txt-sm">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
|
|
359
|
+
asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
|
|
360
|
+
similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
|
|
361
|
+
repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
362
|
+
<p class="txt-base">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto
|
|
363
|
+
delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam
|
|
364
|
+
exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam
|
|
365
|
+
deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
366
|
+
<p class="txt-lg">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
|
|
367
|
+
asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
|
|
368
|
+
similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
|
|
369
|
+
repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
370
|
+
<p class="txt-xl">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
|
|
371
|
+
asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
|
|
372
|
+
similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
|
|
373
|
+
repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
374
|
+
</div>
|
|
375
|
+
</div>
|
|
376
|
+
</div>
|
|
377
|
+
</section>
|
|
165
378
|
</div>
|
|
166
379
|
|
|
167
380
|
<!-- -->
|
|
@@ -334,14 +547,16 @@
|
|
|
334
547
|
<nav>
|
|
335
548
|
<ul>
|
|
336
549
|
<li><a class="active" href="#">Home</a></li>
|
|
337
|
-
<li class="relative" x-data="{showChildren:false}" x-on:mouseenter="showChildren=true"
|
|
550
|
+
<li class="relative" x-data="{showChildren:false}" x-on:mouseenter="showChildren=true"
|
|
551
|
+
x-on:mouseleave="showChildren=false">
|
|
338
552
|
<a href="#">
|
|
339
553
|
Services
|
|
340
554
|
<svg class="icon sm">
|
|
341
555
|
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
342
556
|
</svg>
|
|
343
557
|
</a>
|
|
344
|
-
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren"
|
|
558
|
+
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren"
|
|
559
|
+
x-transition.duration.200ms style="display: none;">
|
|
345
560
|
<ul class="menu bx pxy-0 w-full">
|
|
346
561
|
<li><a href="#">Graphic Design</a></li>
|
|
347
562
|
<li><a href="#">Digital Marketing</a></li>
|
|
@@ -380,14 +595,16 @@
|
|
|
380
595
|
</ul>
|
|
381
596
|
</div>
|
|
382
597
|
</li>
|
|
383
|
-
<li class="relative" x-data="{showChildren:true}" x-on:mouseenter="showChildren=true"
|
|
598
|
+
<li class="relative" x-data="{showChildren:true}" x-on:mouseenter="showChildren=true"
|
|
599
|
+
x-on:mouseleave="showChildren=true">
|
|
384
600
|
<a href="#">
|
|
385
601
|
Parent (alpine hover)
|
|
386
602
|
<svg class="icon sm">
|
|
387
603
|
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
388
604
|
</svg>
|
|
389
605
|
</a>
|
|
390
|
-
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
606
|
+
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
607
|
+
style="display: none;">
|
|
391
608
|
<ul class="menu bx pxy-0 w-full">
|
|
392
609
|
<li><a class="txt-red" href="#">Child Override</a></li>
|
|
393
610
|
<li><a href="#">Child</a></li>
|
|
@@ -402,7 +619,8 @@
|
|
|
402
619
|
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
403
620
|
</svg>
|
|
404
621
|
</a>
|
|
405
|
-
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
622
|
+
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
623
|
+
style="display: none;">
|
|
406
624
|
<ul class="menu bx pxy-0 w-full">
|
|
407
625
|
<li><a class="txt-red" href="#">Child Override</a></li>
|
|
408
626
|
<li><a href="#">Child</a></li>
|
|
@@ -436,14 +654,16 @@
|
|
|
436
654
|
</ul>
|
|
437
655
|
</div>
|
|
438
656
|
</li>
|
|
439
|
-
<li class="relative" x-data="{showChildren:false}" x-on:mouseenter="showChildren=true"
|
|
657
|
+
<li class="relative" x-data="{showChildren:false}" x-on:mouseenter="showChildren=true"
|
|
658
|
+
x-on:mouseleave="showChildren=false">
|
|
440
659
|
<a href="#">
|
|
441
660
|
Parent (alpine hover)
|
|
442
661
|
<svg class="icon sm">
|
|
443
662
|
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
444
663
|
</svg>
|
|
445
664
|
</a>
|
|
446
|
-
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
665
|
+
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
666
|
+
style="display: none;">
|
|
447
667
|
<ul class="menu bx pxy-0 w-full">
|
|
448
668
|
<li><a href="#">Child</a></li>
|
|
449
669
|
<li><a href="#">Child</a></li>
|
|
@@ -458,7 +678,8 @@
|
|
|
458
678
|
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
459
679
|
</svg>
|
|
460
680
|
</a>
|
|
461
|
-
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
681
|
+
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
682
|
+
style="display: none;">
|
|
462
683
|
<ul class="menu bx pxy-0 w-full">
|
|
463
684
|
<li><a href="#">Child</a></li>
|
|
464
685
|
<li><a href="#">Child</a></li>
|
|
@@ -528,54 +749,7 @@
|
|
|
528
749
|
<h4>Collapse</h4>
|
|
529
750
|
</div>
|
|
530
751
|
</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>
|
|
752
|
+
|
|
579
753
|
<section id="theme-examples">
|
|
580
754
|
<div class="container">
|
|
581
755
|
<h2 class="title txt-3">Basic Themes</h2>
|
|
@@ -654,73 +828,30 @@
|
|
|
654
828
|
</div>
|
|
655
829
|
</div>
|
|
656
830
|
</section>
|
|
657
|
-
<section id="button-and-form-controls">
|
|
658
|
-
<div class="container">
|
|
659
|
-
|
|
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
831
|
|
|
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
832
|
</div>
|
|
706
833
|
|
|
707
834
|
<main class="container maxw-lg c-py-3-2">
|
|
708
835
|
<section>
|
|
709
836
|
<h2>Theme Boxes</h2>
|
|
710
837
|
<div class="grid cols-3 my">
|
|
711
|
-
<div class="bx primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla
|
|
838
|
+
<div class="bx primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla
|
|
839
|
+
debitis molestiae expedita reiciendis molestias.
|
|
712
840
|
<a href="">Link</a>
|
|
713
841
|
</div>
|
|
714
|
-
<div class="bx secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla
|
|
842
|
+
<div class="bx secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla
|
|
843
|
+
debitis molestiae expedita reiciendis molestias.
|
|
715
844
|
<a href="">Link</a>
|
|
716
845
|
</div>
|
|
717
|
-
<div class="bx accent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla
|
|
846
|
+
<div class="bx accent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla
|
|
847
|
+
debitis molestiae expedita reiciendis molestias.
|
|
718
848
|
<a href="">Link</a>
|
|
719
849
|
</div>
|
|
720
850
|
</div>
|
|
721
851
|
</section>
|
|
722
852
|
|
|
723
|
-
<select id="countries"
|
|
853
|
+
<select id="countries"
|
|
854
|
+
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
855
|
<option selected>Choose a country</option>
|
|
725
856
|
<option value="US">United States</option>
|
|
726
857
|
<option value="CA">Canada</option>
|