material-inspired-component-library 3.0.1 → 3.1.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 +9 -14
- package/components/alert/index.scss +120 -0
- package/components/appbar/index.scss +2 -2
- package/components/badge/index.scss +22 -7
- package/components/button/index.scss +2 -2
- package/components/card/README.md +9 -5
- package/components/card/index.scss +49 -22
- package/components/checkbox/README.md +49 -11
- package/components/checkbox/index.scss +145 -182
- package/components/checkbox/index.ts +148 -0
- package/components/dialog/index.scss +3 -3
- package/components/divider/README.md +3 -3
- package/components/divider/index.scss +18 -27
- package/components/iconbutton/index.scss +2 -2
- package/components/list/index.scss +2 -2
- package/components/list/index.ts +2 -3
- package/components/menu/index.ts +2 -2
- package/components/navigationrail/index.scss +5 -3
- package/components/radio/README.md +1 -1
- package/components/radio/index.scss +6 -24
- package/components/select/index.scss +5 -2
- package/components/slider/index.scss +4 -4
- package/components/slider/index.ts +9 -10
- package/components/stepper/index.scss +85 -0
- package/components/stepper/index.ts +226 -0
- package/components/switch/README.md +26 -4
- package/components/switch/index.scss +24 -23
- package/components/textfield/index.scss +1 -0
- package/components/textfield/index.ts +56 -23
- package/dist/alert.css +1 -0
- package/dist/alert.js +1 -0
- package/dist/appbar.css +1 -1
- package/dist/badge.css +1 -1
- package/dist/button.css +1 -1
- package/dist/card.css +1 -1
- package/dist/checkbox.css +1 -1
- package/dist/components/checkbox/index.d.ts +5 -0
- package/dist/components/stepper/index.d.ts +5 -0
- package/dist/components/textfield/index.d.ts +2 -1
- package/dist/dialog.css +1 -1
- package/dist/divider.css +1 -1
- package/dist/iconbutton.css +1 -1
- package/dist/layout.css +1 -1
- package/dist/list.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/slider.css +1 -1
- package/dist/stepper.css +1 -0
- package/dist/stepper.js +1 -0
- package/dist/switch.css +1 -1
- package/dist/textfield.css +1 -1
- package/docs/alert.html +181 -0
- package/docs/card.html +25 -7
- package/docs/checkbox.html +31 -7
- package/docs/divider.html +7 -1
- package/docs/index.html +9 -10
- package/docs/micl.css +1 -1
- package/docs/micl.js +1 -1
- package/docs/navigationrail.html +2 -3
- package/docs/radio.html +1 -1
- package/docs/switch.html +41 -26
- package/layout/index.scss +9 -2
- package/micl.ts +24 -26
- package/package.json +2 -1
- package/styles.scss +2 -0
package/docs/alert.html
ADDED
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<meta name="description" content="Demonstrating MICL Alerts">
|
|
7
|
+
<title>MICL Alerts</title>
|
|
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=award_star,check,dark_mode,error,home,question_mark&display=block">
|
|
10
|
+
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
|
|
11
|
+
<link rel="stylesheet" href="micl.css">
|
|
12
|
+
<link rel="stylesheet" href="docs.css">
|
|
13
|
+
<style>
|
|
14
|
+
.micl-card__content {
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: column;
|
|
17
|
+
row-gap: 24px;
|
|
18
|
+
}
|
|
19
|
+
</style>
|
|
20
|
+
</head>
|
|
21
|
+
<body class="micl-window light">
|
|
22
|
+
<main class="micl-body micl-body--stacked-to-large">
|
|
23
|
+
<section class="micl-pane">
|
|
24
|
+
<header class="micl-appbar">
|
|
25
|
+
<a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
|
|
26
|
+
<span class="material-symbols-outlined" aria-hidden="true">home</span>
|
|
27
|
+
</a>
|
|
28
|
+
<div class="micl-appbar__headline micl-appbar__headline--center">
|
|
29
|
+
<h1>Alerts</h1>
|
|
30
|
+
<p class="micl-appbar__subtitle">Showcasing MICL alerts</p>
|
|
31
|
+
</div>
|
|
32
|
+
<div id="settings-placeholder" class="micl-appbar__trailing"></div>
|
|
33
|
+
</header>
|
|
34
|
+
|
|
35
|
+
<div class="micl-pane__columns micl-pane__columns--stacked-to-expanded">
|
|
36
|
+
<div class="micl-pane__column">
|
|
37
|
+
<div class="micl-card-elevated">
|
|
38
|
+
<div class="micl-card__headline-s">
|
|
39
|
+
<h2>Error colors</h2>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="micl-card__content">
|
|
42
|
+
<div class="micl-alert-tonal" role="alert">
|
|
43
|
+
<span class="micl-alert__icon material-symbols-outlined">error</span>
|
|
44
|
+
<div class="micl-alert__text">
|
|
45
|
+
<h4>An error has occurred</h4>
|
|
46
|
+
<span class="micl-alert__supporting-text">Keyboard not responding. Press any key to continue.</span>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
<div class="micl-alert-filled" role="alert">
|
|
50
|
+
<span class="micl-alert__icon material-symbols-outlined">error</span>
|
|
51
|
+
<div class="micl-alert__text">
|
|
52
|
+
<h4>An error has occurred</h4>
|
|
53
|
+
<span class="micl-alert__supporting-text">Keyboard not responding. Press any key to continue.</span>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="micl-alert-outlined" role="alert">
|
|
57
|
+
<span class="micl-alert__icon material-symbols-outlined">error</span>
|
|
58
|
+
<div class="micl-alert__text">
|
|
59
|
+
<h4>An error has occurred</h4>
|
|
60
|
+
<span class="micl-alert__supporting-text">Keyboard not responding. Press any key to continue.</span>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="micl-pane__column">
|
|
67
|
+
<div class="micl-card-filled">
|
|
68
|
+
<div class="micl-card__headline-s">
|
|
69
|
+
<h2>Primary colors</h2>
|
|
70
|
+
</div>
|
|
71
|
+
<div class="micl-card__content">
|
|
72
|
+
<div class="micl-alert-tonal micl-alert--primary" role="alert">
|
|
73
|
+
<span class="micl-alert__icon material-symbols-outlined">check</span>
|
|
74
|
+
<div class="micl-alert__text">
|
|
75
|
+
<h4>Your file has been saved</h4>
|
|
76
|
+
<span class="micl-alert__supporting-text">Please insert the next floppy disk.</span>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
<div class="micl-alert-filled micl-alert--primary" role="alert">
|
|
80
|
+
<span class="micl-alert__icon material-symbols-outlined">check</span>
|
|
81
|
+
<div class="micl-alert__text">
|
|
82
|
+
<h4>Your file has been saved</h4>
|
|
83
|
+
<span class="micl-alert__supporting-text">Please insert the next floppy disk.</span>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
<div class="micl-alert-outlined micl-alert--primary" role="alert">
|
|
87
|
+
<span class="micl-alert__icon material-symbols-outlined">check</span>
|
|
88
|
+
<div class="micl-alert__text">
|
|
89
|
+
<h4>Your file has been saved</h4>
|
|
90
|
+
<span class="micl-alert__supporting-text">Please insert the next floppy disk.</span>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
<div class="micl-pane__column">
|
|
97
|
+
<div class="micl-card-outlined">
|
|
98
|
+
<div class="micl-card__headline-s">
|
|
99
|
+
<h2>Secondary colors</h2>
|
|
100
|
+
</div>
|
|
101
|
+
<div class="micl-card__content">
|
|
102
|
+
<div class="micl-alert-tonal micl-alert--secondary" role="alert">
|
|
103
|
+
<span class="micl-alert__icon material-symbols-outlined">award_star</span>
|
|
104
|
+
<div class="micl-alert__text">
|
|
105
|
+
<h4>Your efforts have been rewarded</h4>
|
|
106
|
+
<span class="micl-alert__supporting-text">Click the button below to retrieve your prize.</span>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
<div class="micl-alert-filled micl-alert--secondary" role="alert">
|
|
110
|
+
<span class="micl-alert__icon material-symbols-outlined">award_star</span>
|
|
111
|
+
<div class="micl-alert__text">
|
|
112
|
+
<h4>Your efforts have been rewarded</h4>
|
|
113
|
+
<span class="micl-alert__supporting-text">Click the button below to retrieve your prize.</span>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
<div class="micl-alert-outlined micl-alert--secondary" role="alert">
|
|
117
|
+
<span class="micl-alert__icon material-symbols-outlined">award_star</span>
|
|
118
|
+
<div class="micl-alert__text">
|
|
119
|
+
<h4>Your efforts have been rewarded</h4>
|
|
120
|
+
<span class="micl-alert__supporting-text">Click the button below to retrieve your prize.</span>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
<div class="micl-pane__column">
|
|
127
|
+
<div class="micl-card-elevated">
|
|
128
|
+
<div class="micl-card__headline-s">
|
|
129
|
+
<h2>Tertiary colors</h2>
|
|
130
|
+
</div>
|
|
131
|
+
<div class="micl-card__content">
|
|
132
|
+
<div class="micl-alert-tonal micl-alert--tertiary" role="alert">
|
|
133
|
+
<span class="micl-alert__icon material-symbols-outlined">question_mark</span>
|
|
134
|
+
<div class="micl-alert__text">
|
|
135
|
+
<h4>Checking your progress</h4>
|
|
136
|
+
<span class="micl-alert__supporting-text">Continuing this operation will clear the Internet.</span>
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
139
|
+
<div class="micl-alert-filled micl-alert--tertiary" role="alert">
|
|
140
|
+
<span class="micl-alert__icon material-symbols-outlined">question_mark</span>
|
|
141
|
+
<div class="micl-alert__text">
|
|
142
|
+
<h4>Checking your progress</h4>
|
|
143
|
+
<span class="micl-alert__supporting-text">Continuing this operation will clear the Internet.</span>
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
<div class="micl-alert-outlined micl-alert--tertiary" role="alert">
|
|
147
|
+
<span class="micl-alert__icon material-symbols-outlined">question_mark</span>
|
|
148
|
+
<div class="micl-alert__text">
|
|
149
|
+
<h4>Checking your progress</h4>
|
|
150
|
+
<span class="micl-alert__supporting-text">Continuing this operation will clear the Internet.</span>
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
</section>
|
|
158
|
+
<section class="micl-pane">
|
|
159
|
+
<div class="micl-card-filled">
|
|
160
|
+
<div class="micl-card__headline-s">
|
|
161
|
+
<h2>Code example</h2>
|
|
162
|
+
</div>
|
|
163
|
+
<div class="micl-card__content docs-code">
|
|
164
|
+
<pre><code>
|
|
165
|
+
<div class="micl-alert-tonal" role="alert">
|
|
166
|
+
<span class="micl-alert__icon material-symbols-outlined">error</span>
|
|
167
|
+
<span class="micl-alert__text">
|
|
168
|
+
<h4>An error has occurred</h4>
|
|
169
|
+
<span class="micl-alert__supporting-text">Something unexplainable has happened.</span>
|
|
170
|
+
</span>
|
|
171
|
+
</div>
|
|
172
|
+
</code></pre>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
</section>
|
|
176
|
+
</main>
|
|
177
|
+
|
|
178
|
+
<script src="micl.js"></script>
|
|
179
|
+
<script src="docs.js"></script>
|
|
180
|
+
</body>
|
|
181
|
+
</html>
|
package/docs/card.html
CHANGED
|
@@ -10,6 +10,23 @@
|
|
|
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
|
+
<style>
|
|
14
|
+
.micl-card__content:not(.docs-code) p {
|
|
15
|
+
margin: 0;
|
|
16
|
+
color: var(--md-sys-color-on-surface);
|
|
17
|
+
}
|
|
18
|
+
.docs-icon {
|
|
19
|
+
inline-size: 32px;
|
|
20
|
+
block-size: 32px;
|
|
21
|
+
margin: var(--md-sys-card-padding-inline);
|
|
22
|
+
border-radius: 16px;
|
|
23
|
+
background-color: var(--md-sys-color-primary);
|
|
24
|
+
color: var(--md-sys-color-on-primary);
|
|
25
|
+
font-size: 16px;
|
|
26
|
+
line-height: 32px;
|
|
27
|
+
text-align: center;
|
|
28
|
+
}
|
|
29
|
+
</style>
|
|
13
30
|
</head>
|
|
14
31
|
<body class="micl-window light">
|
|
15
32
|
<main class="micl-body micl-body--stacked-to-large">
|
|
@@ -28,6 +45,7 @@
|
|
|
28
45
|
<div class="micl-pane__columns micl-pane__columns--evenly micl-pane__columns--stacked-to-expanded">
|
|
29
46
|
<div class="micl-pane__column">
|
|
30
47
|
<div class="micl-card-elevated" tabindex="0">
|
|
48
|
+
<div class="docs-icon" aria-hidden="true">A</div>
|
|
31
49
|
<div class="micl-card__headline-s">
|
|
32
50
|
<h2>Lorem ipsum dolor sit amet consectetur adipiscing elit</h2>
|
|
33
51
|
</div>
|
|
@@ -46,7 +64,7 @@
|
|
|
46
64
|
<p class="md-sys-typescale-body-medium">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>
|
|
47
65
|
</div>
|
|
48
66
|
</div>
|
|
49
|
-
<div class="micl-card-outlined">
|
|
67
|
+
<div class="micl-card-outlined" tabindex="0">
|
|
50
68
|
<div class="micl-card__headline-l">
|
|
51
69
|
<h2>Lorem</h2>
|
|
52
70
|
</div>
|
|
@@ -65,15 +83,15 @@
|
|
|
65
83
|
<span class="micl-card__subhead">Dummy or placeholder text</span>
|
|
66
84
|
<span class="micl-card__supporting-text">This is a dummy or placeholder text commonly used in web development.</span>
|
|
67
85
|
</summary>
|
|
68
|
-
<div class="micl-card__content" style="padding:0">
|
|
69
|
-
<p class="md-sys-typescale-body-small" style="
|
|
70
|
-
<hr class="micl-divider">
|
|
86
|
+
<div class="micl-card__content" style="padding-inline:0">
|
|
87
|
+
<p class="md-sys-typescale-body-small" style="padding-block-end:var(--md-sys-card-padding-inline);padding-inline:var(--md-sys-card-padding-inline)">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>
|
|
88
|
+
<hr class="micl-divider" style="--md-sys-divider-space:16px">
|
|
71
89
|
<button type="button" class="micl-button-text-s">Share</button>
|
|
72
90
|
</div>
|
|
73
91
|
</details>
|
|
74
92
|
<details class="micl-card-filled">
|
|
75
|
-
<summary>
|
|
76
|
-
<
|
|
93
|
+
<summary class="micl-card--compact">
|
|
94
|
+
<span class="micl-card__image" style="background-image:url(card-cabinet.webp);aspect-ratio:820/340"></span>
|
|
77
95
|
<span class="micl-card__headline-m">
|
|
78
96
|
<span class="micl-heading">Lorem ipsum</span>
|
|
79
97
|
</span>
|
|
@@ -85,7 +103,7 @@
|
|
|
85
103
|
</details>
|
|
86
104
|
<details class="micl-card-outlined">
|
|
87
105
|
<summary>
|
|
88
|
-
<
|
|
106
|
+
<span class="micl-card__image" style="background-image:url(card-city.webp);aspect-ratio:820/340"></span>
|
|
89
107
|
<span class="micl-card__headline-l">
|
|
90
108
|
<span class="micl-heading">Lorem</span>
|
|
91
109
|
</span>
|
package/docs/checkbox.html
CHANGED
|
@@ -46,11 +46,11 @@
|
|
|
46
46
|
</div>
|
|
47
47
|
<div class="micl-flex--vcenter">
|
|
48
48
|
<input type="checkbox" id="mycheckbox3" class="micl-checkbox" disabled value="c3">
|
|
49
|
-
<label for="mycheckbox3" class="md-sys-typescale-body-medium">Third Choice</label>
|
|
49
|
+
<label for="mycheckbox3" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
|
|
50
50
|
</div>
|
|
51
51
|
<div class="micl-flex--vcenter">
|
|
52
52
|
<input type="checkbox" id="mycheckbox4" class="micl-checkbox" disabled checked value="c4">
|
|
53
|
-
<label for="mycheckbox4" class="md-sys-typescale-body-medium">Fourth Choice</label>
|
|
53
|
+
<label for="mycheckbox4" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
|
|
54
54
|
</div>
|
|
55
55
|
</div>
|
|
56
56
|
</div>
|
|
@@ -65,11 +65,11 @@
|
|
|
65
65
|
<input type="checkbox" id="mycheckbox22" class="micl-checkbox" checked value="c2">
|
|
66
66
|
</div>
|
|
67
67
|
<div class="micl-flex--vcenter">
|
|
68
|
-
<label for="mycheckbox23" class="md-sys-typescale-body-medium">Third Choice</label>
|
|
68
|
+
<label for="mycheckbox23" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
|
|
69
69
|
<input type="checkbox" id="mycheckbox23" class="micl-checkbox" disabled value="c3">
|
|
70
70
|
</div>
|
|
71
71
|
<div class="micl-flex--vcenter">
|
|
72
|
-
<label for="mycheckbox24" class="md-sys-typescale-body-medium">Fourth Choice</label>
|
|
72
|
+
<label for="mycheckbox24" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
|
|
73
73
|
<input type="checkbox" id="mycheckbox24" class="micl-checkbox" disabled checked value="c4">
|
|
74
74
|
</div>
|
|
75
75
|
</div>
|
|
@@ -88,11 +88,35 @@
|
|
|
88
88
|
</div>
|
|
89
89
|
<div class="micl-flex--vcenter">
|
|
90
90
|
<input type="checkbox" id="mycheckbox13" class="micl-checkbox micl-checkbox--error" disabled value="c3">
|
|
91
|
-
<label for="mycheckbox13" class="md-sys-typescale-body-medium">Third Choice</label>
|
|
91
|
+
<label for="mycheckbox13" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
|
|
92
92
|
</div>
|
|
93
93
|
<div class="micl-flex--vcenter">
|
|
94
94
|
<input type="checkbox" id="mycheckbox14" class="micl-checkbox micl-checkbox--error" disabled checked value="c4">
|
|
95
|
-
<label for="mycheckbox14" class="md-sys-typescale-body-medium">Fourth Choice</label>
|
|
95
|
+
<label for="mycheckbox14" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="micl-card-elevated">
|
|
100
|
+
<div class="micl-card__content">
|
|
101
|
+
<div class="micl-checkbox-group">
|
|
102
|
+
<div class="micl-flex--vcenter">
|
|
103
|
+
<input type="checkbox" id="mycheckbox30" class="micl-checkbox micl-checkbox__parent" value="c0">
|
|
104
|
+
<label for="mycheckbox30" class="md-sys-typescale-body-medium">Choices</label>
|
|
105
|
+
</div>
|
|
106
|
+
<div style="padding-inline-start:16px">
|
|
107
|
+
<div class="micl-flex--vcenter">
|
|
108
|
+
<input type="checkbox" id="mycheckbox31" class="micl-checkbox" value="c1">
|
|
109
|
+
<label for="mycheckbox31" class="md-sys-typescale-body-medium">First Choice</label>
|
|
110
|
+
</div>
|
|
111
|
+
<div class="micl-flex--vcenter">
|
|
112
|
+
<input type="checkbox" id="mycheckbox32" class="micl-checkbox" checked value="c2">
|
|
113
|
+
<label for="mycheckbox32" class="md-sys-typescale-body-medium">Second Choice</label>
|
|
114
|
+
</div>
|
|
115
|
+
<div class="micl-flex--vcenter">
|
|
116
|
+
<input type="checkbox" id="mycheckbox33" class="micl-checkbox" value="c3">
|
|
117
|
+
<label for="mycheckbox33" class="md-sys-typescale-body-medium">Third Choice</label>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
96
120
|
</div>
|
|
97
121
|
</div>
|
|
98
122
|
</div>
|
|
@@ -106,7 +130,7 @@
|
|
|
106
130
|
</div>
|
|
107
131
|
<div class="micl-card__content docs-code">
|
|
108
132
|
<pre><code>
|
|
109
|
-
<div
|
|
133
|
+
<div class="micl-flex--vcenter">
|
|
110
134
|
<input type="checkbox" id="id0" class="micl-checkbox" value="v0">
|
|
111
135
|
<label for="id0" class="md-sys-typescale-body-medium">First Choice</label>
|
|
112
136
|
</div>
|
package/docs/divider.html
CHANGED
|
@@ -14,8 +14,14 @@
|
|
|
14
14
|
p {
|
|
15
15
|
color: var(--md-sys-color-on-surface);
|
|
16
16
|
}
|
|
17
|
+
section:first-child .micl-pane__column > :last-child {
|
|
18
|
+
padding-block-end: 0;
|
|
19
|
+
}
|
|
17
20
|
section:first-child .micl-card__content {
|
|
18
|
-
padding
|
|
21
|
+
padding: 0;
|
|
22
|
+
}
|
|
23
|
+
section:first-child .micl-card-filled {
|
|
24
|
+
--md-sys-divider-color: var(--md-sys-color-primary);
|
|
19
25
|
}
|
|
20
26
|
p.md-sys-typescale-label-large {
|
|
21
27
|
margin: 3rem 2rem 1rem;
|
package/docs/index.html
CHANGED
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
<label for="item1" class="micl-navigationrail__item" tabindex="0">
|
|
30
30
|
<span class="micl-navigationrail__icon material-symbols-outlined" style="anchor-name:--inbox">inbox</span>
|
|
31
31
|
<span class="micl-navigationrail__text">Inbox</span>
|
|
32
|
+
<span class="micl-badge" style="position-anchor:--inbox">97</span>
|
|
32
33
|
</label>
|
|
33
34
|
<input type="radio" id="item2" name="navitem" value="email_outbox">
|
|
34
35
|
<label for="item2" class="micl-navigationrail__item" tabindex="0">
|
|
@@ -39,6 +40,7 @@
|
|
|
39
40
|
<label for="item3" class="micl-navigationrail__item" tabindex="0">
|
|
40
41
|
<span class="micl-navigationrail__icon material-symbols-outlined" style="anchor-name:--favorites">favorite</span>
|
|
41
42
|
<span class="micl-navigationrail__text">Favorites</span>
|
|
43
|
+
<span class="micl-badge micl-badge--small" style="position-anchor:--favorites"></span>
|
|
42
44
|
</label>
|
|
43
45
|
<input type="radio" id="item4" name="navitem" value="email_trash">
|
|
44
46
|
<label for="item4" class="micl-navigationrail__item" tabindex="0">
|
|
@@ -46,9 +48,6 @@
|
|
|
46
48
|
<span class="micl-navigationrail__text">Trash</span>
|
|
47
49
|
</label>
|
|
48
50
|
</div>
|
|
49
|
-
|
|
50
|
-
<span class="micl-badge" style="position-anchor:--inbox;--md-sys-badge-block-offset:4px;--md-sys-badge-inline-offset:16px">97</span>
|
|
51
|
-
<span class="micl-badge micl-badge--small" style="position-anchor:--favorites;--md-sys-badge-block-offset:4px;--md-sys-badge-inline-offset:16px"></span>
|
|
52
51
|
</dialog>
|
|
53
52
|
|
|
54
53
|
<main class="micl-body">
|
|
@@ -67,7 +66,7 @@
|
|
|
67
66
|
<div class="micl-card__headline-s">
|
|
68
67
|
<h2>Data entry</h2>
|
|
69
68
|
</div>
|
|
70
|
-
<div class="micl-card__content" style="display:flex;flex-direction:column;row-gap:16px;padding-block:16px">
|
|
69
|
+
<div class="micl-card__content" style="display:flex;flex-direction:column;row-gap:16px;padding-block-start:16px">
|
|
71
70
|
<div class="micl-textfield-outlined">
|
|
72
71
|
<label for="mytextfield1">Text field</label>
|
|
73
72
|
<input type="text" id="mytextfield1">
|
|
@@ -129,8 +128,8 @@
|
|
|
129
128
|
<h2>Card</h2>
|
|
130
129
|
</div>
|
|
131
130
|
<span class="micl-card__supporting-text">A card is a versatile component that groups related elements. It can hold a wide range of content, including images, headlines, supporting text, and buttons. Cards are designed with flexible layouts and dimensions that adapt to their contents.</span>
|
|
132
|
-
<div class="micl-card__content" style="display:flex;justify-content:space-between;padding-block:16px">
|
|
133
|
-
<button type="button" class="micl-button-filled-s">
|
|
131
|
+
<div class="micl-card__content" style="display:flex;justify-content:space-between;padding-block-start:16px">
|
|
132
|
+
<button type="button" class="micl-button-filled-s">Action</button>
|
|
134
133
|
<button type="button" class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mymenu" aria-label="Open Menu">more_vert</button>
|
|
135
134
|
<nav id="mymenu" class="micl-menu" popover>
|
|
136
135
|
<ul class="micl-list">
|
|
@@ -202,7 +201,7 @@
|
|
|
202
201
|
<span class="micl-list-item__supporting-text">Click to open</span>
|
|
203
202
|
</span>
|
|
204
203
|
</summary>
|
|
205
|
-
<div class="micl-list-item__content" style="padding-block:16px">
|
|
204
|
+
<div class="micl-list-item__content" style="padding-block-start:16px">
|
|
206
205
|
<div class="micl-textfield-filled">
|
|
207
206
|
<label for="tf1">Name</label>
|
|
208
207
|
<input type="text" id="tf1" value="Filled text field">
|
|
@@ -216,7 +215,7 @@
|
|
|
216
215
|
<span class="micl-list-item__supporting-text">Click to open</span>
|
|
217
216
|
</span>
|
|
218
217
|
</summary>
|
|
219
|
-
<div class="micl-list-item__content" style="padding-block:16px">
|
|
218
|
+
<div class="micl-list-item__content" style="padding-block-start:16px">
|
|
220
219
|
<div class="micl-textfield-filled">
|
|
221
220
|
<label for="tf2">Date</label>
|
|
222
221
|
<input type="date" id="tf2" value="">
|
|
@@ -231,7 +230,7 @@
|
|
|
231
230
|
<div class="micl-card__headline-s">
|
|
232
231
|
<h2>Button actions</h2>
|
|
233
232
|
</div>
|
|
234
|
-
<div class="micl-card__content" style="display:flex;flex-direction:column;align-items:flex-start;row-gap:16px;padding-block:16px">
|
|
233
|
+
<div class="micl-card__content" style="display:flex;flex-direction:column;align-items:flex-start;row-gap:16px;padding-block-start:16px">
|
|
235
234
|
<dialog id="mydialog" class="micl-dialog" closedby="none" popover>
|
|
236
235
|
<form method="dialog" class="micl-dialog__headline">
|
|
237
236
|
<span class="micl-dialog__icon material-symbols-outlined">person</span>
|
|
@@ -331,7 +330,7 @@
|
|
|
331
330
|
<div class="micl-card__headline-l">
|
|
332
331
|
<h2>Demos</h2>
|
|
333
332
|
</div>
|
|
334
|
-
<div class="micl-card__content" style="column-count:2;padding-block:16px">
|
|
333
|
+
<div class="micl-card__content" style="column-count:2;padding-block-start:16px">
|
|
335
334
|
<p><a href="accordion.html" class="md-sys-typescale-body-large">Accordions</a></p>
|
|
336
335
|
<p><a href="bottomsheet.html" class="md-sys-typescale-body-large">Bottom sheets</a></p>
|
|
337
336
|
<p><a href="button.html" class="md-sys-typescale-body-large">Buttons</a></p>
|