material-inspired-component-library 1.3.0 → 2.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 +9 -1
- package/components/badge/README.md +65 -0
- package/components/badge/index.scss +68 -0
- package/components/button/index.scss +10 -12
- package/components/button/index.ts +5 -0
- package/components/card/index.scss +2 -2
- package/components/checkbox/index.scss +1 -1
- package/components/iconbutton/index.scss +2 -2
- package/components/iconbutton/index.ts +5 -0
- package/components/list/index.scss +2 -2
- package/components/navigationrail/README.md +110 -59
- package/components/navigationrail/index.scss +399 -88
- package/components/{checkbox → navigationrail}/index.ts +12 -7
- package/components/radio/index.scss +2 -2
- package/dist/badge.css +1 -0
- package/dist/badge.js +1 -0
- package/dist/button.css +1 -1
- package/dist/card.css +1 -1
- package/dist/checkbox.css +1 -1
- package/dist/components/navigationrail/index.d.ts +5 -0
- package/dist/iconbutton.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/docs/button.html +5 -5
- package/docs/docs.css +2 -1
- package/docs/index.html +32 -1
- package/docs/micl.css +1 -1
- package/docs/micl.js +1 -1
- package/docs/navigationrail.html +48 -42
- package/micl.ts +20 -27
- package/package.json +4 -1
- package/styles.scss +17 -0
- package/dist/components/checkbox/index.d.ts +0 -5
|
@@ -22,136 +22,447 @@
|
|
|
22
22
|
@use '../../styles/elevation';
|
|
23
23
|
@use '../../styles/motion';
|
|
24
24
|
@use '../../styles/shapes';
|
|
25
|
+
@use '../../styles/statelayer';
|
|
25
26
|
@use '../../styles/typography';
|
|
26
27
|
|
|
27
|
-
|
|
28
|
-
--md-sys-navigationrail-width:
|
|
29
|
-
--md-sys-navigationrail-maxwidth:
|
|
28
|
+
:root {
|
|
29
|
+
--md-sys-navigationrail-collapsed-width: 96px;
|
|
30
|
+
--md-sys-navigationrail-expanded-maxwidth: 360px;
|
|
31
|
+
--md-sys-navigationrail-expanded-minwidth: 220px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.micl-navigationrail {
|
|
30
35
|
--md-sys-navigationrail-spring-buffer: 200px;
|
|
31
|
-
--md-sys-navigationrail-
|
|
32
|
-
--md-sys-navigationrail-
|
|
36
|
+
--md-sys-navigationrail-header-space: 40px;
|
|
37
|
+
--md-sys-navigationrail-top-space: 44px;
|
|
38
|
+
--md-sys-navigationrail-item-space: 6px;
|
|
39
|
+
--md-sys-navigationrail-item-height: 56px;
|
|
40
|
+
--md-sys-divider-thickness: 0px;
|
|
33
41
|
--md-sys-navigationrail-motion-spatial: #{motion.$md-sys-motion-expressive-slow-spatial};
|
|
34
42
|
--md-sys-navigationrail-motion-duration: #{motion.$md-sys-motion-expressive-slow-spatial-duration};
|
|
35
43
|
--md-sys-navigationrail-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-spatial-duration};
|
|
44
|
+
--md-sys-navigationrail-morph-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
|
|
45
|
+
--md-sys-navigationrail-morph-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
|
|
36
46
|
|
|
37
47
|
box-sizing: border-box;
|
|
38
|
-
display:
|
|
48
|
+
display: flex;
|
|
39
49
|
flex-direction: column;
|
|
40
|
-
|
|
41
|
-
min-
|
|
42
|
-
max-
|
|
43
|
-
|
|
44
|
-
min-
|
|
50
|
+
align-items: flex-start;
|
|
51
|
+
min-inline-size: var(--md-sys-navigationrail-collapsed-width);
|
|
52
|
+
max-inline-size: var(--md-sys-navigationrail-collapsed-width);
|
|
53
|
+
block-size: 100vh;
|
|
54
|
+
min-block-size: 100%;
|
|
45
55
|
margin-block: 0;
|
|
46
|
-
margin-inline
|
|
47
|
-
|
|
48
|
-
padding-
|
|
49
|
-
padding-block-end: var(--md-sys-navigationrail-padding-standard);
|
|
50
|
-
padding-inline-start: var(--md-sys-navigationrail-spring-buffer);
|
|
51
|
-
padding-inline-end: 0;
|
|
56
|
+
margin-inline: 0 auto;
|
|
57
|
+
padding-block: var(--md-sys-navigationrail-top-space) 0;
|
|
58
|
+
padding-inline: 0;
|
|
52
59
|
background-color: var(--md-sys-color-surface);
|
|
53
60
|
border: none;
|
|
54
61
|
box-shadow: var(--md-sys-elevation-level0);
|
|
55
|
-
opacity:
|
|
62
|
+
opacity: 100%;
|
|
56
63
|
overflow: hidden;
|
|
57
|
-
|
|
58
|
-
opacity var(--md-sys-navigationrail-motion-duration-reverse) linear,
|
|
59
|
-
margin-inline-start var(--md-sys-navigationrail-motion-duration-reverse) var(--md-sys-navigationrail-motion-spatial),
|
|
60
|
-
overlay var(--md-sys-navigationrail-motion-duration-reverse) linear allow-discrete,
|
|
61
|
-
display var(--md-sys-navigationrail-motion-duration-reverse) linear allow-discrete;
|
|
62
|
-
|
|
63
|
-
.micl-navigationrail__headline {
|
|
64
|
-
display: flex;
|
|
65
|
-
align-items: center;
|
|
66
|
-
padding-inline-start: 12px;
|
|
67
|
-
padding-inline-end: 24px;
|
|
68
|
-
column-gap: 8px;
|
|
69
|
-
color: var(--md-sys-color-on-surface-variant);
|
|
70
|
-
|
|
71
|
-
h1, h2, h3, h4, h5, h6, .micl-heading {
|
|
72
|
-
@include typography.title-large;
|
|
64
|
+
interpolate-size: allow-keywords;
|
|
73
65
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
overflow: hidden;
|
|
77
|
-
text-overflow: ellipsis;
|
|
78
|
-
white-space: nowrap;
|
|
79
|
-
user-select: none;
|
|
80
|
-
}
|
|
66
|
+
&> .micl-navigationrail__headline {
|
|
67
|
+
padding-inline-start: 24px;
|
|
81
68
|
}
|
|
82
|
-
.micl-navigationrail__content {
|
|
69
|
+
&> .micl-navigationrail__content {
|
|
83
70
|
box-sizing: border-box;
|
|
84
71
|
display: flex;
|
|
85
72
|
flex-direction: column;
|
|
86
73
|
flex: 1 1 auto;
|
|
87
74
|
align-items: flex-start;
|
|
88
|
-
row-gap:
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
padding-inline:
|
|
75
|
+
row-gap: var(--md-sys-navigationrail-item-space);
|
|
76
|
+
inline-size: 100%;
|
|
77
|
+
padding-block: var(--md-sys-navigationrail-header-space) 0;
|
|
78
|
+
padding-inline: 20px 0;
|
|
92
79
|
overflow: hidden auto;
|
|
80
|
+
transition: row-gap var(--md-sys-navigationrail-morph-duration-reverse) linear;
|
|
81
|
+
|
|
82
|
+
&> input[type=radio] {
|
|
83
|
+
appearance: none;
|
|
84
|
+
display: none;
|
|
85
|
+
margin: 0;
|
|
86
|
+
}
|
|
87
|
+
&> label.micl-navigationrail__item {
|
|
88
|
+
--micl-ripple: 1;
|
|
89
|
+
--statelayer-color: var(--md-sys-color-on-secondary-container);
|
|
90
|
+
|
|
91
|
+
box-sizing: border-box;
|
|
92
|
+
display: flex;
|
|
93
|
+
flex-direction: column;
|
|
94
|
+
align-items: center;
|
|
95
|
+
block-size: var(--md-sys-navigationrail-item-height);
|
|
96
|
+
inline-size: var(--md-sys-navigationrail-item-height);
|
|
97
|
+
row-gap: 4px;
|
|
98
|
+
padding-block: 12px;
|
|
99
|
+
border-radius: calc(var(--md-sys-navigationrail-item-height) / 2);
|
|
100
|
+
outline: none;
|
|
101
|
+
background-color: transparent;
|
|
102
|
+
background-image:
|
|
103
|
+
radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)) 10%, transparent 10%),
|
|
104
|
+
linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
|
|
105
|
+
background-repeat: no-repeat;
|
|
106
|
+
background-size: 10000%, 100%;
|
|
107
|
+
cursor: pointer;
|
|
108
|
+
transition:
|
|
109
|
+
inline-size calc(var(--md-sys-navigationrail-morph-duration-reverse) / 2) linear,
|
|
110
|
+
background-color calc(var(--md-sys-navigationrail-morph-duration-reverse) / 2) linear,
|
|
111
|
+
background-size 3000ms,
|
|
112
|
+
--statelayer-opacity var(--md-sys-navigationrail-motion-duration) linear;
|
|
113
|
+
|
|
114
|
+
&> .micl-navigationrail__icon {
|
|
115
|
+
--micl-ripple: 1;
|
|
116
|
+
|
|
117
|
+
font-size: 24px;
|
|
118
|
+
inline-size: 24px;
|
|
119
|
+
margin: 0;
|
|
120
|
+
padding-block: 4px;
|
|
121
|
+
padding-inline: 16px;
|
|
122
|
+
border-radius: 16px;
|
|
123
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
124
|
+
background-color: transparent;
|
|
125
|
+
background-image:
|
|
126
|
+
radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)) 10%, transparent 10%),
|
|
127
|
+
linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
|
|
128
|
+
background-repeat: no-repeat;
|
|
129
|
+
background-size: 10000%, 100%;
|
|
130
|
+
font-variation-settings: 'FILL' 0;
|
|
131
|
+
transition:
|
|
132
|
+
background-size 3000ms,
|
|
133
|
+
background-color var(--md-sys-navigationrail-morph-duration-reverse) linear,
|
|
134
|
+
font-variation-settings var(--md-sys-navigationrail-morph-duration-reverse) linear,
|
|
135
|
+
--statelayer-opacity var(--md-sys-navigationrail-motion-duration) linear;
|
|
136
|
+
}
|
|
137
|
+
&> .micl-navigationrail__text {
|
|
138
|
+
@include typography.label-medium;
|
|
139
|
+
|
|
140
|
+
min-block-size: var(--md-sys-typescale-label-medium-line-height);
|
|
141
|
+
margin-block-start: 0;
|
|
142
|
+
margin-inline-start: 0px;
|
|
143
|
+
padding-inline-end: 0px;
|
|
144
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
145
|
+
opacity: 100%;
|
|
146
|
+
overflow: hidden;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
&> input[type=radio]:checked + label.micl-navigationrail__item {
|
|
150
|
+
&> .micl-navigationrail__icon {
|
|
151
|
+
background-color: var(--md-sys-color-secondary-container);
|
|
152
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
153
|
+
font-variation-settings: 'FILL' 1;
|
|
154
|
+
transition:
|
|
155
|
+
background-size 3000ms,
|
|
156
|
+
background-color var(--md-sys-navigationrail-morph-duration) linear,
|
|
157
|
+
font-variation-settings var(--md-sys-navigationrail-morph-duration) linear,
|
|
158
|
+
--statelayer-opacity var(--md-sys-navigationrail-motion-duration) linear;
|
|
159
|
+
}
|
|
160
|
+
&> .micl-navigationrail__text {
|
|
161
|
+
color: var(--md-sys-color-secondary);
|
|
162
|
+
}
|
|
163
|
+
}
|
|
93
164
|
}
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
165
|
+
}
|
|
166
|
+
dialog.micl-navigationrail,
|
|
167
|
+
div.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--selected) {
|
|
168
|
+
max-inline-size: var(--md-sys-navigationrail-expanded-maxwidth);
|
|
169
|
+
min-inline-size: var(--md-sys-navigationrail-expanded-minwidth);
|
|
170
|
+
|
|
171
|
+
&> .micl-navigationrail__content {
|
|
172
|
+
row-gap: 0px;
|
|
173
|
+
|
|
174
|
+
&> label.micl-navigationrail__item {
|
|
175
|
+
position: relative;
|
|
176
|
+
flex-direction: row;
|
|
177
|
+
inline-size: fit-content;
|
|
178
|
+
|
|
179
|
+
&::before {
|
|
180
|
+
content: "";
|
|
181
|
+
position: absolute;
|
|
182
|
+
inset: 0px;
|
|
183
|
+
inset-inline-end: calc(-1 * (var(--md-sys-navigationrail-expanded-maxwidth) - 20px - 100%));
|
|
184
|
+
background-color: transparent;
|
|
185
|
+
}
|
|
186
|
+
&:hover {
|
|
187
|
+
--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
|
|
188
|
+
}
|
|
189
|
+
&:focus-visible {
|
|
190
|
+
--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
|
|
191
|
+
}
|
|
192
|
+
&:active {
|
|
193
|
+
background-size: 0%, 100%;
|
|
194
|
+
transition: background-size 0ms;
|
|
195
|
+
--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
|
|
196
|
+
}
|
|
197
|
+
&> .micl-navigationrail__text {
|
|
198
|
+
@include typography.label-large;
|
|
199
|
+
|
|
200
|
+
margin-inline-start: -8px;
|
|
201
|
+
padding-inline-end: 16px;
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
&> input[type=radio]:checked + label.micl-navigationrail__item {
|
|
205
|
+
background-color: var(--md-sys-color-secondary-container);
|
|
206
|
+
|
|
207
|
+
&> .micl-navigationrail__icon {
|
|
208
|
+
background-color: transparent;
|
|
209
|
+
}
|
|
111
210
|
}
|
|
112
211
|
}
|
|
212
|
+
}
|
|
213
|
+
div.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--selected) {
|
|
214
|
+
&> .micl-navigationrail__content {
|
|
215
|
+
transition: row-gap var(--md-sys-navigationrail-morph-duration) linear;
|
|
113
216
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
217
|
+
&> label.micl-navigationrail__item {
|
|
218
|
+
transition:
|
|
219
|
+
inline-size calc(var(--md-sys-navigationrail-morph-duration) / 2) calc(var(--md-sys-navigationrail-morph-duration) / 2) linear,
|
|
220
|
+
background-color calc(var(--md-sys-navigationrail-morph-duration) / 2) calc(var(--md-sys-navigationrail-morph-duration) / 2) linear,
|
|
221
|
+
background-size 3000ms,
|
|
222
|
+
--statelayer-opacity var(--md-sys-navigationrail-motion-duration) linear;
|
|
223
|
+
}
|
|
224
|
+
&> input[type=radio]:checked + label.micl-navigationrail__item {
|
|
225
|
+
&> .micl-navigationrail__icon {
|
|
226
|
+
transition:
|
|
227
|
+
background-size 3000ms,
|
|
228
|
+
background-color calc(var(--md-sys-navigationrail-morph-duration) / 2) linear,
|
|
229
|
+
font-variation-settings calc(var(--md-sys-navigationrail-morph-duration) / 2) linear,
|
|
230
|
+
--statelayer-opacity var(--md-sys-navigationrail-motion-duration) linear;
|
|
231
|
+
}
|
|
232
|
+
}
|
|
120
233
|
}
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
234
|
+
}
|
|
235
|
+
div.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--toggled.micl-button--selected) {
|
|
236
|
+
animation: var(--md-sys-navigationrail-morph-duration) linear forwards navigationrail-to-expanded;
|
|
237
|
+
|
|
238
|
+
&> .micl-navigationrail__content > label.micl-navigationrail__item {
|
|
239
|
+
animation: calc(var(--md-sys-navigationrail-morph-duration) / 2) linear forwards navigationrail-item-to-expanded;
|
|
126
240
|
|
|
127
|
-
.micl-
|
|
128
|
-
|
|
241
|
+
&> .micl-navigationrail__text {
|
|
242
|
+
animation: var(--md-sys-navigationrail-morph-duration) linear forwards navigationrail-text-to-expanded;
|
|
129
243
|
}
|
|
130
244
|
}
|
|
131
|
-
|
|
132
|
-
|
|
245
|
+
}
|
|
246
|
+
div.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--toggled:not(.micl-button--selected)) {
|
|
247
|
+
animation: var(--md-sys-navigationrail-morph-duration-reverse) linear forwards navigationrail-to-collapsed;
|
|
248
|
+
|
|
249
|
+
&> .micl-navigationrail__content {
|
|
250
|
+
&> label.micl-navigationrail__item {
|
|
251
|
+
animation: calc(var(--md-sys-navigationrail-morph-duration-reverse) / 2) linear forwards navigationrail-item-to-collapsed;
|
|
252
|
+
|
|
253
|
+
&> .micl-navigationrail__text {
|
|
254
|
+
animation: var(--md-sys-navigationrail-morph-duration-reverse) linear forwards navigationrail-text-to-collapsed;
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
&> input[type=radio]:checked + label.micl-navigationrail__item {
|
|
258
|
+
&> .micl-navigationrail__icon {
|
|
259
|
+
transition:
|
|
260
|
+
background-size 3000ms,
|
|
261
|
+
background-color calc(var(--md-sys-navigationrail-morph-duration-reverse) / 2) calc(var(--md-sys-navigationrail-morph-duration-reverse) / 2) linear,
|
|
262
|
+
font-variation-settings calc(var(--md-sys-navigationrail-morph-duration-reverse) / 2) calc(var(--md-sys-navigationrail-morph-duration-reverse) / 2) linear,
|
|
263
|
+
--statelayer-opacity var(--md-sys-navigationrail-motion-duration) linear;
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
div.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle:not(.micl-button--selected)) {
|
|
269
|
+
&> .micl-navigationrail__content > label.micl-navigationrail__item {
|
|
270
|
+
&:hover {
|
|
271
|
+
&> .micl-navigationrail__icon {
|
|
272
|
+
--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
&:focus-visible {
|
|
276
|
+
&> .micl-navigationrail__icon {
|
|
277
|
+
--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
&:active {
|
|
281
|
+
&> .micl-navigationrail__icon {
|
|
282
|
+
--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
|
|
283
|
+
|
|
284
|
+
background-size: 0%, 100%;
|
|
285
|
+
transition:
|
|
286
|
+
background-size 0ms,
|
|
287
|
+
background-color calc(var(--md-sys-navigationrail-morph-duration-reverse) / 2) calc(var(--md-sys-navigationrail-morph-duration-reverse) / 2) linear,
|
|
288
|
+
font-variation-settings calc(var(--md-sys-navigationrail-morph-duration-reverse) / 2) calc(var(--md-sys-navigationrail-morph-duration-reverse) / 2) linear,
|
|
289
|
+
--statelayer-opacity var(--md-sys-navigationrail-motion-duration) linear;
|
|
290
|
+
}
|
|
291
|
+
}
|
|
133
292
|
}
|
|
134
|
-
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
dialog.micl-navigationrail {
|
|
296
|
+
display: none;
|
|
297
|
+
min-inline-size: calc(var(--md-sys-navigationrail-expanded-minwidth) + var(--md-sys-navigationrail-spring-buffer));
|
|
298
|
+
max-inline-size: calc(var(--md-sys-navigationrail-expanded-maxwidth) + var(--md-sys-navigationrail-spring-buffer));
|
|
299
|
+
margin-inline-start: calc(-1 * (var(--md-sys-navigationrail-expanded-maxwidth) + var(--md-sys-navigationrail-spring-buffer)));
|
|
300
|
+
padding-inline: var(--md-sys-navigationrail-spring-buffer) 0;
|
|
301
|
+
opacity: 0%;
|
|
302
|
+
transition:
|
|
303
|
+
opacity var(--md-sys-navigationrail-motion-duration-reverse) linear,
|
|
304
|
+
margin-inline-start var(--md-sys-navigationrail-motion-duration-reverse) var(--md-sys-navigationrail-motion-spatial),
|
|
305
|
+
overlay var(--md-sys-navigationrail-motion-duration-reverse) linear allow-discrete,
|
|
306
|
+
display var(--md-sys-navigationrail-motion-duration-reverse) linear allow-discrete;
|
|
307
|
+
|
|
135
308
|
&[open] {
|
|
136
309
|
display: flex;
|
|
137
310
|
margin-inline-start: calc(-1 * var(--md-sys-navigationrail-spring-buffer));
|
|
138
|
-
opacity:
|
|
311
|
+
opacity: 100%;
|
|
312
|
+
|
|
313
|
+
@starting-style {
|
|
314
|
+
margin-inline-start: calc(-1 * (var(--md-sys-navigationrail-expanded-maxwidth) + var(--md-sys-navigationrail-spring-buffer)));
|
|
315
|
+
opacity: 0%;
|
|
316
|
+
}
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
div.micl-navigationrail {
|
|
320
|
+
position: sticky;
|
|
321
|
+
float: inline-start;
|
|
322
|
+
inset: unset;
|
|
323
|
+
inset-block-start: 0;
|
|
324
|
+
inset-inline-start: 0;
|
|
325
|
+
border-inline-end: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
|
|
326
|
+
}
|
|
327
|
+
div.micl-navigationrail[popover] {
|
|
328
|
+
position: fixed;
|
|
329
|
+
}
|
|
330
|
+
.micl-navigationrail {
|
|
331
|
+
&[open],
|
|
332
|
+
&:popover-open {
|
|
333
|
+
border-start-end-radius: var(--md-sys-shape-corner-large);
|
|
334
|
+
border-end-end-radius: var(--md-sys-shape-corner-large);
|
|
335
|
+
box-shadow: var(--md-sys-elevation-level2);
|
|
336
|
+
background-color: var(--md-sys-color-surface-container);
|
|
139
337
|
transition:
|
|
140
338
|
opacity var(--md-sys-navigationrail-motion-duration) linear,
|
|
141
339
|
margin-inline-start var(--md-sys-navigationrail-motion-duration) var(--md-sys-navigationrail-motion-spatial),
|
|
142
340
|
overlay var(--md-sys-navigationrail-motion-duration) linear allow-discrete,
|
|
143
341
|
display var(--md-sys-navigationrail-motion-duration) linear allow-discrete;
|
|
144
342
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
343
|
+
&::backdrop {
|
|
344
|
+
background-color: rgba(0, 0, 0, 0.2);
|
|
345
|
+
|
|
346
|
+
@starting-style {
|
|
347
|
+
background-color: rgba(0, 0, 0, 0);
|
|
348
|
+
}
|
|
148
349
|
}
|
|
149
350
|
}
|
|
150
|
-
|
|
151
|
-
background-color: rgba(0, 0, 0, 0
|
|
351
|
+
&::backdrop {
|
|
352
|
+
background-color: rgba(0, 0, 0, 0);
|
|
353
|
+
transition:
|
|
354
|
+
background-color var(--md-sys-navigationrail-motion-duration) linear,
|
|
355
|
+
overlay var(--md-sys-navigationrail-motion-duration) linear allow-discrete,
|
|
356
|
+
display var(--md-sys-navigationrail-motion-duration) linear allow-discrete;
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
body:has(div.micl-navigationrail[popover]) {
|
|
360
|
+
margin-inline-start: var(--md-sys-navigationrail-collapsed-width);
|
|
361
|
+
}
|
|
152
362
|
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
363
|
+
@keyframes navigationrail-to-expanded {
|
|
364
|
+
from {
|
|
365
|
+
max-inline-size: var(--md-sys-navigationrail-collapsed-width);
|
|
366
|
+
min-inline-size: var(--md-sys-navigationrail-collapsed-width);
|
|
367
|
+
}
|
|
368
|
+
to {
|
|
369
|
+
max-inline-size: var(--md-sys-navigationrail-expanded-maxwidth);
|
|
370
|
+
min-inline-size: var(--md-sys-navigationrail-expanded-minwidth);
|
|
371
|
+
}
|
|
372
|
+
}
|
|
373
|
+
@keyframes navigationrail-to-collapsed {
|
|
374
|
+
from {
|
|
375
|
+
max-inline-size: var(--md-sys-navigationrail-expanded-maxwidth);
|
|
376
|
+
min-inline-size: var(--md-sys-navigationrail-expanded-minwidth);
|
|
377
|
+
}
|
|
378
|
+
to {
|
|
379
|
+
max-inline-size: var(--md-sys-navigationrail-collapsed-width);
|
|
380
|
+
min-inline-size: var(--md-sys-navigationrail-collapsed-width);
|
|
381
|
+
}
|
|
382
|
+
}
|
|
383
|
+
@keyframes navigationrail-item-to-expanded {
|
|
384
|
+
0% {
|
|
385
|
+
flex-direction: column;
|
|
386
|
+
}
|
|
387
|
+
99% {
|
|
388
|
+
flex-direction: column;
|
|
389
|
+
}
|
|
390
|
+
100% {
|
|
391
|
+
flex-direction: row;
|
|
392
|
+
}
|
|
393
|
+
}
|
|
394
|
+
@keyframes navigationrail-item-to-collapsed {
|
|
395
|
+
0% {
|
|
396
|
+
flex-direction: row;
|
|
397
|
+
}
|
|
398
|
+
99% {
|
|
399
|
+
flex-direction: row;
|
|
400
|
+
}
|
|
401
|
+
100% {
|
|
402
|
+
flex-direction: column;
|
|
403
|
+
}
|
|
404
|
+
}
|
|
405
|
+
@keyframes navigationrail-text-to-collapsed {
|
|
406
|
+
0% {
|
|
407
|
+
@include typography.label-large;
|
|
408
|
+
margin-block-start: 0;
|
|
409
|
+
margin-inline-start: -8px;
|
|
410
|
+
padding-inline-end: 16px;
|
|
411
|
+
opacity: 100%
|
|
412
|
+
}
|
|
413
|
+
49.9% {
|
|
414
|
+
@include typography.label-large;
|
|
415
|
+
margin-block-start: 0;
|
|
416
|
+
margin-inline-start: -8px;
|
|
417
|
+
padding-inline-end: 16px;
|
|
418
|
+
opacity: 0%;
|
|
419
|
+
}
|
|
420
|
+
50.1% {
|
|
421
|
+
@include typography.label-medium;
|
|
422
|
+
min-block-size: var(--md-sys-typescale-label-medium-line-height);
|
|
423
|
+
margin-block-start: -16px;
|
|
424
|
+
margin-inline-start: 0px;
|
|
425
|
+
padding-inline-end: 0px;
|
|
426
|
+
opacity: 0%;
|
|
427
|
+
}
|
|
428
|
+
100% {
|
|
429
|
+
@include typography.label-medium;
|
|
430
|
+
min-block-size: var(--md-sys-typescale-label-medium-line-height);
|
|
431
|
+
margin-block-start: 0;
|
|
432
|
+
margin-inline-start: 0px;
|
|
433
|
+
padding-inline-end: 0px;
|
|
434
|
+
opacity: 100%;
|
|
435
|
+
}
|
|
436
|
+
}
|
|
437
|
+
@keyframes navigationrail-text-to-expanded {
|
|
438
|
+
0% {
|
|
439
|
+
@include typography.label-medium;
|
|
440
|
+
min-block-size: var(--md-sys-typescale-label-medium-line-height);
|
|
441
|
+
margin-block-start: 0;
|
|
442
|
+
margin-inline-start: 0px;
|
|
443
|
+
padding-inline-end: 0px;
|
|
444
|
+
opacity: 100%;
|
|
445
|
+
}
|
|
446
|
+
49.9% {
|
|
447
|
+
@include typography.label-medium;
|
|
448
|
+
min-block-size: var(--md-sys-typescale-label-medium-line-height);
|
|
449
|
+
margin-block-start: -16px;
|
|
450
|
+
margin-inline-start: 0px;
|
|
451
|
+
padding-inline-end: 0px;
|
|
452
|
+
opacity: 0%;
|
|
453
|
+
}
|
|
454
|
+
50.1% {
|
|
455
|
+
@include typography.label-large;
|
|
456
|
+
margin-block-start: 0px;
|
|
457
|
+
margin-inline-start: -8px;
|
|
458
|
+
padding-inline-end: 16px;
|
|
459
|
+
opacity: 0%;
|
|
460
|
+
}
|
|
461
|
+
100% {
|
|
462
|
+
@include typography.label-large;
|
|
463
|
+
margin-block-start: 0px;
|
|
464
|
+
margin-inline-start: -8px;
|
|
465
|
+
padding-inline-end: 16px;
|
|
466
|
+
opacity: 100%;
|
|
156
467
|
}
|
|
157
468
|
}
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
20
20
|
// SOFTWARE.
|
|
21
21
|
|
|
22
|
-
export const
|
|
22
|
+
export const navigationrailSelector = '.micl-navigationrail__item[for]:not(.micl-navigationrail__item--disabled)';
|
|
23
23
|
|
|
24
24
|
export default (() =>
|
|
25
25
|
{
|
|
@@ -27,19 +27,24 @@ export default (() =>
|
|
|
27
27
|
keydown: (event: Event) =>
|
|
28
28
|
{
|
|
29
29
|
if (
|
|
30
|
-
!(event
|
|
31
|
-
|| !(event instanceof
|
|
32
|
-
|| !
|
|
33
|
-
|| (event.target as HTMLInputElement).disabled
|
|
30
|
+
!(event instanceof KeyboardEvent)
|
|
31
|
+
|| !(event.target instanceof HTMLLabelElement)
|
|
32
|
+
|| !event.target.matches(navigationrailSelector)
|
|
34
33
|
) {
|
|
35
34
|
return;
|
|
36
35
|
}
|
|
36
|
+
const input = document.getElementById(event.target.htmlFor) as HTMLInputElement;
|
|
37
|
+
if (!input) {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
37
40
|
|
|
38
41
|
switch (event.key) {
|
|
39
42
|
case 'Enter':
|
|
40
43
|
case ' ':
|
|
41
|
-
event.
|
|
42
|
-
|
|
44
|
+
event.preventDefault();
|
|
45
|
+
if (!input.checked) {
|
|
46
|
+
input.checked = !input.checked;
|
|
47
|
+
}
|
|
43
48
|
break;
|
|
44
49
|
default:
|
|
45
50
|
}
|
|
@@ -71,10 +71,10 @@ input[type=radio].micl-radio {
|
|
|
71
71
|
border-color var(--md-sys-radio-motion-duration) motion.$md-sys-motion-easing-emphasized;
|
|
72
72
|
}
|
|
73
73
|
&:not(:disabled) {
|
|
74
|
-
--
|
|
74
|
+
--micl-ripple: 1;
|
|
75
75
|
|
|
76
76
|
background-image:
|
|
77
|
-
radial-gradient(circle at var(--x, center) var(--y, center), transparent 0%, rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)) 10%, transparent 10%),
|
|
77
|
+
radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)) 10%, transparent 10%),
|
|
78
78
|
linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
|
|
79
79
|
background-repeat: no-repeat;
|
|
80
80
|
background-size: 10000%, 100%;
|
package/dist/badge.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--md-ref-typeface-plain: Roboto, system-ui, sans-serif;--md-ref-typeface-brand: Roboto, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700;--md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-large-size: 3.5625rem;--md-sys-typescale-display-large-line-height: 4rem;--md-sys-typescale-display-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-large-tracking: -0.015625rem;--md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-medium-size: 2.8125rem;--md-sys-typescale-display-medium-line-height: 3.25rem;--md-sys-typescale-display-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-medium-tracking: 0;--md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-small-size: 2.25rem;--md-sys-typescale-display-small-line-height: 2.75rem;--md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-small-tracking: 0;--md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-large-size: 2rem;--md-sys-typescale-headline-large-line-height: 2.5rem;--md-sys-typescale-headline-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-large-tracking: 0;--md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-medium-size: 1.75rem;--md-sys-typescale-headline-medium-line-height: 2.25rem;--md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-medium-tracking: 0;--md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-small-size: 1.5rem;--md-sys-typescale-headline-small-line-height: 2rem;--md-sys-typescale-headline-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-small-tracking: 0;--md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-title-large-size: 1.375rem;--md-sys-typescale-title-large-line-height: 1.75rem;--md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-title-large-tracking: 0;--md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-medium-size: 1rem;--md-sys-typescale-title-medium-line-height: 1.5rem;--md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-medium-tracking: 0,009375rem;--md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-small-size: 0.875rem;--md-sys-typescale-title-small-line-height: 1.25rem;--md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-small-tracking: 0.00625rem;--md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-large-size: 1rem;--md-sys-typescale-body-large-line-height: 1.5rem;--md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-large-tracking: 0.03125rem;--md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-medium-size: 0.875rem;--md-sys-typescale-body-medium-line-height: 1.25rem;--md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-medium-tracking: 0.015625rem;--md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-small-size: 0.75rem;--md-sys-typescale-body-small-line-height: 1rem;--md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-small-tracking: 0.025rem;--md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-large-size: 0.875rem;--md-sys-typescale-label-large-line-height: 1.25rem;--md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-large-tracking: 0.00625rem;--md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-medium-size: 0.75rem;--md-sys-typescale-label-medium-line-height: 1rem;--md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-medium-tracking: 0.03125rem;--md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-small-size: 0.6875rem;--md-sys-typescale-label-small-line-height: 1rem;--md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-small-tracking: 0.03125rem;--md-sys-typescale-emphasized-display-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-large-size: 3.5625rem;--md-sys-typescale-emphasized-display-large-line-height: 4rem;--md-sys-typescale-emphasized-display-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-large-tracking: -0.015625rem;--md-sys-typescale-emphasized-display-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-medium-size: 2.8125rem;--md-sys-typescale-emphasized-display-medium-line-height: 3.25rem;--md-sys-typescale-emphasized-display-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-medium-tracking: 0;--md-sys-typescale-emphasized-display-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-small-size: 2.25rem;--md-sys-typescale-emphasized-display-small-line-height: 2.75rem;--md-sys-typescale-emphasized-display-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-small-tracking: 0;--md-sys-typescale-emphasized-headline-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-large-size: 2rem;--md-sys-typescale-emphasized-headline-large-line-height: 2.5rem;--md-sys-typescale-emphasized-headline-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-large-tracking: 0;--md-sys-typescale-emphasized-headline-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-medium-size: 1.75rem;--md-sys-typescale-emphasized-headline-medium-line-height: 2.25rem;--md-sys-typescale-emphasized-headline-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-medium-tracking: 0;--md-sys-typescale-emphasized-headline-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-small-size: 1.5rem;--md-sys-typescale-emphasized-headline-small-line-height: 2rem;--md-sys-typescale-emphasized-headline-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-small-tracking: 0;--md-sys-typescale-emphasized-title-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-title-large-size: 1.375rem;--md-sys-typescale-emphasized-title-large-line-height: 1.75rem;--md-sys-typescale-emphasized-title-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-title-large-tracking: 0;--md-sys-typescale-emphasized-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-medium-size: 1rem;--md-sys-typescale-emphasized-title-medium-line-height: 1.5rem;--md-sys-typescale-emphasized-title-medium-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-title-medium-tracking: 0,009375rem;--md-sys-typescale-emphasized-title-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-small-size: 0.875rem;--md-sys-typescale-emphasized-title-small-line-height: 1.25rem;--md-sys-typescale-emphasized-title-small-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-title-small-tracking: 0.00625rem;--md-sys-typescale-emphasized-body-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-large-size: 1rem;--md-sys-typescale-emphasized-body-large-line-height: 1.5rem;--md-sys-typescale-emphasized-body-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-large-tracking: 0.03125rem;--md-sys-typescale-emphasized-body-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-medium-size: 0.875rem;--md-sys-typescale-emphasized-body-medium-line-height: 1.25rem;--md-sys-typescale-emphasized-body-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-medium-tracking: 0.015625rem;--md-sys-typescale-emphasized-body-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-small-size: 0.75rem;--md-sys-typescale-emphasized-body-small-line-height: 1rem;--md-sys-typescale-emphasized-body-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-small-tracking: 0.025rem;--md-sys-typescale-emphasized-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-large-size: 0.875rem;--md-sys-typescale-emphasized-label-large-line-height: 1.25rem;--md-sys-typescale-emphasized-label-large-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-large-tracking: 0.00625rem;--md-sys-typescale-emphasized-label-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-medium-size: 0.75rem;--md-sys-typescale-emphasized-label-medium-line-height: 1rem;--md-sys-typescale-emphasized-label-medium-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-medium-tracking: 0.03125rem;--md-sys-typescale-emphasized-label-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-small-size: 0.6875rem;--md-sys-typescale-emphasized-label-small-line-height: 1rem;--md-sys-typescale-emphasized-label-small-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-small-tracking: 0.03125rem}.md-sys-typescale-display-large{font-family:var(--md-sys-typescale-display-large-font);font-size:var(--md-sys-typescale-display-large-size);line-height:var(--md-sys-typescale-display-large-line-height);font-weight:var(--md-sys-typescale-display-large-weight);letter-spacing:var(--md-sys-typescale-display-large-tracking)}.md-sys-typescale-display-medium{font-family:var(--md-sys-typescale-display-medium-font);font-size:var(--md-sys-typescale-display-medium-size);line-height:var(--md-sys-typescale-display-medium-line-height);font-weight:var(--md-sys-typescale-display-medium-weight);letter-spacing:var(--md-sys-typescale-display-medium-tracking)}.md-sys-typescale-display-small{font-family:var(--md-sys-typescale-display-small-font);font-size:var(--md-sys-typescale-display-small-size);line-height:var(--md-sys-typescale-display-small-line-height);font-weight:var(--md-sys-typescale-display-small-weight);letter-spacing:var(--md-sys-typescale-display-small-tracking)}.md-sys-typescale-headline-large{font-family:var(--md-sys-typescale-headline-large-font);font-size:var(--md-sys-typescale-headline-large-size);line-height:var(--md-sys-typescale-headline-large-line-height);font-weight:var(--md-sys-typescale-headline-large-weight);letter-spacing:var(--md-sys-typescale-headline-large-tracking)}.md-sys-typescale-headline-medium{font-family:var(--md-sys-typescale-headline-medium-font);font-size:var(--md-sys-typescale-headline-medium-size);line-height:var(--md-sys-typescale-headline-medium-line-height);font-weight:var(--md-sys-typescale-headline-medium-weight);letter-spacing:var(--md-sys-typescale-headline-medium-tracking)}.md-sys-typescale-headline-small{font-family:var(--md-sys-typescale-headline-small-font);font-size:var(--md-sys-typescale-headline-small-size);line-height:var(--md-sys-typescale-headline-small-line-height);font-weight:var(--md-sys-typescale-headline-small-weight);letter-spacing:var(--md-sys-typescale-headline-small-tracking)}.md-sys-typescale-title-large{font-family:var(--md-sys-typescale-title-large-font);font-size:var(--md-sys-typescale-title-large-size);line-height:var(--md-sys-typescale-title-large-line-height);font-weight:var(--md-sys-typescale-title-large-weight);letter-spacing:var(--md-sys-typescale-title-large-tracking)}.md-sys-typescale-title-medium{font-family:var(--md-sys-typescale-title-medium-font);font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);font-weight:var(--md-sys-typescale-title-medium-weight);letter-spacing:var(--md-sys-typescale-title-medium-tracking)}.md-sys-typescale-title-small{font-family:var(--md-sys-typescale-title-small-font);font-size:var(--md-sys-typescale-title-small-size);line-height:var(--md-sys-typescale-title-small-line-height);font-weight:var(--md-sys-typescale-title-small-weight);letter-spacing:var(--md-sys-typescale-title-small-tracking)}.md-sys-typescale-body-large{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking)}.md-sys-typescale-body-medium{font-family:var(--md-sys-typescale-body-medium-font);font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height);font-weight:var(--md-sys-typescale-body-medium-weight);letter-spacing:var(--md-sys-typescale-body-medium-tracking)}.md-sys-typescale-body-small{font-family:var(--md-sys-typescale-body-small-font);font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-weight);letter-spacing:var(--md-sys-typescale-body-small-tracking)}.md-sys-typescale-label-large{font-family:var(--md-sys-typescale-label-large-font);font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);font-weight:var(--md-sys-typescale-label-large-weight);letter-spacing:var(--md-sys-typescale-label-large-tracking)}.md-sys-typescale-label-medium{font-family:var(--md-sys-typescale-label-medium-font);font-size:var(--md-sys-typescale-label-medium-size);line-height:var(--md-sys-typescale-label-medium-line-height);font-weight:var(--md-sys-typescale-label-medium-weight);letter-spacing:var(--md-sys-typescale-label-medium-tracking)}.md-sys-typescale-label-small{font-family:var(--md-sys-typescale-label-small-font);font-size:var(--md-sys-typescale-label-small-size);line-height:var(--md-sys-typescale-label-small-line-height);font-weight:var(--md-sys-typescale-label-small-weight);letter-spacing:var(--md-sys-typescale-label-small-tracking)}.md-sys-typescale-emphasized-display-large{font-family:var(--md-sys-typescale-emphasized-display-large-font);font-size:var(--md-sys-typescale-emphasized-display-large-size);line-height:var(--md-sys-typescale-emphasized-display-large-line-height);font-weight:var(--md-sys-typescale-emphasized-display-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-large-tracking)}.md-sys-typescale-emphasized-display-medium{font-family:var(--md-sys-typescale-emphasized-display-medium-font);font-size:var(--md-sys-typescale-emphasized-display-medium-size);line-height:var(--md-sys-typescale-emphasized-display-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-display-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-medium-tracking)}.md-sys-typescale-emphasized-display-small{font-family:var(--md-sys-typescale-emphasized-display-small-font);font-size:var(--md-sys-typescale-emphasized-display-small-size);line-height:var(--md-sys-typescale-emphasized-display-small-line-height);font-weight:var(--md-sys-typescale-emphasized-display-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-small-tracking)}.md-sys-typescale-emphasized-headline-large{font-family:var(--md-sys-typescale-emphasized-headline-large-font);font-size:var(--md-sys-typescale-emphasized-headline-large-size);line-height:var(--md-sys-typescale-emphasized-headline-large-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-large-tracking)}.md-sys-typescale-emphasized-headline-medium{font-family:var(--md-sys-typescale-emphasized-headline-medium-font);font-size:var(--md-sys-typescale-emphasized-headline-medium-size);line-height:var(--md-sys-typescale-emphasized-headline-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-medium-tracking)}.md-sys-typescale-emphasized-headline-small{font-family:var(--md-sys-typescale-emphasized-headline-small-font);font-size:var(--md-sys-typescale-emphasized-headline-small-size);line-height:var(--md-sys-typescale-emphasized-headline-small-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-small-tracking)}.md-sys-typescale-emphasized-title-large{font-family:var(--md-sys-typescale-emphasized-title-large-font);font-size:var(--md-sys-typescale-emphasized-title-large-size);line-height:var(--md-sys-typescale-emphasized-title-large-line-height);font-weight:var(--md-sys-typescale-emphasized-title-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-large-tracking)}.md-sys-typescale-emphasized-title-medium{font-family:var(--md-sys-typescale-emphasized-title-medium-font);font-size:var(--md-sys-typescale-emphasized-title-medium-size);line-height:var(--md-sys-typescale-emphasized-title-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-title-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-medium-tracking)}.md-sys-typescale-emphasized-title-small{font-family:var(--md-sys-typescale-emphasized-title-small-font);font-size:var(--md-sys-typescale-emphasized-title-small-size);line-height:var(--md-sys-typescale-emphasized-title-small-line-height);font-weight:var(--md-sys-typescale-emphasized-title-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-small-tracking)}.md-sys-typescale-emphasized-body-large{font-family:var(--md-sys-typescale-emphasized-body-large-font);font-size:var(--md-sys-typescale-emphasized-body-large-size);line-height:var(--md-sys-typescale-emphasized-body-large-line-height);font-weight:var(--md-sys-typescale-emphasized-body-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-large-tracking)}.md-sys-typescale-emphasized-body-medium{font-family:var(--md-sys-typescale-emphasized-body-medium-font);font-size:var(--md-sys-typescale-emphasized-body-medium-size);line-height:var(--md-sys-typescale-emphasized-body-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-body-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-medium-tracking)}.md-sys-typescale-emphasized-body-small{font-family:var(--md-sys-typescale-emphasized-body-small-font);font-size:var(--md-sys-typescale-emphasized-body-small-size);line-height:var(--md-sys-typescale-emphasized-body-small-line-height);font-weight:var(--md-sys-typescale-emphasized-body-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-small-tracking)}.md-sys-typescale-emphasized-label-large{font-family:var(--md-sys-typescale-emphasized-label-large-font);font-size:var(--md-sys-typescale-emphasized-label-large-size);line-height:var(--md-sys-typescale-emphasized-label-large-line-height);font-weight:var(--md-sys-typescale-emphasized-label-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-large-tracking)}.md-sys-typescale-emphasized-label-medium{font-family:var(--md-sys-typescale-emphasized-label-medium-font);font-size:var(--md-sys-typescale-emphasized-label-medium-size);line-height:var(--md-sys-typescale-emphasized-label-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-label-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-medium-tracking)}.md-sys-typescale-emphasized-label-small{font-family:var(--md-sys-typescale-emphasized-label-small-font);font-size:var(--md-sys-typescale-emphasized-label-small-size);line-height:var(--md-sys-typescale-emphasized-label-small-line-height);font-weight:var(--md-sys-typescale-emphasized-label-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-small-tracking)}:root{--md-sys-badge-small-size: 6px;--md-sys-badge-large-size: 16px;--md-sys-badge-large-padding: 4px}.micl-badge-small{--md-sys-badge-inline-offset: 0px;--md-sys-badge-block-offset: 0px;box-sizing:border-box;position:fixed;inline-size:var(--md-sys-badge-small-size);block-size:var(--md-sys-badge-small-size);inset:unset;inset-block-start:calc(anchor(start) + var(--md-sys-badge-block-offset));inset-inline-start:calc(anchor(end) - var(--md-sys-badge-small-size) - var(--md-sys-badge-inline-offset));border-radius:calc(var(--md-sys-badge-small-size)/2);margin:0;padding:0;background-color:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}.micl-badge-large{--md-sys-badge-inline-offset: 0px;--md-sys-badge-block-offset: 0px;font-family:var(--md-sys-typescale-label-small-font);font-size:var(--md-sys-typescale-label-small-size);line-height:var(--md-sys-typescale-label-small-line-height);font-weight:var(--md-sys-typescale-label-small-weight);letter-spacing:var(--md-sys-typescale-label-small-tracking);box-sizing:border-box;position:fixed;inline-size:fit-content;max-inline-size:34px;min-inline-size:var(--md-sys-badge-large-size);block-size:var(--md-sys-badge-large-size);inset:unset;inset-block-start:calc(anchor(start) - 2px + var(--md-sys-badge-block-offset));inset-inline-start:calc(anchor(end) - 12px - var(--md-sys-badge-inline-offset));margin:0;padding-inline:var(--md-sys-badge-large-padding);border-radius:calc(var(--md-sys-badge-large-size)/2);background-color:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}
|
package/dist/badge.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.micl=o():e.micl=o()}(self,()=>(()=>{"use strict";var e={};return(e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})})(e),e})());
|