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/switch.html
CHANGED
|
@@ -3,16 +3,14 @@
|
|
|
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 Switches">
|
|
6
7
|
<title>MICL Switches</title>
|
|
7
8
|
<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=dark_mode&display=block">
|
|
9
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home&display=block">
|
|
9
10
|
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
|
|
10
11
|
<link rel="stylesheet" href="micl.css">
|
|
11
12
|
<link rel="stylesheet" href="docs.css">
|
|
12
13
|
<style>
|
|
13
|
-
label {
|
|
14
|
-
color: var(--md-sys-color-on-surface);
|
|
15
|
-
}
|
|
16
14
|
.micl-card-filled .micl-card__content,
|
|
17
15
|
.micl-card-outlined.unselectedicon .micl-card__content {
|
|
18
16
|
display: flex;
|
|
@@ -41,109 +39,136 @@
|
|
|
41
39
|
}
|
|
42
40
|
</style>
|
|
43
41
|
</head>
|
|
44
|
-
<body class="light">
|
|
45
|
-
<
|
|
46
|
-
<
|
|
47
|
-
|
|
48
|
-
|
|
42
|
+
<body class="micl-window light">
|
|
43
|
+
<main class="micl-body micl-body--stacked-to-large">
|
|
44
|
+
<section class="micl-pane">
|
|
45
|
+
<header class="micl-appbar">
|
|
46
|
+
<a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
|
|
47
|
+
<span class="material-symbols-outlined" aria-hidden="true">home</span>
|
|
48
|
+
</a>
|
|
49
|
+
<div class="micl-appbar__headline micl-appbar__headline--center">
|
|
50
|
+
<h1>Switches</h1>
|
|
51
|
+
<p class="micl-appbar__subtitle">Showcasing MICL switches</p>
|
|
52
|
+
</div>
|
|
53
|
+
<div id="settings-placeholder" class="micl-appbar__trailing"></div>
|
|
54
|
+
</header>
|
|
49
55
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
56
|
+
<div class="micl-pane__columns micl-pane__columns--stacked-to-expanded">
|
|
57
|
+
<div class="micl-pane__column">
|
|
58
|
+
<div class="micl-card-elevated">
|
|
59
|
+
<div class="micl-card__headline-s">
|
|
60
|
+
<h2>Switches with icons</h2>
|
|
61
|
+
</div>
|
|
62
|
+
<div class="micl-card__content">
|
|
63
|
+
<div class="switch">
|
|
64
|
+
<input type="checkbox" class="micl-switch" id="myswitch1" checked value="c1" role="switch">
|
|
65
|
+
<label for="myswitch1" class="md-sys-typescale-body-medium">First Choice</label>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="switch">
|
|
68
|
+
<input type="checkbox" class="micl-switch" id="myswitch2" value="c2" role="switch">
|
|
69
|
+
<label for="myswitch2" class="md-sys-typescale-body-medium">Second Choice</label>
|
|
70
|
+
</div>
|
|
71
|
+
<div class="switch">
|
|
72
|
+
<input type="checkbox" class="micl-switch" id="myswitch3" value="c3" disabled role="switch">
|
|
73
|
+
<label for="myswitch3" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
|
|
74
|
+
</div>
|
|
75
|
+
<div class="switch">
|
|
76
|
+
<input type="checkbox" class="micl-switch" id="myswitch4" value="c4" checked disabled role="switch">
|
|
77
|
+
<label for="myswitch4" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
<div class="micl-card-filled noicons">
|
|
82
|
+
<div class="micl-card__headline-s">
|
|
83
|
+
<h2>Switches without icons</h2>
|
|
84
|
+
</div>
|
|
85
|
+
<div class="micl-card__content">
|
|
86
|
+
<div class="switch">
|
|
87
|
+
<label for="myswitch5" class="md-sys-typescale-body-medium">First Choice</label>
|
|
88
|
+
<input type="checkbox" class="micl-switch" id="myswitch5" checked value="c1" role="switch">
|
|
89
|
+
</div>
|
|
90
|
+
<div class="switch">
|
|
91
|
+
<label for="myswitch6" class="md-sys-typescale-body-medium">Second Choice</label>
|
|
92
|
+
<input type="checkbox" class="micl-switch" id="myswitch6" value="c2" role="switch">
|
|
93
|
+
</div>
|
|
94
|
+
<div class="switch">
|
|
95
|
+
<label for="myswitch7" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
|
|
96
|
+
<input type="checkbox" class="micl-switch" id="myswitch7" value="c3" disabled role="switch">
|
|
97
|
+
</div>
|
|
98
|
+
<div class="switch">
|
|
99
|
+
<label for="myswitch8" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
|
|
100
|
+
<input type="checkbox" class="micl-switch" id="myswitch8" value="c4" checked disabled role="switch">
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="micl-pane__column">
|
|
106
|
+
<div class="micl-card-outlined selectedicon">
|
|
107
|
+
<div class="micl-card__headline-s">
|
|
108
|
+
<h2>Switches with selected icon</h2>
|
|
109
|
+
</div>
|
|
110
|
+
<div class="micl-card__content">
|
|
111
|
+
<div class="switch">
|
|
112
|
+
<input type="checkbox" class="micl-switch" id="myswitch9" checked value="c1" role="switch">
|
|
113
|
+
<label for="myswitch9" class="md-sys-typescale-body-medium">First Choice</label>
|
|
114
|
+
</div>
|
|
115
|
+
<div class="switch">
|
|
116
|
+
<input type="checkbox" class="micl-switch" id="myswitch10" value="c2" role="switch">
|
|
117
|
+
<label for="myswitch10" class="md-sys-typescale-body-medium">Second Choice</label>
|
|
118
|
+
</div>
|
|
119
|
+
<div class="switch">
|
|
120
|
+
<input type="checkbox" class="micl-switch" id="myswitch11" value="c3" disabled role="switch">
|
|
121
|
+
<label for="myswitch11" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
|
|
122
|
+
</div>
|
|
123
|
+
<div class="switch">
|
|
124
|
+
<input type="checkbox" class="micl-switch" id="myswitch12" value="c4" checked disabled role="switch">
|
|
125
|
+
<label for="myswitch12" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
74
129
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
130
|
+
<div class="micl-card-outlined unselectedicon">
|
|
131
|
+
<div class="micl-card__headline-s">
|
|
132
|
+
<h2>Switches with unselected icon</h2>
|
|
133
|
+
</div>
|
|
134
|
+
<div class="micl-card__content">
|
|
135
|
+
<div class="switch">
|
|
136
|
+
<label for="myswitch13" class="md-sys-typescale-body-medium">First Choice</label>
|
|
137
|
+
<input type="checkbox" class="micl-switch" id="myswitch13" checked value="c1" role="switch">
|
|
138
|
+
</div>
|
|
139
|
+
<div class="switch">
|
|
140
|
+
<label for="myswitch14" class="md-sys-typescale-body-medium">Second Choice</label>
|
|
141
|
+
<input type="checkbox" class="micl-switch" id="myswitch14" value="c2" role="switch">
|
|
142
|
+
</div>
|
|
143
|
+
<div class="switch">
|
|
144
|
+
<label for="myswitch15" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
|
|
145
|
+
<input type="checkbox" class="micl-switch" id="myswitch15" value="c3" disabled role="switch">
|
|
146
|
+
</div>
|
|
147
|
+
<div class="switch">
|
|
148
|
+
<label for="myswitch16" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
|
|
149
|
+
<input type="checkbox" class="micl-switch" id="myswitch16" value="c4" checked disabled role="switch">
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
95
153
|
</div>
|
|
96
154
|
</div>
|
|
97
|
-
</
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
<label for="myswitch10" class="md-sys-typescale-body-medium">Second Choice</label>
|
|
111
|
-
</div>
|
|
112
|
-
<div class="switch">
|
|
113
|
-
<input type="checkbox" class="micl-switch" id="myswitch11" value="c3" disabled role="switch">
|
|
114
|
-
<label for="myswitch11" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
|
|
115
|
-
</div>
|
|
116
|
-
<div class="switch">
|
|
117
|
-
<input type="checkbox" class="micl-switch" id="myswitch12" value="c4" checked disabled role="switch">
|
|
118
|
-
<label for="myswitch12" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
|
|
119
|
-
</div>
|
|
120
|
-
</div>
|
|
121
|
-
</div>
|
|
122
|
-
|
|
123
|
-
<div class="micl-card-outlined unselectedicon">
|
|
124
|
-
<div class="micl-card__headline-s">
|
|
125
|
-
<h2>Switches with unselected icon</h2>
|
|
126
|
-
</div>
|
|
127
|
-
<div class="micl-card__content">
|
|
128
|
-
<div class="switch">
|
|
129
|
-
<label for="myswitch13" class="md-sys-typescale-body-medium">First Choice</label>
|
|
130
|
-
<input type="checkbox" class="micl-switch" id="myswitch13" checked value="c1" role="switch">
|
|
131
|
-
</div>
|
|
132
|
-
<div class="switch">
|
|
133
|
-
<label for="myswitch14" class="md-sys-typescale-body-medium">Second Choice</label>
|
|
134
|
-
<input type="checkbox" class="micl-switch" id="myswitch14" value="c2" role="switch">
|
|
135
|
-
</div>
|
|
136
|
-
<div class="switch">
|
|
137
|
-
<label for="myswitch15" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
|
|
138
|
-
<input type="checkbox" class="micl-switch" id="myswitch15" value="c3" disabled role="switch">
|
|
139
|
-
</div>
|
|
140
|
-
<div class="switch">
|
|
141
|
-
<label for="myswitch16" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
|
|
142
|
-
<input type="checkbox" class="micl-switch" id="myswitch16" value="c4" checked disabled role="switch">
|
|
155
|
+
</section>
|
|
156
|
+
<section class="micl-pane">
|
|
157
|
+
<div class="micl-card-filled">
|
|
158
|
+
<div class="micl-card__headline-s">
|
|
159
|
+
<h2>Code example</h2>
|
|
160
|
+
</div>
|
|
161
|
+
<div class="micl-card__content docs-code">
|
|
162
|
+
<pre><code>
|
|
163
|
+
<div style="display:flex;align-items:center;column-gap:16px">
|
|
164
|
+
<input type="checkbox" class="micl-switch" id="id0" checked value="v0" role="switch">
|
|
165
|
+
<label for="id0" class="md-sys-typescale-body-medium">First Choice</label>
|
|
166
|
+
</div>
|
|
167
|
+
</code></pre>
|
|
143
168
|
</div>
|
|
144
169
|
</div>
|
|
145
|
-
</
|
|
146
|
-
</
|
|
170
|
+
</section>
|
|
171
|
+
</main>
|
|
147
172
|
|
|
148
173
|
<script src="micl.js"></script>
|
|
149
174
|
<script src="docs.js"></script>
|