material-inspired-component-library 2.0.1 → 3.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/README.md +14 -0
- package/components/README.md +2 -0
- package/components/appbar/README.md +94 -0
- package/components/appbar/index.scss +216 -0
- package/components/button/index.scss +70 -65
- package/components/button/index.ts +1 -1
- package/components/card/index.scss +1 -1
- package/components/checkbox/index.scss +4 -0
- package/components/iconbutton/index.scss +111 -111
- package/components/iconbutton/index.ts +1 -1
- package/components/navigationrail/README.md +11 -11
- package/components/navigationrail/index.scss +20 -12
- package/components/radio/index.scss +1 -1
- package/dist/appbar.css +1 -0
- package/dist/appbar.js +1 -0
- 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/dialog.css +1 -1
- package/dist/iconbutton.css +1 -1
- package/dist/list.css +1 -1
- package/dist/micl.css +1 -1
- package/dist/navigationrail.css +1 -1
- 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/accordion.html +298 -254
- package/docs/bottomsheet.html +174 -145
- package/docs/button.html +210 -182
- package/docs/card.html +107 -72
- package/docs/checkbox.html +92 -65
- package/docs/dialog.html +154 -123
- package/docs/divider.html +96 -67
- package/docs/docs.css +14 -24
- package/docs/docs.js +4 -2
- package/docs/iconbutton.html +196 -171
- package/docs/index.html +296 -286
- package/docs/list.html +260 -216
- package/docs/menu.html +260 -220
- package/docs/micl.css +1 -1
- package/docs/navigationrail.html +36 -34
- package/docs/radio.html +93 -68
- package/docs/select.html +213 -173
- package/docs/sidesheet.html +104 -87
- package/docs/slider.html +105 -72
- package/docs/switch.html +126 -101
- package/docs/textfield.html +181 -138
- package/layout/README.md +122 -0
- package/layout/index.scss +258 -0
- package/package.json +1 -1
- package/styles/statelayer.scss +2 -0
- package/styles.scss +13 -0
- package/styles/layout.scss +0 -74
package/docs/sidesheet.html
CHANGED
|
@@ -6,18 +6,11 @@
|
|
|
6
6
|
<meta name="description" content="Demonstrating MICL Side Sheets">
|
|
7
7
|
<title>MICL Side Sheets</title>
|
|
8
8
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
|
|
9
|
-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_back,close,dark_mode&display=block">
|
|
9
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_back,close,dark_mode,home&display=block">
|
|
10
10
|
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
|
|
11
11
|
<link rel="stylesheet" href="micl.css">
|
|
12
12
|
<link rel="stylesheet" href="docs.css">
|
|
13
13
|
<style>
|
|
14
|
-
.micl-card__content {
|
|
15
|
-
display: flex;
|
|
16
|
-
flex-direction: column;
|
|
17
|
-
align-items: flex-start;
|
|
18
|
-
padding-block: 32px;
|
|
19
|
-
row-gap: 32px;
|
|
20
|
-
}
|
|
21
14
|
p {
|
|
22
15
|
color: var(--md-sys-color-on-surface);
|
|
23
16
|
}
|
|
@@ -36,93 +29,117 @@
|
|
|
36
29
|
}
|
|
37
30
|
</style>
|
|
38
31
|
</head>
|
|
39
|
-
<body class="light">
|
|
40
|
-
<
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
|
|
32
|
+
<body class="micl-window light">
|
|
33
|
+
<main class="micl-body">
|
|
34
|
+
<section class="micl-pane">
|
|
35
|
+
<header class="micl-appbar">
|
|
36
|
+
<a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
|
|
37
|
+
<span class="material-symbols-outlined" aria-hidden="true">home</span>
|
|
38
|
+
</a>
|
|
39
|
+
<div class="micl-appbar__headline micl-appbar__headline--center">
|
|
40
|
+
<h1>Side sheets</h1>
|
|
41
|
+
<p class="micl-appbar__subtitle">Showcasing MICL side sheets</p>
|
|
42
|
+
</div>
|
|
43
|
+
<div id="settings-placeholder" class="micl-appbar__trailing"></div>
|
|
44
|
+
</header>
|
|
44
45
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
46
|
+
<div class="micl-pane__columns micl-pane__columns--stacked-to-expanded">
|
|
47
|
+
<div class="micl-pane__column">
|
|
48
|
+
<div class="micl-card-filled">
|
|
49
|
+
<div class="micl-card__headline-s">
|
|
50
|
+
<h2>Showcase</h2>
|
|
51
|
+
</div>
|
|
52
|
+
<p class="micl-card__supporting-text">Click a button to open one of the MICL side sheets.</p>
|
|
53
|
+
<div class="micl-card__content docs-buttons">
|
|
54
|
+
<dialog id="mysidesheet1" class="micl-sidesheet" popover aria-labelledby="title1">
|
|
55
|
+
<div class="micl-sidesheet__headline">
|
|
56
|
+
<h2 id="title1">Lorem Ipsum</h2>
|
|
57
|
+
<button class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mysidesheet1">close</button>
|
|
58
|
+
</div>
|
|
59
|
+
<div class="micl-sidesheet__content">
|
|
60
|
+
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
|
|
61
|
+
<p>Potenti facilisis litora porta tincidunt semper vulputate himenaeos conubia ullamcorper, lacinia a consequat malesuada molestie pharetra interdum sed ut neque, sociosqu libero id montes rhoncus vestibulum suscipit fringilla. Dis sed est risus pulvinar eleifend, aliquet orci quis leo. Penatibus neque nibh cras nostra magnis vivamus, quis conubia sociis diam class, euismod et quisque metus fames. Feugiat donec magnis fusce elementum dis imperdiet velit convallis eget, maecenas sed sem lectus class facilisis posuere sociosqu, himenaeos taciti habitant orci senectus bibendum dignissim cursus.</p>
|
|
62
|
+
<p>Per faucibus aliquet vivamus convallis curabitur massa habitasse aliquam ante pulvinar cubilia, nullam euismod vulputate nostra fermentum sagittis duis primis curae non viverra, cursus malesuada facilisi nisl blandit integer sem rhoncus odio nibh. Imperdiet eleifend bibendum lacinia non nec donec malesuada platea leo feugiat parturient, aptent duis sociis scelerisque natoque mus dui quam ullamcorper varius, mollis egestas velit nibh id quisque et ante sociosqu torquent. Pharetra placerat netus ligula nulla etiam ultricies, fames nibh varius massa orci ad, senectus penatibus quis leo semper. Aptent nisi auctor metus augue suspendisse commodo eu lacinia neque laoreet leo venenatis pharetra aliquet habitasse tellus, urna volutpat torquent accumsan sollicitudin lectus viverra nostra fusce primis maecenas sociis magnis netus porttitor.</p>
|
|
63
|
+
<p>Mus phasellus nostra aliquet euismod faucibus per curae nec, montes rutrum cursus suscipit fames vivamus tincidunt, ullamcorper fermentum diam commodo arcu proin velit. Sociosqu mollis donec himenaeos eleifend ultricies id purus hac, dictum duis neque blandit ullamcorper condimentum sapien dis porttitor, mauris bibendum nostra vivamus faucibus orci metus. Facilisi bibendum himenaeos auctor tempor sed sociosqu nullam, ad class parturient odio enim ut tincidunt cras, in cum sapien inceptos consequat vitae.</p>
|
|
64
|
+
</div>
|
|
65
|
+
</dialog>
|
|
66
|
+
<button type="button" class="micl-button-outlined-m" popovertarget="mysidesheet1">Open Standard Sheet</button>
|
|
61
67
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
68
|
+
<dialog id="mysidesheet2" class="micl-sidesheet" popover aria-labelledby="title2">
|
|
69
|
+
<div class="micl-sidesheet__headline">
|
|
70
|
+
<h2 id="title2">Lorem Ipsum</h2>
|
|
71
|
+
<button class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mysidesheet2">close</button>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="micl-sidesheet__content">
|
|
74
|
+
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
|
|
75
|
+
<p>Potenti facilisis litora porta tincidunt semper vulputate himenaeos conubia ullamcorper, lacinia a consequat malesuada molestie pharetra interdum sed ut neque, sociosqu libero id montes rhoncus vestibulum suscipit fringilla. Dis sed est risus pulvinar eleifend, aliquet orci quis leo. Penatibus neque nibh cras nostra magnis vivamus, quis conubia sociis diam class, euismod et quisque metus fames. Feugiat donec magnis fusce elementum dis imperdiet velit convallis eget, maecenas sed sem lectus class facilisis posuere sociosqu, himenaeos taciti habitant orci senectus bibendum dignissim cursus.</p>
|
|
76
|
+
<p>Per faucibus aliquet vivamus convallis curabitur massa habitasse aliquam ante pulvinar cubilia, nullam euismod vulputate nostra fermentum sagittis duis primis curae non viverra, cursus malesuada facilisi nisl blandit integer sem rhoncus odio nibh. Imperdiet eleifend bibendum lacinia non nec donec malesuada platea leo feugiat parturient, aptent duis sociis scelerisque natoque mus dui quam ullamcorper varius, mollis egestas velit nibh id quisque et ante sociosqu torquent. Pharetra placerat netus ligula nulla etiam ultricies, fames nibh varius massa orci ad, senectus penatibus quis leo semper. Aptent nisi auctor metus augue suspendisse commodo eu lacinia neque laoreet leo venenatis pharetra aliquet habitasse tellus, urna volutpat torquent accumsan sollicitudin lectus viverra nostra fusce primis maecenas sociis magnis netus porttitor.</p>
|
|
77
|
+
<p>Mus phasellus nostra aliquet euismod faucibus per curae nec, montes rutrum cursus suscipit fames vivamus tincidunt, ullamcorper fermentum diam commodo arcu proin velit. Sociosqu mollis donec himenaeos eleifend ultricies id purus hac, dictum duis neque blandit ullamcorper condimentum sapien dis porttitor, mauris bibendum nostra vivamus faucibus orci metus. Facilisi bibendum himenaeos auctor tempor sed sociosqu nullam, ad class parturient odio enim ut tincidunt cras, in cum sapien inceptos consequat vitae.</p>
|
|
78
|
+
</div>
|
|
79
|
+
</dialog>
|
|
80
|
+
<button type="button" class="micl-button-outlined-m" popovertarget="mysidesheet2">Open Standard Sheet<br>without dividers</button>
|
|
75
81
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
82
|
+
<dialog id="mysidesheet3" class="micl-sidesheet" closedby="closerequest" aria-labelledby="title1">
|
|
83
|
+
<div class="micl-sidesheet__headline">
|
|
84
|
+
<button class="micl-iconbutton-standard-s material-symbols-outlined">arrow_back</button>
|
|
85
|
+
<h2 id="title3">Title</h2>
|
|
86
|
+
<button class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mysidesheet3">close</button>
|
|
87
|
+
</div>
|
|
88
|
+
<div class="micl-sidesheet__content">
|
|
89
|
+
<p class="md-sys-typescale-body-medium" style="padding-top:1rem">Make your selection:</p>
|
|
90
|
+
<div class="switch">
|
|
91
|
+
<label for="cb01" class="md-sys-typescale-body-medium">Selection A</label>
|
|
92
|
+
<input type="checkbox" id="cb01" class="micl-switch">
|
|
93
|
+
</div>
|
|
94
|
+
<div class="switch">
|
|
95
|
+
<label for="cb02" class="md-sys-typescale-body-medium">Selection B</label>
|
|
96
|
+
<input type="checkbox" id="cb02" class="micl-switch" checked>
|
|
97
|
+
</div>
|
|
98
|
+
<div class="switch">
|
|
99
|
+
<label for="cb03" class="md-sys-typescale-body-medium">Selection C</label>
|
|
100
|
+
<input type="checkbox" id="cb03" class="micl-switch">
|
|
101
|
+
</div>
|
|
102
|
+
<div class="switch">
|
|
103
|
+
<label for="cb04" class="md-sys-typescale-body-medium">Selection D</label>
|
|
104
|
+
<input type="checkbox" id="cb04" class="micl-switch" checked>
|
|
105
|
+
</div>
|
|
106
|
+
<div class="switch">
|
|
107
|
+
<label for="cb05" class="md-sys-typescale-body-medium">Selection E</label>
|
|
108
|
+
<input type="checkbox" id="cb05" class="micl-switch">
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
<div class="micl-sidesheet__actions">
|
|
112
|
+
<button type="button" class="micl-button-filled-s">Save</button>
|
|
113
|
+
<button type="button" class="micl-button-outlined-s">Cancel</button>
|
|
114
|
+
</div>
|
|
115
|
+
</dialog>
|
|
116
|
+
<button type="button" class="micl-button-outlined-m" popovertarget="mysidesheet3">Open Modal Sheet</button>
|
|
95
117
|
</div>
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
<div class="micl-pane__column">
|
|
121
|
+
<div class="micl-card-filled">
|
|
122
|
+
<div class="micl-card__headline-s">
|
|
123
|
+
<h2>Code example</h2>
|
|
99
124
|
</div>
|
|
100
|
-
<div class="
|
|
101
|
-
<
|
|
102
|
-
|
|
125
|
+
<div class="micl-card__content docs-code">
|
|
126
|
+
<pre><code>
|
|
127
|
+
<dialog id="id0" class="micl-sidesheet" popover aria-labelledby="id1">
|
|
128
|
+
<div class="micl-sidesheet__headline">
|
|
129
|
+
<h2 id="id1">Lorem Ipsum</h2>
|
|
130
|
+
<button class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="id0">close</button>
|
|
131
|
+
</div>
|
|
132
|
+
<div class="micl-sidesheet__content">
|
|
133
|
+
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
|
|
134
|
+
</div>
|
|
135
|
+
</dialog>
|
|
136
|
+
</code></pre>
|
|
103
137
|
</div>
|
|
104
138
|
</div>
|
|
105
|
-
|
|
106
|
-
<button type="button" class="micl-button-filled-s">Save</button>
|
|
107
|
-
<button type="button" class="micl-button-outlined-s">Cancel</button>
|
|
108
|
-
</div>
|
|
109
|
-
</dialog>
|
|
110
|
-
<button type="button" class="micl-button-filled-m" popovertarget="mysidesheet3">Open Modal Sheet</button>
|
|
139
|
+
</div>
|
|
111
140
|
</div>
|
|
112
|
-
</
|
|
113
|
-
|
|
114
|
-
<div class="micl-card-filled" style="height:400px"></div>
|
|
115
|
-
<div class="micl-card-filled" style="height:400px"></div>
|
|
116
|
-
<div class="micl-card-filled" style="height:400px"></div>
|
|
117
|
-
<div class="micl-card-filled" style="height:400px"></div>
|
|
118
|
-
<div class="micl-card-filled" style="height:400px"></div>
|
|
119
|
-
<div class="micl-card-filled" style="height:400px"></div>
|
|
120
|
-
<div class="micl-card-filled" style="height:400px"></div>
|
|
121
|
-
<div class="micl-card-filled" style="height:400px"></div>
|
|
122
|
-
<div class="micl-card-filled" style="height:400px"></div>
|
|
123
|
-
<div class="micl-card-filled" style="height:400px"></div>
|
|
124
|
-
<div class="micl-card-filled" style="height:400px"></div>
|
|
125
|
-
</div>
|
|
141
|
+
</section>
|
|
142
|
+
</main>
|
|
126
143
|
|
|
127
144
|
<script src="micl.js"></script>
|
|
128
145
|
<script src="docs.js"></script>
|
package/docs/slider.html
CHANGED
|
@@ -3,105 +3,138 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<meta name="description" content="Demonstrating MICL Sliders">
|
|
6
7
|
<title>MICL Sliders</title>
|
|
7
8
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
8
9
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
9
10
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
|
|
10
|
-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,volume_up&display=block">
|
|
11
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home,volume_up&display=block">
|
|
11
12
|
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
|
|
12
13
|
<link rel="stylesheet" href="micl.css">
|
|
13
14
|
<link rel="stylesheet" href="docs.css">
|
|
14
15
|
<style>
|
|
15
|
-
.micl-card__content {
|
|
16
|
+
section:first-child .micl-card__content {
|
|
16
17
|
display: flex;
|
|
17
18
|
flex-direction: column;
|
|
18
19
|
row-gap: 64px;
|
|
19
20
|
padding-block: 64px;
|
|
20
|
-
background-color: inherit;
|
|
21
21
|
}
|
|
22
|
-
.micl-card-filled .micl-card__content {
|
|
22
|
+
section:first-child .micl-card-filled .micl-card__content {
|
|
23
23
|
align-items: center;
|
|
24
24
|
}
|
|
25
|
-
.micl-card-elevated input[type=range] {
|
|
25
|
+
section:first-child .micl-card-elevated input[type=range] {
|
|
26
26
|
width: 100%;
|
|
27
27
|
}
|
|
28
|
-
.micl-card-filled input[type=range] {
|
|
28
|
+
section:first-child .micl-card-filled input[type=range] {
|
|
29
29
|
height: 360px;
|
|
30
30
|
}
|
|
31
31
|
</style>
|
|
32
32
|
</head>
|
|
33
|
-
<body class="light">
|
|
34
|
-
<
|
|
35
|
-
<
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
<input type="range" class="micl-slider-s" min="0" max="100" value="25" step="25" list="markers1">
|
|
44
|
-
<datalist id="markers1">
|
|
45
|
-
<option value="0"></option>
|
|
46
|
-
<option value="25"></option>
|
|
47
|
-
<option value="50"></option>
|
|
48
|
-
<option value="75"></option>
|
|
49
|
-
<option value="100"></option>
|
|
50
|
-
</datalist>
|
|
51
|
-
<div class="range micl-slider__container">
|
|
52
|
-
<span class="micl-slider__icon material-symbols-outlined">volume_up</span>
|
|
53
|
-
<input type="range" class="micl-slider-m" min="3.5" max="12.5" value="9.5" step="0.5">
|
|
54
|
-
</div>
|
|
55
|
-
<input type="range" class="micl-slider-l" value="0">
|
|
56
|
-
<input type="range" class="micl-slider-xl" disabled>
|
|
57
|
-
</div>
|
|
58
|
-
</div>
|
|
59
|
-
<div class="micl-card-filled">
|
|
60
|
-
<div class="micl-card__content">
|
|
61
|
-
<input type="range" class="micl-slider-xl micl-slider--vertical">
|
|
62
|
-
</div>
|
|
63
|
-
</div>
|
|
64
|
-
<div class="micl-card-elevated">
|
|
65
|
-
<div class="micl-card__headline-s">
|
|
66
|
-
<h2>Gecko browsers</h2>
|
|
67
|
-
</div>
|
|
68
|
-
<div class="micl-card__content">
|
|
69
|
-
<div class="micl-slider__container">
|
|
70
|
-
<input type="range" class="micl-slider-xs" min="1" max="10" value="6">
|
|
33
|
+
<body class="micl-window light">
|
|
34
|
+
<main class="micl-body micl-body--evenly micl-body--stacked-to-large">
|
|
35
|
+
<section class="micl-pane">
|
|
36
|
+
<header class="micl-appbar">
|
|
37
|
+
<a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
|
|
38
|
+
<span class="material-symbols-outlined" aria-hidden="true">home</span>
|
|
39
|
+
</a>
|
|
40
|
+
<div class="micl-appbar__headline micl-appbar__headline--center">
|
|
41
|
+
<h1>Sliders</h1>
|
|
42
|
+
<p class="micl-appbar__subtitle">Showcasing MICL sliders</p>
|
|
71
43
|
</div>
|
|
72
|
-
<div class="micl-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
44
|
+
<div id="settings-placeholder" class="micl-appbar__trailing"></div>
|
|
45
|
+
</header>
|
|
46
|
+
|
|
47
|
+
<div class="micl-pane__columns micl-pane__columns--stacked-to-expanded">
|
|
48
|
+
<div class="micl-pane__column">
|
|
49
|
+
<div class="micl-card-elevated">
|
|
50
|
+
<div class="micl-card__content">
|
|
51
|
+
<input type="range" class="micl-slider-xs" min="1" max="10" value="6">
|
|
52
|
+
<input type="range" class="micl-slider-s" min="0" max="100" value="25" step="25" list="markers1">
|
|
53
|
+
<datalist id="markers1">
|
|
54
|
+
<option value="0"></option>
|
|
55
|
+
<option value="25"></option>
|
|
56
|
+
<option value="50"></option>
|
|
57
|
+
<option value="75"></option>
|
|
58
|
+
<option value="100"></option>
|
|
59
|
+
</datalist>
|
|
60
|
+
<div class="range micl-slider__container">
|
|
61
|
+
<span class="micl-slider__icon material-symbols-outlined">volume_up</span>
|
|
62
|
+
<input type="range" class="micl-slider-m" min="3.5" max="12.5" value="9.5" step="0.5">
|
|
63
|
+
</div>
|
|
64
|
+
<input type="range" class="micl-slider-l" value="0">
|
|
65
|
+
<input type="range" class="micl-slider-xl" disabled>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
<div class="micl-card-filled">
|
|
69
|
+
<div class="micl-card__content">
|
|
70
|
+
<input type="range" class="micl-slider-xl micl-slider--vertical">
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
88
73
|
</div>
|
|
89
|
-
<div class="micl-
|
|
90
|
-
<
|
|
74
|
+
<div class="micl-pane__column">
|
|
75
|
+
<div class="micl-card-elevated">
|
|
76
|
+
<div class="micl-card__headline-s">
|
|
77
|
+
<h2>Gecko browsers</h2>
|
|
78
|
+
</div>
|
|
79
|
+
<div class="micl-card__content">
|
|
80
|
+
<div class="micl-slider__container">
|
|
81
|
+
<input type="range" class="micl-slider-xs" min="1" max="10" value="6">
|
|
82
|
+
</div>
|
|
83
|
+
<div class="micl-slider__container">
|
|
84
|
+
<input type="range" class="micl-slider-s" min="0" max="100" value="25" step="25" list="markers2">
|
|
85
|
+
</div>
|
|
86
|
+
<datalist id="markers2">
|
|
87
|
+
<option value="0"></option>
|
|
88
|
+
<option value="25"></option>
|
|
89
|
+
<option value="50"></option>
|
|
90
|
+
<option value="75"></option>
|
|
91
|
+
<option value="100"></option>
|
|
92
|
+
</datalist>
|
|
93
|
+
<div class="micl-slider__container">
|
|
94
|
+
<span class="micl-slider__icon material-symbols-outlined">volume_up</span>
|
|
95
|
+
<input type="range" class="micl-slider-m" min="3.5" max="12.5" value="9.5" step="0.5">
|
|
96
|
+
</div>
|
|
97
|
+
<div class="micl-slider__container">
|
|
98
|
+
<input type="range" class="micl-slider-l" value="0">
|
|
99
|
+
</div>
|
|
100
|
+
<div class="micl-slider__container">
|
|
101
|
+
<input type="range" class="micl-slider-xl" disabled>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="micl-card-filled">
|
|
106
|
+
<div class="micl-card__headline-s">
|
|
107
|
+
<h2>Gecko browsers</h2>
|
|
108
|
+
</div>
|
|
109
|
+
<div class="micl-card__content">
|
|
110
|
+
<div class="micl-slider__container">
|
|
111
|
+
<input type="range" class="micl-slider-xl micl-slider--vertical">
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
91
115
|
</div>
|
|
92
116
|
</div>
|
|
93
|
-
</
|
|
94
|
-
<
|
|
95
|
-
<div class="micl-
|
|
96
|
-
<
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
<div class="micl-
|
|
100
|
-
<
|
|
117
|
+
</section>
|
|
118
|
+
<section class="micl-pane">
|
|
119
|
+
<div class="micl-card-filled">
|
|
120
|
+
<div class="micl-card__headline-s">
|
|
121
|
+
<h2>Code example</h2>
|
|
122
|
+
</div>
|
|
123
|
+
<div class="micl-card__content docs-code">
|
|
124
|
+
<pre><code>
|
|
125
|
+
<input type="range" class="micl-slider-s" min="0" max="100" value="25" step="25" list="id0">
|
|
126
|
+
<datalist id="id0">
|
|
127
|
+
<option value="0"></option>
|
|
128
|
+
<option value="25"></option>
|
|
129
|
+
<option value="50"></option>
|
|
130
|
+
<option value="75"></option>
|
|
131
|
+
<option value="100"></option>
|
|
132
|
+
</datalist>
|
|
133
|
+
</code></pre>
|
|
101
134
|
</div>
|
|
102
135
|
</div>
|
|
103
|
-
</
|
|
104
|
-
</
|
|
136
|
+
</section>
|
|
137
|
+
</main>
|
|
105
138
|
|
|
106
139
|
<script src="micl.js"></script>
|
|
107
140
|
<script src="docs.js"></script>
|