nk_jtb 0.16.0 → 0.16.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 +2125 -2009
- package/package.json +1 -1
- package/src/forms/_form.scss +22 -36
- package/src/maps_and_variables/_utility-maps.scss +6 -11
- package/src/utilities/_sizing.scss +7 -3
package/index.html
CHANGED
|
@@ -10,289 +10,525 @@
|
|
|
10
10
|
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
|
|
11
11
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
12
12
|
</head>
|
|
13
|
-
<!--
|
|
14
|
-
<section id="table" class="py-3">
|
|
15
|
-
<div class="container">
|
|
16
|
-
<h2 class="title txt-3">Tables</h2>
|
|
17
|
-
|
|
18
|
-
</div>
|
|
19
|
-
</section>
|
|
20
|
-
-->
|
|
21
13
|
|
|
22
14
|
<body class="zebra c-py-5-3-2">
|
|
23
|
-
<!-- structure -->
|
|
24
15
|
|
|
25
|
-
|
|
26
|
-
<section id="navbar">
|
|
16
|
+
<section id="form-controls" class="py-3">
|
|
27
17
|
<div class="container">
|
|
28
|
-
<div class="
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
<div class="
|
|
34
|
-
|
|
18
|
+
<div class="txt-red txt-4">moved to JTB docs</div>
|
|
19
|
+
<h2 class="title txt-3">Form Controls</h2>
|
|
20
|
+
<div class="grid cols-2">
|
|
21
|
+
<div id="radio-check-toggle">
|
|
22
|
+
<h5>Radio</h5>
|
|
23
|
+
<div class="space-x">
|
|
24
|
+
<label><input type="radio" name="abc">Option</label>
|
|
25
|
+
<label><input type="radio" name="abc" checked>Checked</label>
|
|
26
|
+
<label><input type="radio" name="abc" disabled>Disabled</label>
|
|
35
27
|
</div>
|
|
36
|
-
<
|
|
37
|
-
|
|
28
|
+
<h5>Checkbox</h5>
|
|
29
|
+
<div class="space-x">
|
|
30
|
+
<label><input type="checkbox">Option</label>
|
|
31
|
+
<label><input type="checkbox" checked>Checked</label>
|
|
32
|
+
<label><input type="checkbox" disabled>Disabled</label>
|
|
38
33
|
</div>
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
</svg>
|
|
57
|
-
</a>
|
|
58
|
-
<div class="absolute mt-05 flex w-10 z-100" x-show="show"
|
|
59
|
-
x-transition.duration.200ms style="display: none;">
|
|
60
|
-
<ul class="menu bx pxy-0 w-full">
|
|
61
|
-
<li><a href="#">Graphic Design</a></li>
|
|
62
|
-
<li><a href="#">Digital Marketing</a></li>
|
|
63
|
-
<li><a href="#">Mobile App Development</a></li>
|
|
64
|
-
<li><a href="#">IT Consulting</a></li>
|
|
65
|
-
</ul>
|
|
66
|
-
</div>
|
|
67
|
-
</li>
|
|
68
|
-
<li><a href="#">About</a></li>
|
|
69
|
-
<li><a href="#">Contact</a></li>
|
|
70
|
-
</ul>
|
|
71
|
-
</nav>
|
|
34
|
+
<h5>Slider</h5>
|
|
35
|
+
<div class="space-x">
|
|
36
|
+
<label class="toggle">
|
|
37
|
+
<input type="checkbox">
|
|
38
|
+
<div class="slider"></div>
|
|
39
|
+
<span>Option</span>
|
|
40
|
+
</label>
|
|
41
|
+
<label class="toggle">
|
|
42
|
+
<input type="checkbox" checked>
|
|
43
|
+
<div class="slider"></div>
|
|
44
|
+
<span>Checked</span>
|
|
45
|
+
</label>
|
|
46
|
+
<label class="toggle">
|
|
47
|
+
<input type="checkbox" disabled>
|
|
48
|
+
<div class="slider"></div>
|
|
49
|
+
<span>Disabled</span>
|
|
50
|
+
</label>
|
|
72
51
|
</div>
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
52
|
+
</div>
|
|
53
|
+
<div id="label-with-tooltip">
|
|
54
|
+
<h5 class="my">Label with Tooltip</h5>
|
|
55
|
+
<div class="flex va-c space-between mb-05 bdr">
|
|
56
|
+
<label> My Label </label>
|
|
57
|
+
<span x-data="{open:false}" class="relative" x-on:mouseenter="open=true"
|
|
58
|
+
x-on:mouseleave="open=false">
|
|
59
|
+
<div class="flex va-c">
|
|
60
|
+
<svg class="txt-muted" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
61
|
+
fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
|
62
|
+
aria-hidden="true" data-slot="icon">
|
|
63
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
64
|
+
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">
|
|
65
|
+
</path>
|
|
66
|
+
</svg>
|
|
67
|
+
</div>
|
|
68
|
+
<div class="absolute right-0 minw-18 z-100 bx pxy-075 mt-05 txt-sm fw4 bg-stone-50"
|
|
69
|
+
x-show="open" x-transition.duration="" style="display: none;">
|
|
70
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur vitae
|
|
71
|
+
perspiciatis officiis iste omnis, iure quasi, rerum minus magnam consequatur eos ut
|
|
72
|
+
aliquam aspernatur sapiente veniam! Repudiandae voluptatum eius ducimus?
|
|
73
|
+
</div>
|
|
74
|
+
</span>
|
|
76
75
|
</div>
|
|
77
76
|
</div>
|
|
78
77
|
</div>
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
<div class="grid-3 cols-2">
|
|
85
|
-
<div id="headings">
|
|
86
|
-
<h1>Heading 1</h1>
|
|
87
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
88
|
-
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
89
|
-
<h2>Heading 2</h2>
|
|
90
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
91
|
-
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
92
|
-
<h3>Heading 3</h3>
|
|
93
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
94
|
-
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
95
|
-
<h4>Heading 4</h4>
|
|
96
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
97
|
-
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
98
|
-
<h5>Heading 5</h5>
|
|
99
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
100
|
-
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
101
|
-
<h6>Heading 6</h6>
|
|
102
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
103
|
-
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
78
|
+
<div id="file-input">
|
|
79
|
+
<div class="my">
|
|
80
|
+
<input type="file" name="name">
|
|
81
|
+
<!-- <button type="submit" class="btn">Upload</button> -->
|
|
82
|
+
<input type="text">
|
|
104
83
|
</div>
|
|
84
|
+
<hr>
|
|
85
|
+
<label class="file">
|
|
86
|
+
<input type="file" name="name">
|
|
87
|
+
<span> Select file... </span>
|
|
88
|
+
</label>
|
|
105
89
|
<div>
|
|
106
|
-
<
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
<
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
<
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
90
|
+
<label class="file bdr">
|
|
91
|
+
<input type="file" name="file">
|
|
92
|
+
<span>Choose a file…</span>
|
|
93
|
+
</label>
|
|
94
|
+
<div class="frm-row">
|
|
95
|
+
<label class="file btn">
|
|
96
|
+
<input type="file" name="">
|
|
97
|
+
<svg class="wh-1.25 mr-075" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
98
|
+
viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
|
|
99
|
+
<path fill-rule="evenodd"
|
|
100
|
+
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"
|
|
101
|
+
clip-rule="evenodd" />
|
|
102
|
+
</svg>
|
|
103
|
+
<span>Choose a file...</span>
|
|
104
|
+
</label>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
<div class="frm-row">
|
|
108
|
+
<label for="success" class="txt-success-light">Your name</label>
|
|
109
|
+
<input type="text" id="success" class="success-light" placeholder="Success input">
|
|
110
|
+
<p class="txt-success-light txt-sm"><span class="font-medium">Well done!</span> Some success
|
|
111
|
+
message.</p>
|
|
112
|
+
</div>
|
|
113
|
+
<div class="frm-row">
|
|
114
|
+
<label for="error" class="block mb-2 text-sm text-red-700 dark:text-red-500">Your
|
|
115
|
+
name</label>
|
|
116
|
+
<input type="text" id="error"
|
|
117
|
+
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"
|
|
118
|
+
placeholder="Error input">
|
|
119
|
+
<p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oh,
|
|
120
|
+
snapp!</span> Some error message.</p>
|
|
121
|
+
</div>
|
|
122
|
+
<div class="frm-row">
|
|
123
|
+
<div class="withAddons">
|
|
124
|
+
<input type="text">
|
|
125
|
+
<div class="trailingAddon"> Trailing </div>
|
|
126
|
+
<div class="leadingAddon"> Leading </div>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
<div class="frm-row">
|
|
130
|
+
<div class="withAddons">
|
|
131
|
+
<div class="leadingAddon"> Leading </div>
|
|
132
|
+
<div class="trailingAddon"> Trailing </div>
|
|
133
|
+
<input type="text">
|
|
134
|
+
</div>
|
|
137
135
|
</div>
|
|
138
136
|
</div>
|
|
139
137
|
</div>
|
|
140
138
|
</section>
|
|
141
139
|
|
|
140
|
+
<div class="pxy-5">
|
|
141
|
+
|
|
142
|
+
<div class="relative">
|
|
143
|
+
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
|
144
|
+
<svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
|
|
145
|
+
<path d="M10 2a8 8 0 100 16 8 8 0 000-16z" />
|
|
146
|
+
</svg>
|
|
147
|
+
</div>
|
|
148
|
+
<input
|
|
149
|
+
type="text"
|
|
150
|
+
class="pl-10 border border-gray-300 rounded"
|
|
151
|
+
placeholder="Enter something">
|
|
152
|
+
</div>
|
|
153
|
+
|
|
142
154
|
|
|
155
|
+
<form>
|
|
156
|
+
<label for="email-address-icon" class="block">Your Email</label>
|
|
157
|
+
<div class="relative">
|
|
158
|
+
<div class="absolute inset-y-0 start-0 flex items-center ps-3.5">
|
|
159
|
+
<svg class="txt-green" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
|
|
160
|
+
<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" />
|
|
161
|
+
<path 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" />
|
|
162
|
+
</svg>
|
|
163
|
+
</div>
|
|
164
|
+
<input type="text" id="email-address-icon" class="block w-full ps-10 p-2.5" placeholder="email@example.com.au">
|
|
165
|
+
</div>
|
|
166
|
+
</form>
|
|
167
|
+
|
|
168
|
+
<!--
|
|
169
|
+
<form class="max-w-sm mx-auto">
|
|
170
|
+
<div class="mb-5">
|
|
171
|
+
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label>
|
|
172
|
+
<input type="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@flowbite.com" required />
|
|
173
|
+
</div>
|
|
174
|
+
<div class="mb-5">
|
|
175
|
+
<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your password</label>
|
|
176
|
+
<input type="password" id="password" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required />
|
|
177
|
+
</div>
|
|
178
|
+
<div class="flex items-start mb-5">
|
|
179
|
+
<div class="flex items-center h-5">
|
|
180
|
+
<input id="remember" type="checkbox" value="" class="w-4 h-4 border border-gray-300 rounded-sm bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800" required />
|
|
181
|
+
</div>
|
|
182
|
+
<label for="remember" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Remember me</label>
|
|
183
|
+
</div>
|
|
184
|
+
<button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button>
|
|
185
|
+
</form>
|
|
143
186
|
|
|
187
|
+
<div class="bdr">
|
|
188
|
+
<div>
|
|
189
|
+
<label for="input-group-1" class="block">Your Email</label>
|
|
190
|
+
<div class="relative">
|
|
191
|
+
<div class="absolute inset-y-0 start-0 flex items-center">
|
|
192
|
+
<svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
|
|
193
|
+
<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" />
|
|
194
|
+
<path 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" />
|
|
195
|
+
</svg>
|
|
196
|
+
</div>
|
|
197
|
+
<input type="text" id="input-group-1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@flowbite.com">
|
|
198
|
+
</div>
|
|
199
|
+
</div>
|
|
200
|
+
|
|
201
|
+
<div>
|
|
202
|
+
<label for="website-admin" class="block">Username</label>
|
|
203
|
+
<div class="flex">
|
|
204
|
+
<span class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600">
|
|
205
|
+
<svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
|
206
|
+
<path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
|
|
207
|
+
</svg>
|
|
208
|
+
</span>
|
|
209
|
+
<input type="text" id="website-admin" class="rounded-none rounded-e-lg bg-gray-50 border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="elonmusk">
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
144
212
|
|
|
213
|
+
</div>
|
|
145
214
|
|
|
146
215
|
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
<
|
|
150
|
-
|
|
216
|
+
<form class="max-w-sm mx-auto">
|
|
217
|
+
<label for="countries_multiple" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Select an option</label>
|
|
218
|
+
<select multiple id="countries_multiple" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
|
|
219
|
+
<option selected>Choose countries</option>
|
|
220
|
+
<option value="US">United States</option>
|
|
221
|
+
<option value="CA">Canada</option>
|
|
222
|
+
<option value="FR">France</option>
|
|
223
|
+
<option value="DE">Germany</option>
|
|
224
|
+
</select>
|
|
225
|
+
</form>
|
|
226
|
+
|
|
227
|
+
<form class="max-w-sm mx-auto">
|
|
228
|
+
<div class="flex-col">
|
|
229
|
+
|
|
230
|
+
<select
|
|
231
|
+
id="countries"
|
|
232
|
+
multiple
|
|
233
|
+
class="block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
|
|
234
|
+
<option value="US">United States</option>
|
|
235
|
+
<option value="CA">Canada</option>
|
|
236
|
+
<option value="FR">France</option>
|
|
237
|
+
<option value="DE">Germany</option>
|
|
238
|
+
</select>
|
|
239
|
+
</div>
|
|
240
|
+
</form>
|
|
241
|
+
<div class="flex-col h-auto">
|
|
242
|
+
<select name="cars" id="cars" class="fs0" multiple size="4">
|
|
243
|
+
<option value="volvo">Volvo</option>
|
|
244
|
+
<option value="saab">Saab</option>
|
|
245
|
+
<option value="opel">Opel</option>
|
|
246
|
+
<option value="audi">Audi</option>
|
|
247
|
+
</select>
|
|
151
248
|
</div>
|
|
152
249
|
</div>
|
|
153
250
|
|
|
251
|
+
<select name="selectedCourses" id="selectedCourses" wire:model.live="selectedCourses" multiple>
|
|
252
|
+
<option value="15">BBB01 Back to Basics Breastfeeding</option>
|
|
253
|
+
<option value="17">ELC01 The Ethical IBCLC: Principles and Responsibilities</option>
|
|
254
|
+
<option value="19">ELC02 Code Compliance: Everyone's Responsibility</option>
|
|
255
|
+
<option value="2">EP01 Breastfeeding: An Essential Health Issue</option>
|
|
256
|
+
<option value="3">EP02 Foundational Governing Principles</option>
|
|
257
|
+
</select> -->
|
|
258
|
+
<div class="container-sm pxy">
|
|
259
|
+
|
|
260
|
+
|
|
261
|
+
|
|
262
|
+
<form>
|
|
263
|
+
<div class="frm-row" for="selectedCourses">
|
|
264
|
+
<div class="flex-col w-full my-0">
|
|
265
|
+
<select name="selectedCourses" id="selectedCourses" wire:model.live="selectedCourses" multiple>
|
|
266
|
+
<option value="15">BBB01 Back to Basics Breastfeeding</option>
|
|
267
|
+
<option value="17">ELC01 The Ethical IBCLC: Principles and Responsibilities</option>
|
|
268
|
+
<option value="19">ELC02 Code Compliance: Everyone's Responsibility</option>
|
|
269
|
+
<option value="2">EP01 Breastfeeding: An Essential Health Issue</option>
|
|
270
|
+
<option value="3">EP02 Foundational Governing Principles</option>
|
|
271
|
+
</select>
|
|
272
|
+
</div>
|
|
273
|
+
</div>
|
|
274
|
+
<p class="mt-025"><small>** Hold the CTRL key to select multiple courses</small></p>
|
|
275
|
+
<div class="tar">
|
|
276
|
+
<button type="button" class="btn" wire:click="$toggle('showModal')" text="cancel"> cancel </button>
|
|
277
|
+
<button type="button" class="btn primary" wire:click="enrol" text="enrol"> enrol </button>
|
|
278
|
+
</div>
|
|
279
|
+
</form>
|
|
280
|
+
</div>
|
|
281
|
+
<!-- structure -->
|
|
154
282
|
|
|
155
283
|
|
|
156
|
-
|
|
157
|
-
<div class="container py">
|
|
158
|
-
<blockquote class="border-l-4 border-gray-500 italic">
|
|
159
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
160
|
-
<cite class="block tar txt-gray-600">- John Doe</cite>
|
|
161
|
-
</blockquote>
|
|
162
|
-
<hr>
|
|
163
|
-
Clickable table header are buttons inside <code>th</code>
|
|
164
|
-
<table>
|
|
165
|
-
<thead class="bg-gray-100 bdr-b">
|
|
166
|
-
<tr>
|
|
167
|
-
<!-- use flex to control alignment -->
|
|
168
|
-
<!-- -->
|
|
169
|
-
<th class="bdr bdr-red ">
|
|
170
|
-
<button class="bdr bdr-green flex w-full ha-c">
|
|
171
|
-
<span>TITLE</span>
|
|
172
|
-
<svg class="icon txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
|
173
|
-
<path d="m12.191 15.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H6.715C6.325 8 6 8.406 6 8.91c0 .244.081.471.211.634l4.973 6.321a.65.65 0 0 0 .504.26c.194 0 .357-.098.503-.26Z"></path>
|
|
174
|
-
</svg>
|
|
175
|
-
</button>
|
|
176
|
-
</th>
|
|
177
|
-
<!-- or just add text alignment classes to the `th` -->
|
|
178
|
-
<th class="bdr bdr-green tac">
|
|
179
|
-
<button class="bdr bdr-red w-full">
|
|
180
|
-
<span>TITLE</span>
|
|
181
|
-
<svg class="icon txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
|
182
|
-
<path d="m12.191 15.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H6.715C6.325 8 6 8.406 6 8.91c0 .244.081.471.211.634l4.973 6.321a.65.65 0 0 0 .504.26c.194 0 .357-.098.503-.26Z"></path>
|
|
183
|
-
</svg>
|
|
184
|
-
</button>
|
|
185
|
-
</th>
|
|
186
|
-
</tr>
|
|
187
|
-
</thead>
|
|
188
|
-
</table>
|
|
189
|
-
</div>
|
|
190
|
-
<main class="main-content-quick-hide-wrapper zebra">
|
|
191
|
-
<!-- basic theme examples -->
|
|
192
|
-
<section id="basic-themes" class="py-3">
|
|
284
|
+
<section id="navbar">
|
|
193
285
|
<div class="container">
|
|
194
|
-
<
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
<div class="bdr
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
<
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
<div class="bdr-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
286
|
+
<div class="navbar bdr-amber bdr-5">
|
|
287
|
+
<div class="pxy-025 bdr bdr-2">
|
|
288
|
+
LOGO
|
|
289
|
+
</div>
|
|
290
|
+
<div class="bdr flex">
|
|
291
|
+
<div class="pxy-025 bdr bdr-2">
|
|
292
|
+
NAV
|
|
293
|
+
</div>
|
|
294
|
+
<div class="pxy-025 bdr bdr-2">
|
|
295
|
+
LOGIN
|
|
296
|
+
</div>
|
|
297
|
+
</div>
|
|
298
|
+
</div>
|
|
299
|
+
<hr>
|
|
300
|
+
<div class="navbar bdr-amber bdr-5">
|
|
301
|
+
<a href="/" aria-label="Home">
|
|
302
|
+
<img src="/images/logo.svg" alt="NayKel JTB logo" loading="lazy" />
|
|
303
|
+
</a>
|
|
304
|
+
<div class="bdr flex va-c space-x-3">
|
|
305
|
+
<div class="flex va-c">
|
|
306
|
+
<nav>
|
|
307
|
+
<ul>
|
|
308
|
+
<li><a class="active" href="#">Home</a></li>
|
|
309
|
+
<li class="relative" x-data="{ show: false }" x-on:mouseenter="show=true" x-on:mouseleave="show=false">
|
|
310
|
+
<a class="w-full inline-flex va-b">
|
|
311
|
+
Courses
|
|
312
|
+
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
|
313
|
+
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
|
|
314
|
+
</svg>
|
|
315
|
+
</a>
|
|
316
|
+
<div class="absolute mt-05 flex w-10 z-100" x-show="show"
|
|
317
|
+
x-transition.duration.200ms style="display: none;">
|
|
318
|
+
<ul class="menu bx pxy-0 w-full">
|
|
319
|
+
<li><a href="#">Graphic Design</a></li>
|
|
320
|
+
<li><a href="#">Digital Marketing</a></li>
|
|
321
|
+
<li><a href="#">Mobile App Development</a></li>
|
|
322
|
+
<li><a href="#">IT Consulting</a></li>
|
|
323
|
+
</ul>
|
|
324
|
+
</div>
|
|
325
|
+
</li>
|
|
326
|
+
<li><a href="#">About</a></li>
|
|
327
|
+
<li><a href="#">Contact</a></li>
|
|
328
|
+
</ul>
|
|
329
|
+
</nav>
|
|
330
|
+
</div>
|
|
331
|
+
<div>
|
|
332
|
+
<button class="btn">Sign in</button>
|
|
333
|
+
<button class="btn primary">Sign up</button>
|
|
334
|
+
</div>
|
|
335
|
+
</div>
|
|
227
336
|
</div>
|
|
228
337
|
</div>
|
|
229
338
|
</section>
|
|
230
|
-
|
|
231
|
-
<section id="table" class="py-3">
|
|
339
|
+
<section id="typography">
|
|
232
340
|
<div class="container">
|
|
233
|
-
<h2 class="title
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
<
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
</
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
<
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
<
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
341
|
+
<h2 class="title mb-3">Typography</h2>
|
|
342
|
+
<div class="grid-3 cols-2">
|
|
343
|
+
<div id="headings">
|
|
344
|
+
<h1>Heading 1</h1>
|
|
345
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
346
|
+
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
347
|
+
<h2>Heading 2</h2>
|
|
348
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
349
|
+
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
350
|
+
<h3>Heading 3</h3>
|
|
351
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
352
|
+
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
353
|
+
<h4>Heading 4</h4>
|
|
354
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
355
|
+
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
356
|
+
<h5>Heading 5</h5>
|
|
357
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
358
|
+
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
359
|
+
<h6>Heading 6</h6>
|
|
360
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
361
|
+
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
362
|
+
</div>
|
|
363
|
+
<div>
|
|
364
|
+
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sed aperiam
|
|
365
|
+
quibusdam adipisci sequi deserunt nesciunt vel illum voluptatibus maxime soluta repudiandae
|
|
366
|
+
numquam sapiente exercitationem, culpa, omnis expedita tempore? Similique.</p>
|
|
367
|
+
|
|
368
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at corporis deserunt sint eum
|
|
369
|
+
laboriosam quae nulla fugit, error, tempore quibusdam temporibus fuga adipisci. Nam
|
|
370
|
+
architecto sunt cupiditate soluta molestias ipsum delectus numquam illo magnam! Praesentium
|
|
371
|
+
quos deserunt sed, maxime, eligendi quasi, sequi fugiat facere neque harum debitis laborum
|
|
372
|
+
ipsam!</p>
|
|
373
|
+
|
|
374
|
+
<h3 class="title">Text Sizes</h3>
|
|
375
|
+
<p class="txt-xs">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
|
|
376
|
+
asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
|
|
377
|
+
similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
|
|
378
|
+
repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
379
|
+
<p class="txt-sm">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
|
|
380
|
+
asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
|
|
381
|
+
similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
|
|
382
|
+
repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
383
|
+
<p class="txt-base">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto
|
|
384
|
+
delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam
|
|
385
|
+
exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam
|
|
386
|
+
deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
387
|
+
<p class="txt-lg">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
|
|
388
|
+
asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
|
|
389
|
+
similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
|
|
390
|
+
repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
391
|
+
<p class="txt-xl">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
|
|
392
|
+
asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
|
|
393
|
+
similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
|
|
394
|
+
repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
395
|
+
</div>
|
|
396
|
+
</div>
|
|
397
|
+
</div>
|
|
398
|
+
</section>
|
|
399
|
+
|
|
400
|
+
|
|
401
|
+
|
|
266
402
|
|
|
267
403
|
|
|
268
404
|
|
|
405
|
+
<div class="container pxy bdr">
|
|
406
|
+
<div class="bx">
|
|
407
|
+
<button class="btn secondary">Secondary Button</button>
|
|
408
|
+
<button class="btn primary">Primary Button</button>
|
|
409
|
+
</div>
|
|
410
|
+
</div>
|
|
411
|
+
|
|
412
|
+
|
|
269
413
|
|
|
270
|
-
|
|
271
|
-
|
|
414
|
+
<!-- dev area -->
|
|
415
|
+
<div class="container py">
|
|
416
|
+
<blockquote class="border-l-4 border-gray-500 italic">
|
|
417
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
418
|
+
<cite class="block tar txt-gray-600">- John Doe</cite>
|
|
419
|
+
</blockquote>
|
|
420
|
+
<hr>
|
|
421
|
+
Clickable table header are buttons inside <code>th</code>
|
|
422
|
+
<table>
|
|
423
|
+
<thead class="bg-gray-100 bdr-b">
|
|
272
424
|
<tr>
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
425
|
+
<!-- use flex to control alignment -->
|
|
426
|
+
<!-- -->
|
|
427
|
+
<th class="bdr bdr-red ">
|
|
428
|
+
<button class="bdr bdr-green flex w-full ha-c">
|
|
429
|
+
<span>TITLE</span>
|
|
430
|
+
<svg class="icon txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
|
431
|
+
<path d="m12.191 15.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H6.715C6.325 8 6 8.406 6 8.91c0 .244.081.471.211.634l4.973 6.321a.65.65 0 0 0 .504.26c.194 0 .357-.098.503-.26Z"></path>
|
|
432
|
+
</svg>
|
|
433
|
+
</button>
|
|
434
|
+
</th>
|
|
435
|
+
<!-- or just add text alignment classes to the `th` -->
|
|
436
|
+
<th class="bdr bdr-green tac">
|
|
437
|
+
<button class="bdr bdr-red w-full">
|
|
438
|
+
<span>TITLE</span>
|
|
276
439
|
<svg class="icon txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
|
277
440
|
<path d="m12.191 15.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H6.715C6.325 8 6 8.406 6 8.91c0 .244.081.471.211.634l4.973 6.321a.65.65 0 0 0 .504.26c.194 0 .357-.098.503-.26Z"></path>
|
|
278
441
|
</svg>
|
|
279
442
|
</button>
|
|
280
443
|
</th>
|
|
281
444
|
</tr>
|
|
282
|
-
</
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
<
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
445
|
+
</thead>
|
|
446
|
+
</table>
|
|
447
|
+
</div>
|
|
448
|
+
<main class="main-content-quick-hide-wrapper zebra">
|
|
449
|
+
<!-- basic theme examples -->
|
|
450
|
+
<section id="basic-themes" class="py-3">
|
|
451
|
+
<div class="container">
|
|
452
|
+
<h2 class="title txt-3">Basic Themes</h2>
|
|
453
|
+
<h4>Base Colors</h4>
|
|
454
|
+
<p class="txt-red"><strong>Note:</strong> The border width has been increased in these examples for better visibility.</p>
|
|
455
|
+
<div class="grid gap-05 cols-6">
|
|
456
|
+
<div class="bdr-5 primary pxy">primary</div>
|
|
457
|
+
<div class="bdr-5 secondary pxy">secondary</div>
|
|
458
|
+
<div class="bdr-5 accent pxy">accent</div>
|
|
459
|
+
<div class="bdr-5 light pxy">light</div>
|
|
460
|
+
<div class="bdr-5 dark pxy">dark</div>
|
|
461
|
+
<div class="bdr-5 danger pxy">danger</div>
|
|
462
|
+
<div class="bdr-5 info pxy">info</div>
|
|
463
|
+
<div class="bdr-5 success pxy">success</div>
|
|
464
|
+
<div class="bdr-5 warning pxy">warning</div>
|
|
465
|
+
<div class="bdr-5 muted pxy">muted</div>
|
|
466
|
+
<div class="bdr-5 stone pxy">stone</div>
|
|
467
|
+
<div class="bdr-5 brown pxy">brown</div>
|
|
468
|
+
<div class="bdr-5 red pxy">red</div>
|
|
469
|
+
<div class="bdr-5 orange pxy">orange</div>
|
|
470
|
+
<div class="bdr-5 amber pxy">amber</div>
|
|
471
|
+
<div class="bdr-5 yellow pxy">yellow</div>
|
|
472
|
+
<div class="bdr-5 lime pxy">lime</div>
|
|
473
|
+
<div class="bdr-5 emerald pxy">emerald</div>
|
|
474
|
+
<div class="bdr-5 green pxy">green</div>
|
|
475
|
+
<div class="bdr-5 teal pxy">teal</div>
|
|
476
|
+
<div class="bdr-5 cyan pxy">cyan</div>
|
|
477
|
+
<div class="bdr-5 sky pxy">sky</div>
|
|
478
|
+
<div class="bdr-5 blue pxy">blue</div>
|
|
479
|
+
<div class="bdr-5 indigo pxy">indigo</div>
|
|
480
|
+
<div class="bdr-5 purple pxy">purple</div>
|
|
481
|
+
<div class="bdr-5 fuchsia pxy">fuchsia</div>
|
|
482
|
+
<div class="bdr-5 pink pxy">pink</div>
|
|
483
|
+
<div class="bdr-5 rose pxy">rose</div>
|
|
484
|
+
<div class="bdr-5 white pxy">white</div>
|
|
485
|
+
</div>
|
|
486
|
+
</div>
|
|
487
|
+
</section>
|
|
488
|
+
<!-- table and components -->
|
|
489
|
+
<section id="table" class="py-3">
|
|
490
|
+
<div class="container">
|
|
491
|
+
<h2 class="title txt-3">Tables</h2>
|
|
492
|
+
<!-- base table -->
|
|
493
|
+
<table>
|
|
494
|
+
<thead>
|
|
495
|
+
<tr>
|
|
496
|
+
<th>Product</th>
|
|
497
|
+
<th>Description</th>
|
|
498
|
+
<th>Price</th>
|
|
499
|
+
<th>Stock</th>
|
|
500
|
+
</tr>
|
|
501
|
+
</thead>
|
|
502
|
+
<tbody>
|
|
503
|
+
<tr>
|
|
504
|
+
<td>Wireless Mouse</td>
|
|
505
|
+
<td>Ergonomic mouse with USB receiver</td>
|
|
506
|
+
<td>$29.95</td>
|
|
507
|
+
<td>54</td>
|
|
508
|
+
</tr>
|
|
509
|
+
<tr>
|
|
510
|
+
<td>Keyboard</td>
|
|
511
|
+
<td>Compact mechanical keyboard</td>
|
|
512
|
+
<td>$69.00</td>
|
|
513
|
+
<td>21</td>
|
|
514
|
+
</tr>
|
|
515
|
+
<tr>
|
|
516
|
+
<td>Monitor</td>
|
|
517
|
+
<td>24" 1080p IPS display</td>
|
|
518
|
+
<td>$189.50</td>
|
|
519
|
+
<td>12</td>
|
|
520
|
+
</tr>
|
|
521
|
+
</tbody>
|
|
522
|
+
</table>
|
|
523
|
+
<hr class="bdr-secondary">
|
|
524
|
+
|
|
525
|
+
|
|
526
|
+
|
|
527
|
+
|
|
528
|
+
<!-- When using sortable tables, you need to apply some additional styles as they are buttons -->
|
|
529
|
+
<table class="w-20">
|
|
294
530
|
<tr>
|
|
295
|
-
<th class="bdr bdr-red">
|
|
531
|
+
<th class="bdr bdr-red tac">
|
|
296
532
|
<button class="btn">
|
|
297
533
|
<span>Product</span>
|
|
298
534
|
<svg class="icon txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
|
@@ -300,92 +536,125 @@
|
|
|
300
536
|
</svg>
|
|
301
537
|
</button>
|
|
302
538
|
</th>
|
|
303
|
-
<th class="bdr bdr-blue">
|
|
304
|
-
<button class="" btn>
|
|
305
|
-
<span>Product</span>
|
|
306
|
-
<svg class="icon txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
|
307
|
-
<path d="m12.191 15.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H6.715C6.325 8 6 8.406 6 8.91c0 .244.081.471.211.634l4.973 6.321a.65.65 0 0 0 .504.26c.194 0 .357-.098.503-.26Z"></path>
|
|
308
|
-
</svg>
|
|
309
|
-
</button>
|
|
310
|
-
</th>
|
|
311
|
-
<th>Product</th>
|
|
312
|
-
<th>Description</th>
|
|
313
|
-
<th>Price</th>
|
|
314
|
-
<th>Stock</th>
|
|
315
|
-
</tr>
|
|
316
|
-
</thead>
|
|
317
|
-
<tbody>
|
|
318
|
-
<tr>
|
|
319
|
-
<td>Wireless Mouse</td>
|
|
320
|
-
<td>Ergonomic mouse with USB receiver</td>
|
|
321
|
-
<td>$29.95</td>
|
|
322
|
-
<td>54</td>
|
|
323
539
|
</tr>
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
540
|
+
</table>
|
|
541
|
+
<svg class="wh-1 txt-muted" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
|
542
|
+
<path d="m7.191 20.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H1.715c-.39 0-.715.406-.715.91 0 .244.081.471.211.634l4.973 6.321c.13.163.308.26.503.26.196 0 .358-.098.504-.26ZM6.184 2.26 1.21 8.581c-.13.163-.211.39-.211.634 0 .488.325.91.715.91h9.945c.39 0 .715-.406.715-.91 0-.244-.081-.471-.211-.634L7.19 2.26A.647.647 0 0 0 6.688 2c-.196 0-.358.098-.504.26Z" />
|
|
543
|
+
</svg>
|
|
544
|
+
<svg class="wh-1 txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
|
545
|
+
<path d="M11.184 8.26 6.21 14.581c-.13.163-.211.39-.211.634 0 .488.325.91.715.91h9.945c.39 0 .715-.406.715-.91 0-.244-.081-.471-.211-.634L12.19 8.26a.647.647 0 0 0-.504-.26c-.194 0-.357.098-.503.26Z" />
|
|
546
|
+
</svg>
|
|
547
|
+
<svg class="wh-1 txt-purple" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
|
548
|
+
<path d="m12.191 15.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H6.715C6.325 8 6 8.406 6 8.91c0 .244.081.471.211.634l4.973 6.321a.65.65 0 0 0 .504.26c.194 0 .357-.098.503-.26Z" />
|
|
549
|
+
</svg>
|
|
550
|
+
<table>
|
|
551
|
+
<thead>
|
|
552
|
+
<tr>
|
|
553
|
+
<th class="bdr bdr-red">
|
|
554
|
+
<button class="btn">
|
|
555
|
+
<span>Product</span>
|
|
556
|
+
<svg class="icon txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
|
557
|
+
<path d="m12.191 15.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H6.715C6.325 8 6 8.406 6 8.91c0 .244.081.471.211.634l4.973 6.321a.65.65 0 0 0 .504.26c.194 0 .357-.098.503-.26Z"></path>
|
|
558
|
+
</svg>
|
|
559
|
+
</button>
|
|
560
|
+
</th>
|
|
561
|
+
<th class="bdr bdr-blue">
|
|
562
|
+
<button class="" btn>
|
|
563
|
+
<span>Product</span>
|
|
564
|
+
<svg class="icon txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
|
565
|
+
<path d="m12.191 15.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H6.715C6.325 8 6 8.406 6 8.91c0 .244.081.471.211.634l4.973 6.321a.65.65 0 0 0 .504.26c.194 0 .357-.098.503-.26Z"></path>
|
|
566
|
+
</svg>
|
|
567
|
+
</button>
|
|
568
|
+
</th>
|
|
569
|
+
<th>Product</th>
|
|
570
|
+
<th>Description</th>
|
|
571
|
+
<th>Price</th>
|
|
572
|
+
<th>Stock</th>
|
|
573
|
+
</tr>
|
|
574
|
+
</thead>
|
|
575
|
+
<tbody>
|
|
576
|
+
<tr>
|
|
577
|
+
<td>Wireless Mouse</td>
|
|
578
|
+
<td>Ergonomic mouse with USB receiver</td>
|
|
579
|
+
<td>$29.95</td>
|
|
580
|
+
<td>54</td>
|
|
581
|
+
</tr>
|
|
582
|
+
<tr>
|
|
583
|
+
<td>Keyboard</td>
|
|
584
|
+
<td>Compact mechanical keyboard</td>
|
|
585
|
+
<td>$69.00</td>
|
|
586
|
+
<td>21</td>
|
|
587
|
+
</tr>
|
|
588
|
+
<tr>
|
|
589
|
+
<td>Monitor</td>
|
|
590
|
+
<td>24" 1080p IPS display</td>
|
|
591
|
+
<td>$189.50</td>
|
|
592
|
+
<td>12</td>
|
|
593
|
+
</tr>
|
|
594
|
+
</tbody>
|
|
595
|
+
</table>
|
|
596
|
+
</div>
|
|
597
|
+
</section>
|
|
598
|
+
</main>
|
|
599
|
+
|
|
600
|
+
|
|
601
|
+
|
|
602
|
+
|
|
603
|
+
|
|
604
|
+
<!-- HERE -->
|
|
605
|
+
|
|
606
|
+
|
|
607
|
+
|
|
608
|
+
<div class="container">
|
|
609
|
+
<div class="grid cols-5">
|
|
610
|
+
<div class="primary pxy ">primary</div>
|
|
611
|
+
<div class="secondary pxy ">secondary</div>
|
|
612
|
+
<div class="accent pxy ">accent</div>
|
|
613
|
+
<div class="light pxy ">light</div>
|
|
614
|
+
<div class="dark pxy ">dark</div>
|
|
615
|
+
<div class="danger pxy ">danger</div>
|
|
616
|
+
<div class="info pxy ">info</div>
|
|
617
|
+
<div class="success pxy ">success</div>
|
|
618
|
+
<div class="warning pxy ">warning</div>
|
|
619
|
+
<div class="muted pxy ">muted</div>
|
|
620
|
+
<div class="stone pxy ">stone</div>
|
|
621
|
+
<div class="brown pxy ">brown</div>
|
|
622
|
+
<div class="red pxy ">red</div>
|
|
623
|
+
<div class="orange pxy ">orange</div>
|
|
624
|
+
<div class="amber pxy ">amber</div>
|
|
625
|
+
<div class="yellow pxy ">yellow</div>
|
|
626
|
+
<div class="lime pxy ">lime</div>
|
|
627
|
+
<div class="emerald pxy ">emerald</div>
|
|
628
|
+
<div class="green pxy ">green</div>
|
|
629
|
+
<div class="teal pxy ">teal</div>
|
|
630
|
+
<div class="cyan pxy ">cyan</div>
|
|
631
|
+
<div class="sky pxy ">sky</div>
|
|
632
|
+
<div class="blue pxy ">blue</div>
|
|
633
|
+
<div class="indigo pxy ">indigo</div>
|
|
634
|
+
<div class="purple pxy ">purple</div>
|
|
635
|
+
<div class="fuchsia pxy ">fuchsia</div>
|
|
636
|
+
<div class="pink pxy ">pink</div>
|
|
637
|
+
<div class="rose pxy ">rose</div>
|
|
638
|
+
<div class="white pxy ">white</div>
|
|
338
639
|
</div>
|
|
339
|
-
</section>
|
|
340
|
-
</main>
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
<!-- HERE -->
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
<div class="container">
|
|
351
|
-
<div class="grid cols-5">
|
|
352
|
-
<div class="primary pxy ">primary</div>
|
|
353
|
-
<div class="secondary pxy ">secondary</div>
|
|
354
|
-
<div class="accent pxy ">accent</div>
|
|
355
|
-
<div class="light pxy ">light</div>
|
|
356
|
-
<div class="dark pxy ">dark</div>
|
|
357
|
-
<div class="danger pxy ">danger</div>
|
|
358
|
-
<div class="info pxy ">info</div>
|
|
359
|
-
<div class="success pxy ">success</div>
|
|
360
|
-
<div class="warning pxy ">warning</div>
|
|
361
|
-
<div class="muted pxy ">muted</div>
|
|
362
|
-
<div class="stone pxy ">stone</div>
|
|
363
|
-
<div class="brown pxy ">brown</div>
|
|
364
|
-
<div class="red pxy ">red</div>
|
|
365
|
-
<div class="orange pxy ">orange</div>
|
|
366
|
-
<div class="amber pxy ">amber</div>
|
|
367
|
-
<div class="yellow pxy ">yellow</div>
|
|
368
|
-
<div class="lime pxy ">lime</div>
|
|
369
|
-
<div class="emerald pxy ">emerald</div>
|
|
370
|
-
<div class="green pxy ">green</div>
|
|
371
|
-
<div class="teal pxy ">teal</div>
|
|
372
|
-
<div class="cyan pxy ">cyan</div>
|
|
373
|
-
<div class="sky pxy ">sky</div>
|
|
374
|
-
<div class="blue pxy ">blue</div>
|
|
375
|
-
<div class="indigo pxy ">indigo</div>
|
|
376
|
-
<div class="purple pxy ">purple</div>
|
|
377
|
-
<div class="fuchsia pxy ">fuchsia</div>
|
|
378
|
-
<div class="pink pxy ">pink</div>
|
|
379
|
-
<div class="rose pxy ">rose</div>
|
|
380
|
-
<div class="white pxy ">white</div>
|
|
381
640
|
</div>
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
641
|
+
<!-- revised -->
|
|
642
|
+
<div id="wrapper" class="zebra">
|
|
643
|
+
<section id="navbar" class="py-3">
|
|
644
|
+
<div class="container">
|
|
645
|
+
<h2 class="title mb-3">Navbar</h2>
|
|
646
|
+
<div class="h-10 bdr bg-gray-100">
|
|
647
|
+
<nav class="navbar">
|
|
648
|
+
<ul>
|
|
649
|
+
<li><a href="#">Home</a></li>
|
|
650
|
+
<li><a href="#">Services</a></li>
|
|
651
|
+
<li><a href="#">About</a></li>
|
|
652
|
+
<li><a href="#">Contact</a></li>
|
|
653
|
+
<li><a class="txt-red" href="#">Override</a></li>
|
|
654
|
+
</ul>
|
|
655
|
+
</nav>
|
|
656
|
+
</div>
|
|
657
|
+
<hr>
|
|
389
658
|
<nav class="navbar">
|
|
390
659
|
<ul>
|
|
391
660
|
<li><a href="#">Home</a></li>
|
|
@@ -393,1846 +662,1693 @@
|
|
|
393
662
|
<li><a href="#">About</a></li>
|
|
394
663
|
<li><a href="#">Contact</a></li>
|
|
395
664
|
<li><a class="txt-red" href="#">Override</a></li>
|
|
665
|
+
<li><a class="nav-item" href="#">Nav-Item</a></li>
|
|
666
|
+
<li><a class="active nav-item" href="#">Nav-Item (active)</a></li>
|
|
396
667
|
</ul>
|
|
397
668
|
</nav>
|
|
398
669
|
</div>
|
|
399
|
-
|
|
400
|
-
<nav class="navbar">
|
|
401
|
-
<ul>
|
|
402
|
-
<li><a href="#">Home</a></li>
|
|
403
|
-
<li><a href="#">Services</a></li>
|
|
404
|
-
<li><a href="#">About</a></li>
|
|
405
|
-
<li><a href="#">Contact</a></li>
|
|
406
|
-
<li><a class="txt-red" href="#">Override</a></li>
|
|
407
|
-
<li><a class="nav-item" href="#">Nav-Item</a></li>
|
|
408
|
-
<li><a class="active nav-item" href="#">Nav-Item (active)</a></li>
|
|
409
|
-
</ul>
|
|
410
|
-
</nav>
|
|
411
|
-
</div>
|
|
412
|
-
</section>
|
|
670
|
+
</section>
|
|
413
671
|
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
</ul>
|
|
443
|
-
</nav>
|
|
444
|
-
<div>
|
|
445
|
-
<button class="btn">Sign in</button>
|
|
446
|
-
<button class="btn primary">Sign up</button>
|
|
447
|
-
</div>
|
|
448
|
-
</div>
|
|
449
|
-
</div>
|
|
450
|
-
</header>
|
|
451
|
-
<div class="navbar ha-l">
|
|
452
|
-
<a href="#"><img src="/images/logo.svg" alt="naykel-logo" class="logo mr-3"></a>
|
|
453
|
-
<nav>
|
|
454
|
-
<ul>
|
|
455
|
-
<li class="dd">
|
|
456
|
-
<a href="#">
|
|
457
|
-
Parent (css)
|
|
458
|
-
<svg class="icon sm">
|
|
459
|
-
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
460
|
-
</svg>
|
|
461
|
-
</a>
|
|
462
|
-
<div class="dd-content mt-05">
|
|
463
|
-
<ul class="menu bx pxy-0">
|
|
464
|
-
<li><a class="txt-red" href="#">Child Override</a></li>
|
|
465
|
-
<li><a href="#">Child</a></li>
|
|
466
|
-
<li><a href="#">Child</a></li>
|
|
467
|
-
</ul>
|
|
468
|
-
</div>
|
|
469
|
-
</li>
|
|
470
|
-
<li class="relative" x-data="{showChildren:true}" x-on:mouseenter="showChildren=true"
|
|
471
|
-
x-on:mouseleave="showChildren=true">
|
|
472
|
-
<a href="#">
|
|
473
|
-
Parent (alpine hover)
|
|
474
|
-
<svg class="icon sm">
|
|
475
|
-
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
476
|
-
</svg>
|
|
477
|
-
</a>
|
|
478
|
-
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
479
|
-
style="display: none;">
|
|
480
|
-
<ul class="menu bx pxy-0 w-full">
|
|
481
|
-
<li><a class="txt-red" href="#">Child Override</a></li>
|
|
482
|
-
<li><a href="#">Child</a></li>
|
|
483
|
-
<li><a href="#">Child</a></li>
|
|
484
|
-
</ul>
|
|
485
|
-
</div>
|
|
486
|
-
</li>
|
|
487
|
-
<li class="relative" x-data="{showChildren:false}" x-on:click.away="showChildren=false">
|
|
488
|
-
<a href="#" x-on:click.prevent="showChildren=!showChildren">
|
|
489
|
-
Parent (alpine click)
|
|
490
|
-
<svg class="icon sm">
|
|
491
|
-
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
492
|
-
</svg>
|
|
493
|
-
</a>
|
|
494
|
-
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
495
|
-
style="display: none;">
|
|
496
|
-
<ul class="menu bx pxy-0 w-full">
|
|
497
|
-
<li><a class="txt-red" href="#">Child Override</a></li>
|
|
498
|
-
<li><a href="#">Child</a></li>
|
|
499
|
-
<li><a href="#">Child</a></li>
|
|
500
|
-
</ul>
|
|
501
|
-
</div>
|
|
502
|
-
</li>
|
|
503
|
-
<li><a class="txt-red" href="#">Override</a></li>
|
|
504
|
-
<li><a class="active" href="#">Active</a></li>
|
|
505
|
-
<li><a class="active nav-item" href="#">Active (nav-item)</a></li>
|
|
506
|
-
|
|
507
|
-
</ul>
|
|
508
|
-
</nav>
|
|
509
|
-
</div>
|
|
510
|
-
<div class="navbar ha-l primary">
|
|
511
|
-
<a href="#"><img src="/images/logo.svg" alt="naykel-logo" class="logo mr-3"></a>
|
|
512
|
-
<nav>
|
|
513
|
-
<ul>
|
|
514
|
-
<li class="dd">
|
|
515
|
-
<a href="#">
|
|
516
|
-
Parent (css)
|
|
517
|
-
<svg class="icon sm">
|
|
518
|
-
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
519
|
-
</svg>
|
|
520
|
-
</a>
|
|
521
|
-
<div class="dd-content mt-05">
|
|
522
|
-
<ul class="menu bx pxy-0">
|
|
523
|
-
<li><a href="#">Child</a></li>
|
|
524
|
-
<li><a href="#">Child</a></li>
|
|
525
|
-
<li><a href="#">Child</a></li>
|
|
526
|
-
</ul>
|
|
527
|
-
</div>
|
|
528
|
-
</li>
|
|
529
|
-
<li class="relative" x-data="{showChildren:false}" x-on:mouseenter="showChildren=true"
|
|
530
|
-
x-on:mouseleave="showChildren=false">
|
|
531
|
-
<a href="#">
|
|
532
|
-
Parent (alpine hover)
|
|
533
|
-
<svg class="icon sm">
|
|
534
|
-
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
535
|
-
</svg>
|
|
536
|
-
</a>
|
|
537
|
-
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
538
|
-
style="display: none;">
|
|
539
|
-
<ul class="menu bx pxy-0 w-full">
|
|
540
|
-
<li><a href="#">Child</a></li>
|
|
541
|
-
<li><a href="#">Child</a></li>
|
|
542
|
-
<li><a href="#">Child</a></li>
|
|
543
|
-
</ul>
|
|
544
|
-
</div>
|
|
545
|
-
</li>
|
|
546
|
-
<li class="relative" x-data="{showChildren:false}" x-on:click.away="showChildren=false">
|
|
547
|
-
<a href="#" x-on:click.prevent="showChildren=!showChildren">
|
|
548
|
-
Parent (alpine click)
|
|
549
|
-
<svg class="icon sm">
|
|
550
|
-
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
551
|
-
</svg>
|
|
552
|
-
</a>
|
|
553
|
-
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
554
|
-
style="display: none;">
|
|
555
|
-
<ul class="menu bx pxy-0 w-full">
|
|
556
|
-
<li><a href="#">Child</a></li>
|
|
557
|
-
<li><a href="#">Child</a></li>
|
|
558
|
-
<li><a href="#">Child</a></li>
|
|
672
|
+
<div class="bx bdr-red">
|
|
673
|
+
<header class="container py">
|
|
674
|
+
<div class="container flex space-between">
|
|
675
|
+
<a href="#"><img src="/images/logo.svg" alt="naykel-logo" class="logo "></a>
|
|
676
|
+
<div class="navbar">
|
|
677
|
+
<nav>
|
|
678
|
+
<ul>
|
|
679
|
+
<li><a class="active" href="#">Home</a></li>
|
|
680
|
+
<li class="relative" x-data="{showChildren:false}" x-on:mouseenter="showChildren=true"
|
|
681
|
+
x-on:mouseleave="showChildren=false">
|
|
682
|
+
<a href="#">
|
|
683
|
+
Services
|
|
684
|
+
<svg class="icon sm">
|
|
685
|
+
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
686
|
+
</svg>
|
|
687
|
+
</a>
|
|
688
|
+
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren"
|
|
689
|
+
x-transition.duration.200ms style="display: none;">
|
|
690
|
+
<ul class="menu bx pxy-0 w-full">
|
|
691
|
+
<li><a href="#">Graphic Design</a></li>
|
|
692
|
+
<li><a href="#">Digital Marketing</a></li>
|
|
693
|
+
<li><a href="#">Mobile App Development</a></li>
|
|
694
|
+
<li><a href="#">IT Consulting</a></li>
|
|
695
|
+
</ul>
|
|
696
|
+
</div>
|
|
697
|
+
</li>
|
|
698
|
+
<li><a href="#">About</a></li>
|
|
699
|
+
<li><a href="#">Contact</a></li>
|
|
559
700
|
</ul>
|
|
701
|
+
</nav>
|
|
702
|
+
<div>
|
|
703
|
+
<button class="btn">Sign in</button>
|
|
704
|
+
<button class="btn primary">Sign up</button>
|
|
560
705
|
</div>
|
|
561
|
-
</
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
<section id="lists" class="py-3">
|
|
568
|
-
<div class="container">
|
|
569
|
-
<h2 class="title mb-3">Lists</h2>
|
|
570
|
-
<div class="bx">
|
|
571
|
-
<div class="bx-title">Base Lists</div>
|
|
572
|
-
<div class="inline-flex gap-3">
|
|
706
|
+
</div>
|
|
707
|
+
</div>
|
|
708
|
+
</header>
|
|
709
|
+
<div class="navbar ha-l">
|
|
710
|
+
<a href="#"><img src="/images/logo.svg" alt="naykel-logo" class="logo mr-3"></a>
|
|
711
|
+
<nav>
|
|
573
712
|
<ul>
|
|
574
|
-
<li
|
|
575
|
-
|
|
576
|
-
|
|
713
|
+
<li class="dd">
|
|
714
|
+
<a href="#">
|
|
715
|
+
Parent (css)
|
|
716
|
+
<svg class="icon sm">
|
|
717
|
+
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
718
|
+
</svg>
|
|
719
|
+
</a>
|
|
720
|
+
<div class="dd-content mt-05">
|
|
721
|
+
<ul class="menu bx pxy-0">
|
|
722
|
+
<li><a class="txt-red" href="#">Child Override</a></li>
|
|
723
|
+
<li><a href="#">Child</a></li>
|
|
724
|
+
<li><a href="#">Child</a></li>
|
|
725
|
+
</ul>
|
|
726
|
+
</div>
|
|
727
|
+
</li>
|
|
728
|
+
<li class="relative" x-data="{showChildren:true}" x-on:mouseenter="showChildren=true"
|
|
729
|
+
x-on:mouseleave="showChildren=true">
|
|
730
|
+
<a href="#">
|
|
731
|
+
Parent (alpine hover)
|
|
732
|
+
<svg class="icon sm">
|
|
733
|
+
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
734
|
+
</svg>
|
|
735
|
+
</a>
|
|
736
|
+
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
737
|
+
style="display: none;">
|
|
738
|
+
<ul class="menu bx pxy-0 w-full">
|
|
739
|
+
<li><a class="txt-red" href="#">Child Override</a></li>
|
|
740
|
+
<li><a href="#">Child</a></li>
|
|
741
|
+
<li><a href="#">Child</a></li>
|
|
742
|
+
</ul>
|
|
743
|
+
</div>
|
|
744
|
+
</li>
|
|
745
|
+
<li class="relative" x-data="{showChildren:false}" x-on:click.away="showChildren=false">
|
|
746
|
+
<a href="#" x-on:click.prevent="showChildren=!showChildren">
|
|
747
|
+
Parent (alpine click)
|
|
748
|
+
<svg class="icon sm">
|
|
749
|
+
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
750
|
+
</svg>
|
|
751
|
+
</a>
|
|
752
|
+
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
753
|
+
style="display: none;">
|
|
754
|
+
<ul class="menu bx pxy-0 w-full">
|
|
755
|
+
<li><a class="txt-red" href="#">Child Override</a></li>
|
|
756
|
+
<li><a href="#">Child</a></li>
|
|
757
|
+
<li><a href="#">Child</a></li>
|
|
758
|
+
</ul>
|
|
759
|
+
</div>
|
|
760
|
+
</li>
|
|
761
|
+
<li><a class="txt-red" href="#">Override</a></li>
|
|
762
|
+
<li><a class="active" href="#">Active</a></li>
|
|
763
|
+
<li><a class="active nav-item" href="#">Active (nav-item)</a></li>
|
|
764
|
+
|
|
577
765
|
</ul>
|
|
578
|
-
|
|
579
|
-
<li>List item one</li>
|
|
580
|
-
<li>List item two</li>
|
|
581
|
-
<li>List item three</li>
|
|
582
|
-
</ol>
|
|
583
|
-
</div>
|
|
766
|
+
</nav>
|
|
584
767
|
</div>
|
|
585
|
-
<div class="
|
|
586
|
-
<
|
|
587
|
-
<
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
768
|
+
<div class="navbar ha-l primary">
|
|
769
|
+
<a href="#"><img src="/images/logo.svg" alt="naykel-logo" class="logo mr-3"></a>
|
|
770
|
+
<nav>
|
|
771
|
+
<ul>
|
|
772
|
+
<li class="dd">
|
|
773
|
+
<a href="#">
|
|
774
|
+
Parent (css)
|
|
775
|
+
<svg class="icon sm">
|
|
776
|
+
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
777
|
+
</svg>
|
|
778
|
+
</a>
|
|
779
|
+
<div class="dd-content mt-05">
|
|
780
|
+
<ul class="menu bx pxy-0">
|
|
781
|
+
<li><a href="#">Child</a></li>
|
|
782
|
+
<li><a href="#">Child</a></li>
|
|
783
|
+
<li><a href="#">Child</a></li>
|
|
784
|
+
</ul>
|
|
785
|
+
</div>
|
|
786
|
+
</li>
|
|
787
|
+
<li class="relative" x-data="{showChildren:false}" x-on:mouseenter="showChildren=true"
|
|
788
|
+
x-on:mouseleave="showChildren=false">
|
|
789
|
+
<a href="#">
|
|
790
|
+
Parent (alpine hover)
|
|
791
|
+
<svg class="icon sm">
|
|
792
|
+
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
793
|
+
</svg>
|
|
794
|
+
</a>
|
|
795
|
+
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
796
|
+
style="display: none;">
|
|
797
|
+
<ul class="menu bx pxy-0 w-full">
|
|
798
|
+
<li><a href="#">Child</a></li>
|
|
799
|
+
<li><a href="#">Child</a></li>
|
|
800
|
+
<li><a href="#">Child</a></li>
|
|
801
|
+
</ul>
|
|
802
|
+
</div>
|
|
803
|
+
</li>
|
|
804
|
+
<li class="relative" x-data="{showChildren:false}" x-on:click.away="showChildren=false">
|
|
805
|
+
<a href="#" x-on:click.prevent="showChildren=!showChildren">
|
|
806
|
+
Parent (alpine click)
|
|
807
|
+
<svg class="icon sm">
|
|
808
|
+
<use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
|
|
809
|
+
</svg>
|
|
810
|
+
</a>
|
|
811
|
+
<div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
|
|
812
|
+
style="display: none;">
|
|
813
|
+
<ul class="menu bx pxy-0 w-full">
|
|
814
|
+
<li><a href="#">Child</a></li>
|
|
815
|
+
<li><a href="#">Child</a></li>
|
|
816
|
+
<li><a href="#">Child</a></li>
|
|
817
|
+
</ul>
|
|
818
|
+
</div>
|
|
819
|
+
</li>
|
|
820
|
+
|
|
608
821
|
</ul>
|
|
609
|
-
</
|
|
822
|
+
</nav>
|
|
610
823
|
</div>
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
824
|
+
</div>
|
|
825
|
+
<section id="lists" class="py-3">
|
|
826
|
+
<div class="container">
|
|
827
|
+
<h2 class="title mb-3">Lists</h2>
|
|
828
|
+
<div class="bx">
|
|
829
|
+
<div class="bx-title">Base Lists</div>
|
|
830
|
+
<div class="inline-flex gap-3">
|
|
831
|
+
<ul>
|
|
832
|
+
<li>List item one</li>
|
|
833
|
+
<li>List item two</li>
|
|
834
|
+
<li>List item three</li>
|
|
835
|
+
</ul>
|
|
616
836
|
<ol>
|
|
617
|
-
<li>
|
|
618
|
-
<li>
|
|
619
|
-
<li>
|
|
837
|
+
<li>List item one</li>
|
|
838
|
+
<li>List item two</li>
|
|
839
|
+
<li>List item three</li>
|
|
620
840
|
</ol>
|
|
621
|
-
</
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
<
|
|
627
|
-
|
|
841
|
+
</div>
|
|
842
|
+
</div>
|
|
843
|
+
<div class="bx">
|
|
844
|
+
<div class="bx-title">List Styles</div>
|
|
845
|
+
<p class="txt-red">Check list styles to make sure bullets align correctly.</p>
|
|
846
|
+
<div class="flex space-x">
|
|
847
|
+
<ul class="bx list-none">
|
|
848
|
+
<li>Item one</li>
|
|
849
|
+
<li>Item two</li>
|
|
850
|
+
<li>Item three</li>
|
|
851
|
+
</ul>
|
|
852
|
+
<ul class="bx list-decimal">
|
|
853
|
+
<li>Item one</li>
|
|
854
|
+
<li>Item two</li>
|
|
855
|
+
<li>Item three</li>
|
|
856
|
+
</ul>
|
|
857
|
+
<ul class="bx list-square">
|
|
858
|
+
<li>Item one</li>
|
|
859
|
+
<li>Item two</li>
|
|
860
|
+
<li>Item three</li>
|
|
861
|
+
</ul>
|
|
862
|
+
<ul class="bx list-circle">
|
|
863
|
+
<li>Item one</li>
|
|
864
|
+
<li>Item two</li>
|
|
865
|
+
<li>Item three</li>
|
|
866
|
+
</ul>
|
|
867
|
+
</div>
|
|
868
|
+
</div>
|
|
869
|
+
<div class="bx">
|
|
870
|
+
<div class="bx-title">Nested Lists</div>
|
|
871
|
+
<ul>
|
|
872
|
+
<li>
|
|
873
|
+
List item one
|
|
874
|
+
<ol>
|
|
875
|
+
<li>Nested list item one</li>
|
|
876
|
+
<li>Nested list item two</li>
|
|
877
|
+
<li>Nested list item three</li>
|
|
878
|
+
</ol>
|
|
879
|
+
</li>
|
|
880
|
+
<li>
|
|
881
|
+
List item two
|
|
882
|
+
<p>paragraph inside a list item</p>
|
|
883
|
+
</li>
|
|
884
|
+
<li>List item three</li>
|
|
885
|
+
</ul>
|
|
886
|
+
</div>
|
|
628
887
|
</div>
|
|
629
|
-
</
|
|
630
|
-
</
|
|
631
|
-
</div>
|
|
632
|
-
|
|
888
|
+
</section>
|
|
889
|
+
</div>
|
|
633
890
|
|
|
634
|
-
<!-- -->
|
|
635
|
-
<!-- -->
|
|
636
|
-
<!-- -->
|
|
637
|
-
<!-- -->
|
|
638
|
-
<!-- -->
|
|
639
|
-
<!-- -->
|
|
640
|
-
<!-- -->
|
|
641
|
-
<!-- -->
|
|
642
|
-
<!-- -->
|
|
643
|
-
<!-- -->
|
|
644
|
-
<!-- -->
|
|
645
891
|
|
|
892
|
+
<!-- -->
|
|
893
|
+
<!-- -->
|
|
894
|
+
<!-- -->
|
|
895
|
+
<!-- -->
|
|
896
|
+
<!-- -->
|
|
897
|
+
<!-- -->
|
|
898
|
+
<!-- -->
|
|
899
|
+
<!-- -->
|
|
900
|
+
<!-- -->
|
|
901
|
+
<!-- -->
|
|
902
|
+
<!-- -->
|
|
646
903
|
|
|
647
904
|
|
|
648
905
|
|
|
649
906
|
|
|
650
907
|
|
|
651
|
-
<div class="container pxy bx">
|
|
652
|
-
<div x-data="{ activeTab: 'home' }">
|
|
653
|
-
<!-- Tabs Navigation -->
|
|
654
|
-
<div class="tabs">
|
|
655
|
-
<button
|
|
656
|
-
@click="activeTab = 'home'"
|
|
657
|
-
:class="activeTab === 'home' ? 'tab-active' : 'tab-inactive'"
|
|
658
|
-
class="tab-btn">
|
|
659
|
-
Home
|
|
660
|
-
</button>
|
|
661
|
-
<button
|
|
662
|
-
@click="activeTab = 'profile'"
|
|
663
|
-
:class="activeTab === 'profile' ? 'tab-active' : 'tab-inactive'"
|
|
664
|
-
class="tab-btn">
|
|
665
|
-
Profile
|
|
666
|
-
</button>
|
|
667
|
-
</div>
|
|
668
908
|
|
|
669
|
-
|
|
670
|
-
<div
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
<
|
|
909
|
+
<div class="container pxy bx">
|
|
910
|
+
<div x-data="{ activeTab: 'home' }">
|
|
911
|
+
<!-- Tabs Navigation -->
|
|
912
|
+
<div class="tabs">
|
|
913
|
+
<button
|
|
914
|
+
@click="activeTab = 'home'"
|
|
915
|
+
:class="activeTab === 'home' ? 'tab-active' : 'tab-inactive'"
|
|
916
|
+
class="tab-btn">
|
|
917
|
+
Home
|
|
918
|
+
</button>
|
|
919
|
+
<button
|
|
920
|
+
@click="activeTab = 'profile'"
|
|
921
|
+
:class="activeTab === 'profile' ? 'tab-active' : 'tab-inactive'"
|
|
922
|
+
class="tab-btn">
|
|
923
|
+
Profile
|
|
924
|
+
</button>
|
|
674
925
|
</div>
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
926
|
+
|
|
927
|
+
<!-- Tabs Content -->
|
|
928
|
+
<div class="mt">
|
|
929
|
+
<div x-show="activeTab === 'home'">
|
|
930
|
+
<h2>Home</h2>
|
|
931
|
+
<p>This is the home tab content.</p>
|
|
932
|
+
</div>
|
|
933
|
+
<div x-show="activeTab === 'profile'">
|
|
934
|
+
<h2>Profile</h2>
|
|
935
|
+
<p>This is the profile tab content.</p>
|
|
936
|
+
</div>
|
|
678
937
|
</div>
|
|
679
938
|
</div>
|
|
680
939
|
</div>
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
adipisci sunt ad voluptatem quam. </p>
|
|
713
|
-
</div>
|
|
714
|
-
<button x-on:click="expanded =! expanded" class="link mt">
|
|
715
|
-
<div class="flex va-c" x-show="!expanded">
|
|
716
|
-
Show more
|
|
717
|
-
<svg class="icon sm ml-05">
|
|
718
|
-
<use xlink:href="svg/naykel-ui.svg#chevron-down"></use>
|
|
719
|
-
</svg>
|
|
940
|
+
<style>
|
|
941
|
+
.fade-out-mask {
|
|
942
|
+
-webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
|
|
943
|
+
mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
|
|
944
|
+
max-height: 10em;
|
|
945
|
+
overflow: hidden;
|
|
946
|
+
}
|
|
947
|
+
|
|
948
|
+
.expanded {
|
|
949
|
+
-webkit-mask-image: none;
|
|
950
|
+
mask-image: none;
|
|
951
|
+
max-height: none;
|
|
952
|
+
}
|
|
953
|
+
</style>
|
|
954
|
+
|
|
955
|
+
|
|
956
|
+
<div class="container-md py-5">
|
|
957
|
+
<div x-data="{ expanded: false }" class="container-md py-5">
|
|
958
|
+
<div :class="{'fade-out-mask': !expanded}" class="overflow-hidden">
|
|
959
|
+
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis porro ipsa expedita, itaque
|
|
960
|
+
laudantium minima alias fugit. Perferendis rerum dolorem possimus fugiat dicta, commodi, voluptates
|
|
961
|
+
adipisci sunt ad voluptatem quam. </p>
|
|
962
|
+
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis porro ipsa expedita, itaque
|
|
963
|
+
laudantium minima alias fugit. Perferendis rerum dolorem possimus fugiat dicta, commodi, voluptates
|
|
964
|
+
adipisci sunt ad voluptatem quam. </p>
|
|
965
|
+
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis porro ipsa expedita, itaque
|
|
966
|
+
laudantium minima alias fugit. Perferendis rerum dolorem possimus fugiat dicta, commodi, voluptates
|
|
967
|
+
adipisci sunt ad voluptatem quam. </p>
|
|
968
|
+
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis porro ipsa expedita, itaque
|
|
969
|
+
laudantium minima alias fugit. Perferendis rerum dolorem possimus fugiat dicta, commodi, voluptates
|
|
970
|
+
adipisci sunt ad voluptatem quam. </p>
|
|
720
971
|
</div>
|
|
721
|
-
<
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
<
|
|
725
|
-
</svg>
|
|
726
|
-
</span>
|
|
727
|
-
</button>
|
|
728
|
-
</div>
|
|
729
|
-
</div>
|
|
730
|
-
|
|
731
|
-
<div class="pxy container">
|
|
732
|
-
<div x-data="{ active: 0, }" class="divide-y bdr bdr-red">
|
|
733
|
-
<div x-data="{
|
|
734
|
-
id: 1,
|
|
735
|
-
get expanded() { return this.active === this.id },
|
|
736
|
-
set expanded(value) { this.active = value ? this.id : null }
|
|
737
|
-
}">
|
|
738
|
-
<button x-on:click="expanded =! expanded" class="flex space-between va-c w-full pxy bg-blue-50">
|
|
739
|
-
<div class="flex space-between w-full" x-show="!expanded">
|
|
740
|
-
Open Item One
|
|
741
|
-
<svg class="icon">
|
|
742
|
-
<use xlink:href="svg/naykel-ui.svg#chevron-right"></use>
|
|
743
|
-
</svg>
|
|
744
|
-
</div>
|
|
745
|
-
<span class="flex space-between w-full" x-show="expanded">
|
|
746
|
-
Close Item One
|
|
747
|
-
<svg class="icon">
|
|
972
|
+
<button x-on:click="expanded =! expanded" class="link mt">
|
|
973
|
+
<div class="flex va-c" x-show="!expanded">
|
|
974
|
+
Show more
|
|
975
|
+
<svg class="icon sm ml-05">
|
|
748
976
|
<use xlink:href="svg/naykel-ui.svg#chevron-down"></use>
|
|
749
977
|
</svg>
|
|
750
|
-
</span>
|
|
751
|
-
</button>
|
|
752
|
-
<div x-show="expanded" class="pxy mxy-0"> Lorem ipsum dolor sit, amet consectetur adipisicing elit.
|
|
753
|
-
Excepturi ab beatae labore est nam corporis dolorem delectus molestias voluptate, totam, error
|
|
754
|
-
necessitatibus! Asperiores saepe, impedit obcaecati sint dignissimos reprehenderit vero? </div>
|
|
755
|
-
</div>
|
|
756
|
-
<div x-data="{
|
|
757
|
-
id: 2,
|
|
758
|
-
get expanded() { return this.active === this.id },
|
|
759
|
-
set expanded(value) { this.active = value ? this.id : null }
|
|
760
|
-
}">
|
|
761
|
-
<button x-on:click="expanded =! expanded" class="flex space-between va-c w-full pxy bg-blue-50">
|
|
762
|
-
<div class="flex space-between w-full" x-show="!expanded">
|
|
763
|
-
Open Item Two
|
|
764
|
-
<svg class="icon">
|
|
765
|
-
<use xlink:href="svg/naykel-ui.svg#chevron-right"></use>
|
|
766
|
-
</svg>
|
|
767
978
|
</div>
|
|
768
|
-
<span class="flex
|
|
769
|
-
|
|
770
|
-
<svg class="icon">
|
|
771
|
-
<use xlink:href="svg/naykel-ui.svg#chevron-
|
|
979
|
+
<span class="flex va-c" x-show="expanded">
|
|
980
|
+
Show less
|
|
981
|
+
<svg class="icon sm ml-05">
|
|
982
|
+
<use xlink:href="svg/naykel-ui.svg#chevron-up"></use>
|
|
772
983
|
</svg>
|
|
773
984
|
</span>
|
|
774
985
|
</button>
|
|
775
|
-
<div x-show="expanded" class="pxy mxy-0"> Lorem ipsum dolor sit, amet consectetur adipisicing elit.
|
|
776
|
-
Excepturi ab beatae labore est nam corporis dolorem delectus molestias voluptate, totam, error
|
|
777
|
-
necessitatibus! Asperiores saepe, impedit obcaecati sint dignissimos reprehenderit vero? </div>
|
|
778
986
|
</div>
|
|
779
987
|
</div>
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
988
|
+
|
|
989
|
+
<div class="pxy container">
|
|
990
|
+
<div x-data="{ active: 0, }" class="divide-y bdr bdr-red">
|
|
991
|
+
<div x-data="{
|
|
784
992
|
id: 1,
|
|
785
993
|
get expanded() { return this.active === this.id },
|
|
786
994
|
set expanded(value) { this.active = value ? this.id : null }
|
|
787
995
|
}">
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
996
|
+
<button x-on:click="expanded =! expanded" class="flex space-between va-c w-full pxy bg-blue-50">
|
|
997
|
+
<div class="flex space-between w-full" x-show="!expanded">
|
|
998
|
+
Open Item One
|
|
999
|
+
<svg class="icon">
|
|
1000
|
+
<use xlink:href="svg/naykel-ui.svg#chevron-right"></use>
|
|
1001
|
+
</svg>
|
|
1002
|
+
</div>
|
|
1003
|
+
<span class="flex space-between w-full" x-show="expanded">
|
|
1004
|
+
Close Item One
|
|
1005
|
+
<svg class="icon">
|
|
1006
|
+
<use xlink:href="svg/naykel-ui.svg#chevron-down"></use>
|
|
1007
|
+
</svg>
|
|
1008
|
+
</span>
|
|
1009
|
+
</button>
|
|
1010
|
+
<div x-show="expanded" class="pxy mxy-0"> Lorem ipsum dolor sit, amet consectetur adipisicing elit.
|
|
1011
|
+
Excepturi ab beatae labore est nam corporis dolorem delectus molestias voluptate, totam, error
|
|
1012
|
+
necessitatibus! Asperiores saepe, impedit obcaecati sint dignissimos reprehenderit vero? </div>
|
|
1013
|
+
</div>
|
|
1014
|
+
<div x-data="{
|
|
805
1015
|
id: 2,
|
|
806
1016
|
get expanded() { return this.active === this.id },
|
|
807
1017
|
set expanded(value) { this.active = value ? this.id : null }
|
|
808
1018
|
}">
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
</div>
|
|
827
|
-
<div class="container mt">
|
|
828
|
-
<div class="grid md:cols-2">
|
|
829
|
-
<div class="divide-y zebra">
|
|
830
|
-
<div class="h-2"></div>
|
|
831
|
-
<div class="h-2"></div>
|
|
832
|
-
<div class="h-2"></div>
|
|
833
|
-
<div class="h-2"></div>
|
|
834
|
-
</div>
|
|
835
|
-
</div>
|
|
836
|
-
</div>
|
|
837
|
-
<div class="container mt">
|
|
838
|
-
<div class="grid cols-2">
|
|
839
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur alias a omnis ipsa perferendis
|
|
840
|
-
dolorum suscipit facere excepturi atque totam illo, exercitationem voluptas accusamus libero ipsum
|
|
841
|
-
harum, rerum explicabo ducimus.</p>
|
|
842
|
-
<p class="font-serif">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae magni placeat
|
|
843
|
-
eligendi. Officiis, voluptate. Eligendi id nesciunt, totam ipsam nobis officia ex voluptate eveniet
|
|
844
|
-
voluptatem voluptatibus animi molestias dignissimos nulla.</p>
|
|
845
|
-
<p class="font-sans-serif">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur laborum est
|
|
846
|
-
exercitationem asperiores voluptate, dolor id magnam, eligendi veniam quo natus numquam vel culpa
|
|
847
|
-
obcaecati ullam ipsam eveniet velit sunt?</p>
|
|
848
|
-
<p class="font-mono">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure delectus excepturi
|
|
849
|
-
dolorum. Eum consequuntur natus eveniet illo consequatur? Inventore, incidunt! Aspernatur laudantium
|
|
850
|
-
officia veniam! Temporibus eaque qui nemo recusandae similique.</p>
|
|
851
|
-
</div>
|
|
852
|
-
</div>
|
|
853
|
-
<div class="quick-hide-div zebra">
|
|
854
|
-
<section class="py-3">
|
|
855
|
-
<div class="container">
|
|
856
|
-
<h2 class="title txt-3">Naykel UI Icons</h2>
|
|
857
|
-
<div class="flex">
|
|
858
|
-
<svg class="icon">
|
|
859
|
-
<use xlink:href="svg/naykel-ui.svg#chevron-down"></use>
|
|
860
|
-
</svg>
|
|
861
|
-
<svg class="icon">
|
|
862
|
-
<use xlink:href="svg/naykel-ui.svg#chevron-left"></use>
|
|
863
|
-
</svg>
|
|
864
|
-
<svg class="icon">
|
|
865
|
-
<use xlink:href="svg/naykel-ui.svg#chevron-right"></use>
|
|
866
|
-
</svg>
|
|
867
|
-
<svg class="icon">
|
|
868
|
-
<use xlink:href="svg/naykel-ui.svg#chevron-up"></use>
|
|
869
|
-
</svg>
|
|
870
|
-
</div>
|
|
871
|
-
</div>
|
|
872
|
-
</section>
|
|
873
|
-
<section id="button-control-sizes-examples" class="py-3">
|
|
874
|
-
<div class="container space-y">
|
|
875
|
-
<h2 class="title txt-3">Button and Control Sizes</h2>
|
|
876
|
-
<div>
|
|
877
|
-
<button class="btn primary xs">Extra Small</button>
|
|
878
|
-
<input class="xs" placeholder="Text Input">
|
|
879
|
-
</div>
|
|
880
|
-
<div>
|
|
881
|
-
<button class="btn primary sm">Small</button>
|
|
882
|
-
<input class="sm" placeholder="Text Input">
|
|
883
|
-
</div>
|
|
884
|
-
<div>
|
|
885
|
-
<button class="btn primary">Base</button>
|
|
886
|
-
<input placeholder="Text Input">
|
|
887
|
-
</div>
|
|
888
|
-
<div>
|
|
889
|
-
<button class="btn primary lg">Large</button>
|
|
890
|
-
<input class="lg" placeholder="Text Input">
|
|
891
|
-
</div>
|
|
892
|
-
<div>
|
|
893
|
-
<button class="btn primary xl">Extra Large</button>
|
|
894
|
-
<input class="xl" placeholder="Text Input">
|
|
1019
|
+
<button x-on:click="expanded =! expanded" class="flex space-between va-c w-full pxy bg-blue-50">
|
|
1020
|
+
<div class="flex space-between w-full" x-show="!expanded">
|
|
1021
|
+
Open Item Two
|
|
1022
|
+
<svg class="icon">
|
|
1023
|
+
<use xlink:href="svg/naykel-ui.svg#chevron-right"></use>
|
|
1024
|
+
</svg>
|
|
1025
|
+
</div>
|
|
1026
|
+
<span class="flex space-between w-full" x-show="expanded">
|
|
1027
|
+
Close Item Two
|
|
1028
|
+
<svg class="icon">
|
|
1029
|
+
<use xlink:href="svg/naykel-ui.svg#chevron-down"></use>
|
|
1030
|
+
</svg>
|
|
1031
|
+
</span>
|
|
1032
|
+
</button>
|
|
1033
|
+
<div x-show="expanded" class="pxy mxy-0"> Lorem ipsum dolor sit, amet consectetur adipisicing elit.
|
|
1034
|
+
Excepturi ab beatae labore est nam corporis dolorem delectus molestias voluptate, totam, error
|
|
1035
|
+
necessitatibus! Asperiores saepe, impedit obcaecati sint dignissimos reprehenderit vero? </div>
|
|
895
1036
|
</div>
|
|
896
1037
|
</div>
|
|
897
|
-
</
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
<div class="
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
</div>
|
|
912
|
-
<nav class="menu">
|
|
913
|
-
<div class="menu-title"><code><nav class="menu"></code></div>
|
|
914
|
-
<div class="menu-title">Menu Title</div>
|
|
915
|
-
<a href="">Item</a>
|
|
916
|
-
<a href="">Parent</a>
|
|
917
|
-
<a href="" class="active">Active</a>
|
|
918
|
-
<a href="" class="disabled">Disabled</a>
|
|
919
|
-
</nav>
|
|
920
|
-
<ul class="menu">
|
|
921
|
-
<div class="menu-title"><code><ul class="menu"></code></div>
|
|
922
|
-
<div class="menu-title">Menu Title</div>
|
|
923
|
-
<li><a href="">Item</a></li>
|
|
924
|
-
<li><a href="">Parent</a></li>
|
|
925
|
-
<li><a href="" class="active">Active</a></li>
|
|
926
|
-
<li><a href="" class="disabled">Disabled</a></li>
|
|
927
|
-
</ul>
|
|
928
|
-
</div>
|
|
929
|
-
<h4>With Menu-Item</h4>
|
|
930
|
-
<div class="bx grid md:cols-3">
|
|
931
|
-
<div class="menu">
|
|
932
|
-
<div class="menu-title"><code><div class="menu"></code></div>
|
|
933
|
-
<div class="menu-title">Menu Title</div>
|
|
934
|
-
<a class="menu-item" href="">Item</a>
|
|
935
|
-
<a class="menu-item" href="">Parent</a>
|
|
936
|
-
<a class="menu-item active" href="">Active</a>
|
|
937
|
-
<a class="menu-item disabled" href="">Disabled</a>
|
|
938
|
-
</div>
|
|
939
|
-
<nav class="menu">
|
|
940
|
-
<div class="menu-title"><code><nav class="menu"></code></div>
|
|
941
|
-
<div class="menu-title">Menu Title</div>
|
|
942
|
-
<a class="menu-item" href="">Item</a>
|
|
943
|
-
<a class="menu-item" href="">Parent</a>
|
|
944
|
-
<a class="menu-item active" href="">Active</a>
|
|
945
|
-
<a class="menu-item disabled" href="">Disabled</a>
|
|
946
|
-
</nav>
|
|
947
|
-
<ul class="menu">
|
|
948
|
-
<div class="menu-title"><code><ul class="menu"></code></div>
|
|
949
|
-
<div class="menu-title">Menu Title</div>
|
|
950
|
-
<li><a class="menu-item" href="">Item</a></li>
|
|
951
|
-
<li><a class="menu-item" href="">Parent</a></li>
|
|
952
|
-
<li><a class="menu-item active" href="">Active</a></li>
|
|
953
|
-
<li><a class="menu-item disabled" href="">Disabled</a></li>
|
|
954
|
-
</ul>
|
|
955
|
-
</div>
|
|
956
|
-
</section>
|
|
957
|
-
<section id="form-controls" class="py-3">
|
|
958
|
-
<div class="container">
|
|
959
|
-
<h2 class="title txt-3">Form Controls</h2>
|
|
960
|
-
<div class="grid cols-2">
|
|
961
|
-
<div id="radio-check-toggle">
|
|
962
|
-
<h5>Radio</h5>
|
|
963
|
-
<div class="space-x">
|
|
964
|
-
<label><input type="radio" name="abc">Option</label>
|
|
965
|
-
<label><input type="radio" name="abc" checked>Checked</label>
|
|
966
|
-
<label><input type="radio" name="abc" disabled>Disabled</label>
|
|
967
|
-
</div>
|
|
968
|
-
<h5>Checkbox</h5>
|
|
969
|
-
<div class="space-x">
|
|
970
|
-
<label><input type="checkbox">Option</label>
|
|
971
|
-
<label><input type="checkbox" checked>Checked</label>
|
|
972
|
-
<label><input type="checkbox" disabled>Disabled</label>
|
|
973
|
-
</div>
|
|
974
|
-
<h5>Slider</h5>
|
|
975
|
-
<div class="space-x">
|
|
976
|
-
<label class="toggle">
|
|
977
|
-
<input type="checkbox">
|
|
978
|
-
<div class="slider"></div>
|
|
979
|
-
<span>Option</span>
|
|
980
|
-
</label>
|
|
981
|
-
<label class="toggle">
|
|
982
|
-
<input type="checkbox" checked>
|
|
983
|
-
<div class="slider"></div>
|
|
984
|
-
<span>Checked</span>
|
|
985
|
-
</label>
|
|
986
|
-
<label class="toggle">
|
|
987
|
-
<input type="checkbox" disabled>
|
|
988
|
-
<div class="slider"></div>
|
|
989
|
-
<span>Disabled</span>
|
|
990
|
-
</label>
|
|
991
|
-
</div>
|
|
992
|
-
</div>
|
|
993
|
-
<div id="label-with-tooltip">
|
|
994
|
-
<h5 class="my">Label with Tooltip</h5>
|
|
995
|
-
<div class="flex va-c space-between mb-05 bdr">
|
|
996
|
-
<label> My Label </label>
|
|
997
|
-
<span x-data="{open:false}" class="relative" x-on:mouseenter="open=true"
|
|
998
|
-
x-on:mouseleave="open=false">
|
|
999
|
-
<div class="flex va-c">
|
|
1000
|
-
<svg class="txt-muted" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
1001
|
-
fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
|
1002
|
-
aria-hidden="true" data-slot="icon">
|
|
1003
|
-
<path stroke-linecap="round" stroke-linejoin="round"
|
|
1004
|
-
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">
|
|
1005
|
-
</path>
|
|
1006
|
-
</svg>
|
|
1007
|
-
</div>
|
|
1008
|
-
<div class="absolute right-0 minw-18 z-100 bx pxy-075 mt-05 txt-sm fw4 bg-stone-50"
|
|
1009
|
-
x-show="open" x-transition.duration="" style="display: none;">
|
|
1010
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur vitae
|
|
1011
|
-
perspiciatis officiis iste omnis, iure quasi, rerum minus magnam consequatur eos ut
|
|
1012
|
-
aliquam aspernatur sapiente veniam! Repudiandae voluptatum eius ducimus?
|
|
1013
|
-
</div>
|
|
1014
|
-
</span>
|
|
1038
|
+
</div>
|
|
1039
|
+
<div class="pxy container">
|
|
1040
|
+
<div x-data="{ active: 0, }" class="space-y">
|
|
1041
|
+
<div x-data="{
|
|
1042
|
+
id: 1,
|
|
1043
|
+
get expanded() { return this.active === this.id },
|
|
1044
|
+
set expanded(value) { this.active = value ? this.id : null }
|
|
1045
|
+
}">
|
|
1046
|
+
<button x-on:click="expanded =! expanded" class="flex space-between va-c dark w-full pxy">
|
|
1047
|
+
<div class="flex space-between w-full" x-show="!expanded">
|
|
1048
|
+
Open Item One
|
|
1049
|
+
<svg class="icon">
|
|
1050
|
+
<use xlink:href="svg/naykel-ui.svg#chevron-right"></use>
|
|
1051
|
+
</svg>
|
|
1015
1052
|
</div>
|
|
1016
|
-
|
|
1053
|
+
<span class="flex space-between w-full" x-show="expanded">
|
|
1054
|
+
Close Item One
|
|
1055
|
+
<svg class="icon">
|
|
1056
|
+
<use xlink:href="svg/naykel-ui.svg#chevron-down"></use>
|
|
1057
|
+
</svg>
|
|
1058
|
+
</span>
|
|
1059
|
+
</button>
|
|
1060
|
+
<div x-show="expanded" class="bx"> Hey there! </div>
|
|
1017
1061
|
</div>
|
|
1018
|
-
<div
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
<div>
|
|
1030
|
-
<label class="file bdr">
|
|
1031
|
-
<input type="file" name="file">
|
|
1032
|
-
<span>Choose a file…</span>
|
|
1033
|
-
</label>
|
|
1034
|
-
<div class="frm-row my">
|
|
1035
|
-
<label class="file btn">
|
|
1036
|
-
<input type="file" name="">
|
|
1037
|
-
<svg class="wh-1.25 mr-075" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
1038
|
-
viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
|
|
1039
|
-
<path fill-rule="evenodd"
|
|
1040
|
-
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"
|
|
1041
|
-
clip-rule="evenodd" />
|
|
1042
|
-
</svg>
|
|
1043
|
-
<span>Choose a file...</span>
|
|
1044
|
-
</label>
|
|
1045
|
-
</div>
|
|
1046
|
-
</div>
|
|
1047
|
-
<div class="frm-row">
|
|
1048
|
-
<label for="success" class="txt-success-light">Your name</label>
|
|
1049
|
-
<input type="text" id="success" class="success-light" placeholder="Success input">
|
|
1050
|
-
<p class="txt-success-light txt-sm"><span class="font-medium">Well done!</span> Some success
|
|
1051
|
-
message.</p>
|
|
1052
|
-
</div>
|
|
1053
|
-
<div class="frm-row">
|
|
1054
|
-
<label for="error" class="block mb-2 text-sm text-red-700 dark:text-red-500">Your
|
|
1055
|
-
name</label>
|
|
1056
|
-
<input type="text" id="error"
|
|
1057
|
-
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"
|
|
1058
|
-
placeholder="Error input">
|
|
1059
|
-
<p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oh,
|
|
1060
|
-
snapp!</span> Some error message.</p>
|
|
1061
|
-
</div>
|
|
1062
|
-
<div class="frm-row">
|
|
1063
|
-
<div class="withAddons">
|
|
1064
|
-
<input type="text">
|
|
1065
|
-
<div class="trailingAddon"> Trailing </div>
|
|
1066
|
-
<div class="leadingAddon"> Leading </div>
|
|
1067
|
-
</div>
|
|
1068
|
-
</div>
|
|
1069
|
-
<div class="frm-row">
|
|
1070
|
-
<div class="withAddons">
|
|
1071
|
-
<div class="leadingAddon"> Leading </div>
|
|
1072
|
-
<div class="trailingAddon"> Trailing </div>
|
|
1073
|
-
<input type="text">
|
|
1062
|
+
<div x-data="{
|
|
1063
|
+
id: 2,
|
|
1064
|
+
get expanded() { return this.active === this.id },
|
|
1065
|
+
set expanded(value) { this.active = value ? this.id : null }
|
|
1066
|
+
}">
|
|
1067
|
+
<button x-on:click="expanded =! expanded" class="flex space-between va-c dark w-full pxy">
|
|
1068
|
+
<div class="flex space-between w-full" x-show="!expanded">
|
|
1069
|
+
Open Item Two
|
|
1070
|
+
<svg class="icon">
|
|
1071
|
+
<use xlink:href="svg/naykel-ui.svg#chevron-right"></use>
|
|
1072
|
+
</svg>
|
|
1074
1073
|
</div>
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
</div>
|
|
1078
|
-
</section>
|
|
1079
|
-
<section id="box" class="py-3">
|
|
1080
|
-
<div class="container">
|
|
1081
|
-
<h2>Boxes</h2>
|
|
1082
|
-
<div class="grid cols-3">
|
|
1083
|
-
<div class="bx">
|
|
1084
|
-
<div class="bx-title">Super Awesome Title</div>
|
|
1085
|
-
<p>Lorem ipsum dolor sit amet consectetur pepe adipisicing elit. Quas debitis unde aut, sed
|
|
1086
|
-
repellendus tempora, molestiae eveniet.</p>
|
|
1087
|
-
</div>
|
|
1088
|
-
</div>
|
|
1089
|
-
</div>
|
|
1090
|
-
</section>
|
|
1091
|
-
<section id="notifications" class="py-3">
|
|
1092
|
-
<div class="container">
|
|
1093
|
-
<div class="grid cols-3">
|
|
1094
|
-
<div class="bx pxy-1 flex va-c">
|
|
1095
|
-
<svg class="txt-green wh-2">
|
|
1096
|
-
<use xlink:href="svg/naykel-ui.svg#check-circle"></use>
|
|
1097
|
-
</svg>
|
|
1098
|
-
<div class="ml-075">Success message!</div>
|
|
1099
|
-
<button class="ml-auto">
|
|
1074
|
+
<span class="flex space-between w-full" x-show="expanded">
|
|
1075
|
+
Close Item Two
|
|
1100
1076
|
<svg class="icon">
|
|
1101
|
-
<use xlink:href="svg/naykel-ui.svg#
|
|
1077
|
+
<use xlink:href="svg/naykel-ui.svg#chevron-down"></use>
|
|
1102
1078
|
</svg>
|
|
1103
|
-
</
|
|
1104
|
-
</
|
|
1105
|
-
|
|
1106
|
-
</div>
|
|
1107
|
-
</section>
|
|
1108
|
-
<section id="alignment-techniques" class="py-3">
|
|
1109
|
-
<div class="container">
|
|
1110
|
-
<h2>Alignment Techniques</h2>
|
|
1111
|
-
<div class="grid cols-3">
|
|
1112
|
-
<div class="bdr flex va-c">
|
|
1113
|
-
<div class="wh-3 pink"></div>
|
|
1114
|
-
<div class="wh-4 blue"></div>
|
|
1115
|
-
<div class="ml-auto wh-3 pink"></div>
|
|
1116
|
-
</div>
|
|
1117
|
-
<div class="bdr flex va-c">
|
|
1118
|
-
<span class="wh-3 pink"></span>
|
|
1119
|
-
<div class="fg1 wh-4 blue"></div>
|
|
1120
|
-
<span class="wh-3 pink"></span>
|
|
1121
|
-
</div>
|
|
1079
|
+
</span>
|
|
1080
|
+
</button>
|
|
1081
|
+
<div x-show="expanded" class="bx"> Hey there! </div>
|
|
1122
1082
|
</div>
|
|
1123
1083
|
</div>
|
|
1124
|
-
</
|
|
1125
|
-
<
|
|
1126
|
-
<div class="
|
|
1127
|
-
<
|
|
1128
|
-
|
|
1129
|
-
<div
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
1133
|
-
<h2>Heading 2</h2>
|
|
1134
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
1135
|
-
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
1136
|
-
<h3>Heading 3</h3>
|
|
1137
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
1138
|
-
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
1139
|
-
<h4>Heading 4</h4>
|
|
1140
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
1141
|
-
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
1142
|
-
<h5>Heading 5</h5>
|
|
1143
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
1144
|
-
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
1145
|
-
<h6>Heading 6</h6>
|
|
1146
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
1147
|
-
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
1148
|
-
</div>
|
|
1149
|
-
<div>
|
|
1150
|
-
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sed aperiam
|
|
1151
|
-
quibusdam adipisci sequi deserunt nesciunt vel illum voluptatibus maxime soluta repudiandae
|
|
1152
|
-
numquam sapiente exercitationem, culpa, omnis expedita tempore? Similique.</p>
|
|
1153
|
-
|
|
1154
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at corporis deserunt sint eum
|
|
1155
|
-
laboriosam quae nulla fugit, error, tempore quibusdam temporibus fuga adipisci. Nam
|
|
1156
|
-
architecto sunt cupiditate soluta molestias ipsum delectus numquam illo magnam! Praesentium
|
|
1157
|
-
quos deserunt sed, maxime, eligendi quasi, sequi fugiat facere neque harum debitis laborum
|
|
1158
|
-
ipsam!</p>
|
|
1159
|
-
|
|
1160
|
-
<h3 class="title">Text Sizes</h3>
|
|
1161
|
-
<p class="txt-xs">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
|
|
1162
|
-
asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
|
|
1163
|
-
similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
|
|
1164
|
-
repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
1165
|
-
<p class="txt-sm">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
|
|
1166
|
-
asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
|
|
1167
|
-
similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
|
|
1168
|
-
repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
1169
|
-
<p class="txt-base">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto
|
|
1170
|
-
delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam
|
|
1171
|
-
exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam
|
|
1172
|
-
deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
1173
|
-
<p class="txt-lg">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
|
|
1174
|
-
asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
|
|
1175
|
-
similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
|
|
1176
|
-
repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
1177
|
-
<p class="txt-xl">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
|
|
1178
|
-
asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
|
|
1179
|
-
similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
|
|
1180
|
-
repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
1181
|
-
</div>
|
|
1084
|
+
</div>
|
|
1085
|
+
<div class="container mt">
|
|
1086
|
+
<div class="grid md:cols-2">
|
|
1087
|
+
<div class="divide-y zebra">
|
|
1088
|
+
<div class="h-2"></div>
|
|
1089
|
+
<div class="h-2"></div>
|
|
1090
|
+
<div class="h-2"></div>
|
|
1091
|
+
<div class="h-2"></div>
|
|
1182
1092
|
</div>
|
|
1183
1093
|
</div>
|
|
1184
|
-
</section>
|
|
1185
|
-
</div>
|
|
1186
|
-
|
|
1187
|
-
<!-- -->
|
|
1188
|
-
<!-- -->
|
|
1189
|
-
<!-- THIS IS ALL OVER THE PLACE AND NEEDS TO BE TIDIED UP! -->
|
|
1190
|
-
<!-- -->
|
|
1191
|
-
<!-- -->
|
|
1192
|
-
<div class="container py-5">
|
|
1193
|
-
<div class="overflow-x-auto rounded-lg bdr">
|
|
1194
|
-
<table>
|
|
1195
|
-
<thead class="txt-upper">
|
|
1196
|
-
<tr>
|
|
1197
|
-
<th scope="col" class=""> Product name </th>
|
|
1198
|
-
<th scope="col" class=""> Color </th>
|
|
1199
|
-
<th scope="col" class=""> Category </th>
|
|
1200
|
-
<th scope="col" class=""> Price </th>
|
|
1201
|
-
<th scope="col" class=""> Action </th>
|
|
1202
|
-
</tr>
|
|
1203
|
-
</thead>
|
|
1204
|
-
<tbody class="divide-y bdr-t">
|
|
1205
|
-
<tr class="">
|
|
1206
|
-
<th scope="row" class=""> Apple MacBook Pro 17" </th>
|
|
1207
|
-
<td class=""> Silver </td>
|
|
1208
|
-
<td class=""> Laptop </td>
|
|
1209
|
-
<td class=""> $2999 </td>
|
|
1210
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1211
|
-
</tr>
|
|
1212
|
-
<tr class="bdr-green bdr5">
|
|
1213
|
-
<th scope="row" class=""> Microsoft Surface Pro </th>
|
|
1214
|
-
<td class=""> White </td>
|
|
1215
|
-
<td class=""> Laptop PC </td>
|
|
1216
|
-
<td class=""> $1999 </td>
|
|
1217
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1218
|
-
</tr>
|
|
1219
|
-
<tr class="">
|
|
1220
|
-
<th scope="row" class=""> Magic Mouse 2 </th>
|
|
1221
|
-
<td class=""> Black </td>
|
|
1222
|
-
<td class=""> Accessories </td>
|
|
1223
|
-
<td class=""> $99 </td>
|
|
1224
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1225
|
-
</tr>
|
|
1226
|
-
<tr class="">
|
|
1227
|
-
<th scope="row" class=""> Google Pixel Phone </th>
|
|
1228
|
-
<td class=""> Gray </td>
|
|
1229
|
-
<td class=""> Phone </td>
|
|
1230
|
-
<td class=""> $799 </td>
|
|
1231
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1232
|
-
</tr>
|
|
1233
|
-
<tr class="">
|
|
1234
|
-
<th scope="row" class=""> Apple Watch 5 </th>
|
|
1235
|
-
<td class=""> Red </td>
|
|
1236
|
-
<td class=""> Wearables </td>
|
|
1237
|
-
<td class=""> $999 </td>
|
|
1238
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1239
|
-
</tr>
|
|
1240
|
-
</tbody>
|
|
1241
|
-
</table>
|
|
1242
|
-
</div>
|
|
1243
|
-
<hr>
|
|
1244
|
-
<div class="overflow-x-auto rounded-lg bdr">
|
|
1245
|
-
<table>
|
|
1246
|
-
<thead class="txt-upper">
|
|
1247
|
-
<tr>
|
|
1248
|
-
<th scope="col" class=""> Product name </th>
|
|
1249
|
-
<th scope="col" class=""> Color </th>
|
|
1250
|
-
<th scope="col" class=""> Category </th>
|
|
1251
|
-
<th scope="col" class=""> Price </th>
|
|
1252
|
-
<th scope="col" class=""> Action </th>
|
|
1253
|
-
</tr>
|
|
1254
|
-
</thead>
|
|
1255
|
-
<tbody class="divide-y">
|
|
1256
|
-
<tr class="bdr-b bdr-light">
|
|
1257
|
-
<th scope="row" class=""> Apple MacBook Pro 17" </th>
|
|
1258
|
-
<td class=""> Silver </td>
|
|
1259
|
-
<td class=""> Laptop </td>
|
|
1260
|
-
<td class=""> $2999 </td>
|
|
1261
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1262
|
-
</tr>
|
|
1263
|
-
<tr class="bdr-b bdr-light">
|
|
1264
|
-
<th scope="row" class=""> Microsoft Surface Pro </th>
|
|
1265
|
-
<td class=""> White </td>
|
|
1266
|
-
<td class=""> Laptop PC </td>
|
|
1267
|
-
<td class=""> $1999 </td>
|
|
1268
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1269
|
-
</tr>
|
|
1270
|
-
<tr class="bdr-b bdr-light">
|
|
1271
|
-
<th scope="row" class=""> Magic Mouse 2 </th>
|
|
1272
|
-
<td class=""> Black </td>
|
|
1273
|
-
<td class=""> Accessories </td>
|
|
1274
|
-
<td class=""> $99 </td>
|
|
1275
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1276
|
-
</tr>
|
|
1277
|
-
<tr class="bdr-b bdr-light">
|
|
1278
|
-
<th scope="row" class=""> Google Pixel Phone </th>
|
|
1279
|
-
<td class=""> Gray </td>
|
|
1280
|
-
<td class=""> Phone </td>
|
|
1281
|
-
<td class=""> $799 </td>
|
|
1282
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1283
|
-
</tr>
|
|
1284
|
-
<tr class="bdr-blue-40">
|
|
1285
|
-
<th scope="row" class=""> Apple Watch 5 </th>
|
|
1286
|
-
<td class=""> Red </td>
|
|
1287
|
-
<td class=""> Wearables </td>
|
|
1288
|
-
<td class=""> $999 </td>
|
|
1289
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1290
|
-
</tr>
|
|
1291
|
-
</tbody>
|
|
1292
|
-
</table>
|
|
1293
1094
|
</div>
|
|
1294
|
-
<
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
<td class=""> Silver </td>
|
|
1310
|
-
<td class=""> Laptop </td>
|
|
1311
|
-
<td class=""> $2999 </td>
|
|
1312
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1313
|
-
</tr>
|
|
1314
|
-
<tr class="bg-blue-500 bdr-b bdr-light">
|
|
1315
|
-
<th scope="row" class="">
|
|
1316
|
-
Microsoft Surface Pro
|
|
1317
|
-
</th>
|
|
1318
|
-
<td class=""> White </td>
|
|
1319
|
-
<td class=""> Laptop PC </td>
|
|
1320
|
-
<td class=""> $1999 </td>
|
|
1321
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1322
|
-
</tr>
|
|
1323
|
-
<tr class="bg-blue-500 bdr-b bdr-light">
|
|
1324
|
-
<th scope="row" class=""> Magic Mouse 2 </th>
|
|
1325
|
-
<td class=""> Black </td>
|
|
1326
|
-
<td class=""> Accessories </td>
|
|
1327
|
-
<td class=""> $99 </td>
|
|
1328
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1329
|
-
</tr>
|
|
1330
|
-
<tr class="bg-blue-500 bdr-b bdr-light">
|
|
1331
|
-
<th scope="row" class=""> Google Pixel Phone </th>
|
|
1332
|
-
<td class=""> Gray </td>
|
|
1333
|
-
<td class=""> Phone </td>
|
|
1334
|
-
<td class=""> $799 </td>
|
|
1335
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1336
|
-
</tr>
|
|
1337
|
-
<tr class="bg-blue-500 bdr-blue-40">
|
|
1338
|
-
<th scope="row" class=""> Apple Watch 5 </th>
|
|
1339
|
-
<td class=""> Red </td>
|
|
1340
|
-
<td class=""> Wearables </td>
|
|
1341
|
-
<td class=""> $999 </td>
|
|
1342
|
-
<td class=""> <a href="#">Edit</a> </td>
|
|
1343
|
-
</tr>
|
|
1344
|
-
</tbody>
|
|
1345
|
-
</table>
|
|
1095
|
+
<div class="container mt">
|
|
1096
|
+
<div class="grid cols-2">
|
|
1097
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur alias a omnis ipsa perferendis
|
|
1098
|
+
dolorum suscipit facere excepturi atque totam illo, exercitationem voluptas accusamus libero ipsum
|
|
1099
|
+
harum, rerum explicabo ducimus.</p>
|
|
1100
|
+
<p class="font-serif">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae magni placeat
|
|
1101
|
+
eligendi. Officiis, voluptate. Eligendi id nesciunt, totam ipsam nobis officia ex voluptate eveniet
|
|
1102
|
+
voluptatem voluptatibus animi molestias dignissimos nulla.</p>
|
|
1103
|
+
<p class="font-sans-serif">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur laborum est
|
|
1104
|
+
exercitationem asperiores voluptate, dolor id magnam, eligendi veniam quo natus numquam vel culpa
|
|
1105
|
+
obcaecati ullam ipsam eveniet velit sunt?</p>
|
|
1106
|
+
<p class="font-mono">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure delectus excepturi
|
|
1107
|
+
dolorum. Eum consequuntur natus eveniet illo consequatur? Inventore, incidunt! Aspernatur laudantium
|
|
1108
|
+
officia veniam! Temporibus eaque qui nemo recusandae similique.</p>
|
|
1109
|
+
</div>
|
|
1346
1110
|
</div>
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
<div>
|
|
1350
|
-
<div class="quick-hide-wrapper zebra c-py-5-3-2">
|
|
1351
|
-
<section id="theme-examples">
|
|
1111
|
+
<div class="quick-hide-div zebra">
|
|
1112
|
+
<section class="py-3">
|
|
1352
1113
|
<div class="container">
|
|
1353
|
-
<h2 class="title txt-3">
|
|
1354
|
-
<
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
<
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
<
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
<
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
<div class="pxy bdr-3 tac sky">sky</div>
|
|
1368
|
-
<div class="pxy bdr-3 tac blue">blue</div>
|
|
1369
|
-
<div class="pxy bdr-3 tac indigo">indigo</div>
|
|
1370
|
-
<div class="pxy bdr-3 tac purple">purple</div>
|
|
1371
|
-
<div class="pxy bdr-3 tac fuchsia">fuchsia</div>
|
|
1372
|
-
<div class="pxy bdr-3 tac pink">pink</div>
|
|
1373
|
-
<div class="pxy bdr-3 tac rose">rose</div>
|
|
1374
|
-
</div>
|
|
1375
|
-
<h4>Theme Colors and Alert Colors</h4>
|
|
1376
|
-
<div class="grid cols-5">
|
|
1377
|
-
<div class="pxy bdr-3 tac primary">primary</div>
|
|
1378
|
-
<div class="pxy bdr-3 tac secondary">secondary</div>
|
|
1379
|
-
<div class="pxy bdr-3 tac accent">accent</div>
|
|
1380
|
-
<div class="pxy bdr-3 tac light">light</div>
|
|
1381
|
-
<div class="pxy bdr-3 tac dark">dark</div>
|
|
1382
|
-
<div class="pxy bdr-3 tac muted">muted</div>
|
|
1383
|
-
<div class="pxy bdr-3 tac danger">danger</div>
|
|
1384
|
-
<div class="pxy bdr-3 tac info">info</div>
|
|
1385
|
-
<div class="pxy bdr-3 tac success">success</div>
|
|
1386
|
-
<div class="pxy bdr-3 tac warning">warning</div>
|
|
1387
|
-
</div>
|
|
1388
|
-
</div>
|
|
1389
|
-
</section>
|
|
1390
|
-
<section id="theme-examples-with-state">
|
|
1391
|
-
<div class="container">
|
|
1392
|
-
<h2 class="title txt-3">Themes With State</h2>
|
|
1393
|
-
<h4>Base Colors</h4>
|
|
1394
|
-
<div class="grid-1 cols-6">
|
|
1395
|
-
<div class="pxy bdr-3 tac withState stone">stone</div>
|
|
1396
|
-
<div class="pxy bdr-3 tac withState brown">brown</div>
|
|
1397
|
-
<div class="pxy bdr-3 tac withState red">red</div>
|
|
1398
|
-
<div class="pxy bdr-3 tac withState orange">orange</div>
|
|
1399
|
-
<div class="pxy bdr-3 tac withState amber">amber</div>
|
|
1400
|
-
<div class="pxy bdr-3 tac withState yellow">yellow</div>
|
|
1401
|
-
<div class="pxy bdr-3 tac withState lime">lime</div>
|
|
1402
|
-
<div class="pxy bdr-3 tac withState emerald">emerald</div>
|
|
1403
|
-
<div class="pxy bdr-3 tac withState green">green</div>
|
|
1404
|
-
<div class="pxy bdr-3 tac withState teal">teal</div>
|
|
1405
|
-
<div class="pxy bdr-3 tac withState cyan">cyan</div>
|
|
1406
|
-
<div class="pxy bdr-3 tac withState sky">sky</div>
|
|
1407
|
-
<div class="pxy bdr-3 tac withState blue">blue</div>
|
|
1408
|
-
<div class="pxy bdr-3 tac withState indigo">indigo</div>
|
|
1409
|
-
<div class="pxy bdr-3 tac withState purple">purple</div>
|
|
1410
|
-
<div class="pxy bdr-3 tac withState fuchsia">fuchsia</div>
|
|
1411
|
-
<div class="pxy bdr-3 tac withState pink">pink</div>
|
|
1412
|
-
<div class="pxy bdr-3 tac withState rose">rose</div>
|
|
1413
|
-
</div>
|
|
1414
|
-
<h4>Theme Colors and Alert Colors</h4>
|
|
1415
|
-
<div class="grid cols-5">
|
|
1416
|
-
<div class="pxy bdr-3 tac withState primary">primary</div>
|
|
1417
|
-
<div class="pxy bdr-3 tac withState secondary">secondary</div>
|
|
1418
|
-
<div class="pxy bdr-3 tac withState accent">accent</div>
|
|
1419
|
-
<div class="pxy bdr-3 tac withState light">light</div>
|
|
1420
|
-
<div class="pxy bdr-3 tac withState dark">dark</div>
|
|
1421
|
-
<div class="pxy bdr-3 tac withState muted">muted</div>
|
|
1422
|
-
<div class="pxy bdr-3 tac withState danger">danger</div>
|
|
1423
|
-
<div class="pxy bdr-3 tac withState info">info</div>
|
|
1424
|
-
<div class="pxy bdr-3 tac withState success">success</div>
|
|
1425
|
-
<div class="pxy bdr-3 tac withState warning">warning</div>
|
|
1114
|
+
<h2 class="title txt-3">Naykel UI Icons</h2>
|
|
1115
|
+
<div class="flex">
|
|
1116
|
+
<svg class="icon">
|
|
1117
|
+
<use xlink:href="svg/naykel-ui.svg#chevron-down"></use>
|
|
1118
|
+
</svg>
|
|
1119
|
+
<svg class="icon">
|
|
1120
|
+
<use xlink:href="svg/naykel-ui.svg#chevron-left"></use>
|
|
1121
|
+
</svg>
|
|
1122
|
+
<svg class="icon">
|
|
1123
|
+
<use xlink:href="svg/naykel-ui.svg#chevron-right"></use>
|
|
1124
|
+
</svg>
|
|
1125
|
+
<svg class="icon">
|
|
1126
|
+
<use xlink:href="svg/naykel-ui.svg#chevron-up"></use>
|
|
1127
|
+
</svg>
|
|
1426
1128
|
</div>
|
|
1427
1129
|
</div>
|
|
1428
1130
|
</section>
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
<div class="grid cols-3 my">
|
|
1436
|
-
<div class="bx primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla
|
|
1437
|
-
debitis molestiae expedita reiciendis molestias.
|
|
1438
|
-
<a href="">Link</a>
|
|
1131
|
+
<section id="button-control-sizes-examples" class="py-3">
|
|
1132
|
+
<div class="container space-y">
|
|
1133
|
+
<h2 class="title txt-3">Button and Control Sizes</h2>
|
|
1134
|
+
<div>
|
|
1135
|
+
<button class="btn primary xs">Extra Small</button>
|
|
1136
|
+
<input class="xs" placeholder="Text Input">
|
|
1439
1137
|
</div>
|
|
1440
|
-
<div
|
|
1441
|
-
|
|
1442
|
-
<
|
|
1138
|
+
<div>
|
|
1139
|
+
<button class="btn primary sm">Small</button>
|
|
1140
|
+
<input class="sm" placeholder="Text Input">
|
|
1443
1141
|
</div>
|
|
1444
|
-
<div
|
|
1445
|
-
|
|
1446
|
-
<
|
|
1142
|
+
<div>
|
|
1143
|
+
<button class="btn primary">Base</button>
|
|
1144
|
+
<input placeholder="Text Input">
|
|
1447
1145
|
</div>
|
|
1448
|
-
</div>
|
|
1449
|
-
</section>
|
|
1450
|
-
|
|
1451
|
-
<select id="countries"
|
|
1452
|
-
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">
|
|
1453
|
-
<option selected>Choose a country</option>
|
|
1454
|
-
<option value="US">United States</option>
|
|
1455
|
-
<option value="CA">Canada</option>
|
|
1456
|
-
<option value="FR">France</option>
|
|
1457
|
-
<option value="DE">Germany</option>
|
|
1458
|
-
</select>
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
<section>
|
|
1462
|
-
<h2>Form Controls and Buttons</h2>
|
|
1463
|
-
<select class="w-full" multiple>
|
|
1464
|
-
<option value="Sports">Sports</option>
|
|
1465
|
-
<option value="Entertainment">Entertainment</option>
|
|
1466
|
-
<option value="Science and Technology">Science and Technology</option>
|
|
1467
|
-
<option value="Arts and Culture">Arts and Culture</option>
|
|
1468
|
-
<option value="Health and Wellness">Health and Wellness</option>
|
|
1469
|
-
</select>
|
|
1470
|
-
|
|
1471
|
-
</section>
|
|
1472
|
-
<article>
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
<div class="flex">
|
|
1477
1146
|
<div>
|
|
1478
|
-
<
|
|
1479
|
-
|
|
1480
|
-
<li>Two</li>
|
|
1481
|
-
<li>Three</li>
|
|
1482
|
-
</ul>
|
|
1147
|
+
<button class="btn primary lg">Large</button>
|
|
1148
|
+
<input class="lg" placeholder="Text Input">
|
|
1483
1149
|
</div>
|
|
1484
1150
|
<div>
|
|
1485
|
-
<
|
|
1486
|
-
|
|
1487
|
-
<li>Two</li>
|
|
1488
|
-
<li>Three</li>
|
|
1489
|
-
</ol>
|
|
1151
|
+
<button class="btn primary xl">Extra Large</button>
|
|
1152
|
+
<input class="xl" placeholder="Text Input">
|
|
1490
1153
|
</div>
|
|
1491
|
-
<nav>
|
|
1492
|
-
<ul class="w-10">
|
|
1493
|
-
<li>Nav Item One</li>
|
|
1494
|
-
<li>Nav Item Two</li>
|
|
1495
|
-
<li>Nav Item Three</li>
|
|
1496
|
-
</ul>
|
|
1497
|
-
</nav>
|
|
1498
1154
|
</div>
|
|
1155
|
+
</section>
|
|
1499
1156
|
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
<
|
|
1503
|
-
<
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
<use xlink:href="/svg/naykel-ui.svg#warning"></use>
|
|
1513
|
-
</svg>
|
|
1514
|
-
<div>
|
|
1515
|
-
<div class="bx-title">Alert Title</div>
|
|
1516
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
|
|
1517
|
-
</div>
|
|
1518
|
-
</div>
|
|
1519
|
-
<div class="bx danger-light flex">
|
|
1520
|
-
<svg class="icon wh-3 fs0 mr-2">
|
|
1521
|
-
<use xlink:href="/svg/naykel-ui.svg#warning"></use>
|
|
1522
|
-
</svg>
|
|
1523
|
-
<div>
|
|
1524
|
-
<div class="bx-title">Alert Title</div>
|
|
1525
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
|
|
1157
|
+
<section id="menu-component" class="py-3">
|
|
1158
|
+
<div class="container space-y">
|
|
1159
|
+
<h2 class="title txt-3">Menu Component</h2>
|
|
1160
|
+
<h4>Base Component</h4>
|
|
1161
|
+
<div class="bx grid md:cols-3">
|
|
1162
|
+
<div class="menu">
|
|
1163
|
+
<div class="menu-title"><code><div class="menu"></code></div>
|
|
1164
|
+
<div class="menu-title">Menu Title</div>
|
|
1165
|
+
<a href="">Item</a>
|
|
1166
|
+
<a href="">Parent</a>
|
|
1167
|
+
<a href="" class="active">Active</a>
|
|
1168
|
+
<a href="" class="disabled">Disabled</a>
|
|
1526
1169
|
</div>
|
|
1170
|
+
<nav class="menu">
|
|
1171
|
+
<div class="menu-title"><code><nav class="menu"></code></div>
|
|
1172
|
+
<div class="menu-title">Menu Title</div>
|
|
1173
|
+
<a href="">Item</a>
|
|
1174
|
+
<a href="">Parent</a>
|
|
1175
|
+
<a href="" class="active">Active</a>
|
|
1176
|
+
<a href="" class="disabled">Disabled</a>
|
|
1177
|
+
</nav>
|
|
1178
|
+
<ul class="menu">
|
|
1179
|
+
<div class="menu-title"><code><ul class="menu"></code></div>
|
|
1180
|
+
<div class="menu-title">Menu Title</div>
|
|
1181
|
+
<li><a href="">Item</a></li>
|
|
1182
|
+
<li><a href="">Parent</a></li>
|
|
1183
|
+
<li><a href="" class="active">Active</a></li>
|
|
1184
|
+
<li><a href="" class="disabled">Disabled</a></li>
|
|
1185
|
+
</ul>
|
|
1527
1186
|
</div>
|
|
1528
|
-
<
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
<
|
|
1534
|
-
|
|
1187
|
+
<h4>With Menu-Item</h4>
|
|
1188
|
+
<div class="bx grid md:cols-3">
|
|
1189
|
+
<div class="menu">
|
|
1190
|
+
<div class="menu-title"><code><div class="menu"></code></div>
|
|
1191
|
+
<div class="menu-title">Menu Title</div>
|
|
1192
|
+
<a class="menu-item" href="">Item</a>
|
|
1193
|
+
<a class="menu-item" href="">Parent</a>
|
|
1194
|
+
<a class="menu-item active" href="">Active</a>
|
|
1195
|
+
<a class="menu-item disabled" href="">Disabled</a>
|
|
1535
1196
|
</div>
|
|
1197
|
+
<nav class="menu">
|
|
1198
|
+
<div class="menu-title"><code><nav class="menu"></code></div>
|
|
1199
|
+
<div class="menu-title">Menu Title</div>
|
|
1200
|
+
<a class="menu-item" href="">Item</a>
|
|
1201
|
+
<a class="menu-item" href="">Parent</a>
|
|
1202
|
+
<a class="menu-item active" href="">Active</a>
|
|
1203
|
+
<a class="menu-item disabled" href="">Disabled</a>
|
|
1204
|
+
</nav>
|
|
1205
|
+
<ul class="menu">
|
|
1206
|
+
<div class="menu-title"><code><ul class="menu"></code></div>
|
|
1207
|
+
<div class="menu-title">Menu Title</div>
|
|
1208
|
+
<li><a class="menu-item" href="">Item</a></li>
|
|
1209
|
+
<li><a class="menu-item" href="">Parent</a></li>
|
|
1210
|
+
<li><a class="menu-item active" href="">Active</a></li>
|
|
1211
|
+
<li><a class="menu-item disabled" href="">Disabled</a></li>
|
|
1212
|
+
</ul>
|
|
1536
1213
|
</div>
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1214
|
+
</section>
|
|
1215
|
+
|
|
1216
|
+
<section id="box" class="py-3">
|
|
1217
|
+
<div class="container">
|
|
1218
|
+
<h2>Boxes</h2>
|
|
1219
|
+
<div class="grid cols-3">
|
|
1220
|
+
<div class="bx">
|
|
1221
|
+
<div class="bx-title">Super Awesome Title</div>
|
|
1222
|
+
<p>Lorem ipsum dolor sit amet consectetur pepe adipisicing elit. Quas debitis unde aut, sed
|
|
1223
|
+
repellendus tempora, molestiae eveniet.</p>
|
|
1544
1224
|
</div>
|
|
1545
1225
|
</div>
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1226
|
+
</div>
|
|
1227
|
+
</section>
|
|
1228
|
+
<section id="notifications" class="py-3">
|
|
1229
|
+
<div class="container">
|
|
1230
|
+
<div class="grid cols-3">
|
|
1231
|
+
<div class="bx pxy-1 flex va-c">
|
|
1232
|
+
<svg class="txt-green wh-2">
|
|
1233
|
+
<use xlink:href="svg/naykel-ui.svg#check-circle"></use>
|
|
1234
|
+
</svg>
|
|
1235
|
+
<div class="ml-075">Success message!</div>
|
|
1236
|
+
<button class="ml-auto">
|
|
1237
|
+
<svg class="icon">
|
|
1238
|
+
<use xlink:href="svg/naykel-ui.svg#x-mark"></use>
|
|
1239
|
+
</svg>
|
|
1240
|
+
</button>
|
|
1553
1241
|
</div>
|
|
1554
1242
|
</div>
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
|
|
1243
|
+
</div>
|
|
1244
|
+
</section>
|
|
1245
|
+
<section id="alignment-techniques" class="py-3">
|
|
1246
|
+
<div class="container">
|
|
1247
|
+
<h2>Alignment Techniques</h2>
|
|
1248
|
+
<div class="grid cols-3">
|
|
1249
|
+
<div class="bdr flex va-c">
|
|
1250
|
+
<div class="wh-3 pink"></div>
|
|
1251
|
+
<div class="wh-4 blue"></div>
|
|
1252
|
+
<div class="ml-auto wh-3 pink"></div>
|
|
1562
1253
|
</div>
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
<
|
|
1567
|
-
</svg>
|
|
1568
|
-
<div>
|
|
1569
|
-
<div class="bx-title">Alert Title</div>
|
|
1570
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
|
|
1254
|
+
<div class="bdr flex va-c">
|
|
1255
|
+
<span class="wh-3 pink"></span>
|
|
1256
|
+
<div class="fg1 wh-4 blue"></div>
|
|
1257
|
+
<span class="wh-3 pink"></span>
|
|
1571
1258
|
</div>
|
|
1572
1259
|
</div>
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1260
|
+
</div>
|
|
1261
|
+
</section>
|
|
1262
|
+
<section id="typography" class="py-3">
|
|
1263
|
+
<div class="container">
|
|
1264
|
+
<h2 class="title mb-3">Typography</h2>
|
|
1265
|
+
<div class="grid-3 cols-2">
|
|
1266
|
+
<div id="headings">
|
|
1267
|
+
<h1>Heading 1</h1>
|
|
1268
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
1269
|
+
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
1270
|
+
<h2>Heading 2</h2>
|
|
1271
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
1272
|
+
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
1273
|
+
<h3>Heading 3</h3>
|
|
1274
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
1275
|
+
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
1276
|
+
<h4>Heading 4</h4>
|
|
1277
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
1278
|
+
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
1279
|
+
<h5>Heading 5</h5>
|
|
1280
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
1281
|
+
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
1282
|
+
<h6>Heading 6</h6>
|
|
1283
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
|
|
1284
|
+
soluta harum beatae qui reiciendis possimus molestiae?</p>
|
|
1285
|
+
</div>
|
|
1577
1286
|
<div>
|
|
1578
|
-
<
|
|
1579
|
-
|
|
1287
|
+
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sed aperiam
|
|
1288
|
+
quibusdam adipisci sequi deserunt nesciunt vel illum voluptatibus maxime soluta repudiandae
|
|
1289
|
+
numquam sapiente exercitationem, culpa, omnis expedita tempore? Similique.</p>
|
|
1290
|
+
|
|
1291
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at corporis deserunt sint eum
|
|
1292
|
+
laboriosam quae nulla fugit, error, tempore quibusdam temporibus fuga adipisci. Nam
|
|
1293
|
+
architecto sunt cupiditate soluta molestias ipsum delectus numquam illo magnam! Praesentium
|
|
1294
|
+
quos deserunt sed, maxime, eligendi quasi, sequi fugiat facere neque harum debitis laborum
|
|
1295
|
+
ipsam!</p>
|
|
1296
|
+
|
|
1297
|
+
<h3 class="title">Text Sizes</h3>
|
|
1298
|
+
<p class="txt-xs">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
|
|
1299
|
+
asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
|
|
1300
|
+
similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
|
|
1301
|
+
repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
1302
|
+
<p class="txt-sm">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
|
|
1303
|
+
asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
|
|
1304
|
+
similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
|
|
1305
|
+
repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
1306
|
+
<p class="txt-base">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto
|
|
1307
|
+
delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam
|
|
1308
|
+
exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam
|
|
1309
|
+
deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
1310
|
+
<p class="txt-lg">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
|
|
1311
|
+
asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
|
|
1312
|
+
similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
|
|
1313
|
+
repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
1314
|
+
<p class="txt-xl">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
|
|
1315
|
+
asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
|
|
1316
|
+
similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
|
|
1317
|
+
repudiandae, aliquam fugit? Eum, expedita officia!</p>
|
|
1580
1318
|
</div>
|
|
1581
1319
|
</div>
|
|
1582
1320
|
</div>
|
|
1583
1321
|
</section>
|
|
1322
|
+
</div>
|
|
1584
1323
|
|
|
1585
|
-
|
|
1586
|
-
|
|
1324
|
+
<!-- -->
|
|
1325
|
+
<!-- -->
|
|
1326
|
+
<!-- THIS IS ALL OVER THE PLACE AND NEEDS TO BE TIDIED UP! -->
|
|
1327
|
+
<!-- -->
|
|
1328
|
+
<!-- -->
|
|
1329
|
+
<div class="container py-5">
|
|
1330
|
+
<div class="overflow-x-auto rounded-lg bdr">
|
|
1587
1331
|
<table>
|
|
1588
|
-
<thead>
|
|
1332
|
+
<thead class="txt-upper">
|
|
1589
1333
|
<tr>
|
|
1590
|
-
<th>
|
|
1591
|
-
<th>
|
|
1592
|
-
<th>
|
|
1334
|
+
<th scope="col" class=""> Product name </th>
|
|
1335
|
+
<th scope="col" class=""> Color </th>
|
|
1336
|
+
<th scope="col" class=""> Category </th>
|
|
1337
|
+
<th scope="col" class=""> Price </th>
|
|
1338
|
+
<th scope="col" class=""> Action </th>
|
|
1593
1339
|
</tr>
|
|
1594
1340
|
</thead>
|
|
1595
|
-
<tbody>
|
|
1596
|
-
<tr>
|
|
1597
|
-
<
|
|
1598
|
-
<td>
|
|
1599
|
-
<td>
|
|
1341
|
+
<tbody class="divide-y bdr-t">
|
|
1342
|
+
<tr class="">
|
|
1343
|
+
<th scope="row" class=""> Apple MacBook Pro 17" </th>
|
|
1344
|
+
<td class=""> Silver </td>
|
|
1345
|
+
<td class=""> Laptop </td>
|
|
1346
|
+
<td class=""> $2999 </td>
|
|
1347
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
1600
1348
|
</tr>
|
|
1349
|
+
<tr class="bdr-green bdr5">
|
|
1350
|
+
<th scope="row" class=""> Microsoft Surface Pro </th>
|
|
1351
|
+
<td class=""> White </td>
|
|
1352
|
+
<td class=""> Laptop PC </td>
|
|
1353
|
+
<td class=""> $1999 </td>
|
|
1354
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
1355
|
+
</tr>
|
|
1356
|
+
<tr class="">
|
|
1357
|
+
<th scope="row" class=""> Magic Mouse 2 </th>
|
|
1358
|
+
<td class=""> Black </td>
|
|
1359
|
+
<td class=""> Accessories </td>
|
|
1360
|
+
<td class=""> $99 </td>
|
|
1361
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
1362
|
+
</tr>
|
|
1363
|
+
<tr class="">
|
|
1364
|
+
<th scope="row" class=""> Google Pixel Phone </th>
|
|
1365
|
+
<td class=""> Gray </td>
|
|
1366
|
+
<td class=""> Phone </td>
|
|
1367
|
+
<td class=""> $799 </td>
|
|
1368
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
1369
|
+
</tr>
|
|
1370
|
+
<tr class="">
|
|
1371
|
+
<th scope="row" class=""> Apple Watch 5 </th>
|
|
1372
|
+
<td class=""> Red </td>
|
|
1373
|
+
<td class=""> Wearables </td>
|
|
1374
|
+
<td class=""> $999 </td>
|
|
1375
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
1376
|
+
</tr>
|
|
1377
|
+
</tbody>
|
|
1378
|
+
</table>
|
|
1379
|
+
</div>
|
|
1380
|
+
<hr>
|
|
1381
|
+
<div class="overflow-x-auto rounded-lg bdr">
|
|
1382
|
+
<table>
|
|
1383
|
+
<thead class="txt-upper">
|
|
1601
1384
|
<tr>
|
|
1602
|
-
<
|
|
1603
|
-
<
|
|
1604
|
-
<
|
|
1385
|
+
<th scope="col" class=""> Product name </th>
|
|
1386
|
+
<th scope="col" class=""> Color </th>
|
|
1387
|
+
<th scope="col" class=""> Category </th>
|
|
1388
|
+
<th scope="col" class=""> Price </th>
|
|
1389
|
+
<th scope="col" class=""> Action </th>
|
|
1390
|
+
</tr>
|
|
1391
|
+
</thead>
|
|
1392
|
+
<tbody class="divide-y">
|
|
1393
|
+
<tr class="bdr-b bdr-light">
|
|
1394
|
+
<th scope="row" class=""> Apple MacBook Pro 17" </th>
|
|
1395
|
+
<td class=""> Silver </td>
|
|
1396
|
+
<td class=""> Laptop </td>
|
|
1397
|
+
<td class=""> $2999 </td>
|
|
1398
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
1399
|
+
</tr>
|
|
1400
|
+
<tr class="bdr-b bdr-light">
|
|
1401
|
+
<th scope="row" class=""> Microsoft Surface Pro </th>
|
|
1402
|
+
<td class=""> White </td>
|
|
1403
|
+
<td class=""> Laptop PC </td>
|
|
1404
|
+
<td class=""> $1999 </td>
|
|
1405
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
1605
1406
|
</tr>
|
|
1407
|
+
<tr class="bdr-b bdr-light">
|
|
1408
|
+
<th scope="row" class=""> Magic Mouse 2 </th>
|
|
1409
|
+
<td class=""> Black </td>
|
|
1410
|
+
<td class=""> Accessories </td>
|
|
1411
|
+
<td class=""> $99 </td>
|
|
1412
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
1413
|
+
</tr>
|
|
1414
|
+
<tr class="bdr-b bdr-light">
|
|
1415
|
+
<th scope="row" class=""> Google Pixel Phone </th>
|
|
1416
|
+
<td class=""> Gray </td>
|
|
1417
|
+
<td class=""> Phone </td>
|
|
1418
|
+
<td class=""> $799 </td>
|
|
1419
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
1420
|
+
</tr>
|
|
1421
|
+
<tr class="bdr-blue-40">
|
|
1422
|
+
<th scope="row" class=""> Apple Watch 5 </th>
|
|
1423
|
+
<td class=""> Red </td>
|
|
1424
|
+
<td class=""> Wearables </td>
|
|
1425
|
+
<td class=""> $999 </td>
|
|
1426
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
1427
|
+
</tr>
|
|
1428
|
+
</tbody>
|
|
1429
|
+
</table>
|
|
1430
|
+
</div>
|
|
1431
|
+
<hr>
|
|
1432
|
+
<div class="overflow-x-auto rounded-lg">
|
|
1433
|
+
<table>
|
|
1434
|
+
<thead class="txt-upper txt-white bg-blue-600">
|
|
1606
1435
|
<tr>
|
|
1607
|
-
<
|
|
1608
|
-
<
|
|
1609
|
-
<
|
|
1436
|
+
<th scope="col" class=""> Product name </th>
|
|
1437
|
+
<th scope="col" class=""> Color </th>
|
|
1438
|
+
<th scope="col" class=""> Category </th>
|
|
1439
|
+
<th scope="col" class=""> Price </th>
|
|
1440
|
+
<th scope="col" class=""> Action </th>
|
|
1441
|
+
</tr>
|
|
1442
|
+
</thead>
|
|
1443
|
+
<tbody>
|
|
1444
|
+
<tr class="bg-blue-500 bdr-b bdr-light">
|
|
1445
|
+
<th scope="row" class=""> Apple MacBook Pro 17" </th>
|
|
1446
|
+
<td class=""> Silver </td>
|
|
1447
|
+
<td class=""> Laptop </td>
|
|
1448
|
+
<td class=""> $2999 </td>
|
|
1449
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
1450
|
+
</tr>
|
|
1451
|
+
<tr class="bg-blue-500 bdr-b bdr-light">
|
|
1452
|
+
<th scope="row" class="">
|
|
1453
|
+
Microsoft Surface Pro
|
|
1454
|
+
</th>
|
|
1455
|
+
<td class=""> White </td>
|
|
1456
|
+
<td class=""> Laptop PC </td>
|
|
1457
|
+
<td class=""> $1999 </td>
|
|
1458
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
1459
|
+
</tr>
|
|
1460
|
+
<tr class="bg-blue-500 bdr-b bdr-light">
|
|
1461
|
+
<th scope="row" class=""> Magic Mouse 2 </th>
|
|
1462
|
+
<td class=""> Black </td>
|
|
1463
|
+
<td class=""> Accessories </td>
|
|
1464
|
+
<td class=""> $99 </td>
|
|
1465
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
1466
|
+
</tr>
|
|
1467
|
+
<tr class="bg-blue-500 bdr-b bdr-light">
|
|
1468
|
+
<th scope="row" class=""> Google Pixel Phone </th>
|
|
1469
|
+
<td class=""> Gray </td>
|
|
1470
|
+
<td class=""> Phone </td>
|
|
1471
|
+
<td class=""> $799 </td>
|
|
1472
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
1473
|
+
</tr>
|
|
1474
|
+
<tr class="bg-blue-500 bdr-blue-40">
|
|
1475
|
+
<th scope="row" class=""> Apple Watch 5 </th>
|
|
1476
|
+
<td class=""> Red </td>
|
|
1477
|
+
<td class=""> Wearables </td>
|
|
1478
|
+
<td class=""> $999 </td>
|
|
1479
|
+
<td class=""> <a href="#">Edit</a> </td>
|
|
1610
1480
|
</tr>
|
|
1611
1481
|
</tbody>
|
|
1612
1482
|
</table>
|
|
1483
|
+
</div>
|
|
1484
|
+
</div>
|
|
1613
1485
|
|
|
1614
|
-
|
|
1615
|
-
|
|
1486
|
+
<div>
|
|
1487
|
+
<div class="quick-hide-wrapper zebra c-py-5-3-2">
|
|
1488
|
+
<section id="theme-examples">
|
|
1489
|
+
<div class="container">
|
|
1490
|
+
<h2 class="title txt-3">Basic Themes</h2>
|
|
1491
|
+
<h4>Base Colors</h4>
|
|
1492
|
+
<div class="grid-1 cols-6">
|
|
1493
|
+
<div class="pxy bdr-3 tac stone">stone</div>
|
|
1494
|
+
<div class="pxy bdr-3 tac brown">brown</div>
|
|
1495
|
+
<div class="pxy bdr-3 tac red">red</div>
|
|
1496
|
+
<div class="pxy bdr-3 tac orange">orange</div>
|
|
1497
|
+
<div class="pxy bdr-3 tac amber">amber</div>
|
|
1498
|
+
<div class="pxy bdr-3 tac yellow">yellow</div>
|
|
1499
|
+
<div class="pxy bdr-3 tac lime">lime</div>
|
|
1500
|
+
<div class="pxy bdr-3 tac emerald">emerald</div>
|
|
1501
|
+
<div class="pxy bdr-3 tac green">green</div>
|
|
1502
|
+
<div class="pxy bdr-3 tac teal">teal</div>
|
|
1503
|
+
<div class="pxy bdr-3 tac cyan">cyan</div>
|
|
1504
|
+
<div class="pxy bdr-3 tac sky">sky</div>
|
|
1505
|
+
<div class="pxy bdr-3 tac blue">blue</div>
|
|
1506
|
+
<div class="pxy bdr-3 tac indigo">indigo</div>
|
|
1507
|
+
<div class="pxy bdr-3 tac purple">purple</div>
|
|
1508
|
+
<div class="pxy bdr-3 tac fuchsia">fuchsia</div>
|
|
1509
|
+
<div class="pxy bdr-3 tac pink">pink</div>
|
|
1510
|
+
<div class="pxy bdr-3 tac rose">rose</div>
|
|
1511
|
+
</div>
|
|
1512
|
+
<h4>Theme Colors and Alert Colors</h4>
|
|
1513
|
+
<div class="grid cols-5">
|
|
1514
|
+
<div class="pxy bdr-3 tac primary">primary</div>
|
|
1515
|
+
<div class="pxy bdr-3 tac secondary">secondary</div>
|
|
1516
|
+
<div class="pxy bdr-3 tac accent">accent</div>
|
|
1517
|
+
<div class="pxy bdr-3 tac light">light</div>
|
|
1518
|
+
<div class="pxy bdr-3 tac dark">dark</div>
|
|
1519
|
+
<div class="pxy bdr-3 tac muted">muted</div>
|
|
1520
|
+
<div class="pxy bdr-3 tac danger">danger</div>
|
|
1521
|
+
<div class="pxy bdr-3 tac info">info</div>
|
|
1522
|
+
<div class="pxy bdr-3 tac success">success</div>
|
|
1523
|
+
<div class="pxy bdr-3 tac warning">warning</div>
|
|
1524
|
+
</div>
|
|
1525
|
+
</div>
|
|
1526
|
+
</section>
|
|
1527
|
+
<section id="theme-examples-with-state">
|
|
1528
|
+
<div class="container">
|
|
1529
|
+
<h2 class="title txt-3">Themes With State</h2>
|
|
1530
|
+
<h4>Base Colors</h4>
|
|
1531
|
+
<div class="grid-1 cols-6">
|
|
1532
|
+
<div class="pxy bdr-3 tac withState stone">stone</div>
|
|
1533
|
+
<div class="pxy bdr-3 tac withState brown">brown</div>
|
|
1534
|
+
<div class="pxy bdr-3 tac withState red">red</div>
|
|
1535
|
+
<div class="pxy bdr-3 tac withState orange">orange</div>
|
|
1536
|
+
<div class="pxy bdr-3 tac withState amber">amber</div>
|
|
1537
|
+
<div class="pxy bdr-3 tac withState yellow">yellow</div>
|
|
1538
|
+
<div class="pxy bdr-3 tac withState lime">lime</div>
|
|
1539
|
+
<div class="pxy bdr-3 tac withState emerald">emerald</div>
|
|
1540
|
+
<div class="pxy bdr-3 tac withState green">green</div>
|
|
1541
|
+
<div class="pxy bdr-3 tac withState teal">teal</div>
|
|
1542
|
+
<div class="pxy bdr-3 tac withState cyan">cyan</div>
|
|
1543
|
+
<div class="pxy bdr-3 tac withState sky">sky</div>
|
|
1544
|
+
<div class="pxy bdr-3 tac withState blue">blue</div>
|
|
1545
|
+
<div class="pxy bdr-3 tac withState indigo">indigo</div>
|
|
1546
|
+
<div class="pxy bdr-3 tac withState purple">purple</div>
|
|
1547
|
+
<div class="pxy bdr-3 tac withState fuchsia">fuchsia</div>
|
|
1548
|
+
<div class="pxy bdr-3 tac withState pink">pink</div>
|
|
1549
|
+
<div class="pxy bdr-3 tac withState rose">rose</div>
|
|
1550
|
+
</div>
|
|
1551
|
+
<h4>Theme Colors and Alert Colors</h4>
|
|
1552
|
+
<div class="grid cols-5">
|
|
1553
|
+
<div class="pxy bdr-3 tac withState primary">primary</div>
|
|
1554
|
+
<div class="pxy bdr-3 tac withState secondary">secondary</div>
|
|
1555
|
+
<div class="pxy bdr-3 tac withState accent">accent</div>
|
|
1556
|
+
<div class="pxy bdr-3 tac withState light">light</div>
|
|
1557
|
+
<div class="pxy bdr-3 tac withState dark">dark</div>
|
|
1558
|
+
<div class="pxy bdr-3 tac withState muted">muted</div>
|
|
1559
|
+
<div class="pxy bdr-3 tac withState danger">danger</div>
|
|
1560
|
+
<div class="pxy bdr-3 tac withState info">info</div>
|
|
1561
|
+
<div class="pxy bdr-3 tac withState success">success</div>
|
|
1562
|
+
<div class="pxy bdr-3 tac withState warning">warning</div>
|
|
1563
|
+
</div>
|
|
1564
|
+
</div>
|
|
1565
|
+
</section>
|
|
1616
1566
|
|
|
1617
|
-
<footer id="nk-footer">
|
|
1618
|
-
|
|
1619
|
-
</footer>
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
<section id="base-color-shades">
|
|
1623
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1624
|
-
<p class="tal">Stone</p>
|
|
1625
|
-
<div class="py stone-1">1</div>
|
|
1626
|
-
<div class="py stone-2">2</div>
|
|
1627
|
-
<div class="py stone-3">3</div>
|
|
1628
|
-
<div class="py stone-4">4</div>
|
|
1629
|
-
<div class="py stone-5">5</div>
|
|
1630
|
-
<div class="py stone-6">6</div>
|
|
1631
|
-
<div class="py stone-7">7</div>
|
|
1632
|
-
<div class="py stone-8">8</div>
|
|
1633
|
-
<div class="py stone-9">9</div>
|
|
1634
|
-
<div class="py stone-10">10</div>
|
|
1635
|
-
<div class="py stone-11">11</div>
|
|
1636
|
-
</div>
|
|
1637
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1638
|
-
<p class="tal">Brown</p>
|
|
1639
|
-
<div class="py brown-1">1</div>
|
|
1640
|
-
<div class="py brown-2">2</div>
|
|
1641
|
-
<div class="py brown-3">3</div>
|
|
1642
|
-
<div class="py brown-4">4</div>
|
|
1643
|
-
<div class="py brown-5">5</div>
|
|
1644
|
-
<div class="py brown-6">6</div>
|
|
1645
|
-
<div class="py brown-7">7</div>
|
|
1646
|
-
<div class="py brown-8">8</div>
|
|
1647
|
-
<div class="py brown-9">9</div>
|
|
1648
|
-
<div class="py brown-10">10</div>
|
|
1649
|
-
<div class="py brown-11">11</div>
|
|
1650
|
-
</div>
|
|
1651
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1652
|
-
<p class="tal">Red</p>
|
|
1653
|
-
<div class="py red-1">1</div>
|
|
1654
|
-
<div class="py red-2">2</div>
|
|
1655
|
-
<div class="py red-3">3</div>
|
|
1656
|
-
<div class="py red-4">4</div>
|
|
1657
|
-
<div class="py red-5">5</div>
|
|
1658
|
-
<div class="py red-6">6</div>
|
|
1659
|
-
<div class="py red-7">7</div>
|
|
1660
|
-
<div class="py red-8">8</div>
|
|
1661
|
-
<div class="py red-9">9</div>
|
|
1662
|
-
<div class="py red-10">10</div>
|
|
1663
|
-
<div class="py red-11">11</div>
|
|
1664
1567
|
</div>
|
|
1665
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1666
|
-
<p class="tal">Orange</p>
|
|
1667
|
-
<div class="py orange-1">1</div>
|
|
1668
|
-
<div class="py orange-2">2</div>
|
|
1669
|
-
<div class="py orange-3">3</div>
|
|
1670
|
-
<div class="py orange-4">4</div>
|
|
1671
|
-
<div class="py orange-5">5</div>
|
|
1672
|
-
<div class="py orange-6">6</div>
|
|
1673
|
-
<div class="py orange-7">7</div>
|
|
1674
|
-
<div class="py orange-8">8</div>
|
|
1675
|
-
<div class="py orange-9">9</div>
|
|
1676
|
-
<div class="py orange-10">10</div>
|
|
1677
|
-
<div class="py orange-11">11</div>
|
|
1678
|
-
</div>
|
|
1679
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1680
|
-
<p class="tal">Amber</p>
|
|
1681
|
-
<div class="py amber-1">1</div>
|
|
1682
|
-
<div class="py amber-2">2</div>
|
|
1683
|
-
<div class="py amber-3">3</div>
|
|
1684
|
-
<div class="py amber-4">4</div>
|
|
1685
|
-
<div class="py amber-5">5</div>
|
|
1686
|
-
<div class="py amber-6">6</div>
|
|
1687
|
-
<div class="py amber-7">7</div>
|
|
1688
|
-
<div class="py amber-8">8</div>
|
|
1689
|
-
<div class="py amber-9">9</div>
|
|
1690
|
-
<div class="py amber-10">10</div>
|
|
1691
|
-
<div class="py amber-11">11</div>
|
|
1692
|
-
</div>
|
|
1693
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1694
|
-
<p class="tal">Yellow</p>
|
|
1695
|
-
<div class="py yellow-1">1</div>
|
|
1696
|
-
<div class="py yellow-2">2</div>
|
|
1697
|
-
<div class="py yellow-3">3</div>
|
|
1698
|
-
<div class="py yellow-4">4</div>
|
|
1699
|
-
<div class="py yellow-5">5</div>
|
|
1700
|
-
<div class="py yellow-6">6</div>
|
|
1701
|
-
<div class="py yellow-7">7</div>
|
|
1702
|
-
<div class="py yellow-8">8</div>
|
|
1703
|
-
<div class="py yellow-9">9</div>
|
|
1704
|
-
<div class="py yellow-10">10</div>
|
|
1705
|
-
<div class="py yellow-11">11</div>
|
|
1706
|
-
</div>
|
|
1707
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1708
|
-
<p class="tal">Lime</p>
|
|
1709
|
-
<div class="py lime-1">1</div>
|
|
1710
|
-
<div class="py lime-2">2</div>
|
|
1711
|
-
<div class="py lime-3">3</div>
|
|
1712
|
-
<div class="py lime-4">4</div>
|
|
1713
|
-
<div class="py lime-5">5</div>
|
|
1714
|
-
<div class="py lime-6">6</div>
|
|
1715
|
-
<div class="py lime-7">7</div>
|
|
1716
|
-
<div class="py lime-8">8</div>
|
|
1717
|
-
<div class="py lime-9">9</div>
|
|
1718
|
-
<div class="py lime-10">10</div>
|
|
1719
|
-
<div class="py lime-11">11</div>
|
|
1720
|
-
</div>
|
|
1721
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1722
|
-
<p class="tal">Emerald</p>
|
|
1723
|
-
<div class="py emerald-1">1</div>
|
|
1724
|
-
<div class="py emerald-2">2</div>
|
|
1725
|
-
<div class="py emerald-3">3</div>
|
|
1726
|
-
<div class="py emerald-4">4</div>
|
|
1727
|
-
<div class="py emerald-5">5</div>
|
|
1728
|
-
<div class="py emerald-6">6</div>
|
|
1729
|
-
<div class="py emerald-7">7</div>
|
|
1730
|
-
<div class="py emerald-8">8</div>
|
|
1731
|
-
<div class="py emerald-9">9</div>
|
|
1732
|
-
<div class="py emerald-10">10</div>
|
|
1733
|
-
<div class="py emerald-11">11</div>
|
|
1734
|
-
</div>
|
|
1735
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1736
|
-
<p class="tal">Green</p>
|
|
1737
|
-
<div class="py green-1">1</div>
|
|
1738
|
-
<div class="py green-2">2</div>
|
|
1739
|
-
<div class="py green-3">3</div>
|
|
1740
|
-
<div class="py green-4">4</div>
|
|
1741
|
-
<div class="py green-5">5</div>
|
|
1742
|
-
<div class="py green-6">6</div>
|
|
1743
|
-
<div class="py green-7">7</div>
|
|
1744
|
-
<div class="py green-8">8</div>
|
|
1745
|
-
<div class="py green-9">9</div>
|
|
1746
|
-
<div class="py green-10">10</div>
|
|
1747
|
-
<div class="py green-11">11</div>
|
|
1748
|
-
</div>
|
|
1749
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1750
|
-
<p class="tal">Teal</p>
|
|
1751
|
-
<div class="py teal-1">1</div>
|
|
1752
|
-
<div class="py teal-2">2</div>
|
|
1753
|
-
<div class="py teal-3">3</div>
|
|
1754
|
-
<div class="py teal-4">4</div>
|
|
1755
|
-
<div class="py teal-5">5</div>
|
|
1756
|
-
<div class="py teal-6">6</div>
|
|
1757
|
-
<div class="py teal-7">7</div>
|
|
1758
|
-
<div class="py teal-8">8</div>
|
|
1759
|
-
<div class="py teal-9">9</div>
|
|
1760
|
-
<div class="py teal-10">10</div>
|
|
1761
|
-
<div class="py teal-11">11</div>
|
|
1762
|
-
</div>
|
|
1763
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1764
|
-
<p class="tal">Cyan</p>
|
|
1765
|
-
<div class="py cyan-1">1</div>
|
|
1766
|
-
<div class="py cyan-2">2</div>
|
|
1767
|
-
<div class="py cyan-3">3</div>
|
|
1768
|
-
<div class="py cyan-4">4</div>
|
|
1769
|
-
<div class="py cyan-5">5</div>
|
|
1770
|
-
<div class="py cyan-6">6</div>
|
|
1771
|
-
<div class="py cyan-7">7</div>
|
|
1772
|
-
<div class="py cyan-8">8</div>
|
|
1773
|
-
<div class="py cyan-9">9</div>
|
|
1774
|
-
<div class="py cyan-10">10</div>
|
|
1775
|
-
<div class="py cyan-11">11</div>
|
|
1776
|
-
</div>
|
|
1777
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1778
|
-
<p class="tal">Sky</p>
|
|
1779
|
-
<div class="py sky-1">1</div>
|
|
1780
|
-
<div class="py sky-2">2</div>
|
|
1781
|
-
<div class="py sky-3">3</div>
|
|
1782
|
-
<div class="py sky-4">4</div>
|
|
1783
|
-
<div class="py sky-5">5</div>
|
|
1784
|
-
<div class="py sky-6">6</div>
|
|
1785
|
-
<div class="py sky-7">7</div>
|
|
1786
|
-
<div class="py sky-8">8</div>
|
|
1787
|
-
<div class="py sky-9">9</div>
|
|
1788
|
-
<div class="py sky-10">10</div>
|
|
1789
|
-
<div class="py sky-11">11</div>
|
|
1790
|
-
</div>
|
|
1791
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1792
|
-
<p class="tal">Blue</p>
|
|
1793
|
-
<div class="py blue-1">1</div>
|
|
1794
|
-
<div class="py blue-2">2</div>
|
|
1795
|
-
<div class="py blue-3">3</div>
|
|
1796
|
-
<div class="py blue-4">4</div>
|
|
1797
|
-
<div class="py blue-5">5</div>
|
|
1798
|
-
<div class="py blue-6">6</div>
|
|
1799
|
-
<div class="py blue-7">7</div>
|
|
1800
|
-
<div class="py blue-8">8</div>
|
|
1801
|
-
<div class="py blue-9">9</div>
|
|
1802
|
-
<div class="py blue-10">10</div>
|
|
1803
|
-
<div class="py blue-11">11</div>
|
|
1804
|
-
</div>
|
|
1805
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1806
|
-
<p class="tal">Indigo</p>
|
|
1807
|
-
<div class="py indigo-1">1</div>
|
|
1808
|
-
<div class="py indigo-2">2</div>
|
|
1809
|
-
<div class="py indigo-3">3</div>
|
|
1810
|
-
<div class="py indigo-4">4</div>
|
|
1811
|
-
<div class="py indigo-5">5</div>
|
|
1812
|
-
<div class="py indigo-6">6</div>
|
|
1813
|
-
<div class="py indigo-7">7</div>
|
|
1814
|
-
<div class="py indigo-8">8</div>
|
|
1815
|
-
<div class="py indigo-9">9</div>
|
|
1816
|
-
<div class="py indigo-10">10</div>
|
|
1817
|
-
<div class="py indigo-11">11</div>
|
|
1818
|
-
</div>
|
|
1819
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1820
|
-
<p class="tal">Purple</p>
|
|
1821
|
-
<div class="py purple-1">1</div>
|
|
1822
|
-
<div class="py purple-2">2</div>
|
|
1823
|
-
<div class="py purple-3">3</div>
|
|
1824
|
-
<div class="py purple-4">4</div>
|
|
1825
|
-
<div class="py purple-5">5</div>
|
|
1826
|
-
<div class="py purple-6">6</div>
|
|
1827
|
-
<div class="py purple-7">7</div>
|
|
1828
|
-
<div class="py purple-8">8</div>
|
|
1829
|
-
<div class="py purple-9">9</div>
|
|
1830
|
-
<div class="py purple-10">10</div>
|
|
1831
|
-
<div class="py purple-11">11</div>
|
|
1832
|
-
</div>
|
|
1833
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1834
|
-
<p class="tal">Fuchsia</p>
|
|
1835
|
-
<div class="py fuchsia-1">1</div>
|
|
1836
|
-
<div class="py fuchsia-2">2</div>
|
|
1837
|
-
<div class="py fuchsia-3">3</div>
|
|
1838
|
-
<div class="py fuchsia-4">4</div>
|
|
1839
|
-
<div class="py fuchsia-5">5</div>
|
|
1840
|
-
<div class="py fuchsia-6">6</div>
|
|
1841
|
-
<div class="py fuchsia-7">7</div>
|
|
1842
|
-
<div class="py fuchsia-8">8</div>
|
|
1843
|
-
<div class="py fuchsia-9">9</div>
|
|
1844
|
-
<div class="py fuchsia-10">10</div>
|
|
1845
|
-
<div class="py fuchsia-11">11</div>
|
|
1846
|
-
</div>
|
|
1847
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1848
|
-
<p class="tal">Pink</p>
|
|
1849
|
-
<div class="py pink-1">1</div>
|
|
1850
|
-
<div class="py pink-2">2</div>
|
|
1851
|
-
<div class="py pink-3">3</div>
|
|
1852
|
-
<div class="py pink-4">4</div>
|
|
1853
|
-
<div class="py pink-5">5</div>
|
|
1854
|
-
<div class="py pink-6">6</div>
|
|
1855
|
-
<div class="py pink-7">7</div>
|
|
1856
|
-
<div class="py pink-8">8</div>
|
|
1857
|
-
<div class="py pink-9">9</div>
|
|
1858
|
-
<div class="py pink-10">10</div>
|
|
1859
|
-
<div class="py pink-11">11</div>
|
|
1860
|
-
</div>
|
|
1861
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1862
|
-
<p class="tal">Rose</p>
|
|
1863
|
-
<div class="py rose-1">1</div>
|
|
1864
|
-
<div class="py rose-2">2</div>
|
|
1865
|
-
<div class="py rose-3">3</div>
|
|
1866
|
-
<div class="py rose-4">4</div>
|
|
1867
|
-
<div class="py rose-5">5</div>
|
|
1868
|
-
<div class="py rose-6">6</div>
|
|
1869
|
-
<div class="py rose-7">7</div>
|
|
1870
|
-
<div class="py rose-8">8</div>
|
|
1871
|
-
<div class="py rose-9">9</div>
|
|
1872
|
-
<div class="py rose-10">10</div>
|
|
1873
|
-
<div class="py rose-11">11</div>
|
|
1874
|
-
</div>
|
|
1875
|
-
</section>
|
|
1876
1568
|
|
|
1569
|
+
<main class="container maxw-lg c-py-3-2">
|
|
1570
|
+
<section>
|
|
1571
|
+
<h2>Theme Boxes</h2>
|
|
1572
|
+
<div class="grid cols-3 my">
|
|
1573
|
+
<div class="bx primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla
|
|
1574
|
+
debitis molestiae expedita reiciendis molestias.
|
|
1575
|
+
<a href="">Link</a>
|
|
1576
|
+
</div>
|
|
1577
|
+
<div class="bx secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla
|
|
1578
|
+
debitis molestiae expedita reiciendis molestias.
|
|
1579
|
+
<a href="">Link</a>
|
|
1580
|
+
</div>
|
|
1581
|
+
<div class="bx accent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla
|
|
1582
|
+
debitis molestiae expedita reiciendis molestias.
|
|
1583
|
+
<a href="">Link</a>
|
|
1584
|
+
</div>
|
|
1585
|
+
</div>
|
|
1586
|
+
</section>
|
|
1877
1587
|
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
|
|
1881
|
-
|
|
1882
|
-
<div class="
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
|
|
1888
|
-
|
|
1889
|
-
|
|
1890
|
-
|
|
1891
|
-
|
|
1892
|
-
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
<
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
<
|
|
1915
|
-
<div class="
|
|
1916
|
-
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
1588
|
+
<article>
|
|
1589
|
+
|
|
1590
|
+
|
|
1591
|
+
|
|
1592
|
+
<div class="flex">
|
|
1593
|
+
<div>
|
|
1594
|
+
<ul class="w-10">
|
|
1595
|
+
<li>One</li>
|
|
1596
|
+
<li>Two</li>
|
|
1597
|
+
<li>Three</li>
|
|
1598
|
+
</ul>
|
|
1599
|
+
</div>
|
|
1600
|
+
<div>
|
|
1601
|
+
<ol class="w-10">
|
|
1602
|
+
<li>One</li>
|
|
1603
|
+
<li>Two</li>
|
|
1604
|
+
<li>Three</li>
|
|
1605
|
+
</ol>
|
|
1606
|
+
</div>
|
|
1607
|
+
<nav>
|
|
1608
|
+
<ul class="w-10">
|
|
1609
|
+
<li>Nav Item One</li>
|
|
1610
|
+
<li>Nav Item Two</li>
|
|
1611
|
+
<li>Nav Item Three</li>
|
|
1612
|
+
</ul>
|
|
1613
|
+
</nav>
|
|
1614
|
+
</div>
|
|
1615
|
+
|
|
1616
|
+
<ul>
|
|
1617
|
+
<li>Lorem ipsum dolor sit amet.</li>
|
|
1618
|
+
<li>Lorem ipsum dolor sit amet.</li>
|
|
1619
|
+
<li>Lorem ipsum dolor sit amet.</li>
|
|
1620
|
+
</ul>
|
|
1621
|
+
</article>
|
|
1622
|
+
|
|
1623
|
+
<section id="alerts">
|
|
1624
|
+
<h2>Alerts</h2>
|
|
1625
|
+
<div class="grid cols-2">
|
|
1626
|
+
<div class="bx danger flex">
|
|
1627
|
+
<svg class="icon wh-3 fs0 mr-2">
|
|
1628
|
+
<use xlink:href="/svg/naykel-ui.svg#warning"></use>
|
|
1629
|
+
</svg>
|
|
1630
|
+
<div>
|
|
1631
|
+
<div class="bx-title">Alert Title</div>
|
|
1632
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
|
|
1633
|
+
</div>
|
|
1634
|
+
</div>
|
|
1635
|
+
<div class="bx danger-light flex">
|
|
1636
|
+
<svg class="icon wh-3 fs0 mr-2">
|
|
1637
|
+
<use xlink:href="/svg/naykel-ui.svg#warning"></use>
|
|
1638
|
+
</svg>
|
|
1639
|
+
<div>
|
|
1640
|
+
<div class="bx-title">Alert Title</div>
|
|
1641
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
|
|
1642
|
+
</div>
|
|
1643
|
+
</div>
|
|
1644
|
+
<div class="bx info flex">
|
|
1645
|
+
<svg class="icon wh-3 fs0 mr-2">
|
|
1646
|
+
<use xlink:href="/svg/naykel-ui.svg#info"></use>
|
|
1647
|
+
</svg>
|
|
1648
|
+
<div>
|
|
1649
|
+
<div class="bx-title">Alert Title</div>
|
|
1650
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
|
|
1651
|
+
</div>
|
|
1652
|
+
</div>
|
|
1653
|
+
<div class="bx info-light flex">
|
|
1654
|
+
<svg class="icon wh-3 fs0 mr-2">
|
|
1655
|
+
<use xlink:href="/svg/naykel-ui.svg#info"></use>
|
|
1656
|
+
</svg>
|
|
1657
|
+
<div>
|
|
1658
|
+
<div class="bx-title">Alert Title</div>
|
|
1659
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
|
|
1660
|
+
</div>
|
|
1661
|
+
</div>
|
|
1662
|
+
<div class="bx success flex">
|
|
1663
|
+
<svg class="icon wh-3 fs0 mr-2">
|
|
1664
|
+
<use xlink:href="/svg/naykel-ui.svg#success"></use>
|
|
1665
|
+
</svg>
|
|
1666
|
+
<div>
|
|
1667
|
+
<div class="bx-title">Alert Title</div>
|
|
1668
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
|
|
1669
|
+
</div>
|
|
1670
|
+
</div>
|
|
1671
|
+
<div class="bx success-light flex">
|
|
1672
|
+
<svg class="icon wh-3 fs0 mr-2">
|
|
1673
|
+
<use xlink:href="/svg/naykel-ui.svg#success"></use>
|
|
1674
|
+
</svg>
|
|
1675
|
+
<div>
|
|
1676
|
+
<div class="bx-title">Alert Title</div>
|
|
1677
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
|
|
1678
|
+
</div>
|
|
1679
|
+
</div>
|
|
1680
|
+
<div class="bx warning flex">
|
|
1681
|
+
<svg class="icon wh-3 fs0 mr-2">
|
|
1682
|
+
<use xlink:href="/svg/naykel-ui.svg#warning-round"></use>
|
|
1683
|
+
</svg>
|
|
1684
|
+
<div>
|
|
1685
|
+
<div class="bx-title">Alert Title</div>
|
|
1686
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
|
|
1687
|
+
</div>
|
|
1688
|
+
</div>
|
|
1689
|
+
<div class="bx warning-light flex">
|
|
1690
|
+
<svg class="icon wh-3 fs0 mr-2">
|
|
1691
|
+
<use xlink:href="/svg/naykel-ui.svg#warning-round"></use>
|
|
1692
|
+
</svg>
|
|
1693
|
+
<div>
|
|
1694
|
+
<div class="bx-title">Alert Title</div>
|
|
1695
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
|
|
1696
|
+
</div>
|
|
1697
|
+
</div>
|
|
1698
|
+
</div>
|
|
1699
|
+
</section>
|
|
1700
|
+
|
|
1701
|
+
<section id="tables">
|
|
1702
|
+
<h2>Tables</h2>
|
|
1703
|
+
<table>
|
|
1704
|
+
<thead>
|
|
1705
|
+
<tr>
|
|
1706
|
+
<th>Table Header</th>
|
|
1707
|
+
<th>Table Header</th>
|
|
1708
|
+
<th>Table Header</th>
|
|
1709
|
+
</tr>
|
|
1710
|
+
</thead>
|
|
1711
|
+
<tbody>
|
|
1712
|
+
<tr>
|
|
1713
|
+
<td>Table Data</td>
|
|
1714
|
+
<td>Table Data</td>
|
|
1715
|
+
<td>Table Data</td>
|
|
1716
|
+
</tr>
|
|
1717
|
+
<tr>
|
|
1718
|
+
<td>Table Data</td>
|
|
1719
|
+
<td>Table Data</td>
|
|
1720
|
+
<td>Table Data</td>
|
|
1721
|
+
</tr>
|
|
1722
|
+
<tr>
|
|
1723
|
+
<td>Table Data</td>
|
|
1724
|
+
<td>Table Data</td>
|
|
1725
|
+
<td>Table Data</td>
|
|
1726
|
+
</tr>
|
|
1727
|
+
</tbody>
|
|
1728
|
+
</table>
|
|
1729
|
+
|
|
1730
|
+
</section>
|
|
1731
|
+
</main>
|
|
1732
|
+
|
|
1733
|
+
<footer id="nk-footer">
|
|
1734
|
+
|
|
1735
|
+
</footer>
|
|
1736
|
+
|
|
1737
|
+
|
|
1738
|
+
<section id="base-color-shades">
|
|
1928
1739
|
<div class="grid-0 cols-12 tac va-c">
|
|
1929
|
-
<p class="tal">
|
|
1930
|
-
<div class="
|
|
1931
|
-
<div class="
|
|
1932
|
-
<div class="
|
|
1933
|
-
<div class="
|
|
1934
|
-
<div class="
|
|
1935
|
-
<div class="
|
|
1936
|
-
<div class="
|
|
1937
|
-
<div class="
|
|
1938
|
-
<div class="
|
|
1939
|
-
<div class="
|
|
1940
|
-
<div class="
|
|
1740
|
+
<p class="tal">Stone</p>
|
|
1741
|
+
<div class="py stone-1">1</div>
|
|
1742
|
+
<div class="py stone-2">2</div>
|
|
1743
|
+
<div class="py stone-3">3</div>
|
|
1744
|
+
<div class="py stone-4">4</div>
|
|
1745
|
+
<div class="py stone-5">5</div>
|
|
1746
|
+
<div class="py stone-6">6</div>
|
|
1747
|
+
<div class="py stone-7">7</div>
|
|
1748
|
+
<div class="py stone-8">8</div>
|
|
1749
|
+
<div class="py stone-9">9</div>
|
|
1750
|
+
<div class="py stone-10">10</div>
|
|
1751
|
+
<div class="py stone-11">11</div>
|
|
1941
1752
|
</div>
|
|
1942
|
-
</div>
|
|
1943
|
-
<div>
|
|
1944
1753
|
<div class="grid-0 cols-12 tac va-c">
|
|
1945
|
-
<p class="tal">
|
|
1946
|
-
<div class="
|
|
1947
|
-
<div class="
|
|
1948
|
-
<div class="
|
|
1949
|
-
<div class="
|
|
1950
|
-
<div class="
|
|
1951
|
-
<div class="
|
|
1952
|
-
<div class="
|
|
1953
|
-
<div class="
|
|
1954
|
-
<div class="
|
|
1955
|
-
<div class="
|
|
1956
|
-
<div class="
|
|
1754
|
+
<p class="tal">Brown</p>
|
|
1755
|
+
<div class="py brown-1">1</div>
|
|
1756
|
+
<div class="py brown-2">2</div>
|
|
1757
|
+
<div class="py brown-3">3</div>
|
|
1758
|
+
<div class="py brown-4">4</div>
|
|
1759
|
+
<div class="py brown-5">5</div>
|
|
1760
|
+
<div class="py brown-6">6</div>
|
|
1761
|
+
<div class="py brown-7">7</div>
|
|
1762
|
+
<div class="py brown-8">8</div>
|
|
1763
|
+
<div class="py brown-9">9</div>
|
|
1764
|
+
<div class="py brown-10">10</div>
|
|
1765
|
+
<div class="py brown-11">11</div>
|
|
1957
1766
|
</div>
|
|
1958
|
-
</div>
|
|
1959
|
-
<div>
|
|
1960
1767
|
<div class="grid-0 cols-12 tac va-c">
|
|
1961
1768
|
<p class="tal">Red</p>
|
|
1962
|
-
<div class="
|
|
1963
|
-
<div class="
|
|
1964
|
-
<div class="
|
|
1965
|
-
<div class="
|
|
1966
|
-
<div class="
|
|
1967
|
-
<div class="
|
|
1968
|
-
<div class="
|
|
1969
|
-
<div class="
|
|
1970
|
-
<div class="
|
|
1971
|
-
<div class="
|
|
1972
|
-
<div class="
|
|
1769
|
+
<div class="py red-1">1</div>
|
|
1770
|
+
<div class="py red-2">2</div>
|
|
1771
|
+
<div class="py red-3">3</div>
|
|
1772
|
+
<div class="py red-4">4</div>
|
|
1773
|
+
<div class="py red-5">5</div>
|
|
1774
|
+
<div class="py red-6">6</div>
|
|
1775
|
+
<div class="py red-7">7</div>
|
|
1776
|
+
<div class="py red-8">8</div>
|
|
1777
|
+
<div class="py red-9">9</div>
|
|
1778
|
+
<div class="py red-10">10</div>
|
|
1779
|
+
<div class="py red-11">11</div>
|
|
1973
1780
|
</div>
|
|
1974
|
-
</div>
|
|
1975
|
-
<div>
|
|
1976
1781
|
<div class="grid-0 cols-12 tac va-c">
|
|
1977
1782
|
<p class="tal">Orange</p>
|
|
1978
|
-
<div class="
|
|
1979
|
-
<div class="
|
|
1980
|
-
<div class="
|
|
1981
|
-
<div class="
|
|
1982
|
-
<div class="
|
|
1983
|
-
<div class="
|
|
1984
|
-
<div class="
|
|
1985
|
-
<div class="
|
|
1986
|
-
<div class="
|
|
1987
|
-
<div class="
|
|
1988
|
-
<div class="
|
|
1783
|
+
<div class="py orange-1">1</div>
|
|
1784
|
+
<div class="py orange-2">2</div>
|
|
1785
|
+
<div class="py orange-3">3</div>
|
|
1786
|
+
<div class="py orange-4">4</div>
|
|
1787
|
+
<div class="py orange-5">5</div>
|
|
1788
|
+
<div class="py orange-6">6</div>
|
|
1789
|
+
<div class="py orange-7">7</div>
|
|
1790
|
+
<div class="py orange-8">8</div>
|
|
1791
|
+
<div class="py orange-9">9</div>
|
|
1792
|
+
<div class="py orange-10">10</div>
|
|
1793
|
+
<div class="py orange-11">11</div>
|
|
1989
1794
|
</div>
|
|
1990
|
-
</div>
|
|
1991
|
-
<div>
|
|
1992
1795
|
<div class="grid-0 cols-12 tac va-c">
|
|
1993
1796
|
<p class="tal">Amber</p>
|
|
1994
|
-
<div class="
|
|
1995
|
-
<div class="
|
|
1996
|
-
<div class="
|
|
1997
|
-
<div class="
|
|
1998
|
-
<div class="
|
|
1999
|
-
<div class="
|
|
2000
|
-
<div class="
|
|
2001
|
-
<div class="
|
|
2002
|
-
<div class="
|
|
2003
|
-
<div class="
|
|
2004
|
-
<div class="
|
|
1797
|
+
<div class="py amber-1">1</div>
|
|
1798
|
+
<div class="py amber-2">2</div>
|
|
1799
|
+
<div class="py amber-3">3</div>
|
|
1800
|
+
<div class="py amber-4">4</div>
|
|
1801
|
+
<div class="py amber-5">5</div>
|
|
1802
|
+
<div class="py amber-6">6</div>
|
|
1803
|
+
<div class="py amber-7">7</div>
|
|
1804
|
+
<div class="py amber-8">8</div>
|
|
1805
|
+
<div class="py amber-9">9</div>
|
|
1806
|
+
<div class="py amber-10">10</div>
|
|
1807
|
+
<div class="py amber-11">11</div>
|
|
2005
1808
|
</div>
|
|
2006
|
-
</div>
|
|
2007
|
-
<div>
|
|
2008
1809
|
<div class="grid-0 cols-12 tac va-c">
|
|
2009
1810
|
<p class="tal">Yellow</p>
|
|
2010
|
-
<div class="
|
|
2011
|
-
<div class="
|
|
2012
|
-
<div class="
|
|
2013
|
-
<div class="
|
|
2014
|
-
<div class="
|
|
2015
|
-
<div class="
|
|
2016
|
-
<div class="
|
|
2017
|
-
<div class="
|
|
2018
|
-
<div class="
|
|
2019
|
-
<div class="
|
|
2020
|
-
<div class="
|
|
1811
|
+
<div class="py yellow-1">1</div>
|
|
1812
|
+
<div class="py yellow-2">2</div>
|
|
1813
|
+
<div class="py yellow-3">3</div>
|
|
1814
|
+
<div class="py yellow-4">4</div>
|
|
1815
|
+
<div class="py yellow-5">5</div>
|
|
1816
|
+
<div class="py yellow-6">6</div>
|
|
1817
|
+
<div class="py yellow-7">7</div>
|
|
1818
|
+
<div class="py yellow-8">8</div>
|
|
1819
|
+
<div class="py yellow-9">9</div>
|
|
1820
|
+
<div class="py yellow-10">10</div>
|
|
1821
|
+
<div class="py yellow-11">11</div>
|
|
2021
1822
|
</div>
|
|
2022
|
-
</div>
|
|
2023
|
-
<div>
|
|
2024
1823
|
<div class="grid-0 cols-12 tac va-c">
|
|
2025
1824
|
<p class="tal">Lime</p>
|
|
2026
|
-
<div class="
|
|
2027
|
-
<div class="
|
|
2028
|
-
<div class="
|
|
2029
|
-
<div class="
|
|
2030
|
-
<div class="
|
|
2031
|
-
<div class="
|
|
2032
|
-
<div class="
|
|
2033
|
-
<div class="
|
|
2034
|
-
<div class="
|
|
2035
|
-
<div class="
|
|
2036
|
-
<div class="
|
|
1825
|
+
<div class="py lime-1">1</div>
|
|
1826
|
+
<div class="py lime-2">2</div>
|
|
1827
|
+
<div class="py lime-3">3</div>
|
|
1828
|
+
<div class="py lime-4">4</div>
|
|
1829
|
+
<div class="py lime-5">5</div>
|
|
1830
|
+
<div class="py lime-6">6</div>
|
|
1831
|
+
<div class="py lime-7">7</div>
|
|
1832
|
+
<div class="py lime-8">8</div>
|
|
1833
|
+
<div class="py lime-9">9</div>
|
|
1834
|
+
<div class="py lime-10">10</div>
|
|
1835
|
+
<div class="py lime-11">11</div>
|
|
2037
1836
|
</div>
|
|
2038
|
-
</div>
|
|
2039
|
-
<div>
|
|
2040
1837
|
<div class="grid-0 cols-12 tac va-c">
|
|
2041
|
-
<p class="tal">
|
|
2042
|
-
<div class="
|
|
2043
|
-
<div class="
|
|
2044
|
-
<div class="
|
|
2045
|
-
<div class="
|
|
2046
|
-
<div class="
|
|
2047
|
-
<div class="
|
|
2048
|
-
<div class="
|
|
2049
|
-
<div class="
|
|
2050
|
-
<div class="
|
|
2051
|
-
<div class="
|
|
2052
|
-
<div class="
|
|
1838
|
+
<p class="tal">Emerald</p>
|
|
1839
|
+
<div class="py emerald-1">1</div>
|
|
1840
|
+
<div class="py emerald-2">2</div>
|
|
1841
|
+
<div class="py emerald-3">3</div>
|
|
1842
|
+
<div class="py emerald-4">4</div>
|
|
1843
|
+
<div class="py emerald-5">5</div>
|
|
1844
|
+
<div class="py emerald-6">6</div>
|
|
1845
|
+
<div class="py emerald-7">7</div>
|
|
1846
|
+
<div class="py emerald-8">8</div>
|
|
1847
|
+
<div class="py emerald-9">9</div>
|
|
1848
|
+
<div class="py emerald-10">10</div>
|
|
1849
|
+
<div class="py emerald-11">11</div>
|
|
2053
1850
|
</div>
|
|
2054
|
-
</div>
|
|
2055
|
-
<div>
|
|
2056
1851
|
<div class="grid-0 cols-12 tac va-c">
|
|
2057
|
-
<p class="tal">
|
|
2058
|
-
<div class="
|
|
2059
|
-
<div class="
|
|
2060
|
-
<div class="
|
|
2061
|
-
<div class="
|
|
2062
|
-
<div class="
|
|
2063
|
-
<div class="
|
|
2064
|
-
<div class="
|
|
2065
|
-
<div class="
|
|
2066
|
-
<div class="
|
|
2067
|
-
<div class="
|
|
2068
|
-
<div class="
|
|
1852
|
+
<p class="tal">Green</p>
|
|
1853
|
+
<div class="py green-1">1</div>
|
|
1854
|
+
<div class="py green-2">2</div>
|
|
1855
|
+
<div class="py green-3">3</div>
|
|
1856
|
+
<div class="py green-4">4</div>
|
|
1857
|
+
<div class="py green-5">5</div>
|
|
1858
|
+
<div class="py green-6">6</div>
|
|
1859
|
+
<div class="py green-7">7</div>
|
|
1860
|
+
<div class="py green-8">8</div>
|
|
1861
|
+
<div class="py green-9">9</div>
|
|
1862
|
+
<div class="py green-10">10</div>
|
|
1863
|
+
<div class="py green-11">11</div>
|
|
2069
1864
|
</div>
|
|
2070
|
-
</div>
|
|
2071
|
-
<div>
|
|
2072
1865
|
<div class="grid-0 cols-12 tac va-c">
|
|
2073
1866
|
<p class="tal">Teal</p>
|
|
2074
|
-
<div class="
|
|
2075
|
-
<div class="
|
|
2076
|
-
<div class="
|
|
2077
|
-
<div class="
|
|
2078
|
-
<div class="
|
|
2079
|
-
<div class="
|
|
2080
|
-
<div class="
|
|
2081
|
-
<div class="
|
|
2082
|
-
<div class="
|
|
2083
|
-
<div class="
|
|
2084
|
-
<div class="
|
|
1867
|
+
<div class="py teal-1">1</div>
|
|
1868
|
+
<div class="py teal-2">2</div>
|
|
1869
|
+
<div class="py teal-3">3</div>
|
|
1870
|
+
<div class="py teal-4">4</div>
|
|
1871
|
+
<div class="py teal-5">5</div>
|
|
1872
|
+
<div class="py teal-6">6</div>
|
|
1873
|
+
<div class="py teal-7">7</div>
|
|
1874
|
+
<div class="py teal-8">8</div>
|
|
1875
|
+
<div class="py teal-9">9</div>
|
|
1876
|
+
<div class="py teal-10">10</div>
|
|
1877
|
+
<div class="py teal-11">11</div>
|
|
2085
1878
|
</div>
|
|
2086
|
-
</div>
|
|
2087
|
-
<div>
|
|
2088
1879
|
<div class="grid-0 cols-12 tac va-c">
|
|
2089
1880
|
<p class="tal">Cyan</p>
|
|
2090
|
-
<div class="
|
|
2091
|
-
<div class="
|
|
2092
|
-
<div class="
|
|
2093
|
-
<div class="
|
|
2094
|
-
<div class="
|
|
2095
|
-
<div class="
|
|
2096
|
-
<div class="
|
|
2097
|
-
<div class="
|
|
2098
|
-
<div class="
|
|
2099
|
-
<div class="
|
|
2100
|
-
<div class="
|
|
1881
|
+
<div class="py cyan-1">1</div>
|
|
1882
|
+
<div class="py cyan-2">2</div>
|
|
1883
|
+
<div class="py cyan-3">3</div>
|
|
1884
|
+
<div class="py cyan-4">4</div>
|
|
1885
|
+
<div class="py cyan-5">5</div>
|
|
1886
|
+
<div class="py cyan-6">6</div>
|
|
1887
|
+
<div class="py cyan-7">7</div>
|
|
1888
|
+
<div class="py cyan-8">8</div>
|
|
1889
|
+
<div class="py cyan-9">9</div>
|
|
1890
|
+
<div class="py cyan-10">10</div>
|
|
1891
|
+
<div class="py cyan-11">11</div>
|
|
2101
1892
|
</div>
|
|
2102
|
-
</div>
|
|
2103
|
-
<div>
|
|
2104
1893
|
<div class="grid-0 cols-12 tac va-c">
|
|
2105
1894
|
<p class="tal">Sky</p>
|
|
2106
|
-
<div class="
|
|
2107
|
-
<div class="
|
|
2108
|
-
<div class="
|
|
2109
|
-
<div class="
|
|
2110
|
-
<div class="
|
|
2111
|
-
<div class="
|
|
2112
|
-
<div class="
|
|
2113
|
-
<div class="
|
|
2114
|
-
<div class="
|
|
2115
|
-
<div class="
|
|
2116
|
-
<div class="
|
|
1895
|
+
<div class="py sky-1">1</div>
|
|
1896
|
+
<div class="py sky-2">2</div>
|
|
1897
|
+
<div class="py sky-3">3</div>
|
|
1898
|
+
<div class="py sky-4">4</div>
|
|
1899
|
+
<div class="py sky-5">5</div>
|
|
1900
|
+
<div class="py sky-6">6</div>
|
|
1901
|
+
<div class="py sky-7">7</div>
|
|
1902
|
+
<div class="py sky-8">8</div>
|
|
1903
|
+
<div class="py sky-9">9</div>
|
|
1904
|
+
<div class="py sky-10">10</div>
|
|
1905
|
+
<div class="py sky-11">11</div>
|
|
2117
1906
|
</div>
|
|
2118
|
-
</div>
|
|
2119
|
-
<div>
|
|
2120
1907
|
<div class="grid-0 cols-12 tac va-c">
|
|
2121
1908
|
<p class="tal">Blue</p>
|
|
2122
|
-
<div class="
|
|
2123
|
-
<div class="
|
|
2124
|
-
<div class="
|
|
2125
|
-
<div class="
|
|
2126
|
-
<div class="
|
|
2127
|
-
<div class="
|
|
2128
|
-
<div class="
|
|
2129
|
-
<div class="
|
|
2130
|
-
<div class="
|
|
2131
|
-
<div class="
|
|
2132
|
-
<div class="
|
|
1909
|
+
<div class="py blue-1">1</div>
|
|
1910
|
+
<div class="py blue-2">2</div>
|
|
1911
|
+
<div class="py blue-3">3</div>
|
|
1912
|
+
<div class="py blue-4">4</div>
|
|
1913
|
+
<div class="py blue-5">5</div>
|
|
1914
|
+
<div class="py blue-6">6</div>
|
|
1915
|
+
<div class="py blue-7">7</div>
|
|
1916
|
+
<div class="py blue-8">8</div>
|
|
1917
|
+
<div class="py blue-9">9</div>
|
|
1918
|
+
<div class="py blue-10">10</div>
|
|
1919
|
+
<div class="py blue-11">11</div>
|
|
2133
1920
|
</div>
|
|
2134
|
-
</div>
|
|
2135
|
-
<div>
|
|
2136
1921
|
<div class="grid-0 cols-12 tac va-c">
|
|
2137
1922
|
<p class="tal">Indigo</p>
|
|
2138
|
-
<div class="
|
|
2139
|
-
<div class="
|
|
2140
|
-
<div class="
|
|
2141
|
-
<div class="
|
|
2142
|
-
<div class="
|
|
2143
|
-
<div class="
|
|
2144
|
-
<div class="
|
|
2145
|
-
<div class="
|
|
2146
|
-
<div class="
|
|
2147
|
-
<div class="
|
|
2148
|
-
<div class="
|
|
2149
|
-
</div>
|
|
2150
|
-
</div>
|
|
2151
|
-
<div>
|
|
2152
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
2153
|
-
<p class="tal">Violet</p>
|
|
2154
|
-
<div class="h-4 bg-violet-50">50</div>
|
|
2155
|
-
<div class="h-4 bg-violet-100">100</div>
|
|
2156
|
-
<div class="h-4 bg-violet-200">200</div>
|
|
2157
|
-
<div class="h-4 bg-violet-300">300</div>
|
|
2158
|
-
<div class="h-4 bg-violet-400">400</div>
|
|
2159
|
-
<div class="h-4 bg-violet-500">500</div>
|
|
2160
|
-
<div class="h-4 bg-violet-600">600</div>
|
|
2161
|
-
<div class="h-4 bg-violet-700">700</div>
|
|
2162
|
-
<div class="h-4 bg-violet-800">800</div>
|
|
2163
|
-
<div class="h-4 bg-violet-900">900</div>
|
|
2164
|
-
<div class="h-4 bg-violet-950">950</div>
|
|
1923
|
+
<div class="py indigo-1">1</div>
|
|
1924
|
+
<div class="py indigo-2">2</div>
|
|
1925
|
+
<div class="py indigo-3">3</div>
|
|
1926
|
+
<div class="py indigo-4">4</div>
|
|
1927
|
+
<div class="py indigo-5">5</div>
|
|
1928
|
+
<div class="py indigo-6">6</div>
|
|
1929
|
+
<div class="py indigo-7">7</div>
|
|
1930
|
+
<div class="py indigo-8">8</div>
|
|
1931
|
+
<div class="py indigo-9">9</div>
|
|
1932
|
+
<div class="py indigo-10">10</div>
|
|
1933
|
+
<div class="py indigo-11">11</div>
|
|
2165
1934
|
</div>
|
|
2166
|
-
</div>
|
|
2167
|
-
<div>
|
|
2168
1935
|
<div class="grid-0 cols-12 tac va-c">
|
|
2169
1936
|
<p class="tal">Purple</p>
|
|
2170
|
-
<div class="
|
|
2171
|
-
<div class="
|
|
2172
|
-
<div class="
|
|
2173
|
-
<div class="
|
|
2174
|
-
<div class="
|
|
2175
|
-
<div class="
|
|
2176
|
-
<div class="
|
|
2177
|
-
<div class="
|
|
2178
|
-
<div class="
|
|
2179
|
-
<div class="
|
|
2180
|
-
<div class="
|
|
1937
|
+
<div class="py purple-1">1</div>
|
|
1938
|
+
<div class="py purple-2">2</div>
|
|
1939
|
+
<div class="py purple-3">3</div>
|
|
1940
|
+
<div class="py purple-4">4</div>
|
|
1941
|
+
<div class="py purple-5">5</div>
|
|
1942
|
+
<div class="py purple-6">6</div>
|
|
1943
|
+
<div class="py purple-7">7</div>
|
|
1944
|
+
<div class="py purple-8">8</div>
|
|
1945
|
+
<div class="py purple-9">9</div>
|
|
1946
|
+
<div class="py purple-10">10</div>
|
|
1947
|
+
<div class="py purple-11">11</div>
|
|
2181
1948
|
</div>
|
|
2182
|
-
</div>
|
|
2183
|
-
<div>
|
|
2184
1949
|
<div class="grid-0 cols-12 tac va-c">
|
|
2185
1950
|
<p class="tal">Fuchsia</p>
|
|
2186
|
-
<div class="
|
|
2187
|
-
<div class="
|
|
2188
|
-
<div class="
|
|
2189
|
-
<div class="
|
|
2190
|
-
<div class="
|
|
2191
|
-
<div class="
|
|
2192
|
-
<div class="
|
|
2193
|
-
<div class="
|
|
2194
|
-
<div class="
|
|
2195
|
-
<div class="
|
|
2196
|
-
<div class="
|
|
1951
|
+
<div class="py fuchsia-1">1</div>
|
|
1952
|
+
<div class="py fuchsia-2">2</div>
|
|
1953
|
+
<div class="py fuchsia-3">3</div>
|
|
1954
|
+
<div class="py fuchsia-4">4</div>
|
|
1955
|
+
<div class="py fuchsia-5">5</div>
|
|
1956
|
+
<div class="py fuchsia-6">6</div>
|
|
1957
|
+
<div class="py fuchsia-7">7</div>
|
|
1958
|
+
<div class="py fuchsia-8">8</div>
|
|
1959
|
+
<div class="py fuchsia-9">9</div>
|
|
1960
|
+
<div class="py fuchsia-10">10</div>
|
|
1961
|
+
<div class="py fuchsia-11">11</div>
|
|
2197
1962
|
</div>
|
|
2198
|
-
</div>
|
|
2199
|
-
<div>
|
|
2200
1963
|
<div class="grid-0 cols-12 tac va-c">
|
|
2201
1964
|
<p class="tal">Pink</p>
|
|
2202
|
-
<div class="
|
|
2203
|
-
<div class="
|
|
2204
|
-
<div class="
|
|
2205
|
-
<div class="
|
|
2206
|
-
<div class="
|
|
2207
|
-
<div class="
|
|
2208
|
-
<div class="
|
|
2209
|
-
<div class="
|
|
2210
|
-
<div class="
|
|
2211
|
-
<div class="
|
|
2212
|
-
<div class="
|
|
1965
|
+
<div class="py pink-1">1</div>
|
|
1966
|
+
<div class="py pink-2">2</div>
|
|
1967
|
+
<div class="py pink-3">3</div>
|
|
1968
|
+
<div class="py pink-4">4</div>
|
|
1969
|
+
<div class="py pink-5">5</div>
|
|
1970
|
+
<div class="py pink-6">6</div>
|
|
1971
|
+
<div class="py pink-7">7</div>
|
|
1972
|
+
<div class="py pink-8">8</div>
|
|
1973
|
+
<div class="py pink-9">9</div>
|
|
1974
|
+
<div class="py pink-10">10</div>
|
|
1975
|
+
<div class="py pink-11">11</div>
|
|
2213
1976
|
</div>
|
|
2214
|
-
</div>
|
|
2215
|
-
<div>
|
|
2216
1977
|
<div class="grid-0 cols-12 tac va-c">
|
|
2217
1978
|
<p class="tal">Rose</p>
|
|
2218
|
-
<div class="
|
|
2219
|
-
<div class="
|
|
2220
|
-
<div class="
|
|
2221
|
-
<div class="
|
|
2222
|
-
<div class="
|
|
2223
|
-
<div class="
|
|
2224
|
-
<div class="
|
|
2225
|
-
<div class="
|
|
2226
|
-
<div class="
|
|
2227
|
-
<div class="
|
|
2228
|
-
<div class="
|
|
1979
|
+
<div class="py rose-1">1</div>
|
|
1980
|
+
<div class="py rose-2">2</div>
|
|
1981
|
+
<div class="py rose-3">3</div>
|
|
1982
|
+
<div class="py rose-4">4</div>
|
|
1983
|
+
<div class="py rose-5">5</div>
|
|
1984
|
+
<div class="py rose-6">6</div>
|
|
1985
|
+
<div class="py rose-7">7</div>
|
|
1986
|
+
<div class="py rose-8">8</div>
|
|
1987
|
+
<div class="py rose-9">9</div>
|
|
1988
|
+
<div class="py rose-10">10</div>
|
|
1989
|
+
<div class="py rose-11">11</div>
|
|
2229
1990
|
</div>
|
|
2230
|
-
</
|
|
2231
|
-
</section>
|
|
1991
|
+
</section>
|
|
2232
1992
|
|
|
2233
|
-
|
|
2234
|
-
|
|
2235
|
-
|
|
1993
|
+
|
|
1994
|
+
<section id="tailwind-colors">
|
|
1995
|
+
<div>
|
|
1996
|
+
<div class="grid-0 cols-12 tac va-c">
|
|
1997
|
+
<p class="tal">Slate</p>
|
|
1998
|
+
<div class="h-4 bg-slate-50 tac">50</div>
|
|
1999
|
+
<div class="h-4 bg-slate-100">100</div>
|
|
2000
|
+
<div class="h-4 bg-slate-200">200</div>
|
|
2001
|
+
<div class="h-4 bg-slate-300">300</div>
|
|
2002
|
+
<div class="h-4 bg-slate-400">400</div>
|
|
2003
|
+
<div class="h-4 bg-slate-500">500</div>
|
|
2004
|
+
<div class="h-4 bg-slate-600">600</div>
|
|
2005
|
+
<div class="h-4 bg-slate-700">700</div>
|
|
2006
|
+
<div class="h-4 bg-slate-800">800</div>
|
|
2007
|
+
<div class="h-4 bg-slate-900">900</div>
|
|
2008
|
+
<div class="h-4 bg-slate-950">950</div>
|
|
2009
|
+
</div>
|
|
2010
|
+
</div>
|
|
2011
|
+
<div>
|
|
2012
|
+
<div class="grid-0 cols-12 tac va-c">
|
|
2013
|
+
<p class="tal">Gray</p>
|
|
2014
|
+
<div class="h-4 bg-gray-50">50</div>
|
|
2015
|
+
<div class="h-4 bg-gray-100">100</div>
|
|
2016
|
+
<div class="h-4 bg-gray-200">200</div>
|
|
2017
|
+
<div class="h-4 bg-gray-300">300</div>
|
|
2018
|
+
<div class="h-4 bg-gray-400">400</div>
|
|
2019
|
+
<div class="h-4 bg-gray-500">500</div>
|
|
2020
|
+
<div class="h-4 bg-gray-600">600</div>
|
|
2021
|
+
<div class="h-4 bg-gray-700">700</div>
|
|
2022
|
+
<div class="h-4 bg-gray-800">800</div>
|
|
2023
|
+
<div class="h-4 bg-gray-900">900</div>
|
|
2024
|
+
<div class="h-4 bg-gray-950">950</div>
|
|
2025
|
+
</div>
|
|
2026
|
+
</div>
|
|
2027
|
+
<div>
|
|
2028
|
+
<div class="grid-0 cols-12 tac va-c">
|
|
2029
|
+
<p class="tal">Zinc</p>
|
|
2030
|
+
<div class="h-4 bg-zinc-50">50</div>
|
|
2031
|
+
<div class="h-4 bg-zinc-100">100</div>
|
|
2032
|
+
<div class="h-4 bg-zinc-200">200</div>
|
|
2033
|
+
<div class="h-4 bg-zinc-300">300</div>
|
|
2034
|
+
<div class="h-4 bg-zinc-400">400</div>
|
|
2035
|
+
<div class="h-4 bg-zinc-500">500</div>
|
|
2036
|
+
<div class="h-4 bg-zinc-600">600</div>
|
|
2037
|
+
<div class="h-4 bg-zinc-700">700</div>
|
|
2038
|
+
<div class="h-4 bg-zinc-800">800</div>
|
|
2039
|
+
<div class="h-4 bg-zinc-900">900</div>
|
|
2040
|
+
<div class="h-4 bg-zinc-950">950</div>
|
|
2041
|
+
</div>
|
|
2042
|
+
</div>
|
|
2043
|
+
<div>
|
|
2044
|
+
<div class="grid-0 cols-12 tac va-c">
|
|
2045
|
+
<p class="tal">Neutral</p>
|
|
2046
|
+
<div class="h-4 bg-neutral-50">50</div>
|
|
2047
|
+
<div class="h-4 bg-neutral-100">100</div>
|
|
2048
|
+
<div class="h-4 bg-neutral-200">200</div>
|
|
2049
|
+
<div class="h-4 bg-neutral-300">300</div>
|
|
2050
|
+
<div class="h-4 bg-neutral-400">400</div>
|
|
2051
|
+
<div class="h-4 bg-neutral-500">500</div>
|
|
2052
|
+
<div class="h-4 bg-neutral-600">600</div>
|
|
2053
|
+
<div class="h-4 bg-neutral-700">700</div>
|
|
2054
|
+
<div class="h-4 bg-neutral-800">800</div>
|
|
2055
|
+
<div class="h-4 bg-neutral-900">900</div>
|
|
2056
|
+
<div class="h-4 bg-neutral-950">950</div>
|
|
2057
|
+
</div>
|
|
2058
|
+
</div>
|
|
2059
|
+
<div>
|
|
2060
|
+
<div class="grid-0 cols-12 tac va-c">
|
|
2061
|
+
<p class="tal">Stone</p>
|
|
2062
|
+
<div class="h-4 bg-stone-50">50</div>
|
|
2063
|
+
<div class="h-4 bg-stone-100">100</div>
|
|
2064
|
+
<div class="h-4 bg-stone-200">200</div>
|
|
2065
|
+
<div class="h-4 bg-stone-300">300</div>
|
|
2066
|
+
<div class="h-4 bg-stone-400">400</div>
|
|
2067
|
+
<div class="h-4 bg-stone-500">500</div>
|
|
2068
|
+
<div class="h-4 bg-stone-600">600</div>
|
|
2069
|
+
<div class="h-4 bg-stone-700">700</div>
|
|
2070
|
+
<div class="h-4 bg-stone-800">800</div>
|
|
2071
|
+
<div class="h-4 bg-stone-900">900</div>
|
|
2072
|
+
<div class="h-4 bg-stone-950">950</div>
|
|
2073
|
+
</div>
|
|
2074
|
+
</div>
|
|
2075
|
+
<div>
|
|
2076
|
+
<div class="grid-0 cols-12 tac va-c">
|
|
2077
|
+
<p class="tal">Red</p>
|
|
2078
|
+
<div class="h-4 bg-red-50">50</div>
|
|
2079
|
+
<div class="h-4 bg-red-100">100</div>
|
|
2080
|
+
<div class="h-4 bg-red-200">200</div>
|
|
2081
|
+
<div class="h-4 bg-red-300">300</div>
|
|
2082
|
+
<div class="h-4 bg-red-400">400</div>
|
|
2083
|
+
<div class="h-4 bg-red-500">500</div>
|
|
2084
|
+
<div class="h-4 bg-red-600">600</div>
|
|
2085
|
+
<div class="h-4 bg-red-700">700</div>
|
|
2086
|
+
<div class="h-4 bg-red-800">800</div>
|
|
2087
|
+
<div class="h-4 bg-red-900">900</div>
|
|
2088
|
+
<div class="h-4 bg-red-950">950</div>
|
|
2089
|
+
</div>
|
|
2090
|
+
</div>
|
|
2091
|
+
<div>
|
|
2092
|
+
<div class="grid-0 cols-12 tac va-c">
|
|
2093
|
+
<p class="tal">Orange</p>
|
|
2094
|
+
<div class="h-4 bg-orange-50">50</div>
|
|
2095
|
+
<div class="h-4 bg-orange-100">100</div>
|
|
2096
|
+
<div class="h-4 bg-orange-200">200</div>
|
|
2097
|
+
<div class="h-4 bg-orange-300">300</div>
|
|
2098
|
+
<div class="h-4 bg-orange-400">400</div>
|
|
2099
|
+
<div class="h-4 bg-orange-500">500</div>
|
|
2100
|
+
<div class="h-4 bg-orange-600">600</div>
|
|
2101
|
+
<div class="h-4 bg-orange-700">700</div>
|
|
2102
|
+
<div class="h-4 bg-orange-800">800</div>
|
|
2103
|
+
<div class="h-4 bg-orange-900">900</div>
|
|
2104
|
+
<div class="h-4 bg-orange-950">950</div>
|
|
2105
|
+
</div>
|
|
2106
|
+
</div>
|
|
2107
|
+
<div>
|
|
2108
|
+
<div class="grid-0 cols-12 tac va-c">
|
|
2109
|
+
<p class="tal">Amber</p>
|
|
2110
|
+
<div class="h-4 bg-amber-50">50</div>
|
|
2111
|
+
<div class="h-4 bg-amber-100">100</div>
|
|
2112
|
+
<div class="h-4 bg-amber-200">200</div>
|
|
2113
|
+
<div class="h-4 bg-amber-300">300</div>
|
|
2114
|
+
<div class="h-4 bg-amber-400">400</div>
|
|
2115
|
+
<div class="h-4 bg-amber-500">500</div>
|
|
2116
|
+
<div class="h-4 bg-amber-600">600</div>
|
|
2117
|
+
<div class="h-4 bg-amber-700">700</div>
|
|
2118
|
+
<div class="h-4 bg-amber-800">800</div>
|
|
2119
|
+
<div class="h-4 bg-amber-900">900</div>
|
|
2120
|
+
<div class="h-4 bg-amber-950">950</div>
|
|
2121
|
+
</div>
|
|
2122
|
+
</div>
|
|
2123
|
+
<div>
|
|
2124
|
+
<div class="grid-0 cols-12 tac va-c">
|
|
2125
|
+
<p class="tal">Yellow</p>
|
|
2126
|
+
<div class="h-4 bg-yellow-50">50</div>
|
|
2127
|
+
<div class="h-4 bg-yellow-100">100</div>
|
|
2128
|
+
<div class="h-4 bg-yellow-200">200</div>
|
|
2129
|
+
<div class="h-4 bg-yellow-300">300</div>
|
|
2130
|
+
<div class="h-4 bg-yellow-400">400</div>
|
|
2131
|
+
<div class="h-4 bg-yellow-500">500</div>
|
|
2132
|
+
<div class="h-4 bg-yellow-600">600</div>
|
|
2133
|
+
<div class="h-4 bg-yellow-700">700</div>
|
|
2134
|
+
<div class="h-4 bg-yellow-800">800</div>
|
|
2135
|
+
<div class="h-4 bg-yellow-900">900</div>
|
|
2136
|
+
<div class="h-4 bg-yellow-950">950</div>
|
|
2137
|
+
</div>
|
|
2138
|
+
</div>
|
|
2139
|
+
<div>
|
|
2140
|
+
<div class="grid-0 cols-12 tac va-c">
|
|
2141
|
+
<p class="tal">Lime</p>
|
|
2142
|
+
<div class="h-4 bg-lime-50">50</div>
|
|
2143
|
+
<div class="h-4 bg-lime-100">100</div>
|
|
2144
|
+
<div class="h-4 bg-lime-200">200</div>
|
|
2145
|
+
<div class="h-4 bg-lime-300">300</div>
|
|
2146
|
+
<div class="h-4 bg-lime-400">400</div>
|
|
2147
|
+
<div class="h-4 bg-lime-500">500</div>
|
|
2148
|
+
<div class="h-4 bg-lime-600">600</div>
|
|
2149
|
+
<div class="h-4 bg-lime-700">700</div>
|
|
2150
|
+
<div class="h-4 bg-lime-800">800</div>
|
|
2151
|
+
<div class="h-4 bg-lime-900">900</div>
|
|
2152
|
+
<div class="h-4 bg-lime-950">950</div>
|
|
2153
|
+
</div>
|
|
2154
|
+
</div>
|
|
2155
|
+
<div>
|
|
2156
|
+
<div class="grid-0 cols-12 tac va-c">
|
|
2157
|
+
<p class="tal">Green</p>
|
|
2158
|
+
<div class="h-4 bg-green-50">50</div>
|
|
2159
|
+
<div class="h-4 bg-green-100">100</div>
|
|
2160
|
+
<div class="h-4 bg-green-200">200</div>
|
|
2161
|
+
<div class="h-4 bg-green-300">300</div>
|
|
2162
|
+
<div class="h-4 bg-green-400">400</div>
|
|
2163
|
+
<div class="h-4 bg-green-500">500</div>
|
|
2164
|
+
<div class="h-4 bg-green-600">600</div>
|
|
2165
|
+
<div class="h-4 bg-green-700">700</div>
|
|
2166
|
+
<div class="h-4 bg-green-800">800</div>
|
|
2167
|
+
<div class="h-4 bg-green-900">900</div>
|
|
2168
|
+
<div class="h-4 bg-green-950">950</div>
|
|
2169
|
+
</div>
|
|
2170
|
+
</div>
|
|
2171
|
+
<div>
|
|
2172
|
+
<div class="grid-0 cols-12 tac va-c">
|
|
2173
|
+
<p class="tal">Emerald</p>
|
|
2174
|
+
<div class="h-4 bg-emerald-50">50</div>
|
|
2175
|
+
<div class="h-4 bg-emerald-100">100</div>
|
|
2176
|
+
<div class="h-4 bg-emerald-200">200</div>
|
|
2177
|
+
<div class="h-4 bg-emerald-300">300</div>
|
|
2178
|
+
<div class="h-4 bg-emerald-400">400</div>
|
|
2179
|
+
<div class="h-4 bg-emerald-500">500</div>
|
|
2180
|
+
<div class="h-4 bg-emerald-600">600</div>
|
|
2181
|
+
<div class="h-4 bg-emerald-700">700</div>
|
|
2182
|
+
<div class="h-4 bg-emerald-800">800</div>
|
|
2183
|
+
<div class="h-4 bg-emerald-900">900</div>
|
|
2184
|
+
<div class="h-4 bg-emerald-950">950</div>
|
|
2185
|
+
</div>
|
|
2186
|
+
</div>
|
|
2187
|
+
<div>
|
|
2188
|
+
<div class="grid-0 cols-12 tac va-c">
|
|
2189
|
+
<p class="tal">Teal</p>
|
|
2190
|
+
<div class="h-4 bg-teal-50">50</div>
|
|
2191
|
+
<div class="h-4 bg-teal-100">100</div>
|
|
2192
|
+
<div class="h-4 bg-teal-200">200</div>
|
|
2193
|
+
<div class="h-4 bg-teal-300">300</div>
|
|
2194
|
+
<div class="h-4 bg-teal-400">400</div>
|
|
2195
|
+
<div class="h-4 bg-teal-500">500</div>
|
|
2196
|
+
<div class="h-4 bg-teal-600">600</div>
|
|
2197
|
+
<div class="h-4 bg-teal-700">700</div>
|
|
2198
|
+
<div class="h-4 bg-teal-800">800</div>
|
|
2199
|
+
<div class="h-4 bg-teal-900">900</div>
|
|
2200
|
+
<div class="h-4 bg-teal-950">950</div>
|
|
2201
|
+
</div>
|
|
2202
|
+
</div>
|
|
2203
|
+
<div>
|
|
2204
|
+
<div class="grid-0 cols-12 tac va-c">
|
|
2205
|
+
<p class="tal">Cyan</p>
|
|
2206
|
+
<div class="h-4 bg-cyan-50">50</div>
|
|
2207
|
+
<div class="h-4 bg-cyan-100">100</div>
|
|
2208
|
+
<div class="h-4 bg-cyan-200">200</div>
|
|
2209
|
+
<div class="h-4 bg-cyan-300">300</div>
|
|
2210
|
+
<div class="h-4 bg-cyan-400">400</div>
|
|
2211
|
+
<div class="h-4 bg-cyan-500">500</div>
|
|
2212
|
+
<div class="h-4 bg-cyan-600">600</div>
|
|
2213
|
+
<div class="h-4 bg-cyan-700">700</div>
|
|
2214
|
+
<div class="h-4 bg-cyan-800">800</div>
|
|
2215
|
+
<div class="h-4 bg-cyan-900">900</div>
|
|
2216
|
+
<div class="h-4 bg-cyan-950">950</div>
|
|
2217
|
+
</div>
|
|
2218
|
+
</div>
|
|
2219
|
+
<div>
|
|
2220
|
+
<div class="grid-0 cols-12 tac va-c">
|
|
2221
|
+
<p class="tal">Sky</p>
|
|
2222
|
+
<div class="h-4 bg-sky-50">50</div>
|
|
2223
|
+
<div class="h-4 bg-sky-100">100</div>
|
|
2224
|
+
<div class="h-4 bg-sky-200">200</div>
|
|
2225
|
+
<div class="h-4 bg-sky-300">300</div>
|
|
2226
|
+
<div class="h-4 bg-sky-400">400</div>
|
|
2227
|
+
<div class="h-4 bg-sky-500">500</div>
|
|
2228
|
+
<div class="h-4 bg-sky-600">600</div>
|
|
2229
|
+
<div class="h-4 bg-sky-700">700</div>
|
|
2230
|
+
<div class="h-4 bg-sky-800">800</div>
|
|
2231
|
+
<div class="h-4 bg-sky-900">900</div>
|
|
2232
|
+
<div class="h-4 bg-sky-950">950</div>
|
|
2233
|
+
</div>
|
|
2234
|
+
</div>
|
|
2235
|
+
<div>
|
|
2236
|
+
<div class="grid-0 cols-12 tac va-c">
|
|
2237
|
+
<p class="tal">Blue</p>
|
|
2238
|
+
<div class="h-4 bg-blue-50">50</div>
|
|
2239
|
+
<div class="h-4 bg-blue-100">100</div>
|
|
2240
|
+
<div class="h-4 bg-blue-200">200</div>
|
|
2241
|
+
<div class="h-4 bg-blue-300">300</div>
|
|
2242
|
+
<div class="h-4 bg-blue-400">400</div>
|
|
2243
|
+
<div class="h-4 bg-blue-500">500</div>
|
|
2244
|
+
<div class="h-4 bg-blue-600">600</div>
|
|
2245
|
+
<div class="h-4 bg-blue-700">700</div>
|
|
2246
|
+
<div class="h-4 bg-blue-800">800</div>
|
|
2247
|
+
<div class="h-4 bg-blue-900">900</div>
|
|
2248
|
+
<div class="h-4 bg-blue-950">950</div>
|
|
2249
|
+
</div>
|
|
2250
|
+
</div>
|
|
2251
|
+
<div>
|
|
2252
|
+
<div class="grid-0 cols-12 tac va-c">
|
|
2253
|
+
<p class="tal">Indigo</p>
|
|
2254
|
+
<div class="h-4 bg-indigo-50">50</div>
|
|
2255
|
+
<div class="h-4 bg-indigo-100">100</div>
|
|
2256
|
+
<div class="h-4 bg-indigo-200">200</div>
|
|
2257
|
+
<div class="h-4 bg-indigo-300">300</div>
|
|
2258
|
+
<div class="h-4 bg-indigo-400">400</div>
|
|
2259
|
+
<div class="h-4 bg-indigo-500">500</div>
|
|
2260
|
+
<div class="h-4 bg-indigo-600">600</div>
|
|
2261
|
+
<div class="h-4 bg-indigo-700">700</div>
|
|
2262
|
+
<div class="h-4 bg-indigo-800">800</div>
|
|
2263
|
+
<div class="h-4 bg-indigo-900">900</div>
|
|
2264
|
+
<div class="h-4 bg-indigo-950">950</div>
|
|
2265
|
+
</div>
|
|
2266
|
+
</div>
|
|
2267
|
+
<div>
|
|
2268
|
+
<div class="grid-0 cols-12 tac va-c">
|
|
2269
|
+
<p class="tal">Violet</p>
|
|
2270
|
+
<div class="h-4 bg-violet-50">50</div>
|
|
2271
|
+
<div class="h-4 bg-violet-100">100</div>
|
|
2272
|
+
<div class="h-4 bg-violet-200">200</div>
|
|
2273
|
+
<div class="h-4 bg-violet-300">300</div>
|
|
2274
|
+
<div class="h-4 bg-violet-400">400</div>
|
|
2275
|
+
<div class="h-4 bg-violet-500">500</div>
|
|
2276
|
+
<div class="h-4 bg-violet-600">600</div>
|
|
2277
|
+
<div class="h-4 bg-violet-700">700</div>
|
|
2278
|
+
<div class="h-4 bg-violet-800">800</div>
|
|
2279
|
+
<div class="h-4 bg-violet-900">900</div>
|
|
2280
|
+
<div class="h-4 bg-violet-950">950</div>
|
|
2281
|
+
</div>
|
|
2282
|
+
</div>
|
|
2283
|
+
<div>
|
|
2284
|
+
<div class="grid-0 cols-12 tac va-c">
|
|
2285
|
+
<p class="tal">Purple</p>
|
|
2286
|
+
<div class="h-4 bg-purple-50">50</div>
|
|
2287
|
+
<div class="h-4 bg-purple-100">100</div>
|
|
2288
|
+
<div class="h-4 bg-purple-200">200</div>
|
|
2289
|
+
<div class="h-4 bg-purple-300">300</div>
|
|
2290
|
+
<div class="h-4 bg-purple-400">400</div>
|
|
2291
|
+
<div class="h-4 bg-purple-500">500</div>
|
|
2292
|
+
<div class="h-4 bg-purple-600">600</div>
|
|
2293
|
+
<div class="h-4 bg-purple-700">700</div>
|
|
2294
|
+
<div class="h-4 bg-purple-800">800</div>
|
|
2295
|
+
<div class="h-4 bg-purple-900">900</div>
|
|
2296
|
+
<div class="h-4 bg-purple-950">950</div>
|
|
2297
|
+
</div>
|
|
2298
|
+
</div>
|
|
2299
|
+
<div>
|
|
2300
|
+
<div class="grid-0 cols-12 tac va-c">
|
|
2301
|
+
<p class="tal">Fuchsia</p>
|
|
2302
|
+
<div class="h-4 bg-fuchsia-50">50</div>
|
|
2303
|
+
<div class="h-4 bg-fuchsia-100">100</div>
|
|
2304
|
+
<div class="h-4 bg-fuchsia-200">200</div>
|
|
2305
|
+
<div class="h-4 bg-fuchsia-300">300</div>
|
|
2306
|
+
<div class="h-4 bg-fuchsia-400">400</div>
|
|
2307
|
+
<div class="h-4 bg-fuchsia-500">500</div>
|
|
2308
|
+
<div class="h-4 bg-fuchsia-600">600</div>
|
|
2309
|
+
<div class="h-4 bg-fuchsia-700">700</div>
|
|
2310
|
+
<div class="h-4 bg-fuchsia-800">800</div>
|
|
2311
|
+
<div class="h-4 bg-fuchsia-900">900</div>
|
|
2312
|
+
<div class="h-4 bg-fuchsia-950">950</div>
|
|
2313
|
+
</div>
|
|
2314
|
+
</div>
|
|
2315
|
+
<div>
|
|
2316
|
+
<div class="grid-0 cols-12 tac va-c">
|
|
2317
|
+
<p class="tal">Pink</p>
|
|
2318
|
+
<div class="h-4 bg-pink-50">50</div>
|
|
2319
|
+
<div class="h-4 bg-pink-100">100</div>
|
|
2320
|
+
<div class="h-4 bg-pink-200">200</div>
|
|
2321
|
+
<div class="h-4 bg-pink-300">300</div>
|
|
2322
|
+
<div class="h-4 bg-pink-400">400</div>
|
|
2323
|
+
<div class="h-4 bg-pink-500">500</div>
|
|
2324
|
+
<div class="h-4 bg-pink-600">600</div>
|
|
2325
|
+
<div class="h-4 bg-pink-700">700</div>
|
|
2326
|
+
<div class="h-4 bg-pink-800">800</div>
|
|
2327
|
+
<div class="h-4 bg-pink-900">900</div>
|
|
2328
|
+
<div class="h-4 bg-pink-950">950</div>
|
|
2329
|
+
</div>
|
|
2330
|
+
</div>
|
|
2331
|
+
<div>
|
|
2332
|
+
<div class="grid-0 cols-12 tac va-c">
|
|
2333
|
+
<p class="tal">Rose</p>
|
|
2334
|
+
<div class="h-4 bg-rose-50">50</div>
|
|
2335
|
+
<div class="h-4 bg-rose-100">100</div>
|
|
2336
|
+
<div class="h-4 bg-rose-200">200</div>
|
|
2337
|
+
<div class="h-4 bg-rose-300">300</div>
|
|
2338
|
+
<div class="h-4 bg-rose-400">400</div>
|
|
2339
|
+
<div class="h-4 bg-rose-500">500</div>
|
|
2340
|
+
<div class="h-4 bg-rose-600">600</div>
|
|
2341
|
+
<div class="h-4 bg-rose-700">700</div>
|
|
2342
|
+
<div class="h-4 bg-rose-800">800</div>
|
|
2343
|
+
<div class="h-4 bg-rose-900">900</div>
|
|
2344
|
+
<div class="h-4 bg-rose-950">950</div>
|
|
2345
|
+
</div>
|
|
2346
|
+
</div>
|
|
2347
|
+
</section>
|
|
2348
|
+
|
|
2349
|
+
</div>
|
|
2350
|
+
<div id="app"></div>
|
|
2351
|
+
<script type="module" src="/main.js"></script>
|
|
2236
2352
|
</body>
|
|
2237
2353
|
|
|
2238
2354
|
</html>
|