material-inspired-component-library 1.2.2 → 1.3.0
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/README.md +10 -0
- package/components/button/README.md +1 -1
- package/components/button/index.scss +52 -79
- package/components/card/index.scss +28 -29
- package/components/checkbox/index.scss +0 -5
- package/components/dialog/index.scss +11 -7
- package/components/iconbutton/README.md +1 -1
- package/components/iconbutton/index.scss +46 -80
- package/components/list/index.scss +39 -30
- package/components/list/index.ts +10 -9
- package/components/menu/README.md +67 -4
- package/components/menu/index.scss +29 -29
- package/components/menu/index.ts +47 -16
- package/components/navigationrail/README.md +99 -0
- package/components/navigationrail/index.scss +157 -0
- package/components/radio/index.scss +21 -11
- package/components/select/index.scss +5 -11
- package/components/textfield/index.scss +8 -2
- package/dist/bottomsheet.css +1 -1
- package/dist/button.css +1 -1
- package/dist/card.css +1 -1
- package/dist/checkbox.css +1 -1
- package/dist/components/menu/index.d.ts +0 -11
- package/dist/dialog.css +1 -1
- package/dist/iconbutton.css +1 -1
- package/dist/list.css +1 -1
- package/dist/menu.css +1 -1
- package/dist/micl.css +1 -1
- package/dist/micl.js +1 -1
- package/dist/navigationrail.css +1 -0
- package/dist/navigationrail.js +1 -0
- package/dist/radio.css +1 -1
- package/dist/select.css +1 -1
- package/dist/slider.css +1 -1
- package/dist/switch.css +1 -1
- package/dist/textfield.css +1 -1
- package/docs/docs.js +2 -2
- package/docs/index.html +3 -1
- package/docs/menu.html +183 -3
- package/docs/micl.css +1 -1
- package/docs/micl.js +1 -1
- package/docs/navigationrail.html +75 -0
- package/micl.ts +10 -8
- package/package.json +7 -7
- package/styles/statelayer.scss +14 -0
- package/styles.scss +1 -1
- package/webpack.config.js +37 -0
- package/styles/ripple.scss +0 -50
package/docs/menu.html
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>MICL Menus</title>
|
|
7
7
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
|
|
8
|
-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=check,
|
|
8
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_right,check,dark_mode,group,home,keyboard_command_key,newspaper,person,settings&display=block">
|
|
9
9
|
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
|
|
10
10
|
<link rel="stylesheet" href="micl.css">
|
|
11
11
|
<link rel="stylesheet" href="docs.css">
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
</li>
|
|
71
71
|
<li class="micl-list-item-two">
|
|
72
72
|
<label>
|
|
73
|
-
<span class="micl-list-item__icon
|
|
73
|
+
<span class="micl-list-item__icon"></span>
|
|
74
74
|
<span class="micl-list-item__text">
|
|
75
75
|
<span class="micl-list-item__headline">Person</span>
|
|
76
76
|
<span class="micl-list-item__supporting-text">Are you an administrator?</span>
|
|
@@ -86,11 +86,11 @@
|
|
|
86
86
|
</span>
|
|
87
87
|
</li>
|
|
88
88
|
<li class="micl-list-item-two micl-list-item__divider">
|
|
89
|
-
<span class="micl-list-item__icon material-symbols-outlined">confirmation_number</span>
|
|
90
89
|
<span class="micl-list-item__text">
|
|
91
90
|
<span class="micl-list-item__headline">Contact</span>
|
|
92
91
|
<span class="micl-list-item__supporting-text">Call me!</span>
|
|
93
92
|
</span>
|
|
93
|
+
<span class="micl-list-item__icon material-symbols-outlined">keyboard_command_key</span>
|
|
94
94
|
</li>
|
|
95
95
|
</ul>
|
|
96
96
|
</nav>
|
|
@@ -137,6 +137,186 @@
|
|
|
137
137
|
</ul>
|
|
138
138
|
</nav>
|
|
139
139
|
</div>
|
|
140
|
+
|
|
141
|
+
<div style="position:relative">
|
|
142
|
+
<button type="button" class="micl-button-tonal-m micl-button--square" popovertarget="mymenu4">Open Menu with Sub-Menus</button>
|
|
143
|
+
<nav id="mymenu4" class="micl-menu" popover>
|
|
144
|
+
<ul class="micl-list">
|
|
145
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
146
|
+
<button popovertarget="mymenu5" tabindex="-1">
|
|
147
|
+
<span class="micl-list-item__text">
|
|
148
|
+
<span class="micl-list-item__headline">Europe</span>
|
|
149
|
+
</span>
|
|
150
|
+
<span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
|
|
151
|
+
</button>
|
|
152
|
+
<nav id="mymenu5" class="micl-menu" popover>
|
|
153
|
+
<ul class="micl-list">
|
|
154
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
155
|
+
<span class="micl-list-item__text">
|
|
156
|
+
<span class="micl-list-item__headline">Norway</span>
|
|
157
|
+
</span>
|
|
158
|
+
</li>
|
|
159
|
+
<li class="micl-list-item-one">
|
|
160
|
+
<span class="micl-list-item__text">
|
|
161
|
+
<span class="micl-list-item__headline">Sweden</span>
|
|
162
|
+
</span>
|
|
163
|
+
</li>
|
|
164
|
+
<li class="micl-list-item-one">
|
|
165
|
+
<span class="micl-list-item__text">
|
|
166
|
+
<span class="micl-list-item__headline">France</span>
|
|
167
|
+
</span>
|
|
168
|
+
</li>
|
|
169
|
+
<li class="micl-list-item-one">
|
|
170
|
+
<span class="micl-list-item__text">
|
|
171
|
+
<span class="micl-list-item__headline">Italy</span>
|
|
172
|
+
</span>
|
|
173
|
+
</li>
|
|
174
|
+
<li class="micl-list-item-one">
|
|
175
|
+
<span class="micl-list-item__text">
|
|
176
|
+
<span class="micl-list-item__headline">Slovenia</span>
|
|
177
|
+
</span>
|
|
178
|
+
</li>
|
|
179
|
+
</ul>
|
|
180
|
+
</nav>
|
|
181
|
+
</li>
|
|
182
|
+
<li class="micl-list-item-one">
|
|
183
|
+
<button popovertarget="mymenu6" tabindex="-1">
|
|
184
|
+
<span class="micl-list-item__text">
|
|
185
|
+
<span class="micl-list-item__headline">Africa</span>
|
|
186
|
+
</span>
|
|
187
|
+
<span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
|
|
188
|
+
</button>
|
|
189
|
+
<nav id="mymenu6" class="micl-menu" popover>
|
|
190
|
+
<ul class="micl-list">
|
|
191
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
192
|
+
<span class="micl-list-item__text">
|
|
193
|
+
<span class="micl-list-item__headline">Egypt</span>
|
|
194
|
+
</span>
|
|
195
|
+
</li>
|
|
196
|
+
<li class="micl-list-item-one">
|
|
197
|
+
<span class="micl-list-item__text">
|
|
198
|
+
<span class="micl-list-item__headline">Cameroon</span>
|
|
199
|
+
</span>
|
|
200
|
+
</li>
|
|
201
|
+
<li class="micl-list-item-one">
|
|
202
|
+
<span class="micl-list-item__text">
|
|
203
|
+
<span class="micl-list-item__headline">Botswana</span>
|
|
204
|
+
</span>
|
|
205
|
+
</li>
|
|
206
|
+
<li class="micl-list-item-one">
|
|
207
|
+
<span class="micl-list-item__text">
|
|
208
|
+
<span class="micl-list-item__headline">Ghana</span>
|
|
209
|
+
</span>
|
|
210
|
+
</li>
|
|
211
|
+
<li class="micl-list-item-one">
|
|
212
|
+
<span class="micl-list-item__text">
|
|
213
|
+
<span class="micl-list-item__headline">Niger</span>
|
|
214
|
+
</span>
|
|
215
|
+
</li>
|
|
216
|
+
</ul>
|
|
217
|
+
</nav>
|
|
218
|
+
</li>
|
|
219
|
+
<li class="micl-list-item-one">
|
|
220
|
+
<button popovertarget="mymenu7" tabindex="-1">
|
|
221
|
+
<span class="micl-list-item__text">
|
|
222
|
+
<span class="micl-list-item__headline">Asia</span>
|
|
223
|
+
</span>
|
|
224
|
+
<span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
|
|
225
|
+
</button>
|
|
226
|
+
<nav id="mymenu7" class="micl-menu" popover>
|
|
227
|
+
<ul class="micl-list">
|
|
228
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
229
|
+
<span class="micl-list-item__text">
|
|
230
|
+
<span class="micl-list-item__headline">Bhutan</span>
|
|
231
|
+
</span>
|
|
232
|
+
</li>
|
|
233
|
+
<li class="micl-list-item-one">
|
|
234
|
+
<span class="micl-list-item__text">
|
|
235
|
+
<span class="micl-list-item__headline">India</span>
|
|
236
|
+
</span>
|
|
237
|
+
</li>
|
|
238
|
+
<li class="micl-list-item-one">
|
|
239
|
+
<span class="micl-list-item__text">
|
|
240
|
+
<span class="micl-list-item__headline">Jordan</span>
|
|
241
|
+
</span>
|
|
242
|
+
</li>
|
|
243
|
+
<li class="micl-list-item-one">
|
|
244
|
+
<span class="micl-list-item__text">
|
|
245
|
+
<span class="micl-list-item__headline">Vietnam</span>
|
|
246
|
+
</span>
|
|
247
|
+
</li>
|
|
248
|
+
<li class="micl-list-item-one">
|
|
249
|
+
<span class="micl-list-item__text">
|
|
250
|
+
<span class="micl-list-item__headline">Mongolia</span>
|
|
251
|
+
</span>
|
|
252
|
+
</li>
|
|
253
|
+
</ul>
|
|
254
|
+
</nav>
|
|
255
|
+
</li>
|
|
256
|
+
<li class="micl-list-item-one">
|
|
257
|
+
<button popovertarget="mymenu8" tabindex="-1">
|
|
258
|
+
<span class="micl-list-item__text">
|
|
259
|
+
<span class="micl-list-item__headline">America</span>
|
|
260
|
+
</span>
|
|
261
|
+
<span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
|
|
262
|
+
</button>
|
|
263
|
+
<nav id="mymenu8" class="micl-menu" popover>
|
|
264
|
+
<ul class="micl-list">
|
|
265
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
266
|
+
<button popovertarget="mymenu9" tabindex="-1">
|
|
267
|
+
<span class="micl-list-item__text">
|
|
268
|
+
<span class="micl-list-item__headline">North America</span>
|
|
269
|
+
</span>
|
|
270
|
+
<span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
|
|
271
|
+
</button>
|
|
272
|
+
<nav id="mymenu9" class="micl-menu" popover>
|
|
273
|
+
<ul class="micl-list">
|
|
274
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
275
|
+
<span class="micl-list-item__text">
|
|
276
|
+
<span class="micl-list-item__headline">Mexico</span>
|
|
277
|
+
</span>
|
|
278
|
+
</li>
|
|
279
|
+
<li class="micl-list-item-one">
|
|
280
|
+
<span class="micl-list-item__text">
|
|
281
|
+
<span class="micl-list-item__headline">Canada</span>
|
|
282
|
+
</span>
|
|
283
|
+
</li>
|
|
284
|
+
<li class="micl-list-item-one">
|
|
285
|
+
<span class="micl-list-item__text">
|
|
286
|
+
<span class="micl-list-item__headline">USA</span>
|
|
287
|
+
</span>
|
|
288
|
+
</li>
|
|
289
|
+
</ul>
|
|
290
|
+
</nav>
|
|
291
|
+
</li>
|
|
292
|
+
<li class="micl-list-item-one">
|
|
293
|
+
<button popovertarget="mymenu10" tabindex="-1">
|
|
294
|
+
<span class="micl-list-item__text">
|
|
295
|
+
<span class="micl-list-item__headline">South America</span>
|
|
296
|
+
</span>
|
|
297
|
+
<span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
|
|
298
|
+
</button>
|
|
299
|
+
<nav id="mymenu10" class="micl-menu" popover>
|
|
300
|
+
<ul class="micl-list">
|
|
301
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
302
|
+
<span class="micl-list-item__text">
|
|
303
|
+
<span class="micl-list-item__headline">Brazil</span>
|
|
304
|
+
</span>
|
|
305
|
+
</li>
|
|
306
|
+
<li class="micl-list-item-one">
|
|
307
|
+
<span class="micl-list-item__text">
|
|
308
|
+
<span class="micl-list-item__headline">Peru</span>
|
|
309
|
+
</span>
|
|
310
|
+
</li>
|
|
311
|
+
</ul>
|
|
312
|
+
</nav>
|
|
313
|
+
</li>
|
|
314
|
+
</ul>
|
|
315
|
+
</nav>
|
|
316
|
+
</li>
|
|
317
|
+
</ul>
|
|
318
|
+
</nav>
|
|
319
|
+
</div>
|
|
140
320
|
</div>
|
|
141
321
|
</div>
|
|
142
322
|
</div>
|