material-inspired-component-library 7.0.2 → 8.0.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/CLAUDE.md +42 -0
- package/README.md +6 -0
- package/components/accordion/README.md +6 -3
- package/components/button/index.scss +10 -6
- package/components/card/README.md +4 -0
- package/components/card/index.scss +159 -150
- package/components/checkbox/index.scss +11 -6
- package/components/datepicker/index.ts +9 -9
- package/components/dialog/index.scss +5 -6
- package/components/iconbutton/index.scss +10 -6
- package/components/list/README.md +191 -32
- package/components/list/index.scss +256 -190
- package/components/list/index.ts +100 -100
- package/components/menu/README.md +199 -10
- package/components/menu/index.scss +224 -47
- package/components/menu/index.ts +74 -37
- package/components/navigationrail/index.scss +75 -69
- package/components/radio/index.scss +11 -6
- package/components/select/README.md +42 -5
- package/components/select/index.scss +39 -79
- package/components/stepper/index.scss +1 -5
- package/components/textfield/index.scss +1 -1
- package/components/textfield/index.ts +2 -2
- package/dist/alert.css +1 -1
- package/dist/appbar.css +1 -1
- package/dist/badge.css +1 -1
- 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/list/index.d.ts +2 -2
- package/dist/datepicker.css +1 -1
- package/dist/dialog.css +1 -1
- package/dist/divider.css +1 -1
- package/dist/foundations.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 -1
- package/dist/radio.css +1 -1
- package/dist/select.css +1 -1
- package/dist/sidesheet.css +1 -1
- package/dist/slider.css +1 -1
- package/dist/snackbar.css +1 -1
- package/dist/stepper.css +1 -1
- package/dist/switch.css +1 -1
- package/dist/textfield.css +1 -1
- package/dist/timepicker.css +1 -1
- package/docs/accordion.html +24 -24
- package/docs/bottomsheet.html +1 -4
- package/docs/dialog.html +1 -1
- package/docs/index.html +4 -4
- package/docs/list.html +38 -22
- package/docs/menu.html +246 -41
- package/docs/micl.css +1 -1
- package/docs/micl.js +1 -1
- package/docs/select.html +68 -19
- package/docs/shapes.html +85 -0
- package/foundations/index.scss +0 -1
- package/micl.ts +6 -1
- package/package.json +3 -3
- package/styles/README.md +4 -4
- package/styles/shapes.scss +81 -0
- package/styles/statelayer.scss +10 -0
package/docs/menu.html
CHANGED
|
@@ -8,15 +8,15 @@
|
|
|
8
8
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
9
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
10
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
|
|
11
|
-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_right,check,content_copy,dark_mode,group,home,keyboard_command_key,newspaper,settings&display=block">
|
|
11
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_right,check,content_copy,content_cut,content_paste,dark_mode,delete,file_open,group,help,home,keyboard_command_key,newspaper,note_add,open_in_new,redo,settings,undo&display=block">
|
|
12
12
|
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
|
|
13
13
|
<link rel="stylesheet" href="micl.css">
|
|
14
14
|
<link rel="stylesheet" href="docs.css">
|
|
15
15
|
<style>
|
|
16
|
-
.micl-list-item-
|
|
16
|
+
.micl-list-item-two:has(.micl-checkbox) .micl-list-item__icon {
|
|
17
17
|
visibility: hidden;
|
|
18
18
|
}
|
|
19
|
-
.micl-list-item-
|
|
19
|
+
.micl-list-item-two:has(.micl-checkbox:checked) .micl-list-item__icon {
|
|
20
20
|
visibility: visible;
|
|
21
21
|
}
|
|
22
22
|
</style>
|
|
@@ -44,8 +44,21 @@
|
|
|
44
44
|
<p class="micl-card__supporting-text">Click a button to open one of the MICL menus.</p>
|
|
45
45
|
<div class="micl-card__content docs-buttons">
|
|
46
46
|
<div style="position:relative">
|
|
47
|
-
<button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu1">
|
|
47
|
+
<button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu1">Single-item menu</button>
|
|
48
48
|
<nav id="mymenu1" class="micl-menu" popover>
|
|
49
|
+
<ul class="micl-list">
|
|
50
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
51
|
+
<span class="micl-list-item__text">
|
|
52
|
+
<span class="micl-list-item__headline">Only one item</span>
|
|
53
|
+
</span>
|
|
54
|
+
</li>
|
|
55
|
+
</ul>
|
|
56
|
+
</nav>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<div style="position:relative">
|
|
60
|
+
<button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu2">Basic Menu</button>
|
|
61
|
+
<nav id="mymenu2" class="micl-menu" popover>
|
|
49
62
|
<ul class="micl-list">
|
|
50
63
|
<li class="micl-list-item-one" tabindex="0">
|
|
51
64
|
<span class="micl-list-item__text">
|
|
@@ -67,8 +80,134 @@
|
|
|
67
80
|
</div>
|
|
68
81
|
|
|
69
82
|
<div style="position:relative">
|
|
70
|
-
<button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="
|
|
71
|
-
<nav id="
|
|
83
|
+
<button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu3">Menu with leading icons + divider</button>
|
|
84
|
+
<nav id="mymenu3" class="micl-menu" popover>
|
|
85
|
+
<ul class="micl-list">
|
|
86
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
87
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">undo</span>
|
|
88
|
+
<span class="micl-list-item__text">
|
|
89
|
+
<span class="micl-list-item__headline">Undo</span>
|
|
90
|
+
</span>
|
|
91
|
+
</li>
|
|
92
|
+
<li class="micl-list-item-one micl-list-item--disabled">
|
|
93
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">redo</span>
|
|
94
|
+
<span class="micl-list-item__text">
|
|
95
|
+
<span class="micl-list-item__headline">Redo</span>
|
|
96
|
+
</span>
|
|
97
|
+
</li>
|
|
98
|
+
<li role="separator" class="micl-divider-inset"></li>
|
|
99
|
+
<li class="micl-list-item-one">
|
|
100
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">content_cut</span>
|
|
101
|
+
<span class="micl-list-item__text">
|
|
102
|
+
<span class="micl-list-item__headline">Cut</span>
|
|
103
|
+
</span>
|
|
104
|
+
</li>
|
|
105
|
+
<li class="micl-list-item-one">
|
|
106
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">content_copy</span>
|
|
107
|
+
<span class="micl-list-item__text">
|
|
108
|
+
<span class="micl-list-item__headline">Copy</span>
|
|
109
|
+
</span>
|
|
110
|
+
</li>
|
|
111
|
+
<li class="micl-list-item-one">
|
|
112
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">content_paste</span>
|
|
113
|
+
<span class="micl-list-item__text">
|
|
114
|
+
<span class="micl-list-item__headline">Paste</span>
|
|
115
|
+
</span>
|
|
116
|
+
</li>
|
|
117
|
+
</ul>
|
|
118
|
+
</nav>
|
|
119
|
+
</div>
|
|
120
|
+
|
|
121
|
+
<div style="position:relative">
|
|
122
|
+
<button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu4">Grouped menu with trailing icons</button>
|
|
123
|
+
<nav id="mymenu4" class="micl-menu" popover>
|
|
124
|
+
<ul class="micl-list">
|
|
125
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
126
|
+
<span class="micl-list-item__text">
|
|
127
|
+
<span class="micl-list-item__headline">Undo</span>
|
|
128
|
+
</span>
|
|
129
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">undo</span>
|
|
130
|
+
</li>
|
|
131
|
+
<li class="micl-list-item-one micl-list-item--disabled">
|
|
132
|
+
<span class="micl-list-item__text">
|
|
133
|
+
<span class="micl-list-item__headline">Redo</span>
|
|
134
|
+
</span>
|
|
135
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">redo</span>
|
|
136
|
+
</li>
|
|
137
|
+
</ul>
|
|
138
|
+
<ul class="micl-list">
|
|
139
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
140
|
+
<span class="micl-list-item__text">
|
|
141
|
+
<span class="micl-list-item__headline">Cut</span>
|
|
142
|
+
</span>
|
|
143
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">content_cut</span>
|
|
144
|
+
</li>
|
|
145
|
+
<li class="micl-list-item-one">
|
|
146
|
+
<span class="micl-list-item__text">
|
|
147
|
+
<span class="micl-list-item__headline">Copy</span>
|
|
148
|
+
</span>
|
|
149
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">content_copy</span>
|
|
150
|
+
</li>
|
|
151
|
+
<li class="micl-list-item-one">
|
|
152
|
+
<span class="micl-list-item__text">
|
|
153
|
+
<span class="micl-list-item__headline">Paste</span>
|
|
154
|
+
</span>
|
|
155
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">content_paste</span>
|
|
156
|
+
</li>
|
|
157
|
+
</ul>
|
|
158
|
+
</nav>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<div style="position:relative">
|
|
162
|
+
<button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu5">Menu with supporting text</button>
|
|
163
|
+
<nav id="mymenu5" class="micl-menu" popover>
|
|
164
|
+
<ul class="micl-list">
|
|
165
|
+
<li class="micl-list-item-two" tabindex="0">
|
|
166
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">group</span>
|
|
167
|
+
<span class="micl-list-item__text">
|
|
168
|
+
<span class="micl-list-item__headline">Number of employees</span>
|
|
169
|
+
<span class="micl-list-item__supporting-text">Currently + those who have signed a contract</span>
|
|
170
|
+
</span>
|
|
171
|
+
</li>
|
|
172
|
+
<li class="micl-list-item-two">
|
|
173
|
+
<span class="micl-list-item__icon" aria-hidden="true"></span>
|
|
174
|
+
<span class="micl-list-item__text">
|
|
175
|
+
<span class="micl-list-item__headline">Company cars</span>
|
|
176
|
+
<span class="micl-list-item__supporting-text">Available to our wonderful employees</span>
|
|
177
|
+
</span>
|
|
178
|
+
</li>
|
|
179
|
+
<li class="micl-list-item-two">
|
|
180
|
+
<a href="https://www.nytimes.com" target="_blank">
|
|
181
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">newspaper</span>
|
|
182
|
+
<span class="micl-list-item__text">
|
|
183
|
+
<span class="micl-list-item__headline">The New York Times</span>
|
|
184
|
+
<span class="micl-list-item__supporting-text">Clicking this item opens the front page of The New York Times</span>
|
|
185
|
+
</span>
|
|
186
|
+
</a>
|
|
187
|
+
</li>
|
|
188
|
+
<li class="micl-list-item-two">
|
|
189
|
+
<label>
|
|
190
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">check</span>
|
|
191
|
+
<span class="micl-list-item__text">
|
|
192
|
+
<span class="micl-list-item__headline">Select or Unselect</span>
|
|
193
|
+
<span class="micl-list-item__supporting-text">A check-mark before this text if the item is selected.</span>
|
|
194
|
+
</span>
|
|
195
|
+
<input type="checkbox" id="cb5" class="micl-checkbox" style="display:none" value="c5" checked>
|
|
196
|
+
</label>
|
|
197
|
+
</li>
|
|
198
|
+
</ul>
|
|
199
|
+
</nav>
|
|
200
|
+
</div>
|
|
201
|
+
|
|
202
|
+
<div style="position:relative">
|
|
203
|
+
<button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu6">Complex menu</button>
|
|
204
|
+
<nav id="mymenu6" class="micl-menu" popover>
|
|
205
|
+
<ul class="micl-list">
|
|
206
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
207
|
+
<span class="micl-list-item__text">Open in new window</span>
|
|
208
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">open_in_new</span>
|
|
209
|
+
</li>
|
|
210
|
+
</ul>
|
|
72
211
|
<ul class="micl-list">
|
|
73
212
|
<li class="micl-list-item-two" tabindex="0">
|
|
74
213
|
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">home</span>
|
|
@@ -84,7 +223,7 @@
|
|
|
84
223
|
<span class="micl-list-item__headline">Person</span>
|
|
85
224
|
<span class="micl-list-item__supporting-text">Are you an administrator?</span>
|
|
86
225
|
</span>
|
|
87
|
-
<input type="checkbox" id="
|
|
226
|
+
<input type="checkbox" id="cb6" class="micl-checkbox" value="c6">
|
|
88
227
|
</label>
|
|
89
228
|
</li>
|
|
90
229
|
<li class="micl-list-item-two">
|
|
@@ -94,7 +233,7 @@
|
|
|
94
233
|
<span class="micl-list-item__supporting-text">Change everything in the system</span>
|
|
95
234
|
</span>
|
|
96
235
|
</li>
|
|
97
|
-
<li role="separator" class="micl-divider"></li>
|
|
236
|
+
<li role="separator" class="micl-divider-inset"></li>
|
|
98
237
|
<li class="micl-list-item-two">
|
|
99
238
|
<span class="micl-list-item__text">
|
|
100
239
|
<span class="micl-list-item__headline">Contact</span>
|
|
@@ -103,14 +242,8 @@
|
|
|
103
242
|
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">keyboard_command_key</span>
|
|
104
243
|
</li>
|
|
105
244
|
</ul>
|
|
106
|
-
</nav>
|
|
107
|
-
</div>
|
|
108
|
-
|
|
109
|
-
<div style="position:relative">
|
|
110
|
-
<button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu3">Open Big Menu</button>
|
|
111
|
-
<nav id="mymenu3" class="micl-menu" popover>
|
|
112
245
|
<ul class="micl-list">
|
|
113
|
-
<li class="micl-list-item-
|
|
246
|
+
<li class="micl-list-item-two" tabindex="0">
|
|
114
247
|
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">group</span>
|
|
115
248
|
<span class="micl-list-item__text">
|
|
116
249
|
<span class="micl-list-item__headline">Number of employees</span>
|
|
@@ -118,30 +251,21 @@
|
|
|
118
251
|
</span>
|
|
119
252
|
<span class="micl-list-item__trailing-text">381</span>
|
|
120
253
|
</li>
|
|
121
|
-
<li class="micl-list-item-
|
|
254
|
+
<li class="micl-list-item-two">
|
|
122
255
|
<span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/1928_Model_A_Ford.jpg/330px-1928_Model_A_Ford.jpg)"></span>
|
|
123
256
|
<span class="micl-list-item__text">
|
|
124
257
|
<span class="micl-list-item__headline">Company cars</span>
|
|
125
258
|
<span class="micl-list-item__supporting-text">Available to our wonderful employees</span>
|
|
126
259
|
</span>
|
|
127
260
|
</li>
|
|
128
|
-
<li class="micl-list-item-
|
|
129
|
-
<a href="https://www.nytimes.com" target="_blank">
|
|
130
|
-
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">newspaper</span>
|
|
131
|
-
<span class="micl-list-item__text">
|
|
132
|
-
<span class="micl-list-item__headline">The New York Times</span>
|
|
133
|
-
<span class="micl-list-item__supporting-text">Clicking this item opens the front page of The New York Times</span>
|
|
134
|
-
</span>
|
|
135
|
-
</a>
|
|
136
|
-
</li>
|
|
137
|
-
<li class="micl-list-item-three">
|
|
261
|
+
<li class="micl-list-item-two">
|
|
138
262
|
<label>
|
|
139
263
|
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">check</span>
|
|
140
264
|
<span class="micl-list-item__text">
|
|
141
265
|
<span class="micl-list-item__headline">Select or Unselect</span>
|
|
142
266
|
<span class="micl-list-item__supporting-text">A check-mark before this text if the item is selected.</span>
|
|
143
267
|
</span>
|
|
144
|
-
<input type="checkbox" id="
|
|
268
|
+
<input type="checkbox" id="cb7" class="micl-checkbox" style="display:none" value="c7" checked>
|
|
145
269
|
</label>
|
|
146
270
|
</li>
|
|
147
271
|
</ul>
|
|
@@ -149,17 +273,17 @@
|
|
|
149
273
|
</div>
|
|
150
274
|
|
|
151
275
|
<div style="position:relative">
|
|
152
|
-
<button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="
|
|
153
|
-
<nav id="
|
|
276
|
+
<button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu7">Menu with sub-menus</button>
|
|
277
|
+
<nav id="mymenu7" class="micl-menu" popover>
|
|
154
278
|
<ul class="micl-list">
|
|
155
279
|
<li class="micl-list-item-one" tabindex="0">
|
|
156
|
-
<button popovertarget="
|
|
280
|
+
<button popovertarget="mymenu7-1">
|
|
157
281
|
<span class="micl-list-item__text">
|
|
158
282
|
<span class="micl-list-item__headline">Europe</span>
|
|
159
283
|
</span>
|
|
160
284
|
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">arrow_right</span>
|
|
161
285
|
</button>
|
|
162
|
-
<nav id="
|
|
286
|
+
<nav id="mymenu7-1" class="micl-menu" popover>
|
|
163
287
|
<ul class="micl-list">
|
|
164
288
|
<li class="micl-list-item-one" tabindex="0">
|
|
165
289
|
<span class="micl-list-item__text">
|
|
@@ -190,13 +314,13 @@
|
|
|
190
314
|
</nav>
|
|
191
315
|
</li>
|
|
192
316
|
<li class="micl-list-item-one">
|
|
193
|
-
<button popovertarget="
|
|
317
|
+
<button popovertarget="mymenu7-2">
|
|
194
318
|
<span class="micl-list-item__text">
|
|
195
319
|
<span class="micl-list-item__headline">Africa</span>
|
|
196
320
|
</span>
|
|
197
321
|
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">arrow_right</span>
|
|
198
322
|
</button>
|
|
199
|
-
<nav id="
|
|
323
|
+
<nav id="mymenu7-2" class="micl-menu" popover>
|
|
200
324
|
<ul class="micl-list">
|
|
201
325
|
<li class="micl-list-item-one" tabindex="0">
|
|
202
326
|
<span class="micl-list-item__text">
|
|
@@ -227,13 +351,13 @@
|
|
|
227
351
|
</nav>
|
|
228
352
|
</li>
|
|
229
353
|
<li class="micl-list-item-one">
|
|
230
|
-
<button popovertarget="mymenu7">
|
|
354
|
+
<button popovertarget="mymenu7-3">
|
|
231
355
|
<span class="micl-list-item__text">
|
|
232
356
|
<span class="micl-list-item__headline">Asia</span>
|
|
233
357
|
</span>
|
|
234
358
|
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">arrow_right</span>
|
|
235
359
|
</button>
|
|
236
|
-
<nav id="mymenu7" class="micl-menu" popover>
|
|
360
|
+
<nav id="mymenu7-3" class="micl-menu" popover>
|
|
237
361
|
<ul class="micl-list">
|
|
238
362
|
<li class="micl-list-item-one" tabindex="0">
|
|
239
363
|
<span class="micl-list-item__text">
|
|
@@ -264,22 +388,22 @@
|
|
|
264
388
|
</nav>
|
|
265
389
|
</li>
|
|
266
390
|
<li class="micl-list-item-one">
|
|
267
|
-
<button popovertarget="
|
|
391
|
+
<button popovertarget="mymenu7-4">
|
|
268
392
|
<span class="micl-list-item__text">
|
|
269
393
|
<span class="micl-list-item__headline">America</span>
|
|
270
394
|
</span>
|
|
271
395
|
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">arrow_right</span>
|
|
272
396
|
</button>
|
|
273
|
-
<nav id="
|
|
397
|
+
<nav id="mymenu7-4" class="micl-menu" popover>
|
|
274
398
|
<ul class="micl-list">
|
|
275
399
|
<li class="micl-list-item-one" tabindex="0">
|
|
276
|
-
<button popovertarget="
|
|
400
|
+
<button popovertarget="mymenu7-4-1">
|
|
277
401
|
<span class="micl-list-item__text">
|
|
278
402
|
<span class="micl-list-item__headline">North America</span>
|
|
279
403
|
</span>
|
|
280
404
|
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">arrow_right</span>
|
|
281
405
|
</button>
|
|
282
|
-
<nav id="
|
|
406
|
+
<nav id="mymenu7-4-1" class="micl-menu" popover>
|
|
283
407
|
<ul class="micl-list">
|
|
284
408
|
<li class="micl-list-item-one" tabindex="0">
|
|
285
409
|
<span class="micl-list-item__text">
|
|
@@ -300,13 +424,13 @@
|
|
|
300
424
|
</nav>
|
|
301
425
|
</li>
|
|
302
426
|
<li class="micl-list-item-one">
|
|
303
|
-
<button popovertarget="
|
|
427
|
+
<button popovertarget="mymenu7-4-2">
|
|
304
428
|
<span class="micl-list-item__text">
|
|
305
429
|
<span class="micl-list-item__headline">South America</span>
|
|
306
430
|
</span>
|
|
307
431
|
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">arrow_right</span>
|
|
308
432
|
</button>
|
|
309
|
-
<nav id="
|
|
433
|
+
<nav id="mymenu7-4-2" class="micl-menu" popover>
|
|
310
434
|
<ul class="micl-list">
|
|
311
435
|
<li class="micl-list-item-one" tabindex="0">
|
|
312
436
|
<span class="micl-list-item__text">
|
|
@@ -327,6 +451,87 @@
|
|
|
327
451
|
</ul>
|
|
328
452
|
</nav>
|
|
329
453
|
</div>
|
|
454
|
+
|
|
455
|
+
<div style="position:relative">
|
|
456
|
+
<button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu8">A vibrant menu</button>
|
|
457
|
+
<nav id="mymenu8" class="micl-menu micl-menu--vibrant" popover>
|
|
458
|
+
<ul class="micl-list">
|
|
459
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
460
|
+
<span class="micl-list-item__text">Open in new window</span>
|
|
461
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">open_in_new</span>
|
|
462
|
+
</li>
|
|
463
|
+
</ul>
|
|
464
|
+
<ul class="micl-list">
|
|
465
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
466
|
+
<span class="micl-list-item__text">Revert</span>
|
|
467
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">undo</span>
|
|
468
|
+
</li>
|
|
469
|
+
<li class="micl-list-item-one">
|
|
470
|
+
<span class="micl-list-item__text">Delete</span>
|
|
471
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">delete</span>
|
|
472
|
+
</li>
|
|
473
|
+
<li class="micl-list-item-one">
|
|
474
|
+
<span class="micl-list-item__text">Settings</span>
|
|
475
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">settings</span>
|
|
476
|
+
</li>
|
|
477
|
+
<li class="micl-list-item-one">
|
|
478
|
+
<label>
|
|
479
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">dark_mode</span>
|
|
480
|
+
<span class="micl-list-item__text">
|
|
481
|
+
<span class="micl-list-item__headline">Dark mode</span>
|
|
482
|
+
</span>
|
|
483
|
+
<input type="checkbox" id="cb8" class="micl-checkbox" value="dark" checked>
|
|
484
|
+
</label>
|
|
485
|
+
</li>
|
|
486
|
+
<li class="micl-list-item-one">
|
|
487
|
+
<span class="micl-list-item__text">Help & feedback</span>
|
|
488
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">help</span>
|
|
489
|
+
</li>
|
|
490
|
+
</ul>
|
|
491
|
+
</nav>
|
|
492
|
+
</div>
|
|
493
|
+
|
|
494
|
+
<div style="position:relative">
|
|
495
|
+
<button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu9">Menu with sections</button>
|
|
496
|
+
<nav id="mymenu9" class="micl-menu" popover>
|
|
497
|
+
<ul class="micl-list">
|
|
498
|
+
<li role="separator" class="micl-menu__section">Files</li>
|
|
499
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
500
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">note_add</span>
|
|
501
|
+
<span class="micl-list-item__text">
|
|
502
|
+
<span class="micl-list-item__headline">New</span>
|
|
503
|
+
</span>
|
|
504
|
+
</li>
|
|
505
|
+
<li class="micl-list-item-one">
|
|
506
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">file_open</span>
|
|
507
|
+
<span class="micl-list-item__text">
|
|
508
|
+
<span class="micl-list-item__headline">Open</span>
|
|
509
|
+
</span>
|
|
510
|
+
</li>
|
|
511
|
+
</ul>
|
|
512
|
+
<ul class="micl-list">
|
|
513
|
+
<li role="separator" class="micl-menu__section">Edit</li>
|
|
514
|
+
<li class="micl-list-item-one">
|
|
515
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">content_cut</span>
|
|
516
|
+
<span class="micl-list-item__text">
|
|
517
|
+
<span class="micl-list-item__headline">Cut</span>
|
|
518
|
+
</span>
|
|
519
|
+
</li>
|
|
520
|
+
<li class="micl-list-item-one">
|
|
521
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">content_copy</span>
|
|
522
|
+
<span class="micl-list-item__text">
|
|
523
|
+
<span class="micl-list-item__headline">Copy</span>
|
|
524
|
+
</span>
|
|
525
|
+
</li>
|
|
526
|
+
<li class="micl-list-item-one">
|
|
527
|
+
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">content_paste</span>
|
|
528
|
+
<span class="micl-list-item__text">
|
|
529
|
+
<span class="micl-list-item__headline">Paste</span>
|
|
530
|
+
</span>
|
|
531
|
+
</li>
|
|
532
|
+
</ul>
|
|
533
|
+
</nav>
|
|
534
|
+
</div>
|
|
330
535
|
</div>
|
|
331
536
|
</div>
|
|
332
537
|
</div>
|