UNPKG

259 kBCSSView Raw
1/*!
2 * Copyright 2013-2017 ASIAL CORPORATION
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 *
16 */
17/*!
18 * Copyright 2012 Adobe Systems Inc.;
19 *
20 * Licensed under the Apache License, Version 2.0 (the "License");
21 * you may not use this file except in compliance with the License.
22 * You may obtain a copy of the License at
23 *
24 * http://www.apache.org/licenses/LICENSE-2.0
25 *
26 * Unless required by applicable law or agreed to in writing, software
27 * distributed under the License is distributed on an "AS IS" BASIS,
28 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
29 * See the License for the specific language governing permissions and
30 * limitations under the License.
31 *
32 */
33:root {
34 /* variables for iOS components */
35 --background-color: #efeff4;
36 --text-color: #1f1f21;
37 --sub-text-color: #999;
38 --highlight-color-rgb: 0, 118, 255;
39 --highlight-color: rgb(var(--highlight-color-rgb));
40 --second-highlight-color: #25a6d9;
41 --border-color: #ccc;
42 --button-background-color: var(--highlight-color);
43 --button-cta-background-color: var(--second-highlight-color);
44 --toolbar-background-color: #fafafa;
45 --toolbar-button-color: var(--highlight-color);
46 --toolbar-text-color: #1f1f21;
47 --toolbar-border-color: #b2b2b2;
48 --button-bar-color: var(--highlight-color);
49 --button-bar-active-text-color: #fff;
50 --button-bar-active-background-color: unset;
51 --button-bar-active-background-color-default-blend-color: white;
52 --button-bar-active-background-color-default-blend-time: -0.7s;
53 --button-light-color: black;
54 --segment-color: var(--highlight-color);
55 --segment-active-text-color: #fff;
56 --segment-active-background-color: unset;
57 --segment-active-background-color-default-blend-color: white;
58 --segment-active-background-color-default-blend-time: -0.7s;
59 --list-background-color: #fff;
60 --list-header-background-color: #eee;
61 --list-tap-active-background-color: #d9d9d9;
62 --list-item-chevron-color: #c7c7cc;
63 --progress-bar-color: var(--highlight-color);
64 --progress-bar-secondary-color: #65adff;
65 --progress-bar-background-color: transparent;
66 --progress-circle-primary-color: var(--highlight-color);
67 --progress-circle-secondary-color: #65adff;
68 --progress-circle-background-color: transparent;
69 --tabbar-background-color: #fafafa;
70 --tabbar-text-color: #999;
71 --tabbar-highlight-text-color: var(--highlight-color);
72 --tabbar-border-color: #ccc;
73 --switch-highlight-color: #44db5e;
74 --switch-border-color: #e5e5e5;
75 --switch-background-color: white;
76 --range-track-background-color: #a4aab3;
77 --range-track-background-color-active: var(--highlight-color);
78 --range-thumb-background-color: #fff;
79 --modal-background-color: rgba(0, 0, 0, 0.7);
80 --modal-text-color: #fff;
81 --alert-dialog-background-color: #f4f4f4;
82 --alert-dialog-text-color: #1f1f21;
83 --alert-dialog-button-color: var(--highlight-color);
84 --alert-dialog-separator-color: #ddd;
85 --dialog-background-color: #f4f4f4;
86 --dialog-text-color: var(--text-color);
87 --popover-background-color: white;
88 --popover-text-color: #1f1f21;
89 --action-sheet-title-color: #8f8e94;
90 --action-sheet-button-separator-color: rgba(0, 0, 0, 0.1);
91 --action-sheet-button-color: var(--highlight-color);
92 --action-sheet-button-destructive-color: #fe3824;
93 --action-sheet-button-background-color: rgba(255, 255, 255, 0.9);
94 --action-sheet-button-active-background-color: #e9e9e9;
95 --action-sheet-cancel-button-background-color: #fff;
96 --notification-background-color: #fe3824;
97 --notification-color: white;
98 --search-input-background-color: rgba(3, 3, 3, 0.09);
99 --fab-text-color: #ffffff;
100 --fab-background-color-rgb: var(--highlight-color-rgb);
101 --fab-background-color: rgba(var(--fab-background-color-rgb));
102 --fab-active-background-color: rgba(var(--fab-background-color-rgb), 0.7); /* color-mod(var(--fab-background-color) a(70%)) */
103 --card-background-color: white;
104 --card-text-color: #030303;
105 --toast-background-color: rgba(0, 0, 0, 0.8);
106 --toast-text-color: white;
107 --toast-button-text-color: white;
108 --select-input-color: var(--text-color);
109 --select-input-border-color: var(--border-color);
110
111 /* variables for Material Design components */
112 --material-background-color: #eceff1;
113 --material-text-color: var(--text-color);
114 --material-notification-background-color: #e91e63;
115 --material-notification-color: white;
116 --material-switch-active-thumb-color: #37474f;
117 --material-switch-active-background-color: rgba(55, 71, 79, 0.5); /* color-mod(#37474f a(50%)) */
118 --material-switch-inactive-thumb-color: #f1f1f1;
119 --material-switch-inactive-background-color: #b0afaf;
120 --material-range-track-color: #bdbdbd;
121 --material-range-thumb-color: #31313a;
122 --material-range-disabled-thumb-color: #b0b0b0;
123 --material-range-disabled-thumb-border-color: #eeeeee;
124 --material-range-zero-thumb-color: #f2f2f2;
125 --material-toolbar-background-color: #ffffff;
126 --material-toolbar-text-color: #31313a;
127 --material-toolbar-button-color: #1e88e5;
128 --material-segment-background-color: #fafafa;
129 --material-segment-active-background-color: #c8c8c8;
130 --material-segment-text-color: rgba(0, 0, 0, 0.38); /* color-mod(black a(38%)) */
131 --material-segment-active-text-color: #353535;
132 --material-button-background-color: #2979ff;
133 --material-button-text-color: #ffffff;
134 --material-button-disabled-background-color: rgba(79, 79, 79, 0.26); /* color-mod(#4f4f4f a(26%)) */
135 --material-button-disabled-color: rgba(0, 0, 0, 0.26); /* color-mod(black a(26%)) */
136 --material-flat-button-active-background-color: rgba(153, 153, 153, 0.2); /* color-mod(#999 a(20%)) */
137 --material-list-background-color: #fff;
138 --material-list-item-separator-color: #eee;
139 --material-list-header-text-color: #757575;
140 --material-checkbox-active-color: #37474f;
141 --material-checkbox-inactive-color: #717171;
142 --material-checkbox-checkmark-color: #ffffff;
143 --material-radio-button-active-color: #37474f;
144 --material-radio-button-inactive-color: #717171;
145 --material-radio-button-disabled-color: #afafaf;
146 --material-text-input-text-color: #212121;
147 --material-text-input-active-color: #3d5afe;
148 --material-text-input-inactive-color: #afafaf;
149 --material-search-background-color: #fafafa;
150 --material-dialog-background-color: #ffffff;
151 --material-dialog-text-color: var(--material-text-color);
152 --material-alert-dialog-background-color: #ffffff;
153 --material-alert-dialog-title-color: #31313a;
154 --material-alert-dialog-content-color: rgba(49, 49, 58, 0.85);
155 --material-alert-dialog-button-color: #37474f;
156 --material-progress-bar-primary-color: #37474f;
157 --material-progress-bar-secondary-color: #548ba7;
158 --material-progress-bar-background-color: transparent;
159 --material-progress-circle-primary-color: var(--material-progress-bar-primary-color);
160 --material-progress-circle-secondary-color: var(--material-progress-bar-secondary-color);
161 --material-progress-circle-background-color: transparent;
162 --material-tabbar-background-color: #ffffff;
163 --material-tabbar-text-color: #31313a;
164 --material-tabbar-highlight-text-color: #31313a;
165 --material-tabbar-highlight-color: rgba(49, 49, 58, 0.1);
166 --material-fab-text-color: #31313a;
167 --material-fab-background-color: #ffffff;
168 --material-fab-active-background-color: rgba(255, 255, 255, 0.75);
169 --material-card-background-color: white;
170 --material-card-text-color: rgba(0, 0, 0, 0.54);
171 --material-toast-background-color: rgba(0, 0, 0, 0.8);
172 --material-toast-text-color: white;
173 --material-toast-button-text-color: #bbdefb;
174 --material-select-input-color: var(--material-text-color);
175 --material-select-input-active-color: rgba(0, 0, 0, 0.15);
176 --material-select-input-inactive-color: rgba(0, 0, 0, 0.81);
177 --material-select-border-color: rgba(0, 0, 0, 0.12); /* color-mod(black a(12%)) */
178 --material-popover-background-color: #fafafa;
179 --material-popover-text-color: var(--material-text-color);
180 --material-action-sheet-text-color: #686868;
181
182 /* others */
183 --tap-highlight-color: transparent;
184}
185:root {
186 --input-bg-color: var(--background-color);
187 --input-border-color: var(--border-color);
188 --input-text-color: var(--text-color);
189 --input-placeholder-color: var(--sub-text-color);
190 --input-invalid-border-color: var(--border-color);
191 --input-invalid-text-color: var(--text-color);
192 --input-border: 1px solid var(--input-border-color);
193 --font-size: 17px;
194 --font-weight: 400;
195 --material-font-size: 17px;
196 --material-font-weight: 400;
197 --font-size--mini: calc(var(--font-size) - 3px);
198 --font-weight--large: 500;
199 --background-color--input: transparent;
200}
201html {
202 height: 100%;
203 width: 100%;
204}
205body {
206 position: absolute;
207 overflow: hidden;
208 top: 0;
209 right: 0;
210 left: 0;
211 bottom: 0;
212 padding: 0;
213 margin: 0;
214 -webkit-text-size-adjust: 100%;
215 touch-action: manipulation;
216}
217html, body, div, span, applet, object, iframe,
218h1, h2, h3, h4, h5, h6, p, blockquote, pre,
219a, abbr, acronym, address, big, cite, code,
220del, dfn, em, img, ins, kbd, q, s, samp,
221small, strike, strong, sub, sup, tt, var,
222b, u, i, center, dl, dt, dd, ol, ul, li,
223fieldset, form, label, legend,
224table, caption, tbody, tfoot, thead, tr, th, td,
225article, aside, canvas, details, embed,
226figure, figcaption, footer, header, hgroup,
227menu, nav, output, ruby, section, summary,
228time, mark, audio, video {
229 -webkit-user-select: none;
230 user-select: none;
231 -webkit-tap-highlight-color: transparent;
232 -webkit-tap-highlight-color: var(--tap-highlight-color);
233 -webkit-touch-callout: none;
234}
235input, textarea, select {
236 -webkit-user-select: auto;
237 user-select: auto;
238 -moz-user-select: text;
239 -webkit-touch-callout: none;
240}
241a, button, input, textarea, select {
242 touch-action: manipulation;
243}
244input:active, input:focus, textarea:active, textarea:focus, select:active, select:focus {
245 outline: none;
246}
247h1 {
248 font-size: 36px;
249}
250h2 {
251 font-size: 30px;
252}
253h3 {
254 font-size: 24px;
255}
256h4, h5, h6 {
257 font-size: 18px;
258}
259/* Hack to replicate the deprecated color-mod function from postcss-color-mod-function.
260 * Replace this when an alternative function to color-mod is well-supported.
261 * See: https://css-tricks.com/mixing-colors-in-pure-css/
262 *
263 * For tint, set __base variable to base color, __color variable to white, and
264 * animation-delay to tint percentage in negative seconds e.g. 70% tint -> -0.7s.
265 *
266 * For blackness, do the same as tint but set __color variable to black.
267 *
268 * For alpha, do the same as tint but set __base variable (not __color!) to
269 * transparent, and set __color variable to the color to alter.
270 */
271@-webkit-keyframes blend-background-color {
272 0% {
273 background-color: var(--blend-background-color__base);
274 }
275
276 100% {
277 background-color: var(--blend-background-color__color);
278 }
279}
280@keyframes blend-background-color {
281 0% {
282 background-color: var(--blend-background-color__base);
283 }
284
285 100% {
286 background-color: var(--blend-background-color__color);
287 }
288}
289@-webkit-keyframes blend-color {
290 0% {
291 color: var(--blend-color__base);
292 }
293
294 100% {
295 color: var(--blend-color__color);
296 }
297}
298@keyframes blend-color {
299 0% {
300 color: var(--blend-color__base);
301 }
302
303 100% {
304 color: var(--blend-color__color);
305 }
306}
307@-webkit-keyframes blend-border-color {
308 0% {
309 border-color: var(--blend-border-color__base);
310 }
311
312 100% {
313 border-color: var(--blend-border-color__color);
314 }
315}
316@keyframes blend-border-color {
317 0% {
318 border-color: var(--blend-border-color__base);
319 }
320
321 100% {
322 border-color: var(--blend-border-color__color);
323 }
324}
325:root {
326 --page-background-color: var(--background-color);
327 --page-material-background-color: var(--material-background-color);
328}
329.page {
330
331 /* mixin: reset-font */
332 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
333 -moz-osx-font-smoothing: grayscale;
334 font-weight: 400;
335 font-weight: var(--font-weight);
336
337 background-color: #efeff4;
338
339 background-color: var(--page-background-color);
340 position: absolute;
341 top: 0;
342 left: 0;
343 right: 0;
344 bottom: 0;
345 overflow-x: visible;
346 overflow-y: hidden;
347 color: #1f1f21;
348 color: var(--text-color);
349 -ms-overflow-style: none;
350 -webkit-font-smoothing: antialiased;
351}
352.page::-webkit-scrollbar {
353 display: none;
354}
355.page__content {
356 background-color: #efeff4;
357 background-color: var(--page-background-color);
358 position: absolute;
359 top: 0;
360 left: 0;
361 right: 0;
362 bottom: 0;
363 box-sizing: border-box;
364}
365.page__background {
366 background-color: #efeff4;
367 background-color: var(--page-background-color);
368 position: absolute;
369 top: 0;
370 left: 0;
371 right: 0;
372 bottom: 0;
373 box-sizing: border-box;
374}
375.page--material {
376
377 /* mixin: material-font */
378 font-family: 'Roboto', 'Noto', sans-serif;
379 -webkit-font-smoothing: antialiased;
380 font-weight: 400;
381 font-weight: var(--material-font-weight);
382
383 background-color: #eceff1;
384
385 background-color: var(--page-material-background-color);
386}
387.page--material__content {
388
389 /* mixin: material-font */
390 font-family: 'Roboto', 'Noto', sans-serif;
391 -webkit-font-smoothing: antialiased;
392
393 font-weight: 400;
394
395 font-weight: var(--font-weight);
396}
397.page__content h1,
398.page__content h2,
399.page__content h3,
400.page__content h4,
401.page__content h5 {
402
403 /* mixin: material-font */
404 font-family: 'Roboto', 'Noto', sans-serif;
405 -webkit-font-smoothing: antialiased;
406
407 font-weight: 500;
408
409 font-weight: var(--font-weight--large);
410 margin: 0.6em 0;
411 padding: 0;
412}
413.page__content h1 {
414 font-size: 28px;
415}
416.page__content h2 {
417 font-size: 24px;
418}
419.page__content h3 {
420 font-size: 20px;
421}
422.page--material__content h1,
423.page--material__content h2,
424.page--material__content h3,
425.page--material__content h4,
426.page--material__content h5 {
427
428 /* mixin: material-font */
429 font-family: 'Roboto', 'Noto', sans-serif;
430 -webkit-font-smoothing: antialiased;
431
432 font-weight: 500;
433
434 font-weight: var(--font-weight--large);
435 margin: 0.6em 0;
436 padding: 0;
437}
438.page--material__content h1 {
439 font-size: 28px;
440}
441.page--material__content h2 {
442 font-size: 24px;
443}
444.page--material__content h3 {
445 font-size: 20px;
446}
447.page--material__background {
448 background-color: #eceff1;
449 background-color: var(--page-material-background-color);
450}
451:root {
452 --switch-checked-background-color: var(--switch-highlight-color); /* background color active */
453 --switch-thumb-background-color: white;
454 --switch-thumb-border-color: var(--border-color);
455 --switch-thumb-border-color-active: var(--switch-highlight-color);
456 --switch-height: 32px;
457 --switch-width: 51px;
458}
459/*~
460 name: Switch
461 category: Switch
462 elements: ons-switch
463 markup: |
464 <label class="switch">
465 <input type="checkbox" class="switch__input">
466 <div class="switch__toggle">
467 <div class="switch__handle"></div>
468 </div>
469 </label>
470 <label class="switch">
471 <input type="checkbox" class="switch__input" checked>
472 <div class="switch__toggle">
473 <div class="switch__handle"></div>
474 </div>
475 </label>
476 <label class="switch">
477 <input type="checkbox" class="switch__input" disabled>
478 <div class="switch__toggle">
479 <div class="switch__handle"></div>
480 </div>
481 </label>
482*/
483.switch {
484 display: inline-block;
485 vertical-align: top;
486
487 /* mixin: reset-box-model */
488 box-sizing: border-box;
489 background-clip: padding-box;
490
491 /* mixin: hide-input-parent */
492 position: relative;
493
494 min-width: 51px;
495 font-size: 17px;
496 font-size: var(--font-size);
497 padding: 0 20px;
498 border: none;
499 overflow: visible;
500 width: 51px;
501 width: var(--switch-width);
502 height: 32px;
503 height: var(--switch-height);
504 z-index: 0;
505 text-align: left;
506}
507.switch__input {
508
509 /* mixin: hide-input */
510 position: absolute;
511 right: 0;
512 top: 0;
513 left: 0;
514 bottom: 0;
515 padding: 0;
516 border: 0;
517 background-color: transparent;
518 vertical-align: top;
519 outline: none;
520 width: 100%;
521 height: 100%;
522 margin: 0;
523 -webkit-appearance: none;
524 appearance: none;
525
526 z-index: 0;
527}
528/* switch toggle background */
529.switch__toggle {
530 background-color: white;
531 background-color: var(--switch-background-color);
532 position: absolute;
533 top: 0;
534 left: 0;
535 right: 0;
536 bottom: 0;
537 border-radius: 30px;
538 transition-property: all;
539 transition-duration: 0.35s;
540 transition-timing-function: ease-out;
541 box-shadow: inset 0 0 0 2px #e5e5e5;
542 box-shadow: inset 0 0 0 2px var(--switch-border-color);
543}
544/* switch toggle circle */
545.switch__handle {
546 /* mixin: reset-box-model */
547 box-sizing: border-box;
548 background-clip: padding-box;
549
550 position: absolute;
551 content: '';
552 border-radius: 28px;
553 height: 28px;
554 width: 28px;
555 background-color: white;
556 background-color: var(--switch-thumb-background-color);
557 left: 1px;
558 top: 2px;
559 transition-property: all;
560 transition-duration: 0.35s;
561 transition-timing-function: cubic-bezier(.59, .01, .5, .99);
562 box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25), 0 3px 2px rgba(0, 0, 0, 0.25);
563}
564.switch--active__handle {
565 transition: none;
566}
567:checked + .switch__toggle {
568 box-shadow: inset 0 0 0 2px #44db5e;
569 box-shadow: inset 0 0 0 2px var(--switch-checked-background-color);
570 background-color: #44db5e;
571 background-color: var(--switch-checked-background-color);
572}
573:checked + .switch__toggle > .switch__handle {
574 left: 21px;
575 box-shadow: 0 3px 2px rgba(0, 0, 0, 0.25);
576}
577:disabled + .switch__toggle {
578 /* mixin: disabled */
579 opacity: 0.3;
580 cursor: default;
581 pointer-events: none;
582}
583.switch__touch {
584 position: absolute;
585 top: -5px;
586 bottom: -5px;
587 left: -10px;
588 right: -10px;
589}
590/*~
591 name: Material Switch
592 category: Switch
593 elements: ons-switch
594 markup: |
595 <label class="switch switch--material">
596 <input type="checkbox" class="switch__input switch--material__input">
597 <div class="switch__toggle switch--material__toggle">
598 <div class="switch__handle switch--material__handle">
599 </div>
600 </div>
601 </label>
602 <label class="switch switch--material">
603 <input type="checkbox" class="switch__input switch--material__input" checked>
604 <div class="switch__toggle switch--material__toggle">
605 <div class="switch__handle switch--material__handle">
606 </div>
607 </div>
608 </label>
609 <label class="switch switch--material">
610 <input type="checkbox" class="switch__input switch--material__input" disabled>
611 <div class="switch__toggle switch--material__toggle">
612 <div class="switch__handle switch--material__handle">
613 </div>
614 </div>
615 </label>
616*/
617.switch--material {
618 width: 36px;
619 height: 24px;
620 padding: 0 10px;
621 min-width: 36px;
622}
623.switch--material__toggle {
624 background-color: #b0afaf;
625 background-color: var(--material-switch-inactive-background-color);
626 margin-top: 5px;
627 height: 14px;
628 box-shadow: none;
629}
630.switch--material__input {
631
632 /* mixin: hide-input */
633 position: absolute;
634 right: 0;
635 top: 0;
636 left: 0;
637 bottom: 0;
638 padding: 0;
639 border: 0;
640 background-color: transparent;
641 vertical-align: top;
642 outline: none;
643 width: 100%;
644 height: 100%;
645 margin: 0;
646 -webkit-appearance: none;
647 appearance: none;
648
649 z-index: 0;
650}
651.switch--material__handle {
652 background-color: #f1f1f1;
653 background-color: var(--material-switch-inactive-thumb-color);
654 left: 0;
655 margin-top: -5px;
656 width: 20px;
657 height: 20px;
658
659 /* mixin: material-shadow-2 */
660 box-shadow:
661 0 4px 5px 0 rgba(0, 0, 0, 0.14),
662 0 1px 10px 0 rgba(0, 0, 0, 0.12),
663 0 2px 4px -1px rgba(0, 0, 0, 0.4);
664}
665:checked + .switch--material__toggle {
666 background-color: rgba(55, 71, 79, 0.5);
667 background-color: var(--material-switch-active-background-color);
668 box-shadow: none;
669}
670:checked + .switch--material__toggle > .switch--material__handle {
671 left: 16px;
672 background-color: #37474f;
673 background-color: var(--material-switch-active-thumb-color);
674
675 /* mixin: material-shadow-1 */
676 box-shadow:
677 0 2px 2px 0 rgba(0, 0, 0, 0.14),
678 0 1px 5px 0 rgba(0, 0, 0, 0.12),
679 0 3px 1px -2px rgba(0, 0, 0, 0.2);
680}
681.switch--material__handle:before {
682 background: transparent;
683 content: '';
684 display: block;
685 width: 100%;
686 height: 100%;
687 border-radius: 50%;
688 z-index: 0;
689 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
690 transition: box-shadow 0.1s linear;
691}
692.switch--material__toggle > .switch--active__handle:before {
693 box-shadow: 0 0 0 14px rgba(0, 0, 0, 0.12);
694}
695:checked + .switch--material__toggle > .switch--active__handle:before {
696 /* Hack to replicate color-mod(var(--material-switch-active-thumb-color) alpha(20%)) */
697 -webkit-animation: blend-box-shadow 1s -0.2s linear forwards paused;
698 animation: blend-box-shadow 1s -0.2s linear forwards paused;
699}
700@-webkit-keyframes blend-box-shadow {
701 0% {
702 box-shadow: 0 0 0 14px transparent;
703 }
704
705 100% {
706 box-shadow: 0 0 0 14px #37474f;
707 box-shadow: 0 0 0 14px var(--material-switch-active-thumb-color);
708 }
709}
710@keyframes blend-box-shadow {
711 0% {
712 box-shadow: 0 0 0 14px transparent;
713 }
714
715 100% {
716 box-shadow: 0 0 0 14px #37474f;
717 box-shadow: 0 0 0 14px var(--material-switch-active-thumb-color);
718 }
719}
720.switch--material__touch {
721 position: absolute;
722 top: -10px;
723 bottom: -10px;
724 left: -15px;
725 right: -15px;
726}
727:root {
728 --range-thumb-size: 28px;
729 --range-track-height: 2px;
730
731 --material-range-track-height: 2px;
732 --material-range-thumb-size: 14px;
733 --material-range-thumb-radius: calc(var(--material-range-thumb-size) / 2);
734 --material-range-thumb-vertical-margin: 24px;
735 --material-range-thumb-horizontal-margin: 2px;
736}
737/*~
738 name: Range
739 category: Range
740 elements: ons-range
741 markup: |
742 <div class="range">
743 <input type="range" class="range__input">
744 <input type="range" class="range__focus-ring">
745 </div>
746
747 <div class="range range--disabled">
748 <input type="range" class="range__input" disabled>
749 <input type="range" class="range__focus-ring" disabled>
750 </div>
751*/
752.range {
753 display: inline-block;
754 position: relative;
755 width: 100px;
756 height: calc(28px + 2px);
757 height: calc(var(--range-thumb-size) + 2px);
758 margin: 0;
759 padding: 0;
760 background-image: linear-gradient(#a4aab3, #a4aab3);
761 background-image: linear-gradient(var(--range-track-background-color), var(--range-track-background-color));
762 background-position: left center;
763 background-size: 100% 2px;
764 background-size: 100% var(--range-track-height);
765 background-repeat: no-repeat;
766 background-color: transparent;
767}
768.range__input {
769 /* mixin: reset-input */
770 /* mixin: reset-box-model */
771 box-sizing: border-box;
772
773 padding: 0;
774 margin: 0;
775 font: inherit;
776 color: inherit;
777 background: transparent;
778 border: none;
779 vertical-align: top;
780 outline: none;
781 line-height: 1;
782
783 -webkit-appearance: none;
784
785 appearance: none;
786 background-image: linear-gradient(rgb(0, 118, 255), rgb(0, 118, 255));
787 background-image: linear-gradient(var(--range-track-background-color-active), var(--range-track-background-color-active));
788 background-position: left center;
789 background-size: 0% 2px;
790 background-size: 0% var(--range-track-height);
791 background-repeat: no-repeat;
792 height: calc(28px + 2px);
793 height: calc(var(--range-thumb-size) + 2px);
794 position: relative;
795 z-index: 1;
796 width: 100%;
797}
798.range__input::-moz-range-track {
799 position: relative;
800 border: none;
801 background: none;
802 box-shadow: none;
803 top: 0;
804 margin: 0;
805 padding: 0;
806}
807.range__input::-ms-track {
808 position: relative;
809 border: none;
810 background-color: #a4aab3;
811 background-color: var(--range-track-background-color);
812 height: 0;
813 border-radius: 50%;
814}
815.range__input::-webkit-slider-thumb {
816 /* mixin: range__thumb */
817 cursor: pointer;
818 position: relative;
819 height: 28px;
820 height: var(--range-thumb-size);
821 width: 28px;
822 width: var(--range-thumb-size);
823 background-color: #fff;
824 background-color: var(--range-thumb-background-color);
825 border: none;
826 box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25), 0 3px 2px rgba(0, 0, 0, 0.25);
827 border-radius: 50%;
828 margin: 0;
829 padding: 0;
830
831 box-sizing: border-box;
832 -webkit-appearance: none;
833 appearance: none;
834 top: 0;
835 z-index: 1;
836}
837.range__input::-moz-range-thumb {
838 /* mixin: range__thumb */
839 cursor: pointer;
840 position: relative;
841 height: 28px;
842 height: var(--range-thumb-size);
843 width: 28px;
844 width: var(--range-thumb-size);
845 background-color: #fff;
846 background-color: var(--range-thumb-background-color);
847 border: none;
848 box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25), 0 3px 2px rgba(0, 0, 0, 0.25);
849 border-radius: 50%;
850 margin: 0;
851 padding: 0;
852}
853.range__input::-ms-thumb {
854 /* mixin: range__thumb */
855 cursor: pointer;
856 position: relative;
857 height: 28px;
858 height: var(--range-thumb-size);
859 width: 28px;
860 width: var(--range-thumb-size);
861 background-color: #fff;
862 background-color: var(--range-thumb-background-color);
863 border: none;
864 box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25), 0 3px 2px rgba(0, 0, 0, 0.25);
865 border-radius: 50%;
866 margin: 0;
867 padding: 0;
868
869 top: 0;
870}
871.range__input::-ms-fill-lower {
872 height: 2px;
873 background-color: rgb(0, 118, 255);
874 background-color: var(--range-track-background-color-active);
875}
876.range__input::-ms-tooltip {
877 display: none;
878}
879.range__input:disabled {
880 opacity: 1;
881 pointer-events: none;
882}
883.range__focus-ring {
884 pointer-events: none;
885 top: 0;
886 left: 0;
887 display: none;
888
889 /* mixin: reset-input */
890 /* mixin: reset-box-model */
891 box-sizing: border-box;
892
893 padding: 0;
894 margin: 0;
895 font: inherit;
896 color: inherit;
897 border: none;
898 vertical-align: top;
899 outline: none;
900 line-height: 1;
901
902 -webkit-appearance: none;
903
904 appearance: none;
905 background: none;
906 height: calc(28px + 2px);
907 height: calc(var(--range-thumb-size) + 2px);
908 position: absolute;
909 z-index: 0;
910 width: 100%;
911}
912.range--disabled {
913 /* mixin: disabled */
914 opacity: 0.3;
915 cursor: default;
916 pointer-events: none;
917}
918/*~
919 name: Material Range
920 category: Range
921 elements: ons-range
922 markup: |
923 <div class="range range--material">
924 <input type="range" class="range__input range--material__input" min="0" max="100">
925 <!-- <input type="range" class="range__focus-ring range--material__focus-ring"> -->
926 </div>
927
928 <div class="range range--material range--disabled">
929 <input type="range" class="range__input range--material__input" disabled>
930 <!-- <input type="range" class="range__focus-ring range--material__focus-ring" disabled> -->
931 </div>
932*/
933.range--material {
934 position: relative;
935 background-image: linear-gradient(#bdbdbd, #bdbdbd);
936 background-image: linear-gradient(var(--material-range-track-color), var(--material-range-track-color));
937}
938.range--material__input {
939 background-image: linear-gradient(#31313a, #31313a);
940 background-image: linear-gradient(var(--material-range-thumb-color), var(--material-range-thumb-color));
941 background-position: center left;
942 background-size: 0% 2px;
943}
944.range--material__focus-ring {
945 display: block;
946}
947.range--material__focus-ring::-webkit-slider-thumb {
948 -webkit-appearance: none;
949 appearance: none;
950 width: 14px;
951 width: var(--material-range-thumb-size);
952 height: 14px;
953 height: var(--material-range-thumb-size);
954 border: none;
955 box-shadow: 0 0 0 calc((32px - 14px) / 2) #31313a;
956 box-shadow: 0 0 0 calc((32px - var(--material-range-thumb-size)) / 2) var(--material-range-thumb-color);
957 background-color: #31313a;
958 background-color: var(--material-range-thumb-color);
959 border-radius: 50%;
960 opacity: 0;
961 -webkit-transition: opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;
962 transition: opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;
963 transition: opacity 0.25s ease-out, transform 0.25s ease-out;
964 transition: opacity 0.25s ease-out, transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
965}
966.range--material__input.range__input--active + .range--material__focus-ring::-webkit-slider-thumb {
967 opacity: 0.2;
968 -webkit-transform: scale(1.5, 1.5, 1.5);
969 transform: scale(1.5, 1.5, 1.5);
970}
971.range--material__input::-webkit-slider-thumb {
972 position: relative;
973 box-sizing: border-box;
974 border: none;
975 background-color: transparent;
976 width: 14px;
977 width: var(--material-range-thumb-size);
978 height: 32px;
979 border-radius: 0;
980 box-shadow: none;
981 background-image: radial-gradient(circle farthest-corner, #31313a 0%, #31313a calc(calc(14px / 2) - 0.4px), transparent calc(14px / 2));
982 background-image: radial-gradient(circle farthest-corner, var(--material-range-thumb-color) 0%, var(--material-range-thumb-color) calc(var(--material-range-thumb-radius) - 0.4px), transparent var(--material-range-thumb-radius));
983 -webkit-transition: -webkit-transform 0.1s linear;
984 transition: -webkit-transform 0.1s linear;
985 transition: transform 0.1s linear;
986 transition: transform 0.1s linear, -webkit-transform 0.1s linear;
987 overflow: visible;
988}
989.range--material__input[_zero]::-webkit-slider-thumb {
990 background-image: radial-gradient(circle farthest-corner, #f2f2f2 0%, #f2f2f2 4px, #bdbdbd 4px, #bdbdbd calc(calc(14px / 2) - 0.6px), transparent calc(calc(14px / 2)));
991 background-image: radial-gradient(circle farthest-corner, var(--material-range-zero-thumb-color) 0%, var(--material-range-zero-thumb-color) 4px, var(--material-range-track-color) 4px, var(--material-range-track-color) calc(var(--material-range-thumb-radius) - 0.6px), transparent calc(var(--material-range-thumb-radius)));
992}
993.range--material__input[_zero] + .range--material__focus-ring::-webkit-slider-thumb {
994 box-shadow: 0 0 0 calc((32px - 14px) / 2) #bdbdbd;
995 box-shadow: 0 0 0 calc((32px - var(--material-range-thumb-size)) / 2) var(--material-range-track-color);
996}
997.range--material__input::-moz-range-track {
998 background: none;
999}
1000.range--material__input::-moz-range-thumb,
1001.range--material__input:focus::-moz-range-thumb {
1002 box-sizing: border-box;
1003 border: none;
1004 width: 14px;
1005 width: var(--material-range-thumb-size);
1006 height: 32px;
1007 border-radius: 0;
1008 background-color: transparent;
1009 background-image: -moz-radial-gradient(circle farthest-corner, var(--material-range-thumb-color) 0%, var(--material-range-thumb-color) calc(var(--material-range-thumb-radius) - 0.4px), transparent var(--material-range-thumb-radius)); /* stylelint-disable-line */
1010 box-shadow: none;
1011}
1012.range--material__input:active::-webkit-slider-thumb,
1013.range--material__input.range__input--active::-webkit-slider-thumb { /* NOTICE: ":active" does not work on Android Chrome. */
1014 -webkit-transform: scale(1.5);
1015 transform: scale(1.5);
1016 -webkit-transition: -webkit-transform 0.1s linear;
1017 transition: -webkit-transform 0.1s linear;
1018 transition: transform 0.1s linear;
1019 transition: transform 0.1s linear, -webkit-transform 0.1s linear;
1020}
1021/* stylelint-disable */
1022.range--disabled.range--material { /* stylelint-enable */
1023 opacity: 1;
1024}
1025/* stylelint-disable */
1026.range--disabled > .range--material__input { /* stylelint-enable */
1027 background-image: none;
1028}
1029.range--material__input:disabled::-webkit-slider-thumb {
1030 background-image: radial-gradient(circle farthest-corner, #b0b0b0 0%, #b0b0b0 4px, #eeeeee 4.4px, #eeeeee calc(calc(14px / 2) + 0.6px), transparent calc(calc(14px / 2) + 0.6px));
1031 background-image: radial-gradient(circle farthest-corner, var(--material-range-disabled-thumb-color) 0%, var(--material-range-disabled-thumb-color) 4px, var(--material-range-disabled-thumb-border-color) 4.4px, var(--material-range-disabled-thumb-border-color) calc(var(--material-range-thumb-radius) + 0.6px), transparent calc(var(--material-range-thumb-radius) + 0.6px));
1032 -webkit-transition: none;
1033 transition: none;
1034}
1035.range--material__input:disabled::-moz-range-thumb {
1036 background-image: -moz-radial-gradient(circle farthest-corner, var(--material-range-disabled-thumb-color) 0%, var(--material-range-disabled-thumb-color) 4px, var(--material-range-disabled-thumb-border-color) 4.4px, var(--material-range-disabled-thumb-border-color) calc(var(--material-range-thumb-radius) + 0.6px), transparent calc(var(--material-range-thumb-radius) + 0.6px)); /* stylelint-disable-line */
1037 -moz-transition: none;
1038 transition: none;
1039}
1040:root {
1041 --notification-border-radius: 19px;
1042 --notification-width: auto;
1043 --notification-height: 19px;
1044 --notification-min-width: 19px;
1045 --notification-padding: 0 4px;
1046 --notification-font-weight: var(--font-weight);
1047 --notification-font-size: 16px;
1048
1049 --material-notification-font-size: 16px;
1050 --material-notification-font-weight: 500;
1051}
1052/*~
1053 name: Notification
1054 category: Notification
1055 markup: |
1056 <span class="notification">1</span>
1057 <span class="notification">10</span>
1058 <span class="notification">999</span>
1059*/
1060.notification {
1061 position: relative;
1062 display: inline-block;
1063 vertical-align: top;
1064 font: inherit;
1065 border: none;
1066
1067 /* mixin: reset-box-model */
1068 box-sizing: border-box;
1069
1070 /* mixin: reset-base */
1071 background: transparent;
1072
1073 /* mixin: reset-font */
1074 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
1075 -webkit-font-smoothing: antialiased;
1076 -moz-osx-font-smoothing: grayscale;
1077
1078 /* mixin: reset-cursor */
1079 cursor: default;
1080 -webkit-user-select: none;
1081 user-select: none;
1082
1083 /* mixin: ellipsis */
1084 text-overflow: ellipsis;
1085 white-space: nowrap;
1086 overflow: hidden;
1087
1088 text-decoration: none;
1089 margin: 0;
1090 padding: 0 4px;
1091 padding: var(--notification-padding);
1092 width: auto;
1093 width: var(--notification-width);
1094 height: 19px;
1095 height: var(--notification-height);
1096 border-radius: 19px;
1097 border-radius: var(--notification-border-radius);
1098 background-color: #fe3824;
1099 background-color: var(--notification-background-color);
1100 color: white;
1101 color: var(--notification-color);
1102 text-align: center;
1103 font-size: 16px;
1104 font-size: var(--notification-font-size);
1105 min-width: 19px;
1106 min-width: var(--notification-min-width);
1107 line-height: 19px;
1108 line-height: var(--notification-height);
1109 font-weight: 400;
1110 font-weight: var(--notification-font-weight);
1111}
1112.notification:empty {
1113 display: none;
1114}
1115/*~
1116 name: Material Notification
1117 category: Notification
1118 markup: |
1119 <span class="notification notification--material">1</span>
1120 <span class="notification notification--material">10</span>
1121 <span class="notification notification--material">999</span>
1122*/
1123.notification--material {
1124 /* mixin: material-font */
1125 font-family: 'Roboto', 'Noto', sans-serif;
1126 -webkit-font-smoothing: antialiased;
1127
1128 background-color: #e91e63;
1129
1130 background-color: var(--material-notification-background-color);
1131 font-size: 16px;
1132 font-size: var(--material-notification-font-size);
1133 font-weight: 500;
1134 font-weight: var(--material-notification-font-weight);
1135 color: white;
1136 color: var(--material-notification-color);
1137}
1138:root {
1139 --toolbar-separator-color: var(--toolbar-border-color);
1140
1141 --toolbar-height: 44px;
1142 --toolbar-box-shadow: none;
1143 --toolbar-padding: 0;
1144 --toolbar-separator: 1px solid var(--toolbar-separator-color);
1145 --toolbar-material-height: 56px;
1146}
1147/*~
1148 name: Toolbar
1149 category: Toolbar
1150 elements: ons-toolbar
1151 markup: |
1152 <div class="toolbar">
1153 <div class="toolbar__center">Navigation Bar</div>
1154 </div>
1155*/
1156.toolbar {
1157 /* mixin: toolbar */
1158 /* mixin: reset-font */
1159 -webkit-font-smoothing: antialiased;
1160 -moz-osx-font-smoothing: grayscale;
1161 /* mixin: reset-container */
1162 /* mixin: reset-box-model */
1163 box-sizing: border-box;
1164 /* mixin: reset-overflow */
1165 overflow: hidden;
1166 word-spacing: 0;
1167 /* mixin: reset-base */
1168 padding: 0;
1169 margin: 0;
1170 font: inherit;
1171 border: none;
1172 line-height: normal;
1173 /* mixin: reset-cursor */
1174 cursor: default;
1175 -webkit-user-select: none;
1176 user-select: none;
1177 z-index: 2;
1178
1179 display: -webkit-flex;
1180
1181 display: flex;
1182 -webkit-align-items: stretch;
1183 align-items: stretch;
1184 -webkit-flex-wrap: nowrap;
1185 flex-wrap: nowrap;
1186 height: 44px;
1187 height: var(--toolbar-height);
1188 padding-left: 0;
1189 padding-left: var(--toolbar-padding);
1190 padding-right: 0;
1191 padding-right: var(--toolbar-padding);
1192 background: #fafafa;
1193 background: var(--toolbar-background-color);
1194 color: #1f1f21;
1195 color: var(--toolbar-text-color);
1196 box-shadow: none;
1197 box-shadow: var(--toolbar-box-shadow);
1198 font-weight: 400;
1199 font-weight: var(--font-weight);
1200 width: 100%;
1201 white-space: nowrap;
1202 border-bottom: none;
1203 background-size: 100% 1px;
1204 background-repeat: no-repeat;
1205 background-position: bottom;
1206 background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 100%);
1207 background-image: linear-gradient(0deg, var(--toolbar-separator-color), var(--toolbar-separator-color) 100%);
1208}
1209/* @media (--retina-query) */
1210@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
1211 .toolbar {
1212 background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%);
1213 background-image: linear-gradient(0deg, var(--toolbar-separator-color), var(--toolbar-separator-color) 50%, transparent 50%);
1214 }
1215}
1216.toolbar__bg {
1217 background: #fafafa;
1218 background: var(--toolbar-background-color);
1219}
1220.toolbar__item {
1221
1222 /* mixin: toolbar__item */
1223 /* mixin: reset-box-model */
1224 box-sizing: border-box;
1225 /* mixin: reset-base */
1226 padding: 0;
1227 margin: 0;
1228 font: inherit;
1229 color: inherit;
1230 background: transparent;
1231 border: none;
1232 line-height: normal;
1233
1234 height: 44px;
1235
1236 height: var(--toolbar-height);
1237 overflow: visible;
1238 display: block;
1239 vertical-align: middle;
1240}
1241.toolbar__left {
1242
1243 /* mixin: toolbar__item */
1244 /* mixin: reset-box-model */
1245 box-sizing: border-box;
1246 /* mixin: reset-base */
1247 padding: 0;
1248 margin: 0;
1249 font: inherit;
1250 color: inherit;
1251 background: transparent;
1252 border: none;
1253
1254 max-width: 50%;
1255 width: 27%;
1256 text-align: left;
1257 line-height: 44px;
1258 line-height: var(--toolbar-height);
1259}
1260.toolbar__right {
1261
1262 /* mixin: toolbar__item */
1263 /* mixin: reset-box-model */
1264 box-sizing: border-box;
1265 /* mixin: reset-base */
1266 padding: 0;
1267 margin: 0;
1268 font: inherit;
1269 color: inherit;
1270 background: transparent;
1271 border: none;
1272
1273 max-width: 50%;
1274 width: 27%;
1275 text-align: right;
1276 line-height: 44px;
1277 line-height: var(--toolbar-height);
1278}
1279.toolbar__center {
1280
1281 /* mixin: toolbar__item */
1282 /* mixin: reset-box-model */
1283 box-sizing: border-box;
1284 /* mixin: reset-base */
1285 padding: 0;
1286 margin: 0;
1287 font: inherit;
1288 background: transparent;
1289 border: none;
1290
1291 width: 46%;
1292 text-align: center;
1293 line-height: 44px;
1294 line-height: var(--toolbar-height);
1295 font-size: 17px;
1296 font-size: var(--font-size);
1297 font-weight: 500;
1298 font-weight: var(--font-weight--large);
1299 color: #1f1f21;
1300 color: var(--toolbar-text-color);
1301}
1302.toolbar__title {
1303 line-height: 44px;
1304 line-height: var(--toolbar-height);
1305 font-size: 17px;
1306 font-size: var(--font-size);
1307 font-weight: 500;
1308 font-weight: var(--font-weight--large);
1309 color: #1f1f21;
1310 color: var(--toolbar-text-color);
1311 margin: 0;
1312 padding: 0;
1313 overflow: visible;
1314}
1315.toolbar__center:first-child:last-child {
1316 width: 100%;
1317}
1318/*~
1319 name: Toolbar Item
1320 category: Toolbar
1321 elements: ons-toolbar ons-toolbar-button
1322 markup: |
1323 <div class="toolbar">
1324 <div class="toolbar__left">
1325 <span class="toolbar-button">
1326 <i class="ion-ios-menu" style="font-size:32px; vertical-align:-6px;"></i>
1327 </span>
1328 </div>
1329
1330 <div class="toolbar__center">
1331 Navigation Bar
1332 </div>
1333
1334 <div class="toolbar__right">
1335 <span class="toolbar-button">Label</span>
1336 </div>
1337 </div>
1338*/
1339/*~
1340 name: Toolbar with Outline Button
1341 category: Toolbar
1342 elements: ons-toolbar ons-toolbar-button
1343 markup: |
1344 <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
1345 <div class="toolbar">
1346 <div class="toolbar__left">
1347 <span class="toolbar-button toolbar-button--outline">
1348 <i class="ion-ios-menu" style="font-size:32px; vertical-align:-6px;"></i>
1349 </span>
1350 </div>
1351
1352 <div class="toolbar__center">
1353 Title
1354 </div>
1355
1356 <div class="toolbar__right">
1357 <span class="toolbar-button toolbar-button--outline">Button</span>
1358 </div>
1359 </div>
1360*/
1361/*~
1362 name: Bottom Bar
1363 category: Toolbar
1364 elements: ons-bottom-toolbar
1365 markup: |
1366 <div class="bottom-bar">
1367 <div class="bottom-bar__line-height" style="text-align:center">Bottom Toolbar</div>
1368 </div>
1369*/
1370.bottom-bar {
1371 /* mixin: toolbar */
1372 /* mixin: reset-font */
1373 -webkit-font-smoothing: antialiased;
1374 -moz-osx-font-smoothing: grayscale;
1375 /* mixin: reset-container */
1376 /* mixin: reset-box-model */
1377 box-sizing: border-box;
1378 /* mixin: reset-overflow */
1379 white-space: nowrap;
1380 overflow: hidden;
1381 word-spacing: 0;
1382 /* mixin: reset-base */
1383 padding: 0;
1384 margin: 0;
1385 font: inherit;
1386 border: none;
1387 line-height: normal;
1388 /* mixin: reset-cursor */
1389 cursor: default;
1390 -webkit-user-select: none;
1391 user-select: none;
1392 z-index: 2;
1393
1394 display: block;
1395 height: 44px;
1396 height: var(--toolbar-height);
1397 padding-left: 0;
1398 padding-left: var(--toolbar-padding);
1399 padding-right: 0;
1400 padding-right: var(--toolbar-padding);
1401 background: #fafafa;
1402 background: var(--toolbar-background-color);
1403 color: #1f1f21;
1404 color: var(--toolbar-text-color);
1405 box-shadow: none;
1406 box-shadow: var(--toolbar-box-shadow);
1407 font-weight: 400;
1408 font-weight: var(--font-weight);
1409 border-bottom: none;
1410 position: absolute;
1411 bottom: 0;
1412 right: 0;
1413 left: 0;
1414 border-top: none;
1415 background-size: 100% 1px;
1416 background-repeat: no-repeat;
1417 background-position: top;
1418 background-image: linear-gradient(180deg, #b2b2b2, #b2b2b2 100%);
1419 background-image: linear-gradient(180deg, var(--toolbar-separator-color), var(--toolbar-separator-color) 100%);
1420}
1421/* @media (--retina-query) */
1422@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
1423 .bottom-bar {
1424 background-image: linear-gradient(180deg, #b2b2b2, #b2b2b2 50%, transparent 50%);
1425 background-image: linear-gradient(180deg, var(--toolbar-separator-color), var(--toolbar-separator-color) 50%, transparent 50%);
1426 }
1427}
1428.bottom-bar__line-height {
1429 line-height: 44px;
1430 line-height: var(--toolbar-height);
1431 padding-bottom: 0;
1432 padding-top: 0;
1433}
1434.bottom-bar--aligned {
1435 display: -webkit-flex;
1436 display: flex;
1437 -webkit-flex-wrap: nowrap;
1438 flex-wrap: nowrap;
1439 line-height: 44px;
1440 line-height: var(--toolbar-height);
1441}
1442.bottom-bar--transparent {
1443 background-color: transparent;
1444 background-image: none;
1445 border: none;
1446}
1447/*~
1448 name: Toolbar with Segment
1449 category: Toolbar
1450 elements: ons-toolbar
1451 markup: |
1452 <div class="toolbar">
1453 <div class="toolbar__center">
1454 <div class="segment" style="width:200px;margin:7px 50px;">
1455 <div class="segment__item">
1456 <input type="radio" class="segment__input" name="navi-segment-a" checked>
1457 <div class="segment__button">One</div>
1458 </div>
1459
1460 <div class="segment__item">
1461 <input type="radio" class="segment__input" name="navi-segment-a">
1462 <div class="segment__button">Two</div>
1463 </div>
1464 </div>
1465 </div>
1466 </div>
1467*/
1468/*~
1469 name: Material Toolbar
1470 category: Toolbar
1471 elements: ons-toolbar
1472 markup: |
1473 <div class="toolbar toolbar--material">
1474 <div class="toolbar__center toolbar--material__center">
1475 Title
1476 </div>
1477 </div>
1478*/
1479.toolbar--material {
1480 display: -webkit-flex;
1481 display: flex;
1482 -webkit-flex-wrap: nowrap;
1483 flex-wrap: nowrap;
1484 -webkit-justify-content: space-between;
1485 justify-content: space-between;
1486 height: 56px;
1487 height: var(--toolbar-material-height);
1488 border-bottom: 0;
1489 box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
1490 padding: 0;
1491 background-color: #ffffff;
1492 background-color: var(--material-toolbar-background-color);
1493 background-size: 0;
1494}
1495/*~
1496 name: No Shadow Toolbar
1497 category: Toolbar
1498 elements: ons-toolbar
1499 markup: |
1500 <div class="toolbar toolbar--noshadow">
1501 <div class="toolbar__left">
1502 <span class="toolbar-button">
1503 <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
1504 </span>
1505 </div>
1506 <div class="toolbar__center">
1507 Navigation Bar
1508 </div>
1509 <div class="toolbar__right">
1510 <span class="toolbar-button">Label</span>
1511 </div>
1512 </div>
1513*/
1514.toolbar--noshadow {
1515 box-shadow: none;
1516 background-image: none;
1517 border-bottom: none;
1518}
1519.toolbar--material__left, .toolbar--material__right {
1520
1521 /* mixin: toolbar--material-font */
1522 /* mixin: material-font */
1523 font-family: 'Roboto', 'Noto', sans-serif;
1524 -webkit-font-smoothing: antialiased;
1525 font-size: 20px;
1526 font-weight: 500;
1527 color: #31313a;
1528 color: var(--material-toolbar-text-color);
1529
1530 height: 56px;
1531
1532 height: var(--toolbar-material-height);
1533 min-width: 72px;
1534 width: auto;
1535 line-height: 56px;
1536 line-height: var(--toolbar-material-height);
1537}
1538.toolbar--material__center {
1539
1540 /* mixin: toolbar--material-font */
1541 /* mixin: material-font */
1542 font-family: 'Roboto', 'Noto', sans-serif;
1543 -webkit-font-smoothing: antialiased;
1544 font-size: 20px;
1545 font-weight: 500;
1546 color: #31313a;
1547 color: var(--material-toolbar-text-color);
1548
1549 height: 56px;
1550
1551 height: var(--toolbar-material-height);
1552 width: auto;
1553 -webkit-flex-grow: 1;
1554 flex-grow: 1;
1555 overflow: hidden;
1556 text-overflow: ellipsis;
1557 text-align: left;
1558 line-height: 56px;
1559 line-height: var(--toolbar-material-height);
1560}
1561.toolbar--material__center:first-child {
1562 margin-left: 16px;
1563}
1564.toolbar--material__center:last-child {
1565 margin-right: 16px;
1566}
1567.toolbar--material__left:empty, .toolbar--material__right:empty {
1568 min-width: 16px;
1569}
1570/*~
1571 name: Material Toolbar with Icons
1572 category: Toolbar
1573 elements: ons-toolbar
1574 markup: |
1575 <div class="toolbar toolbar--material">
1576 <div class="toolbar__left toolbar--material__left">
1577 <span class="toolbar-button toolbar-button--material">
1578 <i class="zmdi zmdi-menu"></i>
1579 </span>
1580 </div>
1581 <div class="toolbar__center toolbar--material__center">
1582 Title
1583 </div>
1584 <div class="toolbar__right toolbar--material__right">
1585 <span class="toolbar-button toolbar-button--material">
1586 <i class="zmdi zmdi-search"></i>
1587 </span>
1588 <span class="toolbar-button toolbar-button--material">
1589 <i class="zmdi zmdi-favorite"></i>
1590 </span>
1591 <span class="toolbar-button toolbar-button--material">
1592 <i class="zmdi zmdi-more-vert"></i>
1593 </span>
1594 </div>
1595 </div>
1596*/
1597/*~
1598 name: Transparent Toolbar
1599 category: Toolbar
1600 elements: ons-toolbar
1601 markup: |
1602 <div class="toolbar toolbar--transparent">
1603 <div class="toolbar__left">
1604 <span class="toolbar-button">
1605 <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
1606 </span>
1607 </div>
1608 <div class="toolbar__center">
1609 Navigation Bar
1610 </div>
1611 <div class="toolbar__right">
1612 <span class="toolbar-button">Label</span>
1613 </div>
1614 </div>
1615*/
1616.toolbar--transparent {
1617 background-color: transparent;
1618 box-shadow: none;
1619 background-image: none;
1620 border-bottom: none;
1621}
1622:root {
1623 --button-text-color: white;
1624 --button-quiet-color: var(--highlight-color);
1625 --button-cta-color: white;
1626 --button-large-padding: 4px 12px;
1627 --button-padding: 4px 10px;
1628 --button-line-height: 32px;
1629 --button-large-line-height: 36px;
1630 --button-active-opacity: 0.2;
1631 --button-border-radius: 3px;
1632}
1633/*~
1634 name: Button
1635 category: Button
1636 elements: ons-button
1637 markup: |
1638 <button class="button">Button</button>
1639 <button class="button" disabled>Button</button>
1640*/
1641.button {
1642 position: relative;
1643 display: inline-block;
1644
1645 /* mixin: reset-box-model */
1646 box-sizing: border-box;
1647
1648 /* mixin: reset-base */
1649 margin: 0;
1650
1651 /* mixin: reset-font */
1652 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
1653 -webkit-font-smoothing: antialiased;
1654 -moz-osx-font-smoothing: grayscale;
1655 font-weight: 400;
1656 font-weight: var(--font-weight);
1657
1658 /* mixin: reset-cursor */
1659 cursor: default;
1660 -webkit-user-select: none;
1661 user-select: none;
1662
1663 /* mixin: ellipsis */
1664 text-overflow: ellipsis;
1665 white-space: nowrap;
1666 overflow: hidden;
1667
1668 height: auto;
1669 text-decoration: none;
1670 padding: 4px 10px;
1671 padding: var(--button-padding);
1672 font-size: 17px;
1673 font-size: var(--font-size);
1674 line-height: 32px;
1675 line-height: var(--button-line-height);
1676 letter-spacing: 0;
1677 color: white;
1678 color: var(--button-text-color);
1679 vertical-align: middle;
1680 background-color: rgb(0, 118, 255);
1681 background-color: var(--button-background-color);
1682 border: 0 solid currentColor;
1683 border-radius: 3px;
1684 border-radius: var(--button-border-radius);
1685 transition: none;
1686}
1687.button::-moz-focus-inner {
1688 outline: 0;
1689}
1690.button:hover {
1691 transition: none;
1692}
1693.button:active {
1694 background-color: rgb(0, 118, 255);
1695 background-color: var(--button-background-color);
1696 transition: none;
1697 opacity: 0.2;
1698 opacity: var(--button-active-opacity);
1699}
1700.button:focus {
1701 outline: 0;
1702}
1703.button:disabled, .button[disabled] {
1704 /* mixin: disabled */
1705 opacity: 0.3;
1706 cursor: default;
1707 pointer-events: none;
1708}
1709/*~
1710 name: Outline Button
1711 category: Button
1712 elements: ons-button
1713 markup: |
1714 <button class="button button--outline">Button</button>
1715 <button class="button button--outline" disabled>Button</button>
1716*/
1717.button--outline {
1718 background-color: transparent;
1719 border: 1px solid rgb(0, 118, 255);
1720 border: 1px solid var(--button-background-color);
1721 color: rgb(0, 118, 255);
1722 color: var(--button-background-color);
1723}
1724.button--outline:active {
1725 border: 1px solid rgb(0, 118, 255);
1726 border: 1px solid var(--button-background-color);
1727 color: rgb(0, 118, 255);
1728 color: var(--button-background-color);
1729 opacity: 1;
1730
1731 /* Hack to replicate tint from the deprecated color-mod function. */
1732 --blend-background-color__base: var(--button-background-color);
1733 --blend-background-color__color: white;
1734 /* stylelint-disable-next-line no-unknown-animations */
1735 -webkit-animation: blend-background-color 1s -0.7s linear forwards paused;
1736 animation: blend-background-color 1s -0.7s linear forwards paused;
1737}
1738.button--outline:hover {
1739 border: 1px solid rgb(0, 118, 255);
1740 border: 1px solid var(--button-background-color);
1741 transition: 0;
1742}
1743/*~
1744 name: Light Button
1745 category: Button
1746 elements: ons-button
1747 markup: |
1748 <button class="button button--light">Button</button>
1749 <button class="button button--light" disabled>Button</button>
1750*/
1751.button--light {
1752 background-color: transparent;
1753 border: 1px solid;
1754
1755 /* Hack to replicate color-mod(var(--button-light-color) a(40%)) */
1756 --blend-color__base: transparent;
1757 --blend-color__color: var(--button-light-color);
1758
1759 /* Hack to replicate color-mod(var(--button-light-color) a(20%)) */
1760 --blend-border-color__base: transparent;
1761 --blend-border-color__color: var(--button-light-color);
1762
1763 /* stylelint-disable no-unknown-animations */
1764 -webkit-animation: blend-color 1s -0.4s linear forwards paused,
1765 blend-border-color 1s -0.2s linear forwards paused;
1766 animation: blend-color 1s -0.4s linear forwards paused,
1767 blend-border-color 1s -0.2s linear forwards paused;
1768 /* stylelint-enable no-unknown-animations */
1769}
1770.button--light:active {
1771 border: 1px solid;
1772
1773 /* Hack to replicate color-mod(var(--button-light-color) a(5%)) */
1774 --blend-background-color__base: transparent;
1775 --blend-background-color__color: var(--button-light-color);
1776
1777 /* Hack to replicate color-mod(var(--button-light-color) a(40%)) */
1778 --blend-color__base: transparent;
1779 --blend-color__color: var(--button-light-color);
1780
1781 /* Hack to replicate color-mod(var(--button-light-color) a(20%)) */
1782 --blend-border-color__base: transparent;
1783 --blend-border-color__color: var(--button-light-color);
1784
1785 /* stylelint-disable no-unknown-animations */
1786 -webkit-animation: blend-background-color 1s -0.05s linear forwards paused,
1787 blend-color 1s -0.4s linear forwards paused,
1788 blend-border-color 1s -0.2s linear forwards paused;
1789 animation: blend-background-color 1s -0.05s linear forwards paused,
1790 blend-color 1s -0.4s linear forwards paused,
1791 blend-border-color 1s -0.2s linear forwards paused;
1792 /* stylelint-enable no-unknown-animations */
1793
1794 opacity: 1;
1795}
1796/*~
1797 name: Quiet Button
1798 category: Button
1799 elements: ons-button
1800 markup: |
1801 <button class="button button--quiet">Button</button>
1802 <button class="button button--quiet" disabled>Button</button>
1803*/
1804.button--quiet {
1805 /* mixin: button--quiet */
1806 box-shadow: none;
1807
1808 background: transparent;
1809 color: rgb(0, 118, 255);
1810 color: var(--button-quiet-color);
1811 border: none;
1812}
1813.button--quiet:disabled,
1814.button--quiet[disabled] {
1815 border: none;
1816}
1817.button--quiet:active {
1818 background-color: transparent;
1819 border: none;
1820 transition: none;
1821 opacity: 0.2;
1822 opacity: var(--button-active-opacity);
1823 color: rgb(0, 118, 255);
1824 color: var(--button-quiet-color);
1825}
1826/*~
1827 name: Call To Action Button
1828 category: Button
1829 elements: ons-button
1830 markup: |
1831 <button class="button button--cta">Button</button>
1832 <button class="button button--cta" disabled>Button</button>
1833*/
1834.button--cta {
1835 border: none;
1836 background-color: #25a6d9;
1837 background-color: var(--button-cta-background-color);
1838 color: white;
1839 color: var(--button-cta-color);
1840}
1841.button--cta:active {
1842 color: white;
1843 color: var(--button-cta-color);
1844 background-color: #25a6d9;
1845 background-color: var(--button-cta-background-color);
1846 transition: none;
1847 opacity: 0.2;
1848 opacity: var(--button-active-opacity);
1849}
1850/*
1851 name: Large Button
1852 category: Button
1853 elements: ons-button
1854 markup: |
1855 <button class="button button--large" style="width: 95%; margin: 0 auto;">Button</button>
1856*/
1857.button--large {
1858 font-size: 17px;
1859 font-size: var(--font-size);
1860 font-weight: 500;
1861 font-weight: var(--font-weight--large);
1862 line-height: 36px;
1863 line-height: var(--button-large-line-height);
1864 padding: 4px 12px;
1865 padding: var(--button-large-padding);
1866 display: block;
1867 width: 100%;
1868 text-align: center;
1869}
1870.button--large:active {
1871 transition: none;
1872}
1873/*~
1874 name: Large Quiet Button
1875 category: Button
1876 elements: ons-button
1877 markup: |
1878 <button class="button button--large--quiet" style="width: 95%; margin: 0 auto;">Button</button>
1879*/
1880.button--large--quiet { /* stylelint-disable-line */
1881 font-size: 17px;
1882 font-size: var(--font-size);
1883 font-weight: 500;
1884 font-weight: var(--font-weight--large);
1885 line-height: 36px;
1886 line-height: var(--button-large-line-height);
1887 padding: 4px 12px;
1888 padding: var(--button-large-padding);
1889 display: block;
1890 width: 100%;
1891
1892 /* mixin: button--quiet */
1893 background: transparent;
1894 border: 1px solid transparent;
1895 box-shadow: none;
1896
1897 color: rgb(0, 118, 255);
1898
1899 color: var(--button-quiet-color);
1900 text-align: center;
1901}
1902.button--large--quiet:active { /* stylelint-disable-line */
1903 transition: none;
1904 opacity: 0.2;
1905 opacity: var(--button-active-opacity);
1906 color: rgb(0, 118, 255);
1907 color: var(--button-quiet-color);
1908
1909 /* mixin: button--quiet */
1910 background: transparent;
1911 border: 1px solid transparent;
1912 box-shadow: none;
1913}
1914.button--large--quiet:focus { /* stylelint-disable-line */
1915 outline: 0;
1916}
1917/*~
1918 name: Large Call To Action Button
1919 category: Button
1920 elements: ons-button
1921 markup: |
1922 <button class="button button--large--cta" style="width: 95%; margin: 0 auto;">Button</button>
1923*/
1924.button--large--cta { /* stylelint-disable-line */
1925 border: none;
1926 background-color: #25a6d9;
1927 background-color: var(--button-cta-background-color);
1928 color: white;
1929 color: var(--button-cta-color);
1930 font-size: 17px;
1931 font-size: var(--font-size);
1932 font-weight: 500;
1933 font-weight: var(--font-weight--large);
1934 line-height: 36px;
1935 line-height: var(--button-large-line-height);
1936 padding: 4px 12px;
1937 padding: var(--button-large-padding);
1938 width: 100%;
1939 text-align: center;
1940 display: block;
1941}
1942.button--large--cta:active { /* stylelint-disable-line */
1943 color: white;
1944 color: var(--button-cta-color);
1945 background-color: #25a6d9;
1946 background-color: var(--button-cta-background-color);
1947 transition: none;
1948 opacity: 0.2;
1949 opacity: var(--button-active-opacity);
1950}
1951/*~
1952 name: Material Button
1953 category: Button
1954 elements: ons-button
1955 markup: |
1956 <button class="button button--material">BUTTON</button>
1957 <button class="button button--material" disabled>DISABLED</button>
1958*/
1959.button--material {
1960 /* mixin: button--material */
1961 /* mixin: material-shadow-1 */
1962 box-shadow:
1963 0 2px 2px 0 rgba(0, 0, 0, 0.14),
1964 0 1px 5px 0 rgba(0, 0, 0, 0.12),
1965 0 3px 1px -2px rgba(0, 0, 0, 0.2);
1966
1967 /* mixin: material-font */
1968 font-family: 'Roboto', 'Noto', sans-serif;
1969 -webkit-font-smoothing: antialiased;
1970
1971 min-height: 36px;
1972 line-height: 36px;
1973 padding: 0 16px;
1974 text-align: center;
1975 font-size: 14px;
1976 -webkit-transform: translate3d(0, 0, 0);
1977 transform: translate3d(0, 0, 0);
1978 text-transform: uppercase;
1979 background-color: #2979ff;
1980 background-color: var(--material-button-background-color);
1981 color: #ffffff;
1982 color: var(--material-button-text-color);
1983 font-weight: 500;
1984 font-weight: var(--font-weight--large);
1985
1986 opacity: 1;
1987 transition: all 0.25s linear;
1988}
1989.button--material:hover {
1990 transition: all 0.25s linear;
1991}
1992.button--material:active {
1993 /* mixin: material-shadow-3 */
1994 box-shadow:
1995 0 6px 10px 0 rgba(0, 0, 0, 0.14),
1996 0 1px 18px 0 rgba(0, 0, 0, 0.12),
1997 0 3px 5px -1px rgba(0, 0, 0, 0.4);
1998
1999 background-color: #2979ff;
2000
2001 background-color: var(--material-button-background-color);
2002 opacity: 0.9;
2003 transition: all 0.25s linear;
2004}
2005.button--material:disabled,
2006.button--material[disabled] {
2007 transition: none;
2008
2009 /* mixin: material-shadow-0 */
2010 box-shadow: none;
2011
2012 background-color: rgba(79, 79, 79, 0.26);
2013
2014 background-color: var(--material-button-disabled-background-color);
2015 color: rgba(0, 0, 0, 0.26);
2016 color: var(--material-button-disabled-color);
2017 opacity: 1;
2018}
2019/*~
2020 name: Material Flat Button
2021 category: Button
2022 elements: ons-button
2023 markup: |
2024 <button class="button button--material--flat">BUTTON</button>
2025 <button class="button button--material--flat" disabled>DISABLED</button>
2026*/
2027.button--material--flat { /* stylelint-disable-line */
2028 /* mixin: material-font */
2029 font-family: 'Roboto', 'Noto', sans-serif;
2030 -webkit-font-smoothing: antialiased;
2031
2032 min-height: 36px;
2033 line-height: 36px;
2034 padding: 0 16px;
2035 text-align: center;
2036 font-size: 14px;
2037 -webkit-transform: translate3d(0, 0, 0);
2038 transform: translate3d(0, 0, 0);
2039 text-transform: uppercase;
2040 font-weight: 500;
2041 font-weight: var(--font-weight--large);
2042
2043 /* mixin: material-shadow-0 */
2044 box-shadow: none;
2045
2046 background-color: transparent;
2047 color: #2979ff;
2048 color: var(--material-button-background-color);
2049 transition: all 0.25s linear;
2050}
2051.button--material--flat:hover { /* stylelint-disable-line */
2052 transition: all 0.25s linear;
2053}
2054.button--material--flat:focus { /* stylelint-disable-line */
2055 /* mixin: material-shadow-0 */
2056 box-shadow: none;
2057
2058 background-color: transparent;
2059 color: #2979ff;
2060 color: var(--material-button-background-color);
2061 outline: 0;
2062 opacity: 1;
2063 border: none;
2064}
2065.button--material--flat:active { /* stylelint-disable-line */
2066 /* mixin: material-shadow-0 */
2067 box-shadow: none;
2068
2069 outline: 0;
2070 opacity: 1;
2071 border: none;
2072 background-color: rgba(153, 153, 153, 0.2);
2073 background-color: var(--material-flat-button-active-background-color);
2074 color: #2979ff;
2075 color: var(--material-button-background-color);
2076 transition: all 0.25s linear;
2077}
2078.button--material--flat:disabled, .button--material--flat[disabled] {/* stylelint-disable-line */
2079 transition: none;
2080 opacity: 1;
2081
2082 /* mixin: material-shadow-0 */
2083 box-shadow: none;
2084
2085 background-color: transparent;
2086 color: rgba(0, 0, 0, 0.26);
2087 color: var(--material-button-disabled-color);
2088}
2089:root {
2090 --button-bar-active-color: var(--button-bar-active-text-color);
2091 --button-bar-border-top: 1px solid var(--button-bar-color);
2092 --button-bar-border-bottom: 1px solid var(--button-bar-color);
2093 --button-bar-border: 0 solid var(--button-bar-color);
2094 --button-bar-border-radius: 4px;
2095}
2096/*~
2097 name: Button Bar
2098 category: Segment
2099 markup: |
2100 <div class="button-bar" style="width:280px;">
2101 <div class="button-bar__item">
2102 <button class="button-bar__button">One</button>
2103 </div>
2104 <div class="button-bar__item">
2105 <button class="button-bar__button">Two</button>
2106 </div>
2107 <div class="button-bar__item">
2108 <button class="button-bar__button">Three</button>
2109 </div>
2110 </div>
2111*/
2112.button-bar {
2113 /* mixin: reset-font */
2114 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
2115 -webkit-font-smoothing: antialiased;
2116 -moz-osx-font-smoothing: grayscale;
2117 font-weight: 400;
2118 font-weight: var(--font-weight);
2119
2120 display: -webkit-inline-flex;
2121
2122 display: inline-flex;
2123 -webkit-align-items: stretch;
2124 align-items: stretch;
2125 -webkit-align-content: stretch;
2126 align-content: stretch;
2127 -webkit-flex-wrap: nowrap;
2128 flex-wrap: nowrap;
2129 margin: 0;
2130 padding: 0;
2131 border: none;
2132}
2133.button-bar__item {
2134 /* mixin: reset-font */
2135 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
2136 -webkit-font-smoothing: antialiased;
2137 -moz-osx-font-smoothing: grayscale;
2138 font-weight: 400;
2139 font-weight: var(--font-weight);
2140
2141 border-radius: 0;
2142 width: 100%;
2143 padding: 0;
2144 margin: 0;
2145
2146 /* mixin: hide-input-parent */
2147 position: relative;
2148
2149 overflow: hidden;
2150 box-sizing: border-box;
2151}
2152.button-bar__button {
2153 /* mixin: reset-font */
2154 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
2155 -webkit-font-smoothing: antialiased;
2156 -moz-osx-font-smoothing: grayscale;
2157
2158 border-radius: 0;
2159 background-color: transparent;
2160 color: rgb(0, 118, 255);
2161 color: var(--button-bar-color);
2162 border: 1px solid rgb(0, 118, 255);
2163 border: 1px solid var(--button-bar-color);
2164 border-top-width: 1px;
2165 border-bottom-width: 1px;
2166 border-right-width: 1px;
2167 border-left-width: 0;
2168 font-weight: 400;
2169 font-weight: var(--font-weight);
2170 padding: 0;
2171 font-size: 13px;
2172 height: 27px;
2173 line-height: 27px;
2174 width: 100%;
2175 transition: background-color 0.2s linear, color 0.2s linear;
2176 box-sizing: border-box;
2177}
2178.button-bar__button:disabled {
2179 /* mixin: disabled */
2180 opacity: 0.3;
2181 cursor: default;
2182 pointer-events: none;
2183}
2184.button-bar__button:hover {
2185 transition: none;
2186}
2187.button-bar__button:focus {
2188 outline: 0;
2189}
2190:checked + .button-bar__button {
2191 background-color: rgb(0, 118, 255);
2192 background-color: var(--button-bar-color);
2193 color: #fff;
2194 color: var(--button-bar-active-color);
2195 transition: none;
2196}
2197.button-bar__button:active,
2198:active + .button-bar__button {
2199 background-color: unset;
2200 background-color: var(--button-bar-active-background-color);
2201 border: 0 solid rgb(0, 118, 255);
2202 border: var(--button-bar-border);
2203 border-top: 1px solid rgb(0, 118, 255);
2204 border-top: var(--button-bar-border-top);
2205 border-bottom: 1px solid rgb(0, 118, 255);
2206 border-bottom: var(--button-bar-border-bottom);
2207 border-right: 1px solid rgb(0, 118, 255);
2208 border-right: 1px solid var(--button-bar-color);
2209 font-size: 13px;
2210 width: 100%;
2211 transition: none;
2212}
2213/* Hack to replicate blend from the deprecated color-mod function. */
2214.button-bar__button:active:before,
2215:active + .button-bar__button:before {
2216 content: '';
2217 position: absolute;
2218 top: 0;
2219 bottom: 0;
2220 left: 0;
2221 right: 0;
2222 z-index: -1;
2223 --blend-background-color__base: var(--button-bar-color);
2224 --blend-background-color__color: var(--button-bar-active-background-color-default-blend-color);
2225 /* stylelint-disable-next-line no-unknown-animations */
2226 -webkit-animation: blend-background-color 1s -0.7s linear forwards paused;
2227 animation: blend-background-color 1s -0.7s linear forwards paused;
2228 -webkit-animation: blend-background-color 1s var(--button-bar-active-background-color-default-blend-time) linear forwards paused;
2229 animation: blend-background-color 1s var(--button-bar-active-background-color-default-blend-time) linear forwards paused;
2230}
2231.button-bar__item:first-child > .button-bar__button {
2232 border-left-width: 1px;
2233 border-radius: 4px 0 0 4px;
2234 border-radius: var(--button-bar-border-radius) 0 0 var(--button-bar-border-radius);
2235}
2236.button-bar__item:last-child > .button-bar__button {
2237 border-right-width: 1px;
2238 border-radius: 0 4px 4px 0;
2239 border-radius: 0 var(--button-bar-border-radius) var(--button-bar-border-radius) 0;
2240}
2241:root {
2242 --segment-active-color: var(--segment-active-text-color);
2243 --segment-border-top: 1px solid var(--segment-color);
2244 --segment-border-bottom: 1px solid var(--segment-color);
2245 --segment-border: 0 solid var(--segment-color);
2246 --segment-border-radius: 4px;
2247}
2248/*~
2249 name: Segment
2250 category: Segment
2251 markup: |
2252 <div class="segment" style="width: 280px; margin: 0 auto;">
2253 <div class="segment__item">
2254 <input type="radio" class="segment__input" name="segment-a" checked>
2255 <div class="segment__button">One</div>
2256 </div>
2257 <div class="segment__item">
2258 <input type="radio" class="segment__input" name="segment-a">
2259 <div class="segment__button">Two</div>
2260 </div>
2261 <div class="segment__item">
2262 <input type="radio" class="segment__input" name="segment-a">
2263 <div class="segment__button">Three</div>
2264 </div>
2265 </div>
2266*/
2267.segment {
2268
2269 /* mixin: reset-font */
2270 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
2271 -webkit-font-smoothing: antialiased;
2272 -moz-osx-font-smoothing: grayscale;
2273 font-weight: 400;
2274 font-weight: var(--font-weight);
2275
2276 display: -webkit-inline-flex;
2277
2278 display: inline-flex;
2279 -webkit-align-items: stretch;
2280 align-items: stretch;
2281 -webkit-align-content: stretch;
2282 align-content: stretch;
2283 -webkit-flex-wrap: nowrap;
2284 flex-wrap: nowrap;
2285 margin: 0;
2286 padding: 0;
2287 border: none;
2288}
2289.segment__item {
2290
2291 /* mixin: reset-font */
2292 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
2293 -webkit-font-smoothing: antialiased;
2294 -moz-osx-font-smoothing: grayscale;
2295 font-weight: 400;
2296 font-weight: var(--font-weight);
2297
2298 border-radius: 0;
2299 width: 100%;
2300 padding: 0;
2301 margin: 0;
2302
2303 /* mixin: hide-input-parent */
2304 position: relative;
2305
2306 overflow: hidden;
2307 box-sizing: border-box;
2308 display: block;
2309 background-color: transparent;
2310 border: none;
2311}
2312.segment__input {
2313
2314 /* mixin: hide-input */
2315 position: absolute;
2316 right: 0;
2317 top: 0;
2318 left: 0;
2319 bottom: 0;
2320 padding: 0;
2321 border: 0;
2322 background-color: transparent;
2323 z-index: 1;
2324 vertical-align: top;
2325 outline: none;
2326 width: 100%;
2327 height: 100%;
2328 margin: 0;
2329 -webkit-appearance: none;
2330 appearance: none;
2331}
2332.segment__button {
2333
2334 /* mixin: reset-font */
2335 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
2336 -webkit-font-smoothing: antialiased;
2337 -moz-osx-font-smoothing: grayscale;
2338
2339 border-radius: 0;
2340 background-color: transparent;
2341 color: rgb(0, 118, 255);
2342 color: var(--segment-color);
2343 border: 1px solid rgb(0, 118, 255);
2344 border: 1px solid var(--segment-color);
2345 border-top-width: 1px;
2346 border-bottom-width: 1px;
2347 border-right-width: 1px;
2348 border-left-width: 0;
2349 font-weight: 400;
2350 font-weight: var(--font-weight);
2351 padding: 0;
2352 font-size: 13px;
2353 height: 29px;
2354 line-height: 29px;
2355 width: 100%;
2356 transition: background-color 0.2s linear, color 0.2s linear;
2357 box-sizing: border-box;
2358 text-align: center;
2359}
2360.segment__item:disabled {
2361 /* mixin: disabled */
2362 opacity: 0.3;
2363 cursor: default;
2364 pointer-events: none;
2365}
2366.segment__button:hover {
2367 transition: none;
2368}
2369.segment__button:focus {
2370 outline: 0;
2371}
2372:active + .segment__button {
2373 background-color: unset;
2374 background-color: var(--segment-active-background-color);
2375 border: 0 solid rgb(0, 118, 255);
2376 border: var(--segment-border);
2377 border-top: 1px solid rgb(0, 118, 255);
2378 border-top: var(--segment-border-top);
2379 border-bottom: 1px solid rgb(0, 118, 255);
2380 border-bottom: var(--segment-border-bottom);
2381 border-right: 1px solid rgb(0, 118, 255);
2382 border-right: 1px solid var(--segment-color);
2383 font-size: 13px;
2384 width: 100%;
2385 transition: none;
2386}
2387/* Hack to replicate blend from the deprecated color-mod function. */
2388:active + .segment__button:before {
2389 content: '';
2390 position: absolute;
2391 top: 0;
2392 bottom: 0;
2393 left: 0;
2394 right: 0;
2395 z-index: -1;
2396 --blend-background-color__base: var(--segment-color);
2397 --blend-background-color__color: var(--segment-active-background-color-default-blend-color);
2398 /* stylelint-disable-next-line no-unknown-animations */
2399 -webkit-animation: blend-background-color 1s -0.7s linear forwards paused;
2400 animation: blend-background-color 1s -0.7s linear forwards paused;
2401 -webkit-animation: blend-background-color 1s var(--segment-active-background-color-default-blend-time) linear forwards paused;
2402 animation: blend-background-color 1s var(--segment-active-background-color-default-blend-time) linear forwards paused;
2403}
2404:checked + .segment__button {
2405 background-color: rgb(0, 118, 255);
2406 background-color: var(--segment-color);
2407 color: #fff;
2408 color: var(--segment-active-color);
2409 transition: none;
2410}
2411.segment__item:first-child > .segment__button {
2412 border-left-width: 1px;
2413 border-radius: 4px 0 0 4px;
2414 border-radius: var(--segment-border-radius) 0 0 var(--segment-border-radius);
2415}
2416.segment__item:last-child > .segment__button {
2417 border-right-width: 1px;
2418 border-radius: 0 4px 4px 0;
2419 border-radius: 0 var(--segment-border-radius) var(--segment-border-radius) 0;
2420}
2421/*~
2422 name: Material Segment
2423 category: Segment
2424 markup: |
2425 <div class="segment segment--material" style="width: 280px; margin: 0 auto;">
2426 <div class="segment__item segment--material__item">
2427 <input type="radio" class="segment__input segment--material__input" name="segment-b" checked>
2428 <div class="segment__button segment--material__button">One</div>
2429 </div>
2430 <div class="segment__item segment--material__item">
2431 <input type="radio" class="segment__input segment--material__input" name="segment-b">
2432 <div class="segment__button segment--material__button">Two</div>
2433 </div>
2434 <div class="segment__item segment--material__item">
2435 <input type="radio" class="segment__input segment--material__input" name="segment-b">
2436 <div class="segment__button segment--material__button">Three</div>
2437 </div>
2438 </div>
2439*/
2440.segment--material {
2441 border-radius: 2px;
2442 overflow: hidden;
2443 box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
2444}
2445.segment--material__button {
2446
2447 /* mixin: material-font */
2448 font-family: 'Roboto', 'Noto', sans-serif;
2449 -webkit-font-smoothing: antialiased;
2450 font-weight: 400;
2451 font-weight: var(--material-font-weight);
2452
2453 font-size: 14px;
2454 height: 32px;
2455 line-height: 32px;
2456 border-width: 0;
2457 color: rgba(0, 0, 0, 0.38);
2458 color: var(--material-segment-text-color);
2459 border-radius: 0;
2460 background-color: #fafafa;
2461 background-color: var(--material-segment-background-color);
2462}
2463:active + .segment--material__button {
2464 background-color: #fafafa;
2465 background-color: var(--material-segment-background-color);
2466 border-radius: 0;
2467 border-width: 0;
2468 font-size: 14px;
2469 transition: none;
2470 color: rgba(0, 0, 0, 0.38);
2471 color: var(--material-segment-text-color);
2472}
2473:checked + .segment--material__button {
2474 background-color: #c8c8c8;
2475 background-color: var(--material-segment-active-background-color);
2476 color: #353535;
2477 color: var(--material-segment-active-text-color);
2478 border-radius: 0;
2479 border-width: 0;
2480}
2481.segment--material__item:first-child > .segment--material__button,
2482.segment--material__item:last-child > .segment--material__button {
2483 border-radius: 0;
2484 border-width: 0;
2485}
2486:root {
2487 --tabbar-button-color: var(--tabbar-text-color); /* Text color */
2488 --tabbar-active-color: var(--tabbar-highlight-text-color); /* Text color active */
2489 --material-tabbar-current-color: var(--material-tabbar-highlight-text-color);
2490 --tabbar-active-border-top: none;
2491 --tabbar-focus-border-top: none;
2492 --tabbar-height: 49px;
2493 --tabbar-button-line-height: 49px;
2494 --tabbar-button-border: none;
2495 --tabbar-active-box-shadow: none;
2496 --tabbar-button-focus-box-shadow: none;
2497 --tabbar-border-top: 1px solid var(--tabbar-border-color);
2498}
2499/*~
2500 name: Icon Tabbar
2501 category: Tabbar
2502 elements: ons-tabbar ons-tab
2503 markup: |
2504 <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
2505 <div class="tabbar">
2506 <label class="tabbar__item">
2507 <input type="radio" name="tabbar-a" checked="checked">
2508 <button class="tabbar__button">
2509 <i class="tabbar__icon ion-ios-square"></i>
2510 <div class="tabbar__label">One</div>
2511 </button>
2512 </label>
2513
2514 <label class="tabbar__item">
2515 <input type="radio" name="tabbar-a">
2516 <button class="tabbar__button">
2517 <i class="tabbar__icon ion-ios-radio-button-on"></i>
2518 <div class="tabbar__label">Two</div>
2519 </button>
2520 </label>
2521
2522 <label class="tabbar__item">
2523 <input type="radio" name="tabbar-a">
2524 <button class="tabbar__button">
2525 <i class="tabbar__icon ion-ios-star"></i>
2526 <div class="tabbar__label">Three</div>
2527 </button>
2528 </label>
2529 </div>
2530*/
2531/*~
2532 name: Tabbar
2533 category: Tabbar
2534 elements: ons-tabbar ons-tab
2535 markup: |
2536 <div class="tabbar">
2537 <label class="tabbar__item">
2538 <input type="radio" name="tabbar-c" checked="checked">
2539 <button class="tabbar__button">
2540 <div class="tabbar__label">One</div>
2541 </button>
2542 </label>
2543
2544 <label class="tabbar__item">
2545 <input type="radio" name="tabbar-c">
2546 <button class="tabbar__button">
2547 <div class="tabbar__label">Two</div>
2548 </button>
2549 </label>
2550
2551 <label class="tabbar__item">
2552 <input type="radio" name="tabbar-c">
2553 <button class="tabbar__button">
2554 <div class="tabbar__label">Three</div>
2555 </button>
2556 </label>
2557 </div>
2558*/
2559.tabbar {
2560
2561 /* mixin: reset-font */
2562 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
2563 -webkit-font-smoothing: antialiased;
2564 -moz-osx-font-smoothing: grayscale;
2565 font-weight: 400;
2566 font-weight: var(--font-weight);
2567
2568 display: -webkit-flex;
2569
2570 display: flex;
2571 position: absolute;
2572 bottom: 0;
2573 left: 0;
2574 right: 0;
2575 white-space: nowrap;
2576 margin: 0;
2577 padding: 0;
2578 height: 49px;
2579 height: var(--tabbar-height);
2580 background-color: #fafafa;
2581 background-color: var(--tabbar-background-color);
2582 border-top: 1px solid #ccc;
2583 border-top: var(--tabbar-border-top);
2584 width: 100%;
2585}
2586/* @media (--retina-query) */
2587@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
2588 .tabbar {
2589 border-top: none;
2590 background-size: 100% 1px;
2591 background-repeat: no-repeat;
2592 background-position: top;
2593 background-image: linear-gradient(180deg, #ccc, #ccc 50%, transparent 50%);
2594 background-image: linear-gradient(180deg, var(--tabbar-border-color), var(--tabbar-border-color) 50%, transparent 50%);
2595 }
2596}
2597.tabbar__item {
2598 /* mixin: reset-font */
2599 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
2600 -webkit-font-smoothing: antialiased;
2601 -moz-osx-font-smoothing: grayscale;
2602 font-weight: 400;
2603 font-weight: var(--font-weight);
2604
2605 /* mixin: hide-input-parent */
2606 position: relative;
2607
2608 -webkit-flex-grow: 1;
2609
2610 flex-grow: 1;
2611 -webkit-flex-basis: 0;
2612 flex-basis: 0;
2613 width: auto;
2614 border-radius: 0;
2615}
2616.tabbar__item > input {
2617 /* mixin: hide-input */
2618 position: absolute;
2619 right: 0;
2620 top: 0;
2621 left: 0;
2622 bottom: 0;
2623 padding: 0;
2624 border: 0;
2625 background-color: transparent;
2626 z-index: 1;
2627 vertical-align: top;
2628 outline: none;
2629 width: 100%;
2630 height: 100%;
2631 margin: 0;
2632 -webkit-appearance: none;
2633 appearance: none;
2634}
2635.tabbar__button {
2636 /* mixin: reset-font */
2637 -webkit-font-smoothing: antialiased;
2638 -moz-osx-font-smoothing: grayscale;
2639
2640 /* mixin: reset-box-model */
2641 box-sizing: border-box;
2642
2643 /* mixin: reset-base */
2644 margin: 0;
2645 font: inherit;
2646 background: transparent;
2647 border: none;
2648
2649 /* mixin: reset-cursor */
2650 cursor: default;
2651 -webkit-user-select: none;
2652 user-select: none;
2653
2654 /* mixin: ellipsis */
2655 text-overflow: ellipsis;
2656 white-space: nowrap;
2657 overflow: hidden;
2658
2659 position: relative;
2660 display: inline-block;
2661 text-decoration: none;
2662 padding: 0;
2663 height: 49px;
2664 height: var(--tabbar-button-line-height);
2665 letter-spacing: 0;
2666 color: #999;
2667 color: var(--tabbar-button-color);
2668 vertical-align: top;
2669 background-color: transparent;
2670 border-top: none;
2671 border-top: var(--tabbar-button-border);
2672 width: 100%;
2673 font-weight: 400;
2674 font-weight: var(--font-weight);
2675 line-height: 49px;
2676 line-height: var(--tabbar-button-line-height);
2677}
2678/* @media (--retina-query) */
2679@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
2680 .tabbar__button {
2681 border-top: none;
2682 }
2683}
2684.tabbar__icon {
2685 font-size: 24px;
2686 padding: 0;
2687 margin: 0;
2688 line-height: 26px;
2689 display: block !important; /* stylelint-disable-line declaration-no-important */
2690 height: 28px;
2691}
2692.tabbar__label {
2693
2694 /* mixin: reset-font */
2695 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
2696 -webkit-font-smoothing: antialiased;
2697 -moz-osx-font-smoothing: grayscale;
2698 font-weight: 400;
2699 font-weight: var(--font-weight);
2700
2701 display: inline-block;
2702}
2703.tabbar__badge.notification {
2704 vertical-align: text-bottom;
2705 top: -1px;
2706 margin-left: 5px;
2707 z-index: 10;
2708 font-size: 12px;
2709 height: 16px;
2710 min-width: 16px;
2711 line-height: 16px;
2712 border-radius: 8px;
2713}
2714.tabbar__icon ~ .tabbar__badge.notification {
2715 position: absolute;
2716 top: 5px;
2717 margin-left: 0;
2718}
2719.tabbar__icon + .tabbar__label {
2720 display: block;
2721 font-size: 10px;
2722 line-height: 1;
2723 margin: 0;
2724 font-weight: 400;
2725 font-weight: var(--font-weight);
2726}
2727.tabbar__label:first-child {
2728 font-size: 16px;
2729 line-height: 49px;
2730 line-height: var(--tabbar-button-line-height);
2731 margin: 0;
2732 padding: 0;
2733}
2734:checked + .tabbar__button {
2735 color: rgb(0, 118, 255);
2736 color: var(--tabbar-active-color);
2737 background-color: transparent;
2738 box-shadow: none;
2739 box-shadow: var(--tabbar-active-box-shadow);
2740 border-top: none;
2741 border-top: var(--tabbar-active-border-top);
2742}
2743.tabbar__button:disabled {
2744 /* mixin: disabled */
2745 opacity: 0.3;
2746 cursor: default;
2747 pointer-events: none;
2748}
2749.tabbar__button:focus {
2750 z-index: 1;
2751 border-top: none;
2752 border-top: var(--tabbar-focus-border-top);
2753 box-shadow: none;
2754 box-shadow: var(--tabbar-button-focus-box-shadow);
2755 outline: 0;
2756}
2757.tabbar__content {
2758 position: absolute;
2759 top: 0;
2760 left: 0;
2761 right: 0;
2762 bottom: 49px;
2763 bottom: var(--tabbar-height);
2764 z-index: 0;
2765}
2766.tabbar--autogrow .tabbar__item {
2767 -webkit-flex-basis: auto;
2768 flex-basis: auto;
2769}
2770/*~
2771 name: Icon Only Tabbar
2772 category: Tabbar
2773 elements: ons-tabbar ons-tab
2774 markup: |
2775 <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
2776 <div class="tabbar">
2777 <label class="tabbar__item">
2778 <input type="radio" name="tabbar-b" checked="checked">
2779 <button class="tabbar__button">
2780 <i class="tabbar__icon ion-ios-square"></i>
2781 </button>
2782 </label>
2783
2784 <label class="tabbar__item">
2785 <input type="radio" name="tabbar-b">
2786 <button class="tabbar__button">
2787 <i class="tabbar__icon ion-ios-radio-button-on"></i>
2788 </button>
2789 </label>
2790
2791 <label class="tabbar__item">
2792 <input type="radio" name="tabbar-b">
2793 <button class="tabbar__button">
2794 <i class="tabbar__icon ion-ios-star"></i>
2795 </button>
2796 </label>
2797
2798 </div>
2799*/
2800/*~
2801 name: Top Tabbar
2802 category: Tabbar
2803 elements: ons-tabbar ons-tab
2804 markup: |
2805 <div class="tabbar tabbar--top">
2806 <label class="tabbar__item">
2807 <input type="radio" name="top-tabbar-a" checked="checked">
2808 <button class="tabbar__button">
2809 <i class="tabbar__icon ion-ios-square"></i>
2810 </button>
2811 </label>
2812
2813 <label class="tabbar__item">
2814 <input type="radio" name="top-tabbar-a">
2815 <button class="tabbar__button">
2816 <i class="tabbar__icon ion-ios-radio-button-on"></i>
2817 </button>
2818 </label>
2819
2820 <label class="tabbar__item">
2821 <input type="radio" name="top-tabbar-a">
2822 <button class="tabbar__button">
2823 <i class="tabbar__icon ion-ios-star"></i>
2824 </button>
2825 </label>
2826 </div>
2827*/
2828.tabbar--top {
2829 position: relative;
2830 top: 0;
2831 left: 0;
2832 right: 0;
2833 bottom: auto;
2834 border-top: none;
2835 border-bottom: 1px solid #ccc;
2836 border-bottom: var(--tabbar-border-top);
2837}
2838/* @media (--retina-query) */
2839@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
2840 .tabbar--top {
2841 border-bottom: none;
2842 background-size: 100% 1px;
2843 background-repeat: no-repeat;
2844 background-position: bottom;
2845 background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);
2846 background-image: linear-gradient(0deg, var(--tabbar-border-color), var(--tabbar-border-color) 50%, transparent 50%);
2847 }
2848}
2849.tabbar--top__content {
2850 top: 49px;
2851 top: var(--tabbar-height);
2852 left: 0;
2853 right: 0;
2854 bottom: 0;
2855 z-index: 0;
2856}
2857/*~
2858 name: Bordered Top Tabbar
2859 category: Tabbar
2860 elements: ons-tabbar ons-tab
2861 markup: |
2862 <div class="tabbar tabbar--top tabbar--top-border">
2863 <label class="tabbar__item tabbar--top-border__item">
2864 <input type="radio" name="top-tabbar-b" checked="checked">
2865 <button class="tabbar__button tabbar--top-border__button">
2866 Home
2867 </button>
2868 </label>
2869
2870 <label class="tabbar__item tabbar--top-border__item">
2871 <input type="radio" name="top-tabbar-b">
2872 <button class="tabbar__button tabbar--top-border__button">
2873 Comments
2874 </button>
2875 </label>
2876
2877 <label class="tabbar__item tabbar--top-border__item">
2878 <input type="radio" name="top-tabbar-b">
2879 <button class="tabbar__button tabbar--top-border__button">
2880 Activity
2881 </button>
2882 </label>
2883 </div>
2884*/
2885/*~
2886 name: Material Tabbar
2887 category: Tabbar
2888 elements: ons-tabbar ons-tab
2889 markup: |
2890 <div class="tabbar tabbar--top tabbar--material">
2891 <label class="tabbar__item tabbar--material__item">
2892 <input type="radio" name="tabbar-material-a" checked="checked">
2893 <button class="tabbar__button tabbar--material__button">
2894 Music
2895 </button>
2896 </label>
2897
2898 <label class="tabbar__item tabbar--material__item">
2899 <input type="radio" name="tabbar-material-a">
2900 <button class="tabbar__button tabbar--material__button">
2901 Movies
2902 </button>
2903 </label>
2904
2905 <label class="tabbar__item tabbar--material__item">
2906 <input type="radio" name="tabbar-material-a">
2907 <button class="tabbar__button tabbar--material__button">
2908 Books
2909 </button>
2910 </label>
2911
2912 <label class="tabbar__item tabbar--material__item">
2913 <input type="radio" name="tabbar-material-a">
2914 <button class="tabbar__button tabbar--material__button">
2915 Games
2916 </button>
2917 </label>
2918
2919 </div>
2920*/
2921.tabbar--top-border__button {
2922 background-color: transparent;
2923 border-bottom: 4px solid transparent;
2924}
2925:checked + .tabbar--top-border__button {
2926 background-color: transparent;
2927 border-bottom: 4px solid rgb(0, 118, 255);
2928 border-bottom: 4px solid var(--tabbar-active-color);
2929}
2930.tabbar__border {
2931 position: absolute;
2932 bottom: 0;
2933 left: 0;
2934 width: 0;
2935 height: 4px;
2936 background-color: rgb(0, 118, 255);
2937 background-color: var(--tabbar-active-color);
2938}
2939.tabbar--material {
2940 background: none;
2941 background-color: #ffffff;
2942 background-color: var(--material-tabbar-background-color);
2943 border-bottom-width: 0;
2944 box-shadow:
2945 0 4px 2px -2px rgba(0, 0, 0, 0.14),
2946 0 3px 5px -2px rgba(0, 0, 0, 0.12),
2947 0 5px 1px -4px rgba(0, 0, 0, 0.2);
2948}
2949.tabbar--material__button {
2950 background-color: transparent;
2951 color: #31313a;
2952 color: var(--material-tabbar-text-color);
2953 text-transform: uppercase;
2954 font-size: 14px;
2955
2956 /* mixin: material-font */
2957 font-family: 'Roboto', 'Noto', sans-serif;
2958 -webkit-font-smoothing: antialiased;
2959 font-weight: 400;
2960 font-weight: var(--material-font-weight);
2961}
2962.tabbar--material__button:after {
2963 content: '';
2964 display: block;
2965 width: 0;
2966 height: 2px;
2967 bottom: 0;
2968 position: absolute;
2969 margin-top: -2px;
2970 background-color: #31313a;
2971 background-color: var(--material-tabbar-current-color);
2972}
2973:checked + .tabbar--material__button:after {
2974 width: 100%;
2975 transition: width 0.2s ease-in-out;
2976}
2977:checked + .tabbar--material__button {
2978 background-color: transparent;
2979 color: #31313a;
2980 color: var(--material-tabbar-current-color);
2981}
2982.tabbar--material__item:not([ripple]):active {
2983 background-color: rgba(49, 49, 58, 0.1);
2984 background-color: var(--material-tabbar-highlight-color);
2985}
2986.tabbar--material__border {
2987 height: 2px;
2988 background-color: #31313a;
2989 background-color: var(--material-tabbar-current-color);
2990}
2991/*~
2992 name: Material Tabbar (Icon only)
2993 category: Tabbar
2994 elements: ons-tabbar ons-tab
2995 markup: |
2996 <div class="tabbar tabbar--top tabbar--material">
2997 <label class="tabbar__item tabbar--material__item">
2998 <input type="radio" name="tabbar-material-b" checked="checked">
2999 <button class="tabbar__button tabbar--material__button">
3000 <i class="tabbar__icon tabbar--material__icon zmdi zmdi-phone"></i>
3001 </button>
3002 </label>
3003
3004 <label class="tabbar__item tabbar--material__item">
3005 <input type="radio" name="tabbar-material-b">
3006 <button class="tabbar__button tabbar--material__button">
3007 <i class="tabbar__icon tabbar--material__icon zmdi zmdi-favorite"></i>
3008 </button>
3009 </label>
3010
3011 <label class="tabbar__item tabbar--material__item">
3012 <input type="radio" name="tabbar-material-b">
3013 <button class="tabbar__button tabbar--material__button">
3014 <i class="tabbar__icon tabbar--material__icon zmdi zmdi-pin-account"></i>
3015 </button>
3016 </label>
3017 </div>
3018*/
3019.tabbar--material__icon {
3020 font-size: 22px !important; /* stylelint-disable-line declaration-no-important */
3021 line-height: 36px;
3022}
3023/*~
3024 name: Material Tabbar (Icon and Label)
3025 category: Tabbar
3026 elements: ons-tabbar ons-tab
3027 markup: |
3028 <div class="tabbar tabbar--top tabbar--material">
3029 <label class="tabbar__item tabbar--material__item">
3030 <input type="radio" name="tabbar-material-c" checked="checked">
3031 <button class="tabbar__button tabbar--material__button">
3032 <i class="tabbar__icon tabbar--material__icon zmdi zmdi-phone"></i>
3033 <div class="tabbar__label tabbar--material__label">Call</div>
3034 </button>
3035 </label>
3036
3037 <label class="tabbar__item tabbar--material__item">
3038 <input type="radio" name="tabbar-material-c">
3039 <button class="tabbar__button tabbar--material__button">
3040 <i class="tabbar__icon tabbar--material__icon zmdi zmdi-favorite"></i>
3041 <div class="tabbar__label tabbar--material__label">Favorites</div>
3042 </button>
3043 </label>
3044
3045 <label class="tabbar__item tabbar--material__item">
3046 <input type="radio" name="tabbar-material-c">
3047 <button class="tabbar__button tabbar--material__button">
3048 <i class="tabbar__icon tabbar--material__icon zmdi zmdi-delete"></i>
3049 <div class="tabbar__label tabbar--material__label">Delete</div>
3050 </button>
3051 </label>
3052 </div>
3053*/
3054.tabbar--material__label {
3055 /* mixin: material-font */
3056 font-family: 'Roboto', 'Noto', sans-serif;
3057 -webkit-font-smoothing: antialiased;
3058 font-weight: 400;
3059 font-weight: var(--material-font-weight);
3060}
3061.tabbar--material__label:first-child {
3062 /* mixin: material-font */
3063 font-family: 'Roboto', 'Noto', sans-serif;
3064 -webkit-font-smoothing: antialiased;
3065
3066 letter-spacing: 0.015em;
3067 font-weight: 500;
3068 font-size: 14px;
3069}
3070.tabbar--material__icon + .tabbar--material__label {
3071 font-size: 10px;
3072}
3073:root {
3074 --toolbar-button-background-color: rgba(0, 0, 0, 0);
3075 --toolbar-button-border-color: var(--toolbar-button-color);
3076 --toolbar-button-border-radius: 2px;
3077 --toolbar-button-padding: 4px 10px;
3078 --toolbar-button-active-background-color: var(--toolbar-button-background-color);
3079 --toolbar-button-border: 1px solid var(--toolbar-button-border-color);
3080}
3081/*~
3082 name: Toolbar Button
3083 category: Toolbar Button
3084 elements: ons-toolbar-button
3085 markup: |
3086 <!-- Prerequisite=This example use font-awesome(http://fortawesome.github.io/Font-Awesome/) to display icons. -->
3087 <button class="toolbar-button">
3088 <i class="fa fa-bell" style="font-size:17px"></i>
3089 </button>
3090
3091 <button class="toolbar-button">
3092 Label
3093 </button>
3094
3095 <button class="toolbar-button toolbar-button--outline">
3096 <i class="fa fa-bell" style="font-size:17px"></i> Label
3097 </button>
3098*/
3099.toolbar-button {
3100 /* mixin: reset-font */
3101 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
3102 -webkit-font-smoothing: antialiased;
3103 -moz-osx-font-smoothing: grayscale;
3104
3105 padding: 4px 10px;
3106
3107 padding: var(--toolbar-button-padding);
3108 letter-spacing: 0;
3109 color: rgb(0, 118, 255);
3110 color: var(--toolbar-button-color);
3111 background-color: rgba(0, 0, 0, 0);
3112 background-color: var(--toolbar-button-background-color);
3113 border-radius: 2px;
3114 border-radius: var(--toolbar-button-border-radius);
3115 border: 1px solid transparent;
3116 font-weight: 400;
3117 font-weight: var(--font-weight);
3118 font-size: 17px;
3119 font-size: var(--font-size);
3120 transition: none;
3121}
3122.toolbar-button:active {
3123 background-color: rgba(0, 0, 0, 0);
3124 background-color: var(--toolbar-button-active-background-color);
3125 transition: none;
3126 opacity: 0.2;
3127}
3128.toolbar-button:disabled,
3129.toolbar-button[disabled] {
3130 /* mixin: disabled */
3131 opacity: 0.3;
3132 cursor: default;
3133 pointer-events: none;
3134}
3135.toolbar-button:focus {
3136 outline: 0;
3137 transition: none;
3138}
3139.toolbar-button:hover {
3140 transition: none;
3141}
3142.toolbar-button--outline {
3143 border: 1px solid rgb(0, 118, 255);
3144 border: var(--toolbar-button-border);
3145 margin: auto 8px;
3146 padding-left: 6px;
3147 padding-right: 6px;
3148}
3149/*~
3150 name: Material Toolbar Button
3151 category: Toolbar Button
3152 elements: ons-toolbar-button
3153 markup: |
3154 <!-- Prerequisite=This example use Material Design Iconic Font(http://zavoloklom.github.io/material-design-iconic-font/) to display icons. -->
3155 <span class="toolbar-button toolbar-button--material">
3156 <i class="zmdi zmdi-menu"></i>
3157 </span>
3158 <span class="toolbar-button toolbar-button--material">
3159 Label
3160 </span>
3161 <span class="toolbar-button toolbar-button--material">
3162 <i class="zmdi zmdi-favorite"></i>
3163 </span>
3164*/
3165.toolbar-button--material {
3166 font-size: 22px;
3167 color: #1e88e5;
3168 color: var(--material-toolbar-button-color);
3169 display: inline-block;
3170 padding: 0 12px;
3171 height: 100%;
3172 margin: 0;
3173 border: none;
3174 border-radius: 0;
3175 vertical-align: baseline;
3176 vertical-align: initial;
3177 transition: background-color 0.25s linear;
3178}
3179.toolbar-button--material:first-of-type {
3180 margin-left: 4px;
3181}
3182.toolbar-button--material:last-of-type {
3183 margin-right: 4px;
3184}
3185.toolbar-button--material:active {
3186 opacity: 1;
3187 transition: background-color 0.25s linear;
3188}
3189.back-button {
3190 height: 44px;
3191 line-height: 44px;
3192 padding-left: 8px;
3193 color: rgb(0, 118, 255);
3194 color: var(--toolbar-button-color);
3195 background-color: rgba(0, 0, 0, 0);
3196 background-color: var(--toolbar-button-background-color);
3197 display: inline-block;
3198}
3199.back-button:active {
3200 opacity: 0.2;
3201}
3202.back-button__label {
3203 display: inline-block;
3204 height: 100%;
3205 vertical-align: top;
3206 line-height: 44px;
3207 line-height: var(--toolbar-height);
3208 font-size: 17px;
3209 font-size: var(--font-size);
3210 font-weight: 500;
3211 font-weight: var(--font-weight--large);
3212}
3213.back-button__icon {
3214 margin-right: 6px;
3215 display: -webkit-inline-flex;
3216 display: inline-flex;
3217 fill: rgb(0, 118, 255);
3218 fill: var(--toolbar-button-color);
3219 -webkit-align-items: center;
3220 align-items: center;
3221 height: 100%;
3222}
3223.back-button--material {
3224 font-size: 22px;
3225 color: #1e88e5;
3226 color: var(--material-toolbar-button-color);
3227 display: inline-block;
3228 padding: 0 12px;
3229 height: 100%;
3230 margin: 0 0 0 4px;
3231 border: none;
3232 border-radius: 0;
3233 vertical-align: baseline;
3234 vertical-align: initial;
3235 line-height: 56px;
3236}
3237.back-button--material__label {
3238 display: none;
3239 font-size: 20px;
3240}
3241.back-button--material__icon {
3242 display: -webkit-inline-flex;
3243 display: inline-flex;
3244 fill: #1e88e5;
3245 fill: var(--material-toolbar-button-color);
3246 -webkit-align-items: center;
3247 align-items: center;
3248 height: 100%;
3249}
3250.back-button--material:active {
3251 opacity: 1;
3252}
3253:root {
3254 --checkbox-size: 22px;
3255 --checkbox-border: 1px solid #c7c7cd;
3256 --checkbox-checked-background-color: var(--highlight-color); /* background color active */
3257 --background-color--before--checkbox: var(--checkbox-checked-background-color);
3258 --checkmark-border: 2px solid #fff;
3259 --material-checkbox-size: 18px;
3260 --material-checkbox-focus-ring-size: 40px;
3261 --material-checkbox-focus-ring-shadow-size: calc((var(--material-checkbox-focus-ring-size) - var(--material-checkbox-size)) / 2);
3262}
3263/*~
3264 name: Checkbox
3265 category: Checkbox
3266 elements: ons-input
3267 markup: |
3268 <label class="checkbox">
3269 <input type="checkbox" class="checkbox__input">
3270 <div class="checkbox__checkmark"></div>
3271 OFF
3272 </label>
3273
3274 <label class="checkbox">
3275 <input type="checkbox" class="checkbox__input" checked="checked">
3276 <div class="checkbox__checkmark"></div>
3277 ON
3278 </label>
3279
3280 <label class="checkbox">
3281 <input type="checkbox" class="checkbox__input" disabled>
3282 <div class="checkbox__checkmark"></div>
3283 Disabled
3284 </label>
3285*/
3286.checkbox {
3287 position: relative;
3288 display: inline-block;
3289 vertical-align: top;
3290
3291 /* mixin: reset-cursor */
3292 cursor: default;
3293 -webkit-user-select: none;
3294 user-select: none;
3295
3296 /* mixin: reset-font */
3297 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
3298 -webkit-font-smoothing: antialiased;
3299 -moz-osx-font-smoothing: grayscale;
3300 font-weight: 400;
3301 font-weight: var(--font-weight);
3302
3303 line-height: 22px;
3304
3305 line-height: var(--checkbox-size);
3306}
3307.checkbox__checkmark {
3308 /* mixin: reset-box-model */
3309 box-sizing: border-box;
3310 background-clip: padding-box;
3311
3312 position: relative;
3313 display: inline-block;
3314 vertical-align: top;
3315
3316 /* mixin: reset-cursor */
3317 cursor: default;
3318 -webkit-user-select: none;
3319 user-select: none;
3320
3321 /* mixin: reset-font */
3322 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
3323 -webkit-font-smoothing: antialiased;
3324 -moz-osx-font-smoothing: grayscale;
3325 font-weight: 400;
3326 font-weight: var(--font-weight);
3327
3328 height: 22px;
3329
3330 height: var(--checkbox-size);
3331 width: 22px;
3332 width: var(--checkbox-size);
3333 pointer-events: none;
3334}
3335.checkbox__input,
3336.checkbox__input:checked {
3337 /* mixin: hide-input */
3338 position: absolute;
3339 right: 0;
3340 top: 0;
3341 left: 0;
3342 bottom: 0;
3343 padding: 0;
3344 border: 0;
3345 background-color: transparent;
3346 z-index: 1;
3347 vertical-align: top;
3348 outline: none;
3349 width: 100%;
3350 height: 100%;
3351 margin: 0;
3352 -webkit-appearance: none;
3353 appearance: none;
3354}
3355.checkbox__checkmark:before {
3356 /* mixin: checkbox--before */
3357 content: '';
3358 position: absolute;
3359
3360 /* mixin: reset-box-model */
3361 box-sizing: border-box;
3362
3363 width: 22px;
3364
3365 width: var(--checkbox-size);
3366 height: 22px;
3367 height: var(--checkbox-size);
3368 background: transparent;
3369 border: 1px solid #c7c7cd;
3370 border: var(--checkbox-border);
3371 border-radius: 22px;
3372 border-radius: var(--checkbox-size);
3373 left: 0;
3374}
3375/* checkmark's line */
3376.checkbox__checkmark:after {
3377 /* mixin: checkbox--before */
3378 content: '';
3379 position: absolute;
3380
3381 top: 7px;
3382 left: 5px;
3383 width: 11px;
3384 height: 5px;
3385 background: transparent;
3386 border: 2px solid #fff;
3387 border: var(--checkmark-border);
3388 border-width: 1px;
3389 border-top: none;
3390 border-right: none;
3391 border-radius: 0;
3392 -webkit-transform: rotate(-45deg);
3393 transform: rotate(-45deg);
3394 opacity: 0;
3395}
3396:checked + .checkbox__checkmark:before {
3397 background: rgb(0, 118, 255);
3398 background: var(--background-color--before--checkbox);
3399 border: none;
3400}
3401:checked + .checkbox__checkmark:after {
3402 opacity: 1;
3403}
3404:disabled + .checkbox__checkmark {
3405 /* mixin: disabled */
3406 opacity: 0.3;
3407 cursor: default;
3408 pointer-events: none;
3409}
3410:disabled:active + .checkbox__checkmark:before { /* FIXME */
3411 background: transparent;
3412}
3413/*~
3414 name: No border Checkbox
3415 category: Checkbox
3416 elements: ons-input
3417 markup: |
3418 <label class="checkbox checkbox--noborder">
3419 <input type="checkbox" class="checkbox__input checkbox--noborder__input">
3420 <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
3421 OFF
3422 </label>
3423
3424 <label class="checkbox checkbox--noborder">
3425 <input type="checkbox" class="checkbox__input checkbox--noborder__input" checked="checked">
3426 <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
3427 ON
3428 </label>
3429
3430 <label class="checkbox checkbox--noborder">
3431 <input type="checkbox" class="checkbox__input checkbox--noborder__input" disabled checked="checked">
3432 <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
3433 Disabled
3434 </label>
3435 */
3436.checkbox--noborder__checkmark {
3437 background: transparent;
3438 border: none;
3439}
3440.checkbox--noborder__checkmark:before {
3441 border: none;
3442}
3443/* checkmark's line */
3444.checkbox--noborder__checkmark:after {
3445 /* mixin: checkmark */
3446 left: 4px;
3447 height: 4px;
3448 border: 2px solid rgb(0, 118, 255);
3449 border: 2px solid var(--highlight-color);
3450}
3451:checked + .checkbox--noborder__checkmark:before {
3452 background: transparent;
3453}
3454:focus + .checkbox--noborder__checkmark:before {
3455 border: none;
3456}
3457:disabled:active + .checkbox--noborder__checkmark:before {
3458 border: none;
3459}
3460/*~
3461 name: Material Checkbox
3462 category: Checkbox
3463 elements: ons-input
3464 markup: |
3465 <label class="checkbox checkbox--material">
3466 <input type="checkbox" class="checkbox__input checkbox--material__input">
3467 <div class="checkbox__checkmark checkbox--material__checkmark"></div>
3468 OFF
3469 </label>
3470 <label class="checkbox checkbox--material">
3471 <input type="checkbox" class="checkbox__input checkbox--material__input" checked="checked">
3472 <div class="checkbox__checkmark checkbox--material__checkmark"></div>
3473 ON
3474 </label>
3475 <label class="checkbox checkbox--material">
3476 <input type="checkbox" class="checkbox__input checkbox--material__input" checked="checked" disabled>
3477 <div class="checkbox__checkmark checkbox--material__checkmark"></div>
3478 ON
3479 </label>
3480 <label class="checkbox checkbox--material">
3481 <input type="checkbox" class="checkbox__input checkbox--material__input" disabled>
3482 <div class="checkbox__checkmark checkbox--material__checkmark"></div>
3483 Disabled
3484 </label>
3485*/
3486.checkbox--material {
3487 line-height: 18px;
3488 line-height: var(--material-checkbox-size);
3489
3490 /* mixin: material-font */
3491 font-family: 'Roboto', 'Noto', sans-serif;
3492 -webkit-font-smoothing: antialiased;
3493 font-weight: 400;
3494 font-weight: var(--material-font-weight);
3495
3496 overflow: visible;
3497}
3498.checkbox--material__checkmark {
3499 width: 18px;
3500 width: var(--material-checkbox-size);
3501 height: 18px;
3502 height: var(--material-checkbox-size);
3503}
3504.checkbox--material__checkmark:before {
3505 border-radius: 2px;
3506 height: 18px;
3507 height: var(--material-checkbox-size);
3508 width: 18px;
3509 width: var(--material-checkbox-size);
3510 border: 2px solid #717171;
3511 border: 2px solid var(--material-checkbox-inactive-color);
3512 transition: background-color 0.1s linear 0.2s, border-color 0.1s linear 0.2s;
3513 background-color: transparent;
3514}
3515:checked + .checkbox--material__checkmark:before {
3516 border: 2px solid #37474f;
3517 border: 2px solid var(--material-checkbox-active-color);
3518 background-color: #37474f;
3519 background-color: var(--material-checkbox-active-color);
3520 transition: background-color 0.1s linear, border-color 0.1s linear;
3521}
3522.checkbox--material__checkmark:after {
3523 border-color: #ffffff;
3524 border-color: var(--material-checkbox-checkmark-color);
3525 transition: -webkit-transform 0.2s ease 0;
3526 transition: transform 0.2s ease 0;
3527 transition: transform 0.2s ease 0, -webkit-transform 0.2s ease 0;
3528 width: 10px;
3529 height: 5px;
3530 top: 4px;
3531 left: 3px;
3532 -webkit-transform: scale(0) rotate(-45deg);
3533 transform: scale(0) rotate(-45deg);
3534 border-width: 2px;
3535}
3536:checked + .checkbox--material__checkmark:after {
3537 transition: -webkit-transform 0.2s ease 0.2s;
3538 transition: transform 0.2s ease 0.2s;
3539 transition: transform 0.2s ease 0.2s, -webkit-transform 0.2s ease 0.2s;
3540 width: 10px;
3541 height: 5px;
3542 top: 4px;
3543 left: 3px;
3544 -webkit-transform: scale(1) rotate(-45deg);
3545 transform: scale(1) rotate(-45deg);
3546 border-width: 2px;
3547}
3548/* active ring effect */
3549.checkbox--material__input:before {
3550 content: '';
3551 opacity: 0;
3552 position: absolute;
3553 top: 0;
3554 left: 0;
3555 width: 18px;
3556 width: var(--material-checkbox-size);
3557 height: 18px;
3558 height: var(--material-checkbox-size);
3559 box-shadow: 0 0 0 calc((40px - 18px) / 2) #717171;
3560 box-shadow: 0 0 0 var(--material-checkbox-focus-ring-shadow-size) var(--material-checkbox-inactive-color);
3561 box-sizing: border-box;
3562 border-radius: 50%;
3563 background-color: #717171;
3564 background-color: var(--material-checkbox-inactive-color);
3565 pointer-events: none;
3566 display: block;
3567 -webkit-transform: scale3d(0.2, 0.2, 0.2);
3568 transform: scale3d(0.2, 0.2, 0.2);
3569 transition: opacity 0.25s ease-out, -webkit-transform 0.1s ease-out;
3570 transition: opacity 0.25s ease-out, transform 0.1s ease-out;
3571 transition: opacity 0.25s ease-out, transform 0.1s ease-out, -webkit-transform 0.1s ease-out;
3572}
3573.checkbox--material__input:checked:before {
3574 box-shadow: 0 0 0 calc((40px - 18px) / 2) #37474f;
3575 box-shadow: 0 0 0 var(--material-checkbox-focus-ring-shadow-size) var(--material-checkbox-active-color);
3576 background-color: #37474f;
3577 background-color: var(--material-checkbox-active-color);
3578}
3579.checkbox--material__input:active:before {
3580 opacity: .15;
3581 -webkit-transform: scale3d(1, 1, 1);
3582 transform: scale3d(1, 1, 1);
3583}
3584:disabled + .checkbox--material__checkmark {
3585 opacity: 1;
3586}
3587:disabled + .checkbox--material__checkmark:before {
3588 border-color: #afafaf;
3589}
3590:disabled:checked + .checkbox--material__checkmark:before {
3591 background-color: #afafaf;
3592}
3593:disabled:checked + .checkbox--material__checkmark:after {
3594 border-color: #ffffff;
3595}
3596:root {
3597 --radio-button-background-active: rgba(0, 0, 0, 0);
3598 --radio-button-indicator-color: var(--highlight-color);
3599 --radio-button-background: transparent;
3600 --radio-button-border: 3px solid var(--radio-button-indicator-color);
3601 --radio-button-size: 24px;
3602 --material-radio-button-size: 20px;
3603 --material-radio-button-shadow-size: calc((48px - var(--material-radio-button-size)) / 2);
3604}
3605/*~
3606 name: Radio Button
3607 category: Radio Button
3608 elements: ons-input
3609 markup: |
3610 <label class="radio-button">
3611 <input type="radio" class="radio-button__input" name="r" checked="checked">
3612 <div class="radio-button__checkmark"></div>
3613 Label
3614 </label>
3615
3616 <label class="radio-button">
3617 <input type="radio" class="radio-button__input" name="r">
3618 <div class="radio-button__checkmark"></div>
3619 Label
3620 </label>
3621
3622 <label class="radio-button">
3623 <input type="radio" class="radio-button__input" name="r">
3624 <div class="radio-button__checkmark"></div>
3625 Label
3626 </label>
3627*/
3628.radio-button__input {
3629
3630 /* mixin: hide-input */
3631 position: absolute;
3632 right: 0;
3633 top: 0;
3634 left: 0;
3635 bottom: 0;
3636 padding: 0;
3637 border: 0;
3638 background-color: transparent;
3639 z-index: 1;
3640 vertical-align: top;
3641 outline: none;
3642 width: 100%;
3643 height: 100%;
3644 margin: 0;
3645 -webkit-appearance: none;
3646 appearance: none;
3647}
3648.radio-button__input:active,
3649.radio-button__input:focus {
3650 outline: 0;
3651 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
3652}
3653.radio-button {
3654 display: inline-block;
3655 vertical-align: top;
3656
3657 /* mixin: reset-cursor */
3658 cursor: default;
3659 -webkit-user-select: none;
3660 user-select: none;
3661
3662 /* mixin: hide-input-parent */
3663 position: relative;
3664
3665 line-height: 24px;
3666
3667 line-height: var(--radio-button-size);
3668 text-align: left;
3669}
3670.radio-button__checkmark:before {
3671 content: '';
3672 position: absolute;
3673
3674 /* mixin: reset-box-model */
3675 box-sizing: border-box;
3676
3677 width: 22px;
3678
3679 width: var(--checkbox-size);
3680 height: 22px;
3681 height: var(--checkbox-size);
3682 background: transparent;
3683 border: none;
3684 border-radius: 22px;
3685 border-radius: var(--checkbox-size);
3686 left: 0;
3687}
3688.radio-button__checkmark {
3689
3690 /* mixin: reset-box-model */
3691 box-sizing: border-box;
3692
3693 display: inline-block;
3694 vertical-align: top;
3695
3696 /* mixin: reset-cursor */
3697 cursor: default;
3698 -webkit-user-select: none;
3699 user-select: none;
3700
3701 /* mixin: reset-font */
3702 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
3703 -webkit-font-smoothing: antialiased;
3704 -moz-osx-font-smoothing: grayscale;
3705 font-weight: 400;
3706 font-weight: var(--font-weight);
3707
3708 /* mixin: hide-input-parent */
3709 position: relative;
3710
3711 width: 24px;
3712
3713 width: var(--radio-button-size);
3714 height: 24px;
3715 height: var(--radio-button-size);
3716 background: transparent;
3717 background: var(--radio-button-background);
3718 pointer-events: none;
3719}
3720.radio-button__checkmark:after {
3721
3722 /* mixin: checkmark */
3723 content: '';
3724 position: absolute;
3725 top: 7px;
3726 left: 4px;
3727 opacity: 0;
3728 width: 11px;
3729 height: 4px;
3730 background: transparent;
3731 border: 2px solid rgb(0, 118, 255);
3732 border: 2px solid var(--highlight-color);
3733 border-top: none;
3734 border-right: none;
3735 border-radius: 0;
3736 -webkit-transform: rotate(-45deg);
3737 transform: rotate(-45deg);
3738}
3739:checked + .radio-button__checkmark {
3740 background: rgba(0, 0, 0, 0);
3741 background: var(--radio-button-background-active);
3742}
3743:checked + .radio-button__checkmark:after {
3744 opacity: 1;
3745}
3746:checked + .radio-button__checkmark:before {
3747 background: transparent;
3748 border: none;
3749}
3750:disabled + .radio-button__checkmark {
3751 /* mixin: disabled */
3752 opacity: 0.3;
3753 cursor: default;
3754 pointer-events: none;
3755}
3756/*~
3757 name: Material Radio Button
3758 category: Radio Button
3759 elements: ons-input
3760 markup: |
3761 <label class="radio-button radio-button--material">
3762 <input type="radio" class="radio-button__input radio-button--material__input" name="r" checked="checked">
3763 <div class="radio-button__checkmark radio-button--material__checkmark"></div>
3764 Label
3765 </label>
3766 <label class="radio-button radio-button--material">
3767 <input type="radio" class="radio-button__input radio-button--material__input" name="r">
3768 <div class="radio-button__checkmark radio-button--material__checkmark"></div>
3769 Label
3770 </label>
3771 <label class="radio-button radio-button--material">
3772 <input type="radio" class="radio-button__input radio-button--material__input" name="s" disabled checked>
3773 <div class="radio-button__checkmark radio-button--material__checkmark"></div>
3774 Label
3775 </label>
3776 <label class="radio-button radio-button--material">
3777 <input type="radio" class="radio-button__input radio-button--material__input" name="s" disabled>
3778 <div class="radio-button__checkmark radio-button--material__checkmark"></div>
3779 Label
3780 </label>
3781*/
3782.radio-button--material {
3783 line-height: calc(20px + 2px);
3784 line-height: calc(var(--material-radio-button-size) + 2px);
3785
3786 /* mixin: material-font */
3787 font-family: 'Roboto', 'Noto', sans-serif;
3788 -webkit-font-smoothing: antialiased;
3789 font-weight: 400;
3790 font-weight: var(--material-font-weight);
3791}
3792.radio-button--material__input:before {
3793 content: '';
3794 position: absolute;
3795 top: 0;
3796 left: 0;
3797 opacity: 0;
3798 width: 20px;
3799 width: var(--material-radio-button-size);
3800 height: 20px;
3801 height: var(--material-radio-button-size);
3802 box-shadow: 0 0 0 calc((48px - 20px) / 2) #717171;
3803 box-shadow: 0 0 0 var(--material-radio-button-shadow-size) var(--material-radio-button-inactive-color);
3804 border: none;
3805 box-sizing: border-box;
3806 border-radius: 50%;
3807 background-color: #717171;
3808 background-color: var(--material-radio-button-inactive-color);
3809 pointer-events: none;
3810 display: block;
3811 -webkit-transform: scale3d(0.2, 0.2, 0.2);
3812 transform: scale3d(0.2, 0.2, 0.2);
3813 transition: opacity 0.25s ease-out, -webkit-transform 0.1s ease-out;
3814 transition: opacity 0.25s ease-out, transform 0.1s ease-out;
3815 transition: opacity 0.25s ease-out, transform 0.1s ease-out, -webkit-transform 0.1s ease-out;
3816}
3817.radio-button--material__input:checked:before {
3818 box-shadow: 0 0 0 calc((48px - 20px) / 2) #37474f;
3819 box-shadow: 0 0 0 var(--material-radio-button-shadow-size) var(--material-radio-button-active-color);
3820 background-color: #37474f;
3821 background-color: var(--material-radio-button-active-color);
3822}
3823.radio-button--material__input:active:before {
3824 opacity: .15;
3825 -webkit-transform: scale3d(1, 1, 1);
3826 transform: scale3d(1, 1, 1);
3827}
3828.radio-button--material__checkmark {
3829 width: 20px;
3830 width: var(--material-radio-button-size);
3831 height: 20px;
3832 height: var(--material-radio-button-size);
3833 overflow: visible;
3834}
3835.radio-button--material__checkmark:before {
3836 background: transparent;
3837 border: 2px solid #717171;
3838 border: 2px solid var(--material-radio-button-inactive-color);
3839 box-sizing: border-box;
3840 border-radius: 50%;
3841 width: 20px;
3842 width: var(--material-radio-button-size);
3843 height: 20px;
3844 height: var(--material-radio-button-size);
3845 transition: border 0.2s ease;
3846}
3847.radio-button--material__checkmark:after {
3848 transition: background 0.2s ease, -webkit-transform 0.2s ease;
3849 transition: background 0.2s ease, transform 0.2s ease;
3850 transition: background 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
3851 top: calc(20px / 4);
3852 top: calc(var(--material-radio-button-size) / 4);
3853 left: calc(20px / 4);
3854 left: calc(var(--material-radio-button-size) / 4);
3855 width: calc(20px / 2);
3856 width: calc(var(--material-radio-button-size) / 2);
3857 height: calc(20px / 2);
3858 height: calc(var(--material-radio-button-size) / 2);
3859 border: none;
3860 border-radius: 50%;
3861 -webkit-transform: scale(0);
3862 transform: scale(0);
3863}
3864:checked + .radio-button--material__checkmark:before {
3865 background: transparent;
3866 border: 2px solid #37474f;
3867 border: 2px solid var(--material-radio-button-active-color);
3868}
3869.radio-button--material__input + .radio-button__checkmark:after {
3870 background: #717171;
3871 background: var(--material-radio-button-inactive-color);
3872 opacity: 1;
3873 -webkit-transform: scale(0);
3874 transform: scale(0);
3875}
3876:checked + .radio-button--material__checkmark:after {
3877 opacity: 1;
3878 background: #37474f;
3879 background: var(--material-radio-button-active-color);
3880 -webkit-transform: scale(1);
3881 transform: scale(1);
3882}
3883:disabled + .radio-button--material__checkmark {
3884 opacity: 1;
3885}
3886:disabled + .radio-button--material__checkmark:after {
3887 background-color: #afafaf;
3888 background-color: var(--material-radio-button-disabled-color);
3889 border-color: #afafaf;
3890 border-color: var(--material-radio-button-disabled-color);
3891}
3892:disabled + .radio-button--material__checkmark:before {
3893 border-color: #afafaf;
3894 border-color: var(--material-radio-button-disabled-color);
3895}
3896:root {
3897 --list-item-color: var(--text-color);
3898 --list-item-active-background-color: var(--list-tap-active-background-color);
3899 --list-item-separator-color: var(--border-color);
3900 --list-border: 1px solid var(--list-item-separator-color);
3901 --list-item-min-height: 44px;
3902 --list-item-margin: 0 0 -1px 0;
3903 --list-item-padding-side: 14px;
3904 --list-item-padding: 0 0 0 var(--list-item-padding-side);
3905 --list-border-top: 1px solid var(--list-item-separator-color);
3906 --list-border-bottom: 1px solid var(--list-item-separator-color);
3907 --list-header-color: var(--text-color);
3908 --list-header-font-size: 12px;
3909 --list-header-padding: 0 0 0 15px;
3910 --list-header-min-height: 24px;
3911 --list-header-font-weight: var(--font-weight--large);
3912 --inset-list-border: 1px solid var(--list-item-separator-color);
3913 --list-title-color: #6d6d72;
3914 --list-title-font-size: 13px;
3915 --list-title-font-weight: 500;
3916 --list-title-line-height: 24px;
3917 --list-title-padding: 0 0 0 16px;
3918 --material-list-item-side-padding: 16px;
3919 --material-list-item-min-height: 48px;
3920 --material-list-item-padding: 0 0 0 var(--material-list-item-side-padding);
3921 --material-list-title-color: #757575;
3922 --material-list-title-font-size: 14px;
3923 --material-list-title-font-weight: 500;
3924 --material-list-title-line-height: 24px;
3925 --material-list-title-padding: 12px 0 12px var(--material-list-item-side-padding);
3926}
3927/*~
3928 name: List
3929 category: List
3930 elements: ons-list ons-list-item
3931 markup: |
3932 <ul class="list">
3933 <li class="list-item">
3934 <div class="list-item__center">Dog</div>
3935 </li>
3936 <li class="list-item">
3937 <div class="list-item__center">Cat</div>
3938 </li>
3939 <li class="list-item">
3940 <div class="list-item__center">Hamster</div>
3941 </li>
3942 </ul>
3943*/
3944.list {
3945 /* mixin: reset-base */
3946 padding: 0;
3947 margin: 0;
3948 color: inherit;
3949 line-height: normal;
3950
3951 /* mixin: reset-cursor */
3952 cursor: default;
3953 -webkit-user-select: none;
3954 user-select: none;
3955
3956 /* mixin: reset-font */
3957 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
3958 -webkit-font-smoothing: antialiased;
3959 -moz-osx-font-smoothing: grayscale;
3960 font-weight: 400;
3961 font-weight: var(--font-weight);
3962
3963 list-style-type: none;
3964 text-align: left;
3965 display: block;
3966 -webkit-overflow-scrolling: touch;
3967 overflow: hidden;
3968 background-image:
3969 linear-gradient(#ccc, #ccc),
3970 linear-gradient(#ccc, #ccc);
3971 background-image:
3972 linear-gradient(var(--list-item-separator-color), var(--list-item-separator-color)),
3973 linear-gradient(var(--list-item-separator-color), var(--list-item-separator-color));
3974 background-size: 100% 1px, 100% 1px;
3975 background-repeat: no-repeat;
3976 background-position: bottom, top;
3977 border: none;
3978 background-color: #fff;
3979 background-color: var(--list-background-color);
3980}
3981/* @media (--retina-query) */
3982@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
3983 .list {
3984 background-image:
3985 linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%),
3986 linear-gradient(180deg, #ccc, #ccc 50%, transparent 50%);
3987 background-image:
3988 linear-gradient(0deg, var(--list-item-separator-color), var(--list-item-separator-color) 50%, transparent 50%),
3989 linear-gradient(180deg, var(--list-item-separator-color), var(--list-item-separator-color) 50%, transparent 50%);
3990 }
3991}
3992.list-item {
3993 position: relative;
3994 width: 100%;
3995 list-style: none;
3996 box-sizing: border-box;
3997 display: -webkit-flex;
3998 display: flex;
3999 -webkit-flex-direction: row;
4000 flex-direction: row;
4001 -webkit-justify-content: flex-start;
4002 justify-content: flex-start;
4003 -webkit-align-items: center;
4004 align-items: center;
4005 padding: 0 0 0 14px;
4006 padding: var(--list-item-padding);
4007 margin: 0 0 -1px 0;
4008 margin: var(--list-item-margin);
4009 color: #1f1f21;
4010 color: var(--list-item-color);
4011 transition: background-color 0.2s linear;
4012}
4013/*~
4014 name: Expandable List
4015 category: List
4016 elements: ons-list ons-list-item
4017 markup: |
4018 <ul class="list">
4019 <li class="list-item list-item--expandable list-item--expanded">
4020 <div class="list-item__top">
4021 <div class="list-item__center">Item</div>
4022 <div class="list-item__right">
4023 <span class="list-item__expand-chevron"></span>
4024 </div>
4025 </div>
4026 <div class="list-item__expandable-content">Expanded content</div>
4027 </li>
4028 </ul>
4029*/
4030.list-item__top {
4031 display: -webkit-flex;
4032 display: flex;
4033 -webkit-flex-direction: row;
4034 flex-direction: row;
4035 -webkit-justify-content: flex-start;
4036 justify-content: flex-start;
4037 -webkit-align-items: center;
4038 align-items: center;
4039 -webkit-order: 0;
4040 order: 0;
4041 width: 100%;
4042}
4043.list-item--expandable {
4044 display: -webkit-flex;
4045 display: flex;
4046 -webkit-flex-direction: column;
4047 flex-direction: column;
4048
4049 /* mixin: retina-list-item-border */
4050 border-bottom: none;
4051 background-size: 100% 1px;
4052 background-repeat: no-repeat;
4053 background-position: bottom;
4054 background-image: linear-gradient(0deg, #ccc, #ccc 100%);
4055 background-image: linear-gradient(0deg, var(--list-item-separator-color), var(--list-item-separator-color) 100%);
4056
4057 background-position-x: 14px;
4058
4059 background-position-x: var(--list-item-padding-side);
4060}
4061/* @media (--retina-query) */
4062@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
4063 .list-item--expandable {
4064 background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);
4065 background-image: linear-gradient(0deg, var(--list-item-separator-color), var(--list-item-separator-color) 50%, transparent 50%);
4066 }
4067}
4068.list-item__expandable-content {
4069 display: none;
4070 width: 100%;
4071 padding: 12px 14px 12px 0;
4072 box-sizing: border-box;
4073 -webkit-order: 1;
4074 order: 1;
4075 overflow: hidden;
4076}
4077.list-item--expandable.list-item--expanded > .list-item__expandable-content {
4078 display: block;
4079 height: auto;
4080}
4081.list-item__left {
4082 box-sizing: border-box;
4083 display: -webkit-flex;
4084 display: flex;
4085 padding: 12px 14px 12px 0;
4086 -webkit-order: 0;
4087 order: 0;
4088 -webkit-align-items: center;
4089 align-items: center;
4090 -webkit-align-self: stretch;
4091 align-self: stretch;
4092 line-height: 1.2em;
4093 min-height: 44px;
4094 min-height: var(--list-item-min-height);
4095}
4096.list-item__left:empty {
4097 width: 0;
4098 min-width: 0;
4099 padding: 0;
4100 margin: 0;
4101}
4102.list-item__center {
4103 box-sizing: border-box;
4104 display: -webkit-flex;
4105 display: flex;
4106 -webkit-flex-grow: 1;
4107 flex-grow: 1;
4108 -webkit-flex-wrap: wrap;
4109 flex-wrap: wrap;
4110 -webkit-flex-direction: row;
4111 flex-direction: row;
4112 -webkit-order: 1;
4113 order: 1;
4114 margin-right: auto;
4115 -webkit-align-items: center;
4116 align-items: center;
4117 -webkit-align-self: stretch;
4118 align-self: stretch;
4119 margin-left: 0;
4120
4121 /* mixin: retina-list-item-border */
4122 border-bottom: none;
4123 background-size: 100% 1px;
4124 background-repeat: no-repeat;
4125 background-position: bottom;
4126 background-image: linear-gradient(0deg, #ccc, #ccc 100%);
4127 background-image: linear-gradient(0deg, var(--list-item-separator-color), var(--list-item-separator-color) 100%);
4128
4129 padding: 12px 6px 12px 0;
4130 line-height: 1.2em;
4131 min-height: 44px;
4132 min-height: var(--list-item-min-height);
4133}
4134/* @media (--retina-query) */
4135@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
4136 .list-item__center {
4137 background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);
4138 background-image: linear-gradient(0deg, var(--list-item-separator-color), var(--list-item-separator-color) 50%, transparent 50%);
4139 }
4140}
4141.list-item__right {
4142 box-sizing: border-box;
4143 display: -webkit-flex;
4144 display: flex;
4145 margin-left: auto;
4146 padding: 12px 12px 12px 0;
4147 -webkit-order: 2;
4148 order: 2;
4149 -webkit-align-items: center;
4150 align-items: center;
4151 -webkit-align-self: stretch;
4152 align-self: stretch;
4153
4154 /* mixin: retina-list-item-border */
4155 border-bottom: none;
4156 background-size: 100% 1px;
4157 background-repeat: no-repeat;
4158 background-position: bottom;
4159 background-image: linear-gradient(0deg, #ccc, #ccc 100%);
4160 background-image: linear-gradient(0deg, var(--list-item-separator-color), var(--list-item-separator-color) 100%);
4161
4162 line-height: 1.2em;
4163 min-height: 44px;
4164 min-height: var(--list-item-min-height);
4165}
4166/* @media (--retina-query) */
4167@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
4168 .list-item__right {
4169 background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);
4170 background-image: linear-gradient(0deg, var(--list-item-separator-color), var(--list-item-separator-color) 50%, transparent 50%);
4171 }
4172}
4173.list-header {
4174 margin: 0;
4175 list-style: none;
4176 text-align: left;
4177 display: block;
4178 box-sizing: border-box;
4179 padding: 0 0 0 15px;
4180 padding: var(--list-header-padding);
4181 font-size: 12px;
4182 font-size: var(--list-header-font-size);
4183 font-weight: 500;
4184 font-weight: var(--list-header-font-weight);
4185 color: #1f1f21;
4186 color: var(--list-header-color);
4187 min-height: 24px;
4188 min-height: var(--list-header-min-height);
4189 line-height: calc(1px + 24px);
4190 line-height: calc(1px + var(--list-header-min-height));
4191 text-transform: uppercase;
4192 position: relative;
4193 background-color: #eee;
4194 background-color: var(--list-header-background-color);
4195 background-size: 100% 1px;
4196 background-repeat: no-repeat;
4197 background-position: top;
4198 background-image: linear-gradient(0deg, #ccc, #ccc 100%);
4199 background-image: linear-gradient(0deg, var(--list-item-separator-color), var(--list-item-separator-color) 100%);
4200}
4201/* @media (--retina-query) */
4202@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
4203 .list-header {
4204 background-image: linear-gradient(180deg, #ccc, #ccc 50%, transparent 50%);
4205 background-image: linear-gradient(180deg, var(--list-item-separator-color), var(--list-item-separator-color) 50%, transparent 50%);
4206 }
4207}
4208/*~
4209 name: Noborder List
4210 category: List
4211 elements: ons-list ons-list-item
4212 markup: |
4213 <ul class="list list--noborder">
4214 <li class="list-item">
4215 <div class="list-item__center">Item</div>
4216 </li>
4217 <li class="list-item">
4218 <div class="list-item__center">Item</div>
4219 </li>
4220 </ul>
4221 */
4222.list--noborder {
4223 border-top: none;
4224 border-bottom: none;
4225 background-image: none;
4226}
4227/*~
4228 name: Category List Header
4229 category: List
4230 elements: ons-list ons-list-header ons-list-item
4231 markup: |
4232 <ul class="list">
4233 <li class="list-header">
4234 Header
4235 </li>
4236 <li class="list-item">
4237 <div class="list-item__center">Item</div>
4238 </li>
4239 <li class="list-item">
4240 <div class="list-item__center">Item</div>
4241 </li>
4242 <li class="list-item">
4243 <div class="list-item__center">Item</div>
4244 </li>
4245 </ul>
4246 */
4247/*~
4248 name: Tappable List
4249 category: List
4250 elements: ons-list ons-list-item
4251 markup: |
4252 <ul class="list">
4253 <li class="list-item list-item--tappable">
4254 <div class="list-item__center">Tappable Item</div>
4255 </li>
4256 <li class="list-item list-item--tappable">
4257 <div class="list-item__center">Tappable Item</div>
4258 </li>
4259 <li class="list-item list-item--tappable">
4260 <div class="list-item__center">Tappable Item</div>
4261 </li>
4262 </ul>
4263 */
4264.list-item--tappable:active {
4265 transition: none;
4266 background-color: #d9d9d9;
4267 background-color: var(--list-item-active-background-color);
4268}
4269/*~
4270 name: Switch in List Item
4271 category: List
4272 elements: ons-list ons-list-item ons-switch
4273 markup: |
4274 <ul class="list">
4275 <li class="list-item">
4276 <div class="list-item__center">
4277 Label
4278 </div>
4279 <div class="list-item__right">
4280 <label class="switch">
4281 <input type="checkbox" class="switch__input" checked>
4282 <div class="switch__toggle">
4283 <div class="switch__handle"></div>
4284 </div>
4285 </label>
4286 </div>
4287 </li>
4288 <li class="list-item">
4289 <div class="list-item__center">
4290 Label
4291 </div>
4292 <div class="list-item__right">
4293 <label class="switch">
4294 <input type="checkbox" class="switch__input">
4295 <div class="switch__toggle">
4296 <div class="switch__handle"></div>
4297 </div>
4298 </label>
4299 </div>
4300 </li>
4301 </ul>
4302*/
4303/*~
4304 name: Inset List
4305 category: List
4306 elements: ons-list ons-list-item
4307 markup: |
4308 <ul class="list list--inset">
4309 <li class="list-item list--inset__item list-item--chevron list-item--tappable">
4310 <div class="list-item__center">List Item with Chevron</div>
4311 </li>
4312 <li class="list-item list--inset__item list-item--chevron list-item--tappable">
4313 <div class="list-item__center">List Item with Chevron</div>
4314 </li>
4315 </ul>
4316 */
4317.list--inset {
4318 margin: 0 8px;
4319 border: 1px solid #ccc;
4320 border: var(--inset-list-border);
4321 border-radius: 4px;
4322 background-image: none;
4323}
4324/*~
4325 name: Radio Button in List Item
4326 category: List
4327 elements: ons-list ons-list-item ons-input
4328 markup: |
4329 <ul class="list">
4330 <li class="list-item list-item--tappable">
4331 <div class="list-item__left">
4332 <label class="radio-button">
4333 <input type="radio" id="r1" class="radio-button__input" name="r" checked="checked">
4334 <div class="radio-button__checkmark"></div>
4335 </label>
4336 </div>
4337 <label for="r1" class="list-item__center">
4338 Radio Button
4339 </label>
4340 </li>
4341 <li class="list-item list-item--tappable">
4342 <div class="list-item__left">
4343 <label class="radio-button">
4344 <input type="radio" id="r2" class="radio-button__input" name="r">
4345 <div class="radio-button__checkmark"></div>
4346 </label>
4347 </div>
4348 <label for="r2" class="list-item__center">
4349 Radio Button
4350 </label>
4351 </li>
4352 </ul>
4353*/
4354/*~
4355 name: Checkbox in List Item
4356 category: List
4357 elements: ons-list ons-list-item ons-input
4358 markup: |
4359 <ul class="list">
4360 <li class="list-item list-item--tappable">
4361 <div class="list-item__left">
4362 <label class="checkbox">
4363 <input type="checkbox" id="checkbox1" class="checkbox__input" name="c" checked="checked">
4364 <div class="checkbox__checkmark"></div>
4365 </label>
4366 </div>
4367 <label for="checkbox1" class="list-item__center">
4368 Checkbox
4369 </label>
4370 </li>
4371 <li class="list-item list-item--tappable">
4372 <div class="list-item__left">
4373 <label class="checkbox">
4374 <input type="checkbox" id="checkbox2" class="checkbox__input" name="c">
4375 <div class="checkbox__checkmark"></div>
4376 </label>
4377 </div>
4378 <label for="checkbox2" class="list-item__center">
4379 Checkbox
4380 </label>
4381 </li>
4382 </ul>
4383*/
4384/*~
4385 name: No border Checkbox in List Item
4386 category: List
4387 elements: ons-list ons-list-item ons-input
4388 markup: |
4389 <ul class="list">
4390 <li class="list-item list-item--tappable">
4391 <div class="list-item__left">
4392 <label class="checkbox checkbox--noborder">
4393 <input id="s1" type="checkbox" class="checkbox__input checkbox--noborder__input">
4394 <div class="checkbox__checkmark checkbox--noborder checkbox--noborder__checkmark"></div>
4395 </label>
4396 </div>
4397 <label for="s1" class="list-item__center">
4398 Checkbox
4399 </label>
4400 </li>
4401 <li class="list-item list-item--tappable">
4402 <div class="list-item__left">
4403 <label class="checkbox checkbox--noborder">
4404 <input id="s2" type="checkbox" class="checkbox__input checkbox--noborder__input" checked>
4405 <div class="checkbox__checkmark checkbox--noborder checkbox--noborder__checkmark"></div>
4406 </label>
4407 </div>
4408 <label for="s2" class="list-item__center">
4409 Checkbox
4410 </label>
4411 </li>
4412 </ul>
4413*/
4414/*~
4415 name: Text Input in List Item
4416 category: List
4417 elements: ons-list ons-list-item ons-input
4418 markup: |
4419 <ul class="list">
4420 <li class="list-item">
4421 <div class="list-item__center">
4422 <input type="text" class="text-input" placeholder="Name">
4423 </div>
4424 </li>
4425 <li class="list-item">
4426 <div class="list-item__center">
4427 <input type="text" class="text-input" placeholder="Email">
4428 </div>
4429 </li>
4430 </ul>
4431*/
4432/*~
4433 name: Textarea in List Item
4434 category: List
4435 elements: ons-list ons-list-item
4436 markup: |
4437 <ul class="list">
4438 <li class="list-item">
4439 <div class="list-item__center">
4440 <textarea class="textarea textarea--transparent" placeholder="Text message"></textarea>
4441 </div>
4442 </li>
4443 </ul>
4444*/
4445/*~
4446 name: Right Label in List Item
4447 category: List
4448 elements: ons-list ons-list-item
4449 markup: |
4450 <ul class="list">
4451 <li class="list-item">
4452 <div class="list-item__center">
4453 Title
4454 </div>
4455 <div class="list-item__right">
4456 <div class="list-item__label">Label</div>
4457 </div>
4458 </li>
4459 </ul>
4460*/
4461.list-item__label {
4462 font-size: calc(17px - 3px);
4463 font-size: var(--font-size--mini);
4464 padding: 0 4px;
4465 opacity: 0.6;
4466}
4467/*~
4468 name: List Item with Subtitle
4469 category: List
4470 elements: ons-list ons-list-item
4471 markup: |
4472 <ul class="list">
4473 <li class="list-item">
4474 <div class="list-item__center">
4475 <div class="list-item__title">
4476 Title
4477 </div>
4478 <div class="list-item__subtitle">
4479 Subtitle
4480 </div>
4481 </div>
4482 </li>
4483 </ul>
4484*/
4485.list-item__title {
4486 -webkit-flex-basis: 100%;
4487 flex-basis: 100%;
4488 -webkit-align-self: flex-end;
4489 align-self: flex-end;
4490 -webkit-order: 0;
4491 order: 0;
4492}
4493.list-item__subtitle {
4494 opacity: 0.75;
4495 font-size: calc(17px - 3px);
4496 font-size: var(--font-size--mini);
4497 -webkit-order: 1;
4498 order: 1;
4499 -webkit-flex-basis: 100%;
4500 flex-basis: 100%;
4501 -webkit-align-self: flex-start;
4502 align-self: flex-start;
4503}
4504/*~
4505 name: List Item with Thumbnail
4506 category: List
4507 elements: ons-list ons-list-item
4508 markup: |
4509 <ul class="list">
4510 <li class="list-item">
4511 <div class="list-item__left">
4512 <img class="list-item__thumbnail" src="https://placekitten.com/g/40/40" alt="Cute kitten">
4513 </div>
4514
4515 <div class="list-item__center">
4516 <div class="list-item__title">Lily</div>
4517 <div class="list-item__subtitle">Very friendly cat</div>
4518 </div>
4519 </li>
4520
4521 <li class="list-item">
4522 <div class="list-item__left">
4523 <img class="list-item__thumbnail" src="https://placekitten.com/g/40/40" alt="Cute kitten">
4524 </div>
4525
4526 <div class="list-item__center">
4527 <div class="list-item__title">Molly</div>
4528 <div class="list-item__subtitle">Loves tuna!</div>
4529 </div>
4530 </li>
4531 </ul>
4532*/
4533.list-item__thumbnail {
4534 width: 40px;
4535 height: 40px;
4536 border-radius: 6px;
4537 display: block;
4538 margin: 0;
4539}
4540/*~
4541 name: List Item with Icon
4542 category: List
4543 elements: ons-list ons-list-item
4544 markup: |
4545 <ul class="list">
4546 <li class="list-item">
4547 <div class="list-item__left">
4548 <img class="list-item__thumbnail" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwJCB8v/9zErgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAvSURBVFjD7c0BDQAACAMgtX+KJzWGm4MCdJK6MHVELBaLxWKxWCwWi8VisVj8MV7qBgI2A8rYpgAAAABJRU5ErkJggg==">
4549 </div>
4550
4551 <div class="list-item__center">
4552 <div class="list-item__title">Alice</div>
4553 <div class="list-item__subtitle">Description</div>
4554 </div>
4555
4556 <div class="list-item__right">
4557 <i class="ion-ios-information list-item__icon"></i>
4558 </div>
4559 </li>
4560
4561 <li class="list-item">
4562 <div class="list-item__left">
4563 <img class="list-item__thumbnail" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwJCB8v/9zErgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAvSURBVFjD7c0BDQAACAMgtX+KJzWGm4MCdJK6MHVELBaLxWKxWCwWi8VisVj8MV7qBgI2A8rYpgAAAABJRU5ErkJggg==">
4564 </div>
4565
4566 <div class="list-item__center">
4567 <div class="list-item__title">Bob</div>
4568 <div class="list-item__subtitle">Description</div>
4569 </div>
4570
4571 <div class="list-item__right">
4572 <i class="ion-ios-information list-item__icon"></i>
4573 </div>
4574 </li>
4575 </ul>
4576*/
4577.list-item__icon {
4578 font-size: 22px;
4579 padding: 0 6px;
4580}
4581/*~
4582 name: Material List
4583 category: List
4584 elements: ons-list ons-list-item
4585 markup: |
4586 <ul class="list list--material">
4587 <li class="list-item list-item--material">
4588 <div class="list-item__center list-item--material__center">
4589 <div class="list-item__title list-item--material__title">Orange</div>
4590 <div class="list-item__subtitle list-item--material__subtitle">Sweet fruit that grows on trees.</div>
4591 </div>
4592 </li>
4593 <li class="list-item list-item--material">
4594 <div class="list-item__center list-item--material__center">
4595 <div class="list-item__title list-item--material__title">Pear</div>
4596 <div class="list-item__subtitle list-item--material__subtitle">Funny-shaped fruit.</div>
4597 </div>
4598 </li>
4599 </ul>
4600*/
4601.list--material {
4602
4603 /* mixin: material-font */
4604 font-family: 'Roboto', 'Noto', sans-serif;
4605 -webkit-font-smoothing: antialiased;
4606 font-weight: 400;
4607 font-weight: var(--material-font-weight);
4608
4609 background-image: none;
4610 background-color: #fff;
4611 background-color: var(--material-list-background-color);
4612}
4613.list-item--material {
4614 border: 0;
4615 padding: 0 0 0 16px;
4616 padding: var(--material-list-item-padding);
4617 line-height: normal;
4618}
4619.list-item--material__subtitle {
4620 margin-top: 4px;
4621}
4622.list-item--material:first-child {
4623 box-shadow: none;
4624}
4625.list-item--material__left {
4626 padding: 14px 0;
4627 min-width: 56px;
4628 line-height: 1;
4629 min-height: 48px;
4630 min-height: var(--material-list-item-min-height);
4631}
4632.list-item--material__left:empty,
4633.list-item--material__center {
4634 padding: 14px 6px 14px 0;
4635 border-color: #eee;
4636 border-color: var(--material-list-item-separator-color);
4637
4638 /* mixin: retina-material-list-item-border */
4639 border-bottom: none;
4640 background-size: 100% 1px;
4641 background-repeat: no-repeat;
4642 background-position: bottom;
4643 background-image: linear-gradient(0deg, #eee, #eee 100%);
4644 background-image: linear-gradient(0deg, var(--material-list-item-separator-color), var(--material-list-item-separator-color) 100%);
4645
4646 min-height: 48px;
4647
4648 min-height: var(--material-list-item-min-height);
4649}
4650/* @media (--retina-query) */
4651@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
4652 .list-item--material__left:empty,
4653 .list-item--material__center {
4654 background-image: linear-gradient(0deg, #eee, #eee 50%, transparent 50%);
4655 background-image: linear-gradient(0deg, var(--material-list-item-separator-color), var(--material-list-item-separator-color) 50%, transparent 50%);
4656 }
4657}
4658.list-item--material__right {
4659 padding: 14px 16px 14px 0;
4660 line-height: 1;
4661 border-color: #eee;
4662 border-color: var(--material-list-item-separator-color);
4663
4664 /* mixin: retina-material-list-item-border */
4665 border-bottom: none;
4666 background-size: 100% 1px;
4667 background-repeat: no-repeat;
4668 background-position: bottom;
4669 background-image: linear-gradient(0deg, #eee, #eee 100%);
4670 background-image: linear-gradient(0deg, var(--material-list-item-separator-color), var(--material-list-item-separator-color) 100%);
4671
4672 min-height: 48px;
4673
4674 min-height: var(--material-list-item-min-height);
4675}
4676/* @media (--retina-query) */
4677@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
4678 .list-item--material__right {
4679 background-image: linear-gradient(0deg, #eee, #eee 50%, transparent 50%);
4680 background-image: linear-gradient(0deg, var(--material-list-item-separator-color), var(--material-list-item-separator-color) 50%, transparent 50%);
4681 }
4682}
4683.list-item--material.list-item--expandable {
4684 /* mixin: retina-material-list-item-border */
4685 border-bottom: none;
4686 background-size: 100% 1px;
4687 background-repeat: no-repeat;
4688 background-position: bottom;
4689 background-image: linear-gradient(0deg, #eee, #eee 100%);
4690 background-image: linear-gradient(0deg, var(--material-list-item-separator-color), var(--material-list-item-separator-color) 100%);
4691 background-position-x: 16px;
4692 background-position-x: var(--material-list-item-side-padding);
4693}
4694/* @media (--retina-query) */
4695@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
4696 .list-item--material.list-item--expandable {
4697 background-image: linear-gradient(0deg, #eee, #eee 50%, transparent 50%);
4698 background-image: linear-gradient(0deg, var(--material-list-item-separator-color), var(--material-list-item-separator-color) 50%, transparent 50%);
4699 }
4700}
4701.list-item--material.list-item--longdivider,
4702.list-item--material.list-item--expandable.list-item--longdivider
4703 {
4704 /* mixin: retina-material-list-item-border */
4705 border-bottom: none;
4706 background-size: 100% 1px;
4707 background-repeat: no-repeat;
4708 background-position: bottom;
4709 background-image: linear-gradient(0deg, #eee, #eee 100%);
4710 background-image: linear-gradient(0deg, var(--material-list-item-separator-color), var(--material-list-item-separator-color) 100%);
4711}
4712/* @media (--retina-query) */
4713@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
4714 .list-item--material.list-item--longdivider,
4715 .list-item--material.list-item--expandable.list-item--longdivider
4716 {
4717 background-image: linear-gradient(0deg, #eee, #eee 50%, transparent 50%);
4718 background-image: linear-gradient(0deg, var(--material-list-item-separator-color), var(--material-list-item-separator-color) 50%, transparent 50%);
4719 }
4720}
4721/*~
4722 name: Material List with Header
4723 category: List
4724 elements: ons-list ons-list-item
4725 markup: |
4726 <ul class="list list--material">
4727 <li class="list-header list-header--material">
4728 Fruits
4729 </li>
4730 <li class="list-item list-item--material">
4731 <div class="list-item__center list-item--material__center">
4732 <div class="list-item__title list-item--material__title">Orange</div>
4733 <div class="list-item__subtitle list-item--material__subtitle">Sweet fruit that grows on trees.</div>
4734 </div>
4735 </li>
4736 </ul>
4737*/
4738.list-header--material {
4739 background: #fff;
4740 background: var(--list-background-color);
4741 border: none;
4742 font-size: 14px;
4743 text-transform: none;
4744 margin: -1px 0 0 0;
4745 color: #757575;
4746 color: var(--material-list-header-text-color);
4747 font-weight: 500;
4748 padding: 8px 16px;
4749}
4750.list-header--material:not(:first-of-type) {
4751 border-top: none;
4752 background-size: 100% 1px;
4753 background-repeat: no-repeat;
4754 background-position: top;
4755 background-image: linear-gradient(180deg, #eee, #eee 100%);
4756 background-image: linear-gradient(180deg, var(--material-list-item-separator-color), var(--material-list-item-separator-color) 100%);
4757 padding-top: 16px;
4758}
4759/* @media (--retina-query) */
4760@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
4761 .list-header--material:not(:first-of-type) {
4762 background-image: linear-gradient(180deg, #eee, #eee 50%, transparent 50%);
4763 background-image: linear-gradient(180deg, var(--material-list-item-separator-color), var(--material-list-item-separator-color) 50%, transparent 50%);
4764 }
4765}
4766/*~
4767 name: Material List with Checkboxes
4768 category: List
4769 elements: ons-list ons-list-item ons-input
4770 markup: |
4771 <ul class="list list--material">
4772 <li class="list-item list-item--material">
4773 <div class="list-item__left list-item--material__left">
4774 <label class="checkbox checkbox--material">
4775 <input type="checkbox" id="checkbox3" class="checkbox__input checkbox--material__input">
4776 <div class="checkbox__checkmark checkbox--material__checkmark"></div>
4777 </label>
4778 </div>
4779
4780 <label for="checkbox3" class="list-item__center list-item--material__center">
4781 <div class="list-item__title list-item--material__title">Notifications</div>
4782 <div class="list-item__subtitle list-item--material__subtitle">Allow notifications</div>
4783 </label>
4784 </li>
4785
4786 <li class="list-item list-item--material">
4787 <div class="list-item__left list-item--material__left">
4788 <label class="checkbox checkbox--material">
4789 <input type="checkbox" id="checkbox4" class="checkbox__input checkbox--material__input" checked="checked">
4790 <div class="checkbox__checkmark checkbox--material__checkmark"></div>
4791 </label>
4792 </div>
4793
4794 <label for="checkbox4" class="list-item__center list-item--material__center">
4795 <div class="list-item__title list-item--material__title">Sound</div>
4796 <div class="list-item__subtitle list-item--material__subtitle">Hangouts message</div>
4797 </label>
4798 </li>
4799
4800 </ul>
4801*/
4802/*~
4803 name: Material List with Thumbnails
4804 category: List
4805 markup: |
4806 <ul class="list list--material">
4807 <li class="list-item list-item--material">
4808 <div class="list-item__left list-item--material__left">
4809 <img class="list-item__thumbnail list-item--material__thumbnail" src="https://placekitten.com/g/42/41" alt="Cute kitten">
4810 </div>
4811
4812 <div class="list-item__center list-item--material__center">
4813 <div class="list-item__title list-item--material__title">Lily</div>
4814 <div class="list-item__subtitle list-item--material__subtitle">Very friendly cat</div>
4815 </div>
4816 </li>
4817
4818 <li class="list-item list-item--material">
4819 <div class="list-item__left list-item--material__left">
4820 <img class="list-item__thumbnail list-item--material__thumbnail" src="https://placekitten.com/g/40/40" alt="Cute kitten">
4821 </div>
4822
4823 <div class="list-item__center list-item--material__center">
4824 <div class="list-item__title list-item--material__title">Molly</div>
4825 <div class="list-item__subtitle list-item--material__subtitle">Loves tuna!</div>
4826 </div>
4827 </li>
4828
4829 </ul>
4830*/
4831.list-item--material__thumbnail {
4832 width: 40px;
4833 height: 40px;
4834 border-radius: 100%;
4835}
4836/*~
4837 name: Material List with Icons
4838 category: List
4839 markup: |
4840 <ul class="list list--material">
4841 <li class="list-item list-item--material">
4842 <div class="list-item__left list-item--material__left">
4843 <img class="list-item__thumbnail list-item--material__thumbnail" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwJCB8v/9zErgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAvSURBVFjD7c0BDQAACAMgtX+KJzWGm4MCdJK6MHVELBaLxWKxWCwWi8VisVj8MV7qBgI2A8rYpgAAAABJRU5ErkJggg==">
4844 </div>
4845
4846 <div class="list-item__center list-item--material__center">
4847 <div class="list-item__title list-item--material__title">Alice</div>
4848 <div class="list-item__subtitle list-item--material__subtitle">Description</div>
4849 </div>
4850
4851 <div class="list-item__right list-item--material__right">
4852 <i style="color:#ccc" class="list-item__icon list-item--material__icon zmdi zmdi-comment"></i>
4853 </div>
4854 </li>
4855
4856 <li class="list-item list-item--material">
4857 <div class="list-item__left list-item--material__left">
4858 <img class="list-item__thumbnail list-item--material__thumbnail" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwJCB8v/9zErgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAvSURBVFjD7c0BDQAACAMgtX+KJzWGm4MCdJK6MHVELBaLxWKxWCwWi8VisVj8MV7qBgI2A8rYpgAAAABJRU5ErkJggg==">
4859 </div>
4860
4861 <div class="list-item__center list-item--material__center">
4862 <div class="list-item__title list-item--material__title">Bob</div>
4863 <div class="list-item__subtitle list-item--material__subtitle">Description</div>
4864 </div>
4865
4866 <div class="list-item__right list-item--material__right">
4867 <i style="color:#ccc" class="list-item__icon list-item--material__icon zmdi zmdi-comment"></i>
4868 </div>
4869 </li>
4870 </ul>
4871*/
4872.list-item--material__icon {
4873 font-size: 20px;
4874 padding: 0 4px;
4875}
4876/*~
4877 name: List Item with Chevron
4878 category: List
4879 elements: ons-list ons-list-item
4880 markup: |
4881 <ul class="list">
4882 <li class="list-item list-item--chevron">
4883 <div class="list-item__center">Item A</div>
4884 </li>
4885 <li class="list-item list-item--chevron">
4886 <div class="list-item__center">Item B</div>
4887 <div class="list-item__right list-item--chevron__right">
4888 <div class="list-item__label">Label</div>
4889 </div>
4890 </li>
4891 </ul>
4892 */
4893.list-item--chevron:before,
4894.list-item__expand-chevron {
4895 border-right: 2px solid #c7c7cc;
4896 border-right: 2px solid var(--list-item-chevron-color);
4897 border-bottom: 2px solid #c7c7cc;
4898 border-bottom: 2px solid var(--list-item-chevron-color);
4899 width: 7px;
4900 height: 7px;
4901 background-color: transparent;
4902 z-index: 5;
4903}
4904.list-item--chevron:before {
4905 position: absolute;
4906 content: '';
4907 right: 16px;
4908 top: 50%;
4909 -webkit-transform: translateY(-50%) rotate(-45deg);
4910 transform: translateY(-50%) rotate(-45deg);
4911}
4912.list-item__expand-chevron {
4913 -webkit-transform: rotate(45deg);
4914 transform: rotate(45deg);
4915 margin: 1px; /* this improves alignment with normal chevrons */
4916}
4917.list-item--expandable.list-item--expanded .list-item__expand-chevron {
4918 -webkit-transform: rotate(225deg);
4919 transform: rotate(225deg);
4920}
4921.list-item--chevron__right {
4922 padding-right: 30px;
4923}
4924/*~
4925 name: Nodivider List Item with Chevron
4926 category: List
4927 elements: ons-list ons-list-item
4928 markup: |
4929 <ul class="list">
4930 <li class="list-item list-item--nodivider list-item--chevron">
4931 <div class="list-item__center list-item--nodivider__center">Item A</div>
4932 </li>
4933 <li class="list-item list-item--nodivider list-item--chevron">
4934 <div class="list-item__center list-item--nodivider__center">Item B</div>
4935 <div class="list-item__right list-item--nodivider__right list-item--chevron__right">
4936 <div class="list-item__label">Label</div>
4937 </div>
4938 </li>
4939 </ul>
4940 */
4941/*~
4942 name: List item without divider
4943 category: List
4944 markup: |
4945 <ul class="list">
4946 <li class="list-item list-item--nodivider">
4947 <div class="list-item__center list-item--nodivider__center">Item</div>
4948 </li>
4949 <li class="list-item list-item--nodivider">
4950 <div class="list-item__center list-item--nodivider__center">Item</div>
4951 </li>
4952 </ul>
4953 */
4954.list-item--nodivider__center,
4955.list-item--nodivider__right,
4956.list-item--nodivider.list-item--expandable,
4957.list-item--expandable .list-item__center,
4958.list-item--expandable .list-item__right {
4959 border: none;
4960 background-image: none;
4961}
4962/*~
4963 name: List item with long divider
4964 category: List
4965 markup: |
4966 <ul class="list">
4967 <li class="list-item list-item--longdivider">
4968 <div class="list-item__center list-item--longdivider__center">Item</div>
4969 </li>
4970 <li class="list-item list-item--longdivider">
4971 <div class="list-item__center list-item--longdivider__center">Item</div>
4972 </li>
4973 </ul>
4974 */
4975.list-item--longdivider {
4976 /* mixin: retina-list-item-border */
4977 border-bottom: none;
4978 background-size: 100% 1px;
4979 background-repeat: no-repeat;
4980 background-position: bottom;
4981 background-image: linear-gradient(0deg, #ccc, #ccc 100%);
4982 background-image: linear-gradient(0deg, var(--list-item-separator-color), var(--list-item-separator-color) 100%);
4983}
4984/* @media (--retina-query) */
4985@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
4986 .list-item--longdivider {
4987 background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);
4988 background-image: linear-gradient(0deg, var(--list-item-separator-color), var(--list-item-separator-color) 50%, transparent 50%);
4989 }
4990}
4991.list-item--longdivider:last-of-type {
4992 border: none;
4993 background-image: none;
4994}
4995.list-item--longdivider__center {
4996 border: none;
4997 background-image: none;
4998}
4999.list-item--longdivider__right {
5000 border: none;
5001 background-image: none;
5002}
5003/*~
5004 name: List title
5005 category: List
5006 markup: |
5007 <div class="list-title">List Title</div>
5008 <ul class="list">
5009 <li class="list-item">
5010 <div class="list-item__center">Item</div>
5011 </li>
5012 <li class="list-item">
5013 <div class="list-item__center">Item</div>
5014 </li>
5015 </ul>
5016 */
5017.list-title {
5018 /* mixin: reset-base */
5019 background: transparent;
5020 border: none;
5021
5022 /* mixin: reset-cursor */
5023 cursor: default;
5024 -webkit-user-select: none;
5025 user-select: none;
5026
5027 /* mixin: reset-font */
5028 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
5029 -webkit-font-smoothing: antialiased;
5030 -moz-osx-font-smoothing: grayscale;
5031
5032 display: block;
5033 color: #6d6d72;
5034 color: var(--list-title-color);
5035 text-align: left;
5036 box-sizing: border-box;
5037 padding: 0 0 0 16px;
5038 padding: var(--list-title-padding);
5039 margin: 0;
5040 font-size: 13px;
5041 font-size: var(--list-title-font-size);
5042 font-weight: 500;
5043 font-weight: var(--list-title-font-weight);
5044 line-height: 24px;
5045 line-height: var(--list-title-line-height);
5046 text-transform: uppercase;
5047 letter-spacing: 0.04em;
5048}
5049/*~
5050 name: Material List Title
5051 category: List
5052 markup: |
5053 <h3 class="list-title list-title--material">LIST TITLE</h3>
5054 <ul class="list list--material">
5055 <li class="list-item list-item--material">
5056 <div class="list-item__center list-item--material__center">Item</div>
5057 </li>
5058 <li class="list-item list-item--material">
5059 <div class="list-item__center list-item--material__center">Item</div>
5060 </li>
5061 </ul>
5062 */
5063.list-title--material {
5064
5065 /* mixin: material-font */
5066 font-family: 'Roboto', 'Noto', sans-serif;
5067 -webkit-font-smoothing: antialiased;
5068
5069 color: #757575;
5070
5071 color: var(--material-list-title-color);
5072 font-size: 14px;
5073 font-size: var(--material-list-title-font-size);
5074 margin: 0;
5075 padding: 12px 0 12px 16px;
5076 padding: var(--material-list-title-padding);
5077 font-weight: 500;
5078 font-weight: var(--material-list-title-font-weight);
5079 line-height: 24px;
5080 line-height: var(--material-list-title-line-height);
5081}
5082:root {
5083 /* original image: '../img/ios-search-input-icon.svg' */
5084 --search-icon: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMTMgMTQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQyICgzNjc4MSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aW9zLXNlYXJjaC1pbnB1dC1pY29uPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9ImNvbXBvbmVudHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJpb3Mtc2VhcmNoLWlucHV0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDguMDAwMDAwLCAtNDMuMDAwMDAwKSIgZmlsbD0iIzdBNzk3QiI+CiAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDAuMDAwMDAwLCAzNi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNi45OTcyNDgyLDE1LjUwNDE0NjYgQzE3LjA3NzM2NTcsMTUuNTQwNTkzOCAxNy4xNTIyNzMxLDE1LjU5MTYxMjkgMTcuMjE3NzUxNiwxNS42NTcwOTE0IEwyMC42NDk5OTEsMTkuMDg5MzMwOCBDMjAuOTQ0ODQ0OSwxOS4zODQxODQ3IDIwLjk0ODQ3NjQsMTkuODU4NjA2IDIwLjY1MzU0MTIsMjAuMTUzNTQxMiBDMjAuMzYwNjQ4LDIwLjQ0NjQzNDQgMTkuODgxMjcxNiwyMC40NDE5MzE3IDE5LjU4OTMzMDgsMjAuMTQ5OTkxIEwxNi4xNTcwOTE0LDE2LjcxNzc1MTYgQzE2LjA5MTM3LDE2LjY1MjAzMDEgMTYuMDQwMTE3MSwxNi41NzczODc0IDE2LjAwMzQxNDEsMTYuNDk3Nzk5NSBDMTUuMTY3MTY5NCwxNy4xMjcwNDExIDE0LjEyNzEzOTMsMTcuNSAxMywxNy41IEMxMC4yMzg1NzYzLDE3LjUgOCwxNS4yNjE0MjM3IDgsMTIuNSBDOCw5LjczODU3NjI1IDEwLjIzODU3NjMsNy41IDEzLDcuNSBDMTUuNzYxNDIzNyw3LjUgMTgsOS43Mzg1NzYyNSAxOCwxMi41IEMxOCwxMy42Mjc0Njg1IDE3LjYyNjgyMzIsMTQuNjY3Nzc2OCAxNi45OTcyNDgyLDE1LjUwNDE0NjYgWiBNMTMsMTYuNSBDMTUuMjA5MTM5LDE2LjUgMTcsMTQuNzA5MTM5IDE3LDEyLjUgQzE3LDEwLjI5MDg2MSAxNS4yMDkxMzksOC41IDEzLDguNSBDMTAuNzkwODYxLDguNSA5LDEwLjI5MDg2MSA5LDEyLjUgQzksMTQuNzA5MTM5IDEwLjc5MDg2MSwxNi41IDEzLDE2LjUgWiIgaWQ9Imlvcy1zZWFyY2gtaW5wdXQtaWNvbiI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
5085
5086 --search-input-background-image: var(--search-icon);
5087 --search-input-color: var(--input-text-color);
5088 --search-decoration-margin-right: 0;
5089 --search-input-border-radius: 5.5px;
5090 --search-input-height: 28px;
5091 --search-input-font-size: 14px;
5092 --search-input-placeholder-color: #7a797b;
5093
5094 /* original image: '../img/android-search-input-icon.svg' */
5095 --material-search-icon: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQzLjIgKDM5MDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJhbmRyb2lkLXNlYXJjaC1pbnB1dC1pY29uIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGZpbGw9IiM4OTg5ODkiPgogICAgICAgICAgICA8ZyBpZD0iY29tcG9uZW50cyI+CiAgICAgICAgICAgICAgICA8ZyBpZD0ibWF0ZXJpYWwtc2VhcmNoIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0ic2VhcmNoIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ik1hdGVyaWFsL0ljb25zLWJsYWNrL3NlYXJjaCI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTIuNTAyLDYuNDkxIEwxMS43MDgsNi40OTEgTDExLjQzMiw2Ljc2NSBDMTIuNDA3LDcuOTAyIDEzLDkuMzc2IDEzLDEwLjk5MSBDMTMsMTQuNTgxIDEwLjA5LDE3LjQ5MSA2LjUsMTcuNDkxIEMyLjkxLDE3LjQ5MSAwLDE0LjU4MSAwLDEwLjk5MSBDMCw3LjQwMSAyLjkxLDQuNDkxIDYuNSw0LjQ5MSBDOC4xMTUsNC40OTEgOS41ODgsNS4wODMgMTAuNzI1LDYuMDU3IEwxMS4wMDEsNS43ODMgTDExLjAwMSw0Ljk5MSBMMTUuOTk5LDAgTDE3LjQ5LDEuNDkxIEwxMi41MDIsNi40OTEgTDEyLjUwMiw2LjQ5MSBaIE02LjUsNi40OTEgQzQuMDE0LDYuNDkxIDIsOC41MDUgMiwxMC45OTEgQzIsMTMuNDc2IDQuMDE0LDE1LjQ5MSA2LjUsMTUuNDkxIEM4Ljk4NSwxNS40OTEgMTEsMTMuNDc2IDExLDEwLjk5MSBDMTEsOC41MDUgOC45ODUsNi40OTEgNi41LDYuNDkxIEw2LjUsNi40OTEgWiIgaWQ9IlNoYXBlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4Ljc0NTAwMCwgOC43NDU1MDApIHNjYWxlKC0xLCAxKSByb3RhdGUoLTE4MC4wMDAwMDApIHRyYW5zbGF0ZSgtOC43NDUwMDAsIC04Ljc0NTUwMCkgIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==');
5096}
5097/*~
5098 name: Search Input
5099 category: Search Input
5100 markup: |
5101 <input type="search" value="" placeholder="Search" class="search-input" style="width: 280px;">
5102*/
5103.search-input {
5104 /* mixin: reset-input */
5105
5106 font: inherit;
5107 background: transparent;
5108 border: none;
5109 vertical-align: top;
5110 outline: none;
5111
5112 /* mixin: reset-font */
5113 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
5114 -webkit-font-smoothing: antialiased;
5115 -moz-osx-font-smoothing: grayscale;
5116
5117 -webkit-appearance: textfield;
5118
5119 appearance: textfield;
5120 box-sizing: border-box;
5121 height: 28px;
5122 height: var(--search-input-height);
5123 font-size: 14px;
5124 font-size: var(--search-input-font-size);
5125 background-color: rgba(3, 3, 3, 0.09);
5126 background-color: var(--search-input-background-color);
5127 box-shadow: none;
5128 color: #1f1f21;
5129 color: var(--search-input-color);
5130 line-height: 1.3;
5131 padding: 0 8px 0 28px;
5132 margin: 0;
5133 border-radius: 5.5px;
5134 border-radius: var(--search-input-border-radius);
5135 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMTMgMTQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQyICgzNjc4MSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aW9zLXNlYXJjaC1pbnB1dC1pY29uPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9ImNvbXBvbmVudHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJpb3Mtc2VhcmNoLWlucHV0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDguMDAwMDAwLCAtNDMuMDAwMDAwKSIgZmlsbD0iIzdBNzk3QiI+CiAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDAuMDAwMDAwLCAzNi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNi45OTcyNDgyLDE1LjUwNDE0NjYgQzE3LjA3NzM2NTcsMTUuNTQwNTkzOCAxNy4xNTIyNzMxLDE1LjU5MTYxMjkgMTcuMjE3NzUxNiwxNS42NTcwOTE0IEwyMC42NDk5OTEsMTkuMDg5MzMwOCBDMjAuOTQ0ODQ0OSwxOS4zODQxODQ3IDIwLjk0ODQ3NjQsMTkuODU4NjA2IDIwLjY1MzU0MTIsMjAuMTUzNTQxMiBDMjAuMzYwNjQ4LDIwLjQ0NjQzNDQgMTkuODgxMjcxNiwyMC40NDE5MzE3IDE5LjU4OTMzMDgsMjAuMTQ5OTkxIEwxNi4xNTcwOTE0LDE2LjcxNzc1MTYgQzE2LjA5MTM3LDE2LjY1MjAzMDEgMTYuMDQwMTE3MSwxNi41NzczODc0IDE2LjAwMzQxNDEsMTYuNDk3Nzk5NSBDMTUuMTY3MTY5NCwxNy4xMjcwNDExIDE0LjEyNzEzOTMsMTcuNSAxMywxNy41IEMxMC4yMzg1NzYzLDE3LjUgOCwxNS4yNjE0MjM3IDgsMTIuNSBDOCw5LjczODU3NjI1IDEwLjIzODU3NjMsNy41IDEzLDcuNSBDMTUuNzYxNDIzNyw3LjUgMTgsOS43Mzg1NzYyNSAxOCwxMi41IEMxOCwxMy42Mjc0Njg1IDE3LjYyNjgyMzIsMTQuNjY3Nzc2OCAxNi45OTcyNDgyLDE1LjUwNDE0NjYgWiBNMTMsMTYuNSBDMTUuMjA5MTM5LDE2LjUgMTcsMTQuNzA5MTM5IDE3LDEyLjUgQzE3LDEwLjI5MDg2MSAxNS4yMDkxMzksOC41IDEzLDguNSBDMTAuNzkwODYxLDguNSA5LDEwLjI5MDg2MSA5LDEyLjUgQzksMTQuNzA5MTM5IDEwLjc5MDg2MSwxNi41IDEzLDE2LjUgWiIgaWQ9Imlvcy1zZWFyY2gtaW5wdXQtaWNvbiI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
5136 background-image: var(--search-input-background-image);
5137 background-position: 8px center;
5138 background-repeat: no-repeat;
5139 background-size: 13px;
5140 font-weight: 400;
5141 font-weight: var(--font-weight);
5142 display: inline-block;
5143 text-indent: 0;
5144}
5145.search-input::-webkit-search-cancel-button {
5146 -webkit-appearance: textfield;
5147 appearance: textfield;
5148 display: none;
5149}
5150.search-input::-webkit-search-decoration {
5151 display: none;
5152}
5153.search-input:focus {
5154 outline: none;
5155}
5156.search-input::-webkit-input-placeholder {
5157 color: #7a797b;
5158 color: var(--search-input-placeholder-color);
5159 font-size: 14px;
5160 font-size: var(--search-input-font-size);
5161 text-indent: 0;
5162}
5163.search-input::placeholder {
5164 color: #7a797b;
5165 color: var(--search-input-placeholder-color);
5166 font-size: 14px;
5167 font-size: var(--search-input-font-size);
5168 text-indent: 0;
5169}
5170.search-input:placeholder-shown {
5171}
5172.search-input:disabled {
5173 /* mixin: disabled */
5174 opacity: 0.3;
5175 cursor: default;
5176 pointer-events: none;
5177}
5178/*~
5179 name: Material Search Input
5180 category: Search Input
5181 markup: |
5182 <input type="search" value="" placeholder="Search" class="search-input search-input--material" style="width: 280px;">
5183*/
5184.search-input--material {
5185
5186 /* mixin: material-font */
5187 font-family: 'Roboto', 'Noto', sans-serif;
5188 -webkit-font-smoothing: antialiased;
5189 font-weight: 400;
5190 font-weight: var(--material-font-weight);
5191
5192 border-radius: 2px;
5193 height: 48px;
5194 background-color: #fafafa;
5195 background-color: var(--material-search-background-color);
5196 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQzLjIgKDM5MDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJhbmRyb2lkLXNlYXJjaC1pbnB1dC1pY29uIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGZpbGw9IiM4OTg5ODkiPgogICAgICAgICAgICA8ZyBpZD0iY29tcG9uZW50cyI+CiAgICAgICAgICAgICAgICA8ZyBpZD0ibWF0ZXJpYWwtc2VhcmNoIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0ic2VhcmNoIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ik1hdGVyaWFsL0ljb25zLWJsYWNrL3NlYXJjaCI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTIuNTAyLDYuNDkxIEwxMS43MDgsNi40OTEgTDExLjQzMiw2Ljc2NSBDMTIuNDA3LDcuOTAyIDEzLDkuMzc2IDEzLDEwLjk5MSBDMTMsMTQuNTgxIDEwLjA5LDE3LjQ5MSA2LjUsMTcuNDkxIEMyLjkxLDE3LjQ5MSAwLDE0LjU4MSAwLDEwLjk5MSBDMCw3LjQwMSAyLjkxLDQuNDkxIDYuNSw0LjQ5MSBDOC4xMTUsNC40OTEgOS41ODgsNS4wODMgMTAuNzI1LDYuMDU3IEwxMS4wMDEsNS43ODMgTDExLjAwMSw0Ljk5MSBMMTUuOTk5LDAgTDE3LjQ5LDEuNDkxIEwxMi41MDIsNi40OTEgTDEyLjUwMiw2LjQ5MSBaIE02LjUsNi40OTEgQzQuMDE0LDYuNDkxIDIsOC41MDUgMiwxMC45OTEgQzIsMTMuNDc2IDQuMDE0LDE1LjQ5MSA2LjUsMTUuNDkxIEM4Ljk4NSwxNS40OTEgMTEsMTMuNDc2IDExLDEwLjk5MSBDMTEsOC41MDUgOC45ODUsNi40OTEgNi41LDYuNDkxIEw2LjUsNi40OTEgWiIgaWQ9IlNoYXBlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4Ljc0NTAwMCwgOC43NDU1MDApIHNjYWxlKC0xLCAxKSByb3RhdGUoLTE4MC4wMDAwMDApIHRyYW5zbGF0ZSgtOC43NDUwMDAsIC04Ljc0NTUwMCkgIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==');
5197 background-image: var(--material-search-icon);
5198 background-size: 18px;
5199 background-position: 18px center;
5200 font-size: 14px;
5201 padding: 0 24px 0 64px;
5202 box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 1px 0 0 rgba(255, 255, 255, 0.06) inset;
5203}
5204:root {
5205 --text-input-font-size: 16px;
5206 --text-input-height: 31px;
5207 --text-input-border-color: var(--input-border-color);
5208 --material-text-input-font-size: 16px;
5209 --material-text-input-color: var(--material-text-input-text-color);
5210}
5211/*~
5212 name: Text Input
5213 category: Text Input
5214 elements: ons-input
5215 markup: |
5216 <div><input type="text" class="text-input" placeholder="text" value=""></div>
5217 <div><input type="text" class="text-input" placeholder="text" value="" disabled></div>
5218*/
5219.text-input {
5220
5221 /* mixin: input */
5222
5223 /* mixin: reset-input */
5224
5225 font: inherit;
5226 background: transparent;
5227 vertical-align: top;
5228 outline: none;
5229 line-height: 1;
5230
5231 /* mixin: reset-font */
5232 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
5233 -webkit-font-smoothing: antialiased;
5234 -moz-osx-font-smoothing: grayscale;
5235
5236 /* mixin: transparent */
5237 border: none;
5238 background-color: transparent;
5239
5240 letter-spacing: 0;
5241 box-shadow: none;
5242 color: #1f1f21;
5243 color: var(--input-text-color);
5244 padding: 0;
5245 margin: 0;
5246 width: auto;
5247 font-size: 16px;
5248 font-size: var(--text-input-font-size);
5249 height: 31px;
5250 height: var(--text-input-height);
5251 font-weight: 400;
5252 font-weight: var(--font-weight);
5253 box-sizing: border-box;
5254}
5255.text-input::-ms-clear {
5256 display: none;
5257}
5258.text-input:disabled {
5259 /* mixin: disabled */
5260 opacity: 0.3;
5261 cursor: default;
5262 pointer-events: none;
5263}
5264.text-input::-webkit-input-placeholder {
5265 color: #999;
5266 color: var(--input-placeholder-color);
5267}
5268.text-input::placeholder {
5269 color: #999;
5270 color: var(--input-placeholder-color);
5271}
5272.text-input:disabled::-webkit-input-placeholder {
5273
5274 /* mixin: input-placeholder */
5275 /* mixin: transparent */
5276 border: none;
5277 background-color: transparent;
5278 color: #999;
5279 color: var(--input-placeholder-color);
5280}
5281.text-input:disabled::placeholder {
5282
5283 /* mixin: input-placeholder */
5284 /* mixin: transparent */
5285 border: none;
5286 background-color: transparent;
5287 color: #999;
5288 color: var(--input-placeholder-color);
5289}
5290.text-input:invalid {
5291 /* mixin: transparent */
5292 border: none;
5293 background-color: transparent;
5294
5295 color: #1f1f21;
5296
5297 color: var(--input-invalid-text-color);
5298}
5299/*~
5300 name: Underbar Text Input
5301 category: Text Input
5302 elements: ons-input
5303 markup: |
5304 <div><input type="text" class="text-input text-input--underbar" placeholder="text" value=""></div>
5305 <div><input type="text" class="text-input text-input--underbar" placeholder="text" value="" disabled></div>
5306*/
5307.text-input--underbar {
5308 border: none;
5309 background-color: transparent;
5310 border-bottom: 1px solid #ccc;
5311 border-bottom: 1px solid var(--text-input-border-color);
5312 border-radius: 0;
5313}
5314.text-input--underbar:disabled {
5315 border: none;
5316 background-color: transparent;
5317 border-bottom: 1px solid #ccc;
5318 border-bottom: 1px solid var(--text-input-border-color);
5319}
5320.text-input--underbar:disabled::-webkit-input-placeholder {
5321 /* mixin: input-placeholder */
5322 color: #999;
5323 color: var(--input-placeholder-color);
5324
5325 border: none;
5326 background-color: transparent;
5327}
5328.text-input--underbar:disabled::placeholder {
5329 /* mixin: input-placeholder */
5330 color: #999;
5331 color: var(--input-placeholder-color);
5332
5333 border: none;
5334 background-color: transparent;
5335}
5336.text-input--underbar:invalid {
5337 border: none;
5338 background-color: transparent;
5339 border-bottom: 1px solid #ccc;
5340 border-bottom: 1px solid var(--input-invalid-border-color);
5341}
5342/*~
5343 name: Material Input
5344 category: Text Input
5345 elements: ons-input
5346 markup: |
5347 <span>
5348 <div><input class="text-input text-input--material" placeholder="Username" type="text" required></div>
5349 <br />
5350 <div><input class="text-input text-input--material" placeholder="Password" type="password" required></div>
5351 </span>
5352*/
5353.text-input--material {
5354
5355 /* mixin: input */
5356
5357 /* mixin: reset-input */
5358
5359 /* mixin: reset-box-model */
5360 box-sizing: border-box;
5361
5362 padding: 0;
5363 margin: 0;
5364 font: inherit;
5365 background: transparent;
5366 outline: none;
5367 line-height: 1;
5368
5369 /* mixin: reset-font */
5370 -moz-osx-font-smoothing: grayscale;
5371
5372 /* mixin: material-font */
5373 font-family: 'Roboto', 'Noto', sans-serif;
5374 -webkit-font-smoothing: antialiased;
5375 font-weight: 400;
5376 font-weight: var(--material-font-weight);
5377
5378 color: #212121;
5379
5380 color: var(--material-text-input-color);
5381 background-image: linear-gradient(to top, transparent 1px, #afafaf 1px);
5382 background-image: linear-gradient(to top, transparent 1px, var(--material-text-input-inactive-color) 1px);
5383 background-size: 100% 2px;
5384 background-repeat: no-repeat;
5385 background-position: center bottom;
5386 background-color: transparent;
5387 font-size: 16px;
5388 font-size: var(--material-text-input-font-size);
5389 border: none;
5390 padding-bottom: 2px;
5391 border-radius: 0;
5392 height: 24px;
5393 vertical-align: middle;
5394 -webkit-transform: translate3d(0, 0, 0); /* FIXME: prevent ios flicker */
5395}
5396.text-input--material__label {
5397
5398 /* mixin: material-font */
5399 font-family: 'Roboto', 'Noto', sans-serif;
5400 -webkit-font-smoothing: antialiased;
5401 font-weight: 400;
5402 font-weight: var(--material-font-weight);
5403
5404 color: #afafaf;
5405
5406 color: var(--material-text-input-inactive-color);
5407 position: absolute;
5408 left: 0;
5409 top: 2px;
5410 font-size: 16px;
5411 pointer-events: none;
5412}
5413.text-input--material__label--active {
5414 color: #3d5afe;
5415 color: var(--material-text-input-active-color);
5416 -webkit-transform: translate(0, -75%) scale(0.75);
5417 transform: translate(0, -75%) scale(0.75);
5418 -webkit-transform-origin: left top;
5419 transform-origin: left top;
5420 transition: color 0.1s ease-in, -webkit-transform 0.1s ease-in;
5421 transition: transform 0.1s ease-in, color 0.1s ease-in;
5422 transition: transform 0.1s ease-in, color 0.1s ease-in, -webkit-transform 0.1s ease-in;
5423}
5424.text-input--material:focus {
5425 background-image:
5426 linear-gradient(#3d5afe, #3d5afe),
5427 linear-gradient(to top, transparent 1px, #afafaf 1px);
5428 background-image:
5429 linear-gradient(var(--material-text-input-active-color), var(--material-text-input-active-color)),
5430 linear-gradient(to top, transparent 1px, var(--material-text-input-inactive-color) 1px);
5431 -webkit-animation: material-text-input-animate 0.3s forwards;
5432 animation: material-text-input-animate 0.3s forwards;
5433}
5434.text-input--material::-webkit-input-placeholder {
5435 color: #afafaf;
5436 color: var(--material-text-input-inactive-color);
5437 line-height: 20px;
5438}
5439.text-input--material::placeholder {
5440 color: #afafaf;
5441 color: var(--material-text-input-inactive-color);
5442 line-height: 20px;
5443}
5444@-webkit-keyframes material-text-input-animate {
5445 0% {
5446 background-size: 0% 2px, 100% 2px;
5447 }
5448
5449 100% {
5450 background-size: 100% 2px, 100% 2px;
5451 }
5452}
5453@keyframes material-text-input-animate {
5454 0% {
5455 background-size: 0% 2px, 100% 2px;
5456 }
5457
5458 100% {
5459 background-size: 100% 2px, 100% 2px;
5460 }
5461}
5462:root {
5463 --textarea-color: var(--input-text-color);
5464 --textarea-border: 1px solid var(--input-border-color);
5465 --textarea-padding: 5px 5px 5px 5px;
5466 --textarea-box-shadow: none;
5467 --textarea-border-radius: 4px;
5468}
5469/*~
5470 name: Textarea
5471 category: Textarea
5472 markup: |
5473 <textarea class="textarea" rows="3" placeholder="Textarea"></textarea>
5474*/
5475.textarea {
5476 /* mixin: reset-box-model */
5477 box-sizing: border-box;
5478
5479 /* mixin: reset-base */
5480 margin: 0;
5481 font: inherit;
5482 background: transparent;
5483 line-height: normal;
5484
5485 /* mixin: reset-font */
5486 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
5487 -webkit-font-smoothing: antialiased;
5488 -moz-osx-font-smoothing: grayscale;
5489
5490 vertical-align: top;
5491 resize: none;
5492 outline: none;
5493 padding: 5px 5px 5px 5px;
5494 padding: var(--textarea-padding);
5495 font-size: 16px;
5496 font-size: var(--text-input-font-size);
5497 font-weight: 400;
5498 font-weight: var(--font-weight);
5499 border-radius: 4px;
5500 border-radius: var(--textarea-border-radius);
5501 border: 1px solid #ccc;
5502 border: var(--textarea-border);
5503 background-color: #efeff4;
5504 background-color: var(--input-bg-color);
5505 color: #1f1f21;
5506 color: var(--textarea-color);
5507 letter-spacing: 0;
5508 box-shadow: none;
5509 box-shadow: var(--textarea-box-shadow);
5510 -webkit-appearance: none;
5511 appearance: none;
5512 width: auto;
5513}
5514.textarea:disabled {
5515 /* mixin: disabled */
5516 opacity: 0.3;
5517 cursor: default;
5518 pointer-events: none;
5519}
5520.textarea::-webkit-input-placeholder {
5521 color: #999;
5522 color: var(--input-placeholder-color);
5523}
5524.textarea::placeholder {
5525 color: #999;
5526 color: var(--input-placeholder-color);
5527}
5528/*~
5529 name: Textarea Transparent
5530 category: Textarea
5531 markup: |
5532 <textarea class="textarea textarea--transparent" rows="3" placeholder="Textarea"></textarea>
5533*/
5534.textarea--transparent {
5535 padding-left: 0;
5536 padding-right: 0;
5537 border: none;
5538 background-color: transparent;
5539}
5540/*~
5541 name: Dialog
5542 category: Dialog
5543 elements: ons-dialog
5544 markup: |
5545 <div class="dialog-mask"></div>
5546 <div class="dialog">
5547 <div class="dialog-container">
5548 <p style="text-align:center;margin-top:40px;opacity:0.4;">Content</p>
5549 </div>
5550 </div>
5551*/
5552.dialog {
5553 /* mixin: reset-box-model */
5554 box-sizing: border-box;
5555
5556 /* mixin: reset-base */
5557 padding: 0;
5558 font: inherit;
5559 color: inherit;
5560 background: transparent;
5561 border: none;
5562 line-height: normal;
5563
5564 /* mixin: reset-cursor */
5565 cursor: default;
5566 -webkit-user-select: none;
5567 user-select: none;
5568
5569 /* mixin: reset-font */
5570 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
5571 -webkit-font-smoothing: antialiased;
5572 -moz-osx-font-smoothing: grayscale;
5573 font-weight: 400;
5574 font-weight: var(--font-weight);
5575
5576 position: absolute;
5577 top: 50%;
5578 left: 50%;
5579 -webkit-transform: translate(-50%, -50%);
5580 transform: translate(-50%, -50%);
5581 margin: auto auto;
5582 overflow: hidden;
5583 min-width: 270px;
5584 min-height: 100px;
5585 text-align: left;
5586}
5587.dialog-container {
5588 height: inherit;
5589 min-height: inherit;
5590 overflow: hidden;
5591 border-radius: 4px;
5592 background-color: #f4f4f4;
5593 background-color: var(--dialog-background-color);
5594 -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC');
5595 color: #1f1f21;
5596 color: var(--dialog-text-color);
5597}
5598.dialog-mask {
5599 /* mixin: reset-base */
5600 padding: 0;
5601 margin: 0;
5602 font: inherit;
5603 color: inherit;
5604 background: transparent;
5605 border: none;
5606 line-height: normal;
5607
5608 /* mixin: reset-cursor */
5609 cursor: default;
5610 -webkit-user-select: none;
5611 user-select: none;
5612
5613 position: absolute;
5614 top: 0;
5615 right: 0;
5616 left: 0;
5617 bottom: 0;
5618 background-color: rgba(0, 0, 0, 0.2);
5619}
5620/*~
5621 name: Material Dialog
5622 category: Dialog
5623 elements: ons-dialog
5624 markup: |
5625 <div class="dialog-mask dialog-mask--material"></div>
5626 <div class="dialog dialog--material">
5627 <div class="dialog dialog-container--material">
5628 <p style="margin-left:24px;margin-right:24px">The quick brown fox jumps over the lazy dog.</p>
5629 </div>
5630 </div>
5631*/
5632.dialog--material {
5633
5634 /* mixin: material-font */
5635 font-family: 'Roboto', 'Noto', sans-serif;
5636 -webkit-font-smoothing: antialiased;
5637 font-weight: 400;
5638 font-weight: var(--material-font-weight);
5639
5640 text-align: left;
5641
5642 /* mixin: material-shadow-5 */
5643 box-shadow:
5644 0 16px 24px 2px rgba(0, 0, 0, 0.14),
5645 0 6px 30px 5px rgba(0, 0, 0, 0.12),
5646 0 8px 10px -5px rgba(0, 0, 0, 0.4);
5647}
5648.dialog-container--material {
5649 border-radius: 2px;
5650 background-color: #ffffff;
5651 background-color: var(--material-dialog-background-color);
5652 color: #1f1f21;
5653 color: var(--material-dialog-text-color);
5654}
5655.dialog-mask--material {
5656 background-color: rgba(0, 0, 0, 0.3);
5657}
5658:root {
5659}
5660/*~
5661 name: Alert Dialog
5662 category: Alert Dialog
5663 elements: ons-alert-dialog
5664 markup: |
5665 <div class="alert-dialog-mask"></div>
5666 <div class="alert-dialog">
5667 <div class="alert-dialog-container">
5668 <div class="alert-dialog-title">Alert</div>
5669
5670 <div class="alert-dialog-content">
5671 Hello World!
5672 </div>
5673
5674 <div class="alert-dialog-footer">
5675 <button class="alert-dialog-button alert-dialog-button--primal">OK</button>
5676 </div>
5677 </div>
5678 </div>
5679*/
5680.alert-dialog {
5681 /* mixin: reset-box-model */
5682 box-sizing: border-box;
5683
5684 /* mixin: reset-base */
5685 padding: 0;
5686 font: inherit;
5687 background: transparent;
5688 border: none;
5689 line-height: normal;
5690
5691 /* mixin: reset-cursor */
5692 cursor: default;
5693 -webkit-user-select: none;
5694 user-select: none;
5695
5696 /* mixin: reset-font */
5697 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
5698 -webkit-font-smoothing: antialiased;
5699 -moz-osx-font-smoothing: grayscale;
5700 font-weight: 400;
5701 font-weight: var(--font-weight);
5702
5703 position: absolute;
5704 top: 50%;
5705 left: 50%;
5706 -webkit-transform: translate(-50%, -50%);
5707 transform: translate(-50%, -50%);
5708 width: 270px;
5709 margin: auto;
5710 background-color: #f4f4f4;
5711 background-color: var(--alert-dialog-background-color);
5712 border-radius: 8px;
5713 overflow: visible;
5714 max-width: 95%;
5715 color: #1f1f21;
5716 color: var(--alert-dialog-text-color);
5717}
5718.alert-dialog-container {
5719 height: inherit;
5720 padding-top: 16px;
5721 overflow: hidden;
5722}
5723.alert-dialog-title {
5724 /* mixin: reset-font */
5725 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
5726 -webkit-font-smoothing: antialiased;
5727 -moz-osx-font-smoothing: grayscale;
5728
5729 font-size: 17px;
5730
5731 font-size: var(--font-size);
5732 font-weight: 500;
5733 font-weight: var(--font-weight--large);
5734 padding: 0 8px;
5735 text-align: center;
5736 color: #1f1f21;
5737 color: var(--alert-dialog-text-color);
5738}
5739.alert-dialog-content {
5740 /* mixin: reset-box-model */
5741 box-sizing: border-box;
5742 background-clip: padding-box;
5743
5744 padding: 4px 12px 8px;
5745 font-size: calc(17px - 3px);
5746 font-size: var(--font-size--mini);
5747 min-height: 36px;
5748 text-align: center;
5749 color: #1f1f21;
5750 color: var(--alert-dialog-text-color);
5751}
5752.alert-dialog-footer {
5753 width: 100%;
5754}
5755.alert-dialog-button {
5756 /* mixin: reset-box-model */
5757 box-sizing: border-box;
5758
5759 /* mixin: reset-base */
5760 font: inherit;
5761 background: transparent;
5762
5763 /* mixin: reset-font */
5764 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
5765 -webkit-font-smoothing: antialiased;
5766 -moz-osx-font-smoothing: grayscale;
5767 font-weight: 400;
5768 font-weight: var(--font-weight);
5769
5770 /* mixin: reset-cursor */
5771 cursor: default;
5772 -webkit-user-select: none;
5773 user-select: none;
5774
5775 /* mixin: ellipsis */
5776 text-overflow: ellipsis;
5777 white-space: nowrap;
5778 overflow: hidden;
5779
5780 text-decoration: none;
5781 letter-spacing: 0;
5782 vertical-align: middle;
5783 border: none;
5784 border-top: 1px solid #ddd;
5785 border-top: 1px solid var(--alert-dialog-separator-color);
5786 font-size: calc(17px - 1px);
5787 font-size: calc(var(--font-size) - 1px);
5788 padding: 0 8px;
5789 margin: 0;
5790 display: block;
5791 width: 100%;
5792 background-color: transparent;
5793 text-align: center;
5794 height: 44px;
5795 line-height: 44px;
5796 outline: none;
5797 color: rgb(0, 118, 255);
5798 color: var(--alert-dialog-button-color);
5799}
5800/* @media (--retina-query) */
5801@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
5802 .alert-dialog-button {
5803 border-top: none;
5804 background-size: 100% 1px;
5805 background-repeat: no-repeat;
5806 background-position: top;
5807 background-image: linear-gradient(180deg, #ddd, #ddd 50%, transparent 50%);
5808 background-image: linear-gradient(180deg, var(--alert-dialog-separator-color), var(--alert-dialog-separator-color) 50%, transparent 50%);
5809 }
5810}
5811.alert-dialog-button:active {
5812 background-color: rgba(0, 0, 0, 0.05);
5813}
5814.alert-dialog-button--primal {
5815 font-weight: 500;
5816 font-weight: var(--font-weight--large);
5817}
5818.alert-dialog-footer--rowfooter {
5819 white-space: nowrap;
5820 display: -webkit-flex;
5821 display: flex;
5822 -webkit-flex-wrap: wrap;
5823 flex-wrap: wrap;
5824}
5825.alert-dialog-button--rowfooter {
5826 -webkit-flex: 1;
5827 flex: 1;
5828 display: block;
5829 width: 100%;
5830 border-left: 1px solid #ddd;
5831 border-left: 1px solid var(--alert-dialog-separator-color);
5832}
5833/* @media (--retina-query) */
5834@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
5835 .alert-dialog-button--rowfooter {
5836 border-top: none;
5837 border-left: none;
5838 background-size: 100% 1px, 1px 100%;
5839 background-repeat: no-repeat;
5840 background-position: top, left;
5841 background-image:
5842 linear-gradient(0deg, transparent, transparent 50%, #ddd 50%),
5843 linear-gradient(90deg, transparent, transparent 50%, #ddd 50%);
5844 background-image:
5845 linear-gradient(0deg, transparent, transparent 50%, var(--alert-dialog-separator-color) 50%),
5846 linear-gradient(90deg, transparent, transparent 50%, var(--alert-dialog-separator-color) 50%);
5847 }
5848}
5849.alert-dialog-button--rowfooter:first-child {
5850 border-left: none;
5851}
5852/* @media (--retina-query) */
5853@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
5854 .alert-dialog-button--rowfooter:first-child {
5855 border-top: none;
5856 background-size: 100% 1px;
5857 background-repeat: no-repeat;
5858 background-position: top, left;
5859 background-image: linear-gradient(0deg, transparent, transparent 50%, #ddd 50%);
5860 background-image: linear-gradient(0deg, transparent, transparent 50%, var(--alert-dialog-separator-color) 50%);
5861 }
5862}
5863.alert-dialog-mask {
5864 /* mixin: reset-base */
5865 padding: 0;
5866 margin: 0;
5867 font: inherit;
5868 color: inherit;
5869 background: transparent;
5870 border: none;
5871 line-height: normal;
5872
5873 /* mixin: reset-cursor */
5874 cursor: default;
5875 -webkit-user-select: none;
5876 user-select: none;
5877
5878 position: absolute;
5879 top: 0;
5880 right: 0;
5881 left: 0;
5882 bottom: 0;
5883 background-color: rgba(0, 0, 0, 0.2);
5884}
5885/*~
5886 name: Alert Dialog without Title
5887 category: Alert Dialog
5888 elements: ons-alert-dialog
5889 markup: |
5890 <div class="alert-dialog-mask"></div>
5891 <div class="alert-dialog">
5892 <div class="alert-dialog-container">
5893 <div class="alert-dialog-content">
5894 Hello World!
5895 </div>
5896
5897 <div class="alert-dialog-footer">
5898 <button class="alert-dialog-button alert-dialog-button--primal">OK</button>
5899 </div>
5900 </div>
5901 </div>
5902*/
5903/*~
5904 name: Alert Dialog with Multiple Buttons
5905 category: Alert Dialog
5906 elements: ons-alert-dialog
5907 markup: |
5908 <div class="alert-dialog-mask"></div>
5909 <div class="alert-dialog">
5910 <div class="alert-dialog-container">
5911 <div class="alert-dialog-content">
5912 Hello World!
5913 </div>
5914
5915 <div class="alert-dialog-footer">
5916 <button class="alert-dialog-button">Cancel</button>
5917 <button class="alert-dialog-button alert-dialog-button--primal">OK</button>
5918 </div>
5919 </div>
5920 </div>
5921*/
5922/*~
5923 name: Alert Dialog with Multiple Buttons 2
5924 category: Alert Dialog
5925 elements: ons-alert-dialog
5926 markup: |
5927 <div class="alert-dialog-mask"></div>
5928 <div class="alert-dialog">
5929 <div class="alert-dialog-container">
5930 <div class="alert-dialog-title">Alert</div>
5931
5932 <div class="alert-dialog-content">
5933 Hello World!
5934 </div>
5935
5936 <div class="alert-dialog-footer alert-dialog-footer--rowfooter">
5937 <button class="alert-dialog-button alert-dialog-button--rowfooter">Left</button>
5938 <button class="alert-dialog-button alert-dialog-button--primal alert-dialog-button--rowfooter">Center</button>
5939 <button class="alert-dialog-button alert-dialog-button--rowfooter">Right</button>
5940 </div>
5941 </div>
5942 </div>
5943*/
5944/*~
5945 name: Material Alert Dialog
5946 category: Alert Dialog
5947 elements: ons-alert-dialog
5948 markup: |
5949 <div class="alert-dialog-mask alert-dialog-mask--material"></div>
5950 <div class="alert-dialog alert-dialog--material">
5951 <div class="alert-dialog-container alert-dialog-container--material">
5952 <div class="alert-dialog-title alert-dialog-title--material">
5953 Dialog title
5954 </div>
5955 <div class="alert-dialog-content alert-dialog-content--material">
5956 Some dialog content.
5957 </div>
5958 <div class="alert-dialog-footer alert-dialog-footer--material">
5959 <button class="alert-dialog-button alert-dialog-button--material">OK</button>
5960 <button class="alert-dialog-button alert-dialog-button--material">CANCEL</button>
5961 </div>
5962 </div>
5963 </div>
5964*/
5965.alert-dialog--material {
5966 border-radius: 2px;
5967 background-color: #ffffff;
5968 background-color: var(--material-alert-dialog-background-color);
5969}
5970.alert-dialog-container--material {
5971 padding: 22px 0 0 0;
5972
5973 /* mixin: material-shadow-5 */
5974 box-shadow:
5975 0 16px 24px 2px rgba(0, 0, 0, 0.14),
5976 0 6px 30px 5px rgba(0, 0, 0, 0.12),
5977 0 8px 10px -5px rgba(0, 0, 0, 0.4);
5978}
5979.alert-dialog-title--material {
5980 /* mixin: material-font */
5981 font-family: 'Roboto', 'Noto', sans-serif;
5982 -webkit-font-smoothing: antialiased;
5983
5984 text-align: left;
5985 font-size: 20px;
5986 font-weight: 500;
5987 padding: 0 24px;
5988 color: #31313a;
5989 color: var(--material-alert-dialog-title-color);
5990}
5991.alert-dialog-content--material {
5992 /* mixin: material-font */
5993 font-family: 'Roboto', 'Noto', sans-serif;
5994 -webkit-font-smoothing: antialiased;
5995
5996 text-align: left;
5997 font-size: 16px;
5998 font-weight: 400;
5999 font-weight: var(--material-font-weight);
6000 line-height: 20px;
6001 padding: 0 24px;
6002 margin: 24px 0 10px 0;
6003 min-height: 0;
6004 color: rgba(49, 49, 58, 0.85);
6005 color: var(--material-alert-dialog-content-color);
6006}
6007.alert-dialog-footer--material {
6008 display: block;
6009 padding: 0;
6010 height: 52px;
6011 box-sizing: border-box;
6012 margin: 0;
6013 line-height: 1;
6014}
6015.alert-dialog-button--material {
6016 /* mixin: material-font */
6017 font-family: 'Roboto', 'Noto', sans-serif;
6018 -webkit-font-smoothing: antialiased;
6019
6020 text-transform: uppercase;
6021 display: inline-block;
6022 width: auto;
6023 float: right;
6024 background: none;
6025 border: none;
6026 border-radius: 2px;
6027 font-size: 14px;
6028 font-weight: 500;
6029 outline: none;
6030 height: 36px;
6031 line-height: 36px;
6032 padding: 0 8px;
6033 margin: 8px 8px 8px 0;
6034 box-sizing: border-box;
6035 min-width: 50px;
6036 color: #37474f;
6037 color: var(--material-alert-dialog-button-color);
6038}
6039/* @media (--retina-query) */
6040@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
6041 .alert-dialog-button--material {
6042 background: none;
6043 }
6044}
6045.alert-dialog-button--material:active {
6046 background-color: transparent;
6047 background-color: initial;
6048}
6049/* stylelint-disable-next-line selector-class-pattern */
6050.alert-dialog-button--rowfooter--material, .alert-dialog-button--rowfooter--material:first-child {
6051 border: 0;
6052}
6053/* @media (--retina-query) */
6054@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
6055 /* stylelint-disable-next-line selector-class-pattern */
6056 .alert-dialog-button--rowfooter--material, .alert-dialog-button--rowfooter--material:first-child {
6057 background: none;
6058 }
6059}
6060/* stylelint-disable-next-line selector-class-pattern */
6061.alert-dialog-button--primal--material {
6062 font-weight: 500;
6063}
6064/* @media (--retina-query) */
6065@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
6066 /* stylelint-disable-next-line selector-class-pattern */
6067 .alert-dialog-button--primal--material {
6068 background: none;
6069 }
6070}
6071.alert-dialog-mask--material {
6072 background-color: rgba(0, 0, 0, 0.3);
6073}
6074:root {
6075 --popover-arrow-size: 18px;
6076 --popover-arrow-radius: 4px;
6077 --popover-radius: 8px;
6078 --popover-margin: 6px;
6079 --material-popover-radius: 2px;
6080 --material-popover-margin: 4px;
6081}
6082/*~
6083 name: Popover
6084 category: Popover
6085 elements: ons-popover
6086 markup: |
6087 <div class="popover-mask"></div>
6088 <div class="popover popover--bottom" style="bottom: 20px; left: 65px;">
6089 <div class="popover__arrow popover--bottom__arrow" style="left: 110px;"></div>
6090 <div class="popover__content popover--bottom__content">
6091 <div style="text-align:center;opacity:0.8;margin-top:40px">Content</div>
6092 </div>
6093 </div>
6094*/
6095/*~
6096 name: Popover(top)
6097 category: Popover
6098 elements: ons-popover
6099 markup: |
6100 <div class="popover-mask"></div>
6101 <div class="popover popover--top" style="top: 20px; left: 50px;">
6102 <div class="popover__arrow popover--top__arrow" style="margin-left: 110px;"></div>
6103 <div class="popover__content popover--top__content">
6104 <div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>
6105 </div>
6106 </div>
6107*/
6108/*~
6109 name: Popover(left)
6110 category: Popover
6111 elements: ons-popover
6112 markup: |
6113 <div class="popover-mask"></div>
6114 <div class="popover popover--right" style="top: 20px; right: 20px;">
6115 <div class="popover__arrow popover--right__arrow" style="bottom: 50px;"></div>
6116 <div class="popover__content popover--right__content">
6117 <div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>
6118 </div>
6119 </div>
6120*/
6121/*~
6122 name: Popover(right)
6123 category: Popover
6124 elements: ons-popover
6125 markup: |
6126 <div class="popover-mask"></div>
6127 <div class="popover popover--left" style="top: 20px;left: 20px;">
6128 <div class="popover__arrow popover--left__arrow" style="top: 50px;"></div>
6129 <div class="popover__content popover--left__content">
6130 <div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>
6131 </div>
6132 </div>
6133*/
6134.popover {
6135 position: absolute;
6136 z-index: 20001;
6137}
6138.popover--bottom {
6139 bottom: 0;
6140}
6141.popover--top {
6142 top: 0;
6143}
6144.popover--left {
6145 left: 0;
6146}
6147.popover--right {
6148 right: 0;
6149}
6150.popover-mask {
6151 left: 0;
6152 right: 0;
6153 top: 0;
6154 bottom: 0;
6155 background-color: rgba(0, 0, 0, 0.2);
6156 position: absolute;
6157 z-index: 19999;
6158}
6159.popover__content {
6160 /* mixin: reset-box-model */
6161 box-sizing: border-box;
6162
6163 /* mixin: reset-base */
6164 padding: 0;
6165 margin: 0;
6166 font: inherit;
6167 background: transparent;
6168 border: none;
6169 line-height: normal;
6170
6171 /* mixin: reset-cursor */
6172 cursor: default;
6173 -webkit-user-select: none;
6174 user-select: none;
6175
6176 /* mixin: reset-font */
6177 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
6178 -webkit-font-smoothing: antialiased;
6179 -moz-osx-font-smoothing: grayscale;
6180 font-weight: 400;
6181 font-weight: var(--font-weight);
6182
6183 display: block;
6184 width: 220px;
6185 overflow: auto;
6186 min-height: 100px;
6187 max-height: 100%;
6188 background-color: white;
6189 background-color: var(--popover-background-color);
6190 border-radius: 8px;
6191 border-radius: var(--popover-radius);
6192 color: #1f1f21;
6193 color: var(--popover-text-color);
6194 pointer-events: auto;
6195}
6196.popover--top__content {
6197
6198}
6199.popover--bottom__content {
6200
6201}
6202.popover--left__content {
6203
6204}
6205.popover--right__content {
6206
6207}
6208.popover__arrow {
6209 position: absolute;
6210 width: 18px;
6211 width: var(--popover-arrow-size);
6212 height: 18px;
6213 height: var(--popover-arrow-size);
6214 -webkit-transform-origin: 50% 50% 0;
6215 transform-origin: 50% 50% 0;
6216 background-color: transparent;
6217 background-image: linear-gradient(45deg, white, white 50%, transparent 50%);
6218 background-image: linear-gradient(45deg, var(--popover-background-color), var(--popover-background-color) 50%, transparent 50%);
6219 border-radius: 0 0 0 4px;
6220 border-radius: 0 0 0 var(--popover-arrow-radius);
6221 margin: 0;
6222 z-index: 20001;
6223}
6224/* NOTE: If you changed this properties, you should check if ons-popover is broken. */
6225.popover--bottom__arrow {
6226 -webkit-transform: translateY(6px) translateX(calc(18px / -2)) rotate(-45deg);
6227 transform: translateY(6px) translateX(calc(18px / -2)) rotate(-45deg);
6228 -webkit-transform: translateY(6px) translateX(calc(var(--popover-arrow-size) / -2)) rotate(-45deg);
6229 transform: translateY(6px) translateX(calc(var(--popover-arrow-size) / -2)) rotate(-45deg);
6230 bottom: 0;
6231 margin-right: -18px;
6232}
6233.popover--top__arrow {
6234 -webkit-transform: translateY(-6px) translateX(calc(18px / -2)) rotate(135deg);
6235 transform: translateY(-6px) translateX(calc(18px / -2)) rotate(135deg);
6236 -webkit-transform: translateY(-6px) translateX(calc(var(--popover-arrow-size) / -2)) rotate(135deg);
6237 transform: translateY(-6px) translateX(calc(var(--popover-arrow-size) / -2)) rotate(135deg);
6238 top: 0;
6239 margin-right: -18px;
6240}
6241.popover--left__arrow {
6242 -webkit-transform: translateX(-6px) translateY(calc(18px / -2)) rotate(45deg);
6243 transform: translateX(-6px) translateY(calc(18px / -2)) rotate(45deg);
6244 -webkit-transform: translateX(-6px) translateY(calc(var(--popover-arrow-size) / -2)) rotate(45deg);
6245 transform: translateX(-6px) translateY(calc(var(--popover-arrow-size) / -2)) rotate(45deg);
6246 left: 0;
6247 margin-bottom: -18px;
6248}
6249.popover--right__arrow {
6250 -webkit-transform: translateX(6px) translateY(calc(18px / -2)) rotate(225deg);
6251 transform: translateX(6px) translateY(calc(18px / -2)) rotate(225deg);
6252 -webkit-transform: translateX(6px) translateY(calc(var(--popover-arrow-size) / -2)) rotate(225deg);
6253 transform: translateX(6px) translateY(calc(var(--popover-arrow-size) / -2)) rotate(225deg);
6254 right: 0;
6255 margin-bottom: -18px;
6256}
6257/*~
6258 name: Material Popover
6259 category: Popover
6260 elements: ons-popover
6261 markup: |
6262 <div class="popover-mask popover-mask--material"></div>
6263 <div class="popover popover--material popover--left" style="top: 50px; left: 65px;">
6264 <div class="popover__arrow popover--material__arrow popover--left__arrow"></div>
6265 <div class="popover__content popover--material__content popover--left__content">
6266 <div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>
6267 </div>
6268 </div>
6269*/
6270.popover--material {
6271}
6272.popover-mask--material {
6273 background-color: transparent;
6274}
6275.popover--material__content {
6276 background-color: #fafafa;
6277 background-color: var(--material-popover-background-color);
6278 border-radius: 2px;
6279 border-radius: var(--material-popover-radius);
6280 color: #1f1f21;
6281 color: var(--material-popover-text-color);
6282
6283 /* mixin: material-shadow-1 */
6284 box-shadow:
6285 0 2px 2px 0 rgba(0, 0, 0, 0.14),
6286 0 1px 5px 0 rgba(0, 0, 0, 0.12),
6287 0 3px 1px -2px rgba(0, 0, 0, 0.2);
6288}
6289.popover--material__arrow {
6290 display: none;
6291}
6292/*~
6293 name: Progress Bar
6294 category: Progress Bar
6295 elements: ons-progress-bar
6296 markup: |
6297 <div class="progress-bar">
6298 <div class="progress-bar__primary" style="width: 30%"></div>
6299 </div>
6300 <br />
6301 <div class="progress-bar">
6302 <div class="progress-bar__primary" style="width:20%"></div>
6303 <div class="progress-bar__secondary" style="width:76%"></div>
6304 </div>
6305 <br />
6306 <div class="progress-bar progress-bar--indeterminate">
6307 </div>
6308*/
6309.progress-bar {
6310 position: relative;
6311 height: 2px;
6312 display: block;
6313 width: 100%;
6314 background-color: transparent;
6315 background-color: var(--progress-bar-background-color);
6316 background-clip: padding-box;
6317 margin: 0;
6318 overflow: hidden;
6319 border-radius: 4px;
6320}
6321.progress-bar__primary,
6322.progress-bar__secondary {
6323 position: absolute;
6324 background-color: rgb(0, 118, 255);
6325 background-color: var(--progress-bar-color);
6326 top: 0;
6327 bottom: 0;
6328 transition: width .3s linear;
6329 z-index: 100;
6330 border-radius: 4px;
6331}
6332.progress-bar__secondary {
6333 background-color: #65adff;
6334 background-color: var(--progress-bar-secondary-color);
6335 z-index: 0;
6336}
6337.progress-bar--indeterminate:before {
6338 content: '';
6339 position: absolute;
6340 background-color: rgb(0, 118, 255);
6341 background-color: var(--progress-bar-color);
6342 top: 0;
6343 left: 0;
6344 bottom: 0;
6345 will-change: left, right;
6346 -webkit-animation: progress-bar__indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
6347 animation: progress-bar__indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
6348 border-radius: 4px;
6349}
6350.progress-bar--indeterminate:after {
6351 content: '';
6352 position: absolute;
6353 background-color: rgb(0, 118, 255);
6354 background-color: var(--progress-bar-color);
6355 top: 0;
6356 left: 0;
6357 bottom: 0;
6358 will-change: left, right;
6359 -webkit-animation: progress-bar__indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
6360 animation: progress-bar__indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
6361 -webkit-animation-delay: 1.15s;
6362 animation-delay: 1.15s;
6363 border-radius: 4px;
6364}
6365@-webkit-keyframes progress-bar__indeterminate {
6366 0% {
6367 left: -35%;
6368 right: 100%;
6369 }
6370
6371 60% {
6372 left: 100%;
6373 right: -90%;
6374 }
6375
6376 100% {
6377 left: 100%;
6378 right: -90%;
6379 }
6380}
6381@keyframes progress-bar__indeterminate {
6382 0% {
6383 left: -35%;
6384 right: 100%;
6385 }
6386
6387 60% {
6388 left: 100%;
6389 right: -90%;
6390 }
6391
6392 100% {
6393 left: 100%;
6394 right: -90%;
6395 }
6396}
6397@-webkit-keyframes progress-bar__indeterminate-short {
6398 0% {
6399 left: -200%;
6400 right: 100%;
6401 }
6402
6403 60% {
6404 left: 107%;
6405 right: -8%;
6406 }
6407
6408 100% {
6409 left: 107%;
6410 right: -8%;
6411 }
6412}
6413@keyframes progress-bar__indeterminate-short {
6414 0% {
6415 left: -200%;
6416 right: 100%;
6417 }
6418
6419 60% {
6420 left: 107%;
6421 right: -8%;
6422 }
6423
6424 100% {
6425 left: 107%;
6426 right: -8%;
6427 }
6428}
6429/*~
6430 name: Material Progress Bar
6431 category: Progress Bar
6432 elements: ons-progress-bar
6433 markup: |
6434 <div class="progress-bar progress-bar--material">
6435 <div class="progress-bar__primary progress-bar--material__primary" style="width: 30%"></div>
6436 </div>
6437 <br />
6438 <div class="progress-bar progress-bar--material">
6439 <div class="progress-bar__primary progress-bar--material__primary" style="width:20%"></div>
6440 <div class="progress-bar__secondary progress-bar--material__secondary" style="width:76%"></div>
6441 </div>
6442 <br />
6443 <div class="progress-bar progress-bar--material progress-bar--indeterminate">
6444 </div>
6445*/
6446.progress-bar--material {
6447 height: 4px;
6448 background-color: transparent;
6449 background-color: var(--material-progress-bar-background-color);
6450 border-radius: 0;
6451}
6452.progress-bar--material__primary,
6453.progress-bar--material__secondary {
6454 background-color: #37474f;
6455 background-color: var(--material-progress-bar-primary-color);
6456 border-radius: 0;
6457}
6458.progress-bar--material__secondary {
6459 background-color: #548ba7;
6460 background-color: var(--material-progress-bar-secondary-color);
6461 z-index: 0;
6462}
6463.progress-bar--material.progress-bar--indeterminate:before { /* FIXME */
6464 background-color: #37474f;
6465 background-color: var(--material-progress-bar-primary-color);
6466 border-radius: 0;
6467}
6468.progress-bar--material.progress-bar--indeterminate:after { /* FIXME */
6469 background-color: #37474f;
6470 background-color: var(--material-progress-bar-primary-color);
6471 border-radius: 0;
6472}
6473/*~
6474 name: Progress Circle
6475 category: Progress Circle
6476 elements: ons-progress-circular
6477 markup: |
6478 <svg class="progress-circular progress-circular--indeterminate">
6479 <circle class="progress-circular__background"/>
6480 <circle class="progress-circular__primary progress-circular--indeterminate__primary"/>
6481 <circle class="progress-circular__secondary progress-circular--indeterminate__secondary"/>
6482 </svg>
6483
6484 <svg class="progress-circular">
6485 <circle class="progress-circular__background"/>
6486 <circle class="progress-circular__secondary" style="stroke-dasharray: 140%, 251.32%"/>
6487 <circle class="progress-circular__primary" style="stroke-dasharray: 100%, 251.32%"/>
6488 </svg>
6489
6490 <svg class="progress-circular">
6491 <circle class="progress-circular__background"/>
6492 <circle class="progress-circular__primary" style="stroke-dasharray: 80%, 251.32%"/>
6493 </svg>
6494*/
6495.progress-circular {
6496 height: 32px;
6497 position: relative;
6498 width: 32px;
6499 -webkit-transform: rotate(270deg);
6500 transform: rotate(270deg);
6501 -webkit-animation: none;
6502 animation: none;
6503}
6504.progress-circular__background,
6505.progress-circular__primary,
6506.progress-circular__secondary {
6507 /* clean-css ignore:start */
6508 cx: 50%;
6509 cy: 50%;
6510 r: 40%;
6511 /* clean-css ignore:end */
6512 -webkit-animation: none;
6513 animation: none;
6514 fill: none;
6515 stroke-width: 5%;
6516 stroke-miterlimit: 10;
6517}
6518.progress-circular__background {
6519 stroke: transparent;
6520 stroke: var(--progress-circle-background-color);
6521}
6522.progress-circular__primary {
6523 stroke-dasharray: 1, 200;
6524 stroke-dashoffset: 0;
6525 stroke: rgb(0, 118, 255);
6526 stroke: var(--progress-circle-primary-color);
6527 transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
6528}
6529.progress-circular__secondary {
6530 stroke: #65adff;
6531 stroke: var(--progress-circle-secondary-color);
6532}
6533.progress-circular--indeterminate {
6534 -webkit-animation: progress__rotate 2s linear infinite;
6535 animation: progress__rotate 2s linear infinite;
6536 -webkit-transform: none;
6537 transform: none;
6538}
6539.progress-circular--indeterminate__primary {
6540 -webkit-animation: progress__dash 1.5s ease-in-out infinite;
6541 animation: progress__dash 1.5s ease-in-out infinite;
6542}
6543.progress-circular--indeterminate__secondary {
6544 display: none;
6545}
6546@-webkit-keyframes progress__rotate {
6547 100% {
6548 -webkit-transform: rotate(360deg);
6549 transform: rotate(360deg);
6550 }
6551}
6552@keyframes progress__rotate {
6553 100% {
6554 -webkit-transform: rotate(360deg);
6555 transform: rotate(360deg);
6556 }
6557}
6558@-webkit-keyframes progress__dash {
6559 0% {
6560 stroke-dasharray: 10%, 241.32%;
6561 stroke-dashoffset: 0;
6562 }
6563
6564 50% {
6565 stroke-dasharray: 201%, 50.322%;
6566 stroke-dashoffset: -100%;
6567 }
6568
6569 100% {
6570 stroke-dasharray: 10%, 241.32%;
6571 stroke-dashoffset: -251.32%;
6572 }
6573}
6574@keyframes progress__dash {
6575 0% {
6576 stroke-dasharray: 10%, 241.32%;
6577 stroke-dashoffset: 0;
6578 }
6579
6580 50% {
6581 stroke-dasharray: 201%, 50.322%;
6582 stroke-dashoffset: -100%;
6583 }
6584
6585 100% {
6586 stroke-dasharray: 10%, 241.32%;
6587 stroke-dashoffset: -251.32%;
6588 }
6589}
6590/*~
6591 name: Material Progress Circle
6592 category: Progress Circle
6593 elements: ons-progress-circular
6594 markup: |
6595 <svg class="progress-circular progress-circular--material progress-circular--indeterminate">
6596 <circle class="progress-circular__background progress-circular--material__background"/>
6597 <circle class="progress-circular__primary progress-circular--material__primary progress-circular--indeterminate__primary"/>
6598 <circle class="progress-circular__secondary progress-circular--material__secondary progress-circular--indeterminate__secondary"/>
6599 </svg>
6600
6601 <svg class="progress-circular progress-circular--material">
6602 <circle class="progress-circular__background progress-circular--material__background"/>
6603 <circle class="progress-circular__secondary progress-circular--material__secondary" style="stroke-dasharray: 140%, 251.32%"/>
6604 <circle class="progress-circular__primary progress-circular--material__primary" style="stroke-dasharray: 100%, 251.32%"/>
6605 </svg>
6606
6607 <svg class="progress-circular progress-circular--material">
6608 <circle class="progress-circular__background progress-circular--material__background"/>
6609 <circle class="progress-circular__primary progress-circular--material__primary" style="stroke-dasharray: 80%, 251.32%"/>
6610 </svg>
6611*/
6612.progress-circular--material__background,
6613.progress-circular--material__primary,
6614.progress-circular--material__secondary {
6615 stroke-width: 9%;
6616}
6617.progress-circular--material__background {
6618 stroke: transparent;
6619 stroke: var(--material-progress-circle-background-color);
6620}
6621.progress-circular--material__primary {
6622 stroke: #37474f;
6623 stroke: var(--material-progress-circle-primary-color);
6624}
6625.progress-circular--material__secondary {
6626 stroke: #548ba7;
6627 stroke: var(--material-progress-circle-secondary-color);
6628}
6629/* stylelint-disable selector-no-qualifying-type, selector-type-no-unknown */
6630:root {
6631 --fab-width: 56px;
6632 --fab-height: 56px;
6633 --fab-position: absolute;
6634 --fab-mini-width: 40px;
6635 --fab-mini-height: 40px;
6636
6637 --material-fab-width: 56px;
6638 --material-fab-height: 56px;
6639 --material-fab-position: absolute;
6640 --material-fab-mini-width: 40px;
6641 --material-fab-mini-height: 40px;
6642}
6643/*~
6644 name: Fab
6645 category: Fab
6646 elements: ons-fab
6647 markup: |
6648 <button class="fab"><i class="zmdi zmdi-car"></i></button>
6649 <button class="fab" disabled><i class="zmdi zmdi-car"></i></button>
6650*/
6651ons-fab.fab, ons-speed-dial-item.fab, button.fab {
6652 position: relative;
6653 display: inline-block;
6654
6655 /* mixin: reset-box-model */
6656 box-sizing: border-box;
6657
6658 /* mixin: reset-base */
6659 padding: 0;
6660 margin: 0;
6661 font: inherit;
6662 background: transparent;
6663
6664 /* mixin: reset-font */
6665 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
6666 -webkit-font-smoothing: antialiased;
6667 -moz-osx-font-smoothing: grayscale;
6668 font-weight: 400;
6669 font-weight: var(--font-weight);
6670
6671 /* mixin: reset-cursor */
6672 cursor: default;
6673 -webkit-user-select: none;
6674 user-select: none;
6675
6676 width: 56px;
6677
6678 width: var(--fab-width);
6679 height: 56px;
6680 height: var(--fab-height);
6681 text-decoration: none;
6682 font-size: 25px;
6683 line-height: 56px;
6684 line-height: var(--fab-height);
6685 letter-spacing: 0;
6686 color: #ffffff;
6687 color: var(--fab-text-color);
6688 vertical-align: middle;
6689 text-align: center;
6690 background-color: rgba(0, 118, 255);
6691 background-color: var(--fab-background-color);
6692 border: 0 solid currentColor;
6693 border-radius: 50%;
6694 overflow: hidden;
6695 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
6696 transition: all 0.1s linear;
6697}
6698ons-fab.fab:active, ons-speed-dial-item.fab:active, button.fab:active {
6699 background-color: rgba(0, 118, 255, 0.7);
6700 background-color: var(--fab-active-background-color);
6701 transition: all 0.2s ease;
6702 box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
6703}
6704ons-fab.fab:focus, ons-speed-dial-item.fab:focus, button.fab:focus {
6705 outline: 0;
6706}
6707ons-fab.fab:disabled,
6708ons-fab.fab[disabled],
6709ons-speed-dial-item.fab:disabled,
6710ons-speed-dial-item.fab[disabled],
6711button.fab:disabled,
6712button.fab[disabled] {
6713 background-color: rgba(0, 0, 0, 0.5); /* color-mod(black alpha(50%)) */
6714
6715 /* mixin: material-shadow-0 */
6716 box-shadow: none;
6717
6718 /* mixin: disabled */
6719 opacity: 0.3;
6720 cursor: default;
6721 pointer-events: none;
6722}
6723ons-fab.fab__icon, ons-speed-dial-item.fab__icon, button.fab__icon {
6724 position: relative;
6725 overflow: hidden;
6726 height: 100%;
6727 width: 100%;
6728 display: block;
6729 border-radius: 100%;
6730 padding: 0;
6731 z-index: 100;
6732 line-height: 56px;
6733 line-height: var(--material-fab-height);
6734}
6735/*~
6736 name: Material Fab
6737 category: Fab
6738 elements: ons-fab
6739 markup: |
6740 <button class="fab fab--material"><i class="zmdi zmdi-car"></i></button>
6741 <button class="fab fab--material" disabled><i class="zmdi zmdi-car"></i></button>
6742*/
6743ons-fab.fab--material, ons-speed-dial-item.fab--material, button.fab--material {
6744
6745 /* mixin: material-font */
6746 font-family: 'Roboto', 'Noto', sans-serif;
6747 -webkit-font-smoothing: antialiased;
6748 font-weight: 400;
6749 font-weight: var(--material-font-weight);
6750
6751 width: 56px;
6752
6753 width: var(--material-fab-width);
6754 height: 56px;
6755 height: var(--material-fab-height);
6756 text-decoration: none;
6757 font-size: 25px;
6758 line-height: 56px;
6759 line-height: var(--material-fab-height);
6760 color: #31313a;
6761 color: var(--material-fab-text-color);
6762 background-color: #ffffff;
6763 background-color: var(--material-fab-background-color);
6764
6765 /* mixin: material-shadow-2 */
6766 box-shadow:
6767 0 4px 5px 0 rgba(0, 0, 0, 0.14),
6768 0 1px 10px 0 rgba(0, 0, 0, 0.12),
6769 0 2px 4px -1px rgba(0, 0, 0, 0.4);
6770
6771 transition: all 0.2s ease-in-out;
6772}
6773ons-fab.fab--material:active, ons-speed-dial-item.fab--material:active, button.fab--material:active {
6774
6775 /* mixin: material-shadow-4 */
6776 box-shadow:
6777 0 8px 10px 1px rgba(0, 0, 0, 0.14),
6778 0 3px 14px 2px rgba(0, 0, 0, 0.12),
6779 0 5px 5px -3px rgba(0, 0, 0, 0.4);
6780
6781 background-color: rgba(255, 255, 255, 0.75);
6782
6783 background-color: var(--material-fab-active-background-color);
6784 transition: all 0.2s ease;
6785}
6786ons-fab.fab--material:focus, ons-speed-dial-item.fab--material:focus, button.fab--material:focus {
6787 outline: 0;
6788}
6789ons-fab.fab--material__icon, ons-speed-dial-item.fab--material__icon, button.fab--material__icon {
6790 position: relative;
6791 overflow: hidden;
6792 height: 100%;
6793 width: 100%;
6794 display: block;
6795 border-radius: 100%;
6796 padding: 0;
6797 z-index: 100;
6798 line-height: 56px;
6799 line-height: var(--material-fab-height);
6800}
6801/*~
6802 name: Fab Mini
6803 category: Fab
6804 elements: ons-fab
6805 markup: |
6806 <button class="fab fab--mini"><i class="zmdi zmdi-plus"></i></button>
6807 <button class="fab fab--mini" disabled><i class="zmdi zmdi-plus"></i></button>
6808*/
6809/*~
6810 name: Material Fab Mini
6811 category: Fab
6812 elements: ons-fab
6813 markup: |
6814 <button class="fab fab--material fab--mini"><i class="zmdi zmdi-plus"></i></button>
6815 <button class="fab fab--material fab--mini" disabled><i class="zmdi zmdi-plus"></i></button>
6816*/
6817ons-fab.fab--mini, ons-speed-dial-item.fab--mini, button.fab--mini {
6818 width: 40px;
6819 width: var(--fab-mini-width);
6820 height: 40px;
6821 height: var(--fab-mini-height);
6822 line-height: 40px;
6823 line-height: var(--fab-mini-height);
6824}
6825ons-fab.fab--mini__icon, ons-speed-dial-item.fab--mini__icon, button.fab--mini__icon {
6826 line-height: 40px;
6827 line-height: var(--fab-mini-height);
6828}
6829ons-fab.speed-dial__item, ons-speed-dial-item.speed-dial__item, button.speed-dial__item {
6830 position: absolute;
6831 -webkit-transform: scale(0);
6832 transform: scale(0);
6833}
6834ons-fab.fab--top__right, button.fab--top__right, .speed-dial.fab--top__right {
6835 top: 20px;
6836 bottom: auto;
6837 right: 20px;
6838 left: auto;
6839 position: absolute;
6840 position: var(--fab-position);
6841}
6842ons-fab.fab--bottom__right, button.fab--bottom__right, .speed-dial.fab--bottom__right {
6843 top: auto;
6844 bottom: 20px;
6845 right: 20px;
6846 left: auto;
6847 position: absolute;
6848 position: var(--fab-position);
6849}
6850ons-fab.fab--top__left, button.fab--top__left, .speed-dial.fab--top__left {
6851 top: 20px;
6852 bottom: auto;
6853 right: auto;
6854 left: 20px;
6855 position: absolute;
6856 position: var(--fab-position);
6857}
6858ons-fab.fab--bottom__left, button.fab--bottom__left, .speed-dial.fab--bottom__left {
6859 top: auto;
6860 bottom: 20px;
6861 right: auto;
6862 left: 20px;
6863 position: absolute;
6864 position: var(--fab-position);
6865}
6866ons-fab.fab--top__center, button.fab--top__center, .speed-dial.fab--top__center {
6867 top: 20px;
6868 bottom: auto;
6869 margin-left: -28px;
6870 left: 50%;
6871 right: auto;
6872 position: absolute;
6873 position: var(--fab-position);
6874}
6875ons-fab.fab--bottom__center, button.fab--bottom__center, .speed-dial.fab--bottom__center {
6876 top: auto;
6877 bottom: 20px;
6878 margin-left: -28px;
6879 left: 50%;
6880 right: auto;
6881 position: absolute;
6882 position: var(--fab-position);
6883}
6884/* stylelint-enable selector-no-qualifying-type, selector-type-no-unknown */
6885/*~
6886 name: Modal
6887 category: Modal
6888 elements: ons-modal
6889 markup: |
6890 <div class="modal">
6891 <div class="modal__content">
6892 Message Text
6893 </div>
6894 </div>
6895*/
6896.modal {
6897 /* mixin: reset-container */
6898 /* mixin: reset-overflow */
6899 white-space: nowrap;
6900
6901 word-spacing: 0;
6902
6903 /* mixin: reset-base */
6904 padding: 0;
6905 margin: 0;
6906 font: inherit;
6907 color: inherit;
6908 background: transparent;
6909 border: none;
6910 line-height: normal;
6911
6912 /* mixin: reset-box-model */
6913 box-sizing: border-box;
6914 background-clip: padding-box;
6915
6916 /* mixin: reset-font */
6917 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
6918 -webkit-font-smoothing: antialiased;
6919 -moz-osx-font-smoothing: grayscale;
6920 font-weight: 400;
6921 font-weight: var(--font-weight);
6922
6923 overflow: hidden;
6924 background-color: rgba(0, 0, 0, 0.7);
6925 background-color: var(--modal-background-color);
6926 position: absolute;
6927 left: 0;
6928 right: 0;
6929 top: 0;
6930 bottom: 0;
6931 width: 100%;
6932 height: 100%;
6933 display: table;
6934 z-index: 2147483647;
6935}
6936.modal__content {
6937 /* mixin: reset-container */
6938 /* mixin: reset-overflow */
6939 overflow: hidden;
6940
6941 word-spacing: 0;
6942
6943 /* mixin: reset-base */
6944 padding: 0;
6945 margin: 0;
6946 font: inherit;
6947 background: transparent;
6948 border: none;
6949 line-height: normal;
6950
6951 /* mixin: reset-box-model */
6952 box-sizing: border-box;
6953 background-clip: padding-box;
6954
6955 /* mixin: reset-font */
6956 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
6957 -webkit-font-smoothing: antialiased;
6958 -moz-osx-font-smoothing: grayscale;
6959 font-weight: 400;
6960 font-weight: var(--font-weight);
6961
6962 display: table-cell;
6963 vertical-align: middle;
6964 text-align: center;
6965 color: #fff;
6966 color: var(--modal-text-color);
6967 white-space: normal;
6968}
6969:root {
6970 --select-input-font-size: var(--font-size);
6971 --select-input-height: 32px;
6972
6973 --material-select-input-font-size: 15px;
6974
6975 /* original image: '../img/select-arrow.svg' */
6976 --select-arrow-icon: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI1cHgiIHZpZXdCb3g9IjAgMCAxMCA1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+c2VsZWN0LWFsbG93PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9InNlbGVjdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Imlvcy1zZWxlY3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOTguMDAwMDAwLCAtMTE0LjAwMDAwMCkiIGZpbGw9IiM3NTc1NzUiPgogICAgICAgICAgICA8ZyBpZD0ibWVudS1iYXItKy1vcGVuLW1lbnUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMy4wMDAwMDAsIDEwMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJtZW51LWJhciI+CiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9InNlbGVjdC1hbGxvdyIgcG9pbnRzPSI3NSAxNCA4MCAxOSA4NSAxNCI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
6977}
6978/*~
6979 name: Select Input
6980 category: Select Input
6981 markup: |
6982 <select class="select-input">
6983 <option>Option 1</option>
6984 <option>Option 2</option>
6985 <option>Option 3</option>
6986 </select>
6987
6988 &nbsp;
6989
6990 <select class="select-input" disabled>
6991 <option>Option 1</option>
6992 <option>Option 2</option>
6993 <option>Option 3</option>
6994 </select>
6995*/
6996.select-input {
6997
6998 /* mixin: input */
6999
7000 /* mixin: reset-input */
7001
7002 /* mixin: reset-box-model */
7003 box-sizing: border-box;
7004
7005 margin: 0;
7006 font: inherit;
7007 background: transparent;
7008 vertical-align: top;
7009 outline: none;
7010
7011 /* mixin: reset-font */
7012 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
7013 -webkit-font-smoothing: antialiased;
7014 -moz-osx-font-smoothing: grayscale;
7015 font-weight: 400;
7016 font-weight: var(--font-weight);
7017
7018 position: relative;
7019 font-size: 17px;
7020 font-size: var(--select-input-font-size);
7021 height: 32px;
7022 height: var(--select-input-height);
7023 line-height: 32px;
7024 line-height: var(--select-input-height);
7025 border-color: #ccc;
7026 border-color: var(--select-input-border-color);
7027 color: #1f1f21;
7028 color: var(--select-input-color);
7029 -webkit-appearance: none;
7030 appearance: none;
7031 display: inline-block;
7032 border-radius: 0;
7033 border: none;
7034 padding: 0 20px 0 0;
7035 background-color: transparent;
7036 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI1cHgiIHZpZXdCb3g9IjAgMCAxMCA1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+c2VsZWN0LWFsbG93PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9InNlbGVjdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Imlvcy1zZWxlY3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOTguMDAwMDAwLCAtMTE0LjAwMDAwMCkiIGZpbGw9IiM3NTc1NzUiPgogICAgICAgICAgICA8ZyBpZD0ibWVudS1iYXItKy1vcGVuLW1lbnUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMy4wMDAwMDAsIDEwMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJtZW51LWJhciI+CiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9InNlbGVjdC1hbGxvdyIgcG9pbnRzPSI3NSAxNCA4MCAxOSA4NSAxNCI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
7037 background-image: var(--select-arrow-icon);
7038 background-repeat: no-repeat;
7039 background-position: right center;
7040 border-bottom: none;
7041}
7042.select-input::-ms-clear {
7043 display: none;
7044}
7045.select-input::-webkit-input-placeholder {
7046 color: #999;
7047 color: var(--input-placeholder-color);
7048}
7049.select-input::placeholder {
7050 color: #999;
7051 color: var(--input-placeholder-color);
7052}
7053.select-input:disabled {
7054 /* mixin: disabled */
7055 opacity: 0.3;
7056 cursor: default;
7057 pointer-events: none;
7058
7059 /* mixin: transparent */
7060 border: none;
7061 background-color: transparent;
7062}
7063.select-input:disabled::-webkit-input-placeholder {
7064
7065 /* mixin: input-placeholder */
7066 /* mixin: transparent */
7067 border: none;
7068 background-color: transparent;
7069
7070 color: #999;
7071
7072 color: var(--input-placeholder-color);
7073}
7074.select-input:disabled::placeholder {
7075
7076 /* mixin: input-placeholder */
7077 /* mixin: transparent */
7078 border: none;
7079 background-color: transparent;
7080
7081 color: #999;
7082
7083 color: var(--input-placeholder-color);
7084}
7085.select-input:invalid {
7086 /* mixin: transparent */
7087 border: none;
7088 background-color: transparent;
7089
7090 color: #1f1f21;
7091
7092 color: var(--input-invalid-text-color);
7093}
7094.select-input[multiple] {
7095 height: calc(32px * 2);
7096 height: calc(var(--select-input-height) * 2);
7097}
7098/*~
7099 name: Material Select Input
7100 category: Select Input
7101 markup: |
7102 <select class="select-input select-input--material">
7103 <option>Option 1</option>
7104 <option>Option 2</option>
7105 <option>Option 3</option>
7106 </select>
7107
7108 &nbsp;
7109
7110 <select class="select-input select-input--material" disabled>
7111 <option>Option 1</option>
7112 <option>Option 2</option>
7113 <option>Option 3</option>
7114 </select>
7115*/
7116.select-input--material {
7117 /* mixin: material-font */
7118 font-family: 'Roboto', 'Noto', sans-serif;
7119 -webkit-font-smoothing: antialiased;
7120 font-weight: 400;
7121 font-weight: var(--material-font-weight);
7122
7123 color: #1f1f21;
7124
7125 color: var(--material-select-input-color);
7126 font-size: 15px;
7127 font-size: var(--material-select-input-font-size);
7128 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI1cHgiIHZpZXdCb3g9IjAgMCAxMCA1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+c2VsZWN0LWFsbG93PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9InNlbGVjdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Imlvcy1zZWxlY3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOTguMDAwMDAwLCAtMTE0LjAwMDAwMCkiIGZpbGw9IiM3NTc1NzUiPgogICAgICAgICAgICA8ZyBpZD0ibWVudS1iYXItKy1vcGVuLW1lbnUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMy4wMDAwMDAsIDEwMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJtZW51LWJhciI+CiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9InNlbGVjdC1hbGxvdyIgcG9pbnRzPSI3NSAxNCA4MCAxOSA4NSAxNCI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4='), linear-gradient(to top, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.12) 50%);
7129 background-image: var(--select-arrow-icon), linear-gradient(to top, var(--material-select-border-color) 50%, var(--material-select-border-color) 50%);
7130 background-size: auto, 100% 1px;
7131 background-repeat: no-repeat;
7132 background-position: right center, left bottom;
7133 border: none;
7134 -webkit-transform: translate3d(0, 0, 0);
7135 transform: translate3d(0, 0, 0); /* prevent ios flicker */
7136}
7137.select-input--material__label {
7138
7139 /* mixin: material-font */
7140 font-family: 'Roboto', 'Noto', sans-serif;
7141 -webkit-font-smoothing: antialiased;
7142 font-weight: 400;
7143 font-weight: var(--material-font-weight);
7144
7145 color: rgba(0, 0, 0, 0.81);
7146
7147 color: var(--material-select-input-inactive-color);
7148 position: absolute;
7149 left: 0;
7150 top: 2px;
7151 font-size: 16px;
7152 pointer-events: none;
7153}
7154.select-input--material__label--active {
7155 color: rgba(0, 0, 0, 0.15);
7156 color: var(--material-select-input-active-color);
7157 -webkit-transform: translate(0, -75%) scale(0.75);
7158 transform: translate(0, -75%) scale(0.75);
7159 -webkit-transform-origin: left top;
7160 transform-origin: left top;
7161 transition: color 0.1s ease-in, -webkit-transform 0.1s ease-in;
7162 transition: transform 0.1s ease-in, color 0.1s ease-in;
7163 transition: transform 0.1s ease-in, color 0.1s ease-in, -webkit-transform 0.1s ease-in;
7164}
7165.select-input--material::-webkit-input-placeholder {
7166 color: rgba(0, 0, 0, 0.81);
7167 color: var(--material-select-input-inactive-color);
7168 line-height: 20px;
7169}
7170.select-input--material::placeholder {
7171 color: rgba(0, 0, 0, 0.81);
7172 color: var(--material-select-input-inactive-color);
7173 line-height: 20px;
7174}
7175@-webkit-keyframes material-select-input-animate {
7176 0% {
7177 background-size: 0% 2px, 100% 2px;
7178 }
7179
7180 100% {
7181 background-size: 100% 2px, 100% 2px;
7182 }
7183}
7184@keyframes material-select-input-animate {
7185 0% {
7186 background-size: 0% 2px, 100% 2px;
7187 }
7188
7189 100% {
7190 background-size: 100% 2px, 100% 2px;
7191 }
7192}
7193/*~
7194 name: Underbar Select Input
7195 category: Select Input
7196 markup: |
7197 <select class="select-input select-input--underbar">
7198 <option>Option 1</option>
7199 <option>Option 2</option>
7200 <option>Option 3</option>
7201 </select>
7202
7203 &nbsp;
7204
7205 <select class="select-input select-input--underbar" disabled>
7206 <option>Option 1</option>
7207 <option>Option 2</option>
7208 <option>Option 3</option>
7209 </select>
7210*/
7211.select-input--underbar {
7212 border: none;
7213 border-bottom: 1px solid #ccc;
7214 border-bottom: 1px solid var(--select-input-border-color);
7215}
7216.select-input--underbar:disabled {
7217 border: none;
7218 background-color: transparent;
7219 border-bottom: 1px solid #ccc;
7220 border-bottom: 1px solid var(--select-input-border-color);
7221}
7222.select-input--underbar:disabled::-webkit-input-placeholder {
7223 /* mixin: input-placeholder */
7224 color: #999;
7225 color: var(--input-placeholder-color);
7226
7227 border: none;
7228 background-color: transparent;
7229}
7230.select-input--underbar:disabled::placeholder {
7231 /* mixin: input-placeholder */
7232 color: #999;
7233 color: var(--input-placeholder-color);
7234
7235 border: none;
7236 background-color: transparent;
7237}
7238.select-input--underbar:invalid {
7239 border: none;
7240 background-color: transparent;
7241 border-bottom: 1px solid #ccc;
7242 border-bottom: 1px solid var(--input-invalid-border-color);
7243}
7244:root {
7245 --action-sheet-mask-color: rgba(0, 0, 0, 0.1);
7246
7247 --material-action-sheet-mask-color: rgba(0, 0, 0, 0.2);
7248}
7249/*~
7250 name: Action Sheet
7251 category: Action Sheet
7252 markup: |
7253 <div class="action-sheet-mask"></div>
7254 <div class="action-sheet">
7255 <div class="action-sheet-title">Title</div>
7256 <button class="action-sheet-button">Label</button>
7257 <button class="action-sheet-button">Cancel</button>
7258 </div>
7259*/
7260/*~
7261 name: Action Sheet with Delete Label
7262 category: Action Sheet
7263 markup: |
7264 <div class="action-sheet-mask"></div>
7265 <div class="action-sheet">
7266 <button class="action-sheet-button">Label</button>
7267 <button class="action-sheet-button action-sheet-button--destructive">Delete Label</button>
7268 <button class="action-sheet-button">Cancel</button>
7269 </div>
7270*/
7271.action-sheet {
7272 /* mixin: reset-font */
7273 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
7274 -webkit-font-smoothing: antialiased;
7275 -moz-osx-font-smoothing: grayscale;
7276 font-weight: 400;
7277 font-weight: var(--font-weight);
7278
7279 cursor: default;
7280 position: absolute;
7281 left: 10px; /* iOS 9, 10, 11 */
7282 right: 10px; /* iOS 9, 10, 11 */
7283 bottom: 10px; /* iOS 9, 10, 11 */
7284 z-index: 2;
7285}
7286.action-sheet-button {
7287 box-sizing: border-box;
7288 height: 56px;
7289 font-size: 20px;
7290 text-align: center;
7291 color: rgb(0, 118, 255);
7292 color: var(--action-sheet-button-color);
7293 background-color: rgba(255, 255, 255, 0.9);
7294 background-color: var(--action-sheet-button-background-color);
7295 border-radius: 0;
7296 line-height: 56px;
7297 border: none;
7298 -webkit-appearance: none;
7299 appearance: none;
7300 display: block;
7301 width: 100%;
7302
7303 /* mixin: ellipsis */
7304 text-overflow: ellipsis;
7305 white-space: nowrap;
7306 overflow: hidden;
7307
7308 background-size: 100% 1px;
7309 background-repeat: no-repeat;
7310 background-position: bottom;
7311 background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 100%);
7312 background-image: linear-gradient(0deg, var(--action-sheet-button-separator-color), var(--action-sheet-button-separator-color) 100%);
7313}
7314/* @media (--retina-query) */
7315@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
7316 .action-sheet-button {
7317 background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 50%, transparent 50%);
7318 background-image: linear-gradient(0deg, var(--action-sheet-button-separator-color), var(--action-sheet-button-separator-color) 50%, transparent 50%);
7319 }
7320}
7321.action-sheet-button:first-child {
7322 border-top-left-radius: 12px;
7323 border-top-right-radius: 12px;
7324}
7325.action-sheet-button:active {
7326 background-color: #e9e9e9;
7327 background-color: var(--action-sheet-button-active-background-color);
7328 background-image: none;
7329}
7330.action-sheet-button:focus {
7331 outline: none;
7332}
7333.action-sheet-button:nth-last-of-type(2) {
7334 border-bottom-right-radius: 12px;
7335 border-bottom-left-radius: 12px;
7336 background-image: none;
7337}
7338.action-sheet-button:last-of-type {
7339 border-radius: 12px;
7340 margin: 8px 0 0 0; /* iOS 9, 10, 11 */
7341 background-color: #fff;
7342 background-color: var(--action-sheet-cancel-button-background-color);
7343 background-image: none;
7344 font-weight: 600;
7345}
7346.action-sheet-button:last-of-type:active {
7347 background-color: #e9e9e9;
7348 background-color: var(--action-sheet-button-active-background-color);
7349}
7350.action-sheet-button--destructive {
7351 color: #fe3824;
7352 color: var(--action-sheet-button-destructive-color);
7353}
7354.action-sheet-title {
7355 box-sizing: border-box;
7356 height: 56px;
7357 font-size: 13px;
7358 color: #8f8e94;
7359 color: var(--action-sheet-title-color);
7360 text-align: center;
7361 background-color: rgba(255, 255, 255, 0.9);
7362 background-color: var(--action-sheet-button-background-color);
7363 line-height: 56px;
7364
7365 /* mixin: ellipsis */
7366 text-overflow: ellipsis;
7367 white-space: nowrap;
7368 overflow: hidden;
7369
7370 background-size: 100% 1px;
7371 background-repeat: no-repeat;
7372 background-position: bottom;
7373 background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 100%);
7374 background-image: linear-gradient(0deg, var(--action-sheet-button-separator-color), var(--action-sheet-button-separator-color) 100%);
7375}
7376/* @media (--retina-query) */
7377@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
7378 .action-sheet-title {
7379 background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 50%, transparent 50%);
7380 background-image: linear-gradient(0deg, var(--action-sheet-button-separator-color), var(--action-sheet-button-separator-color) 50%, transparent 50%);
7381 }
7382}
7383.action-sheet-title:first-child {
7384 border-top-left-radius: 12px;
7385 border-top-right-radius: 12px;
7386}
7387.action-sheet-icon {
7388 display: none;
7389}
7390.action-sheet-mask {
7391 position: absolute;
7392 left: 0;
7393 top: 0;
7394 right: 0;
7395 bottom: 0;
7396 background-color: rgba(0, 0, 0, 0.1);
7397 background-color: var(--action-sheet-mask-color);
7398 z-index: 1;
7399}
7400/*~
7401 name: Material Action Sheet
7402 category: Action Sheet
7403 markup: |
7404 <div class="action-sheet-mask action-sheet-mask--material"></div>
7405 <div class="action-sheet action-sheet--material">
7406 <button class="action-sheet-button action-sheet-button--material"><i class="ion-ios-square action-sheet-icon--material"></i>Label</button>
7407 <button class="action-sheet-button action-sheet-button--material"><i class="ion-ios-square action-sheet-icon--material"></i>Label</button>
7408 <button class="action-sheet-button action-sheet-button--material"><i class="ion-ios-close action-sheet-icon--material"></i>Cancel</button>
7409 </div>
7410*/
7411/*~
7412 name: Material Action Sheet with Title
7413 category: Action Sheet
7414 markup: |
7415 <div class="action-sheet-mask action-sheet-mask--material"></div>
7416 <div class="action-sheet action-sheet--material">
7417 <div class="action-sheet-title action-sheet-title--material">Title</div>
7418 <button class="action-sheet-button action-sheet-button--material"><i class="ion-ios-square action-sheet-icon--material"></i>Label</button>
7419 <button class="action-sheet-button action-sheet-button--material"><i class="ion-ios-close action-sheet-icon--material"></i>Cancel</button>
7420 </div>
7421*/
7422.action-sheet--material {
7423 left: 0;
7424 right: 0;
7425 bottom: 0;
7426
7427 /* mixin: material-shadow-5 */
7428 box-shadow:
7429 0 16px 24px 2px rgba(0, 0, 0, 0.14),
7430 0 6px 30px 5px rgba(0, 0, 0, 0.12),
7431 0 8px 10px -5px rgba(0, 0, 0, 0.4);
7432}
7433.action-sheet-title--material {
7434 /* mixin: material-font */
7435 font-family: 'Roboto', 'Noto', sans-serif;
7436 -webkit-font-smoothing: antialiased;
7437
7438 border-radius: 0;
7439 background-image: none;
7440 text-align: left;
7441 height: 56px;
7442 line-height: 56px;
7443 font-size: 16px;
7444 padding: 0 0 0 16px;
7445 color: #686868;
7446 color: var(--material-action-sheet-text-color);
7447 background-color: white;
7448 font-weight: 400;
7449 font-weight: var(--material-font-weight);
7450}
7451.action-sheet-title--material:first-child {
7452 border-radius: 0;
7453}
7454.action-sheet-button--material {
7455 /* mixin: material-font */
7456 font-family: 'Roboto', 'Noto', sans-serif;
7457 -webkit-font-smoothing: antialiased;
7458
7459 border-radius: 0;
7460 background-image: none;
7461 height: 52px;
7462 line-height: 52px;
7463 text-align: left;
7464 font-size: 16px;
7465 padding: 0 0 0 16px;
7466 color: #686868;
7467 color: var(--material-action-sheet-text-color);
7468 font-weight: 400;
7469 font-weight: var(--material-font-weight);
7470 background-color: white;
7471}
7472.action-sheet-button--material:first-child {
7473 border-radius: 0;
7474}
7475.action-sheet-button--material:nth-last-of-type(2) {
7476 border-radius: 0;
7477}
7478.action-sheet-button--material:last-of-type {
7479 margin: 0;
7480 border-radius: 0;
7481 font-weight: 400;
7482 background-color: white;
7483}
7484.action-sheet-icon--material {
7485 display: inline-block;
7486 float: left;
7487 height: 52px;
7488 line-height: 52px;
7489 margin-right: 32px;
7490 font-size: 26px;
7491 width: 0.8em;
7492 text-align: center;
7493}
7494.action-sheet-mask--material {
7495 background-color: rgba(0, 0, 0, 0.2);
7496 background-color: var(--material-action-sheet-mask-color);
7497}
7498:root {
7499 --card-text-line-height: 1.4;
7500 --card-text-font-size: 14px;
7501 --material-card-text-line-height: 1.4;
7502 --material-card-text-font-size: 14px;
7503}
7504/*~
7505 name: Card
7506 category: Card
7507 markup: |
7508 <div style="height: 200px; padding: 1px 0 0 0;">
7509 <div class="card">
7510 <div class="card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
7511 </div>
7512 </div>
7513*/
7514.card {
7515 /* mixin: reset-font */
7516 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
7517 -webkit-font-smoothing: antialiased;
7518 -moz-osx-font-smoothing: grayscale;
7519 font-weight: 400;
7520 font-weight: var(--font-weight);
7521
7522 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
7523 border-radius: 8px;
7524 background-color: white;
7525 background-color: var(--card-background-color);
7526 box-sizing: border-box;
7527 display: block;
7528 margin: 8px;
7529 padding: 16px;
7530 text-align: left;
7531 word-wrap: break-word;
7532}
7533.card__content {
7534 margin: 0;
7535 font-size: 14px;
7536 font-size: var(--card-text-font-size);
7537 line-height: 1.4;
7538 line-height: var(--card-text-line-height);
7539 color: #030303;
7540 color: var(--card-text-color);
7541}
7542/*~
7543 name: Card with Title
7544 category: Card
7545 markup: |
7546 <div style="height: 200px; padding: 1px 0 0 0;">
7547 <div class="card">
7548 <h2 class="card__title">Card Title</h2>
7549 <div class="card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
7550 </div>
7551 </div>
7552*/
7553.card__title {
7554 /* mixin: reset-font */
7555 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
7556 -webkit-font-smoothing: antialiased;
7557 -moz-osx-font-smoothing: grayscale;
7558
7559 font-weight: 400;
7560 font-size: 20px;
7561 margin: 4px 0 8px 0;
7562 padding: 0;
7563 display: block;
7564 box-sizing: border-box;
7565}
7566/*~
7567 name: Material Card
7568 category: Card
7569 markup: |
7570 <div style="height: 200px; padding: 1px 0 0 0;">
7571 <div class="card card--material">
7572 <div class="card__content card--material__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
7573 </div>
7574 </div>
7575*/
7576.card--material {
7577 background-color: white;
7578 background-color: var(--material-card-background-color);
7579 border-radius: 2px;
7580
7581 /* mixin: material-shadow-1 */
7582 box-shadow:
7583 0 2px 2px 0 rgba(0, 0, 0, 0.14),
7584 0 1px 5px 0 rgba(0, 0, 0, 0.12),
7585 0 3px 1px -2px rgba(0, 0, 0, 0.2);
7586
7587 /* mixin: material-font */
7588 font-family: 'Roboto', 'Noto', sans-serif;
7589 -webkit-font-smoothing: antialiased;
7590 font-weight: 400;
7591 font-weight: var(--material-font-weight);
7592}
7593.card--material__content {
7594 font-size: 14px;
7595 font-size: var(--material-card-text-font-size);
7596 line-height: 1.4;
7597 line-height: var(--material-card-text-line-height);
7598 color: rgba(0, 0, 0, 0.54);
7599 color: var(--material-card-text-color);
7600}
7601/*~
7602 name: Material Card with Title
7603 category: Card
7604 markup: |
7605 <div style="height: 200px; padding: 1px 0 0 0;">
7606 <div class="card card--material">
7607 <div class="card__title card--material__title">Card Title</div>
7608 <div class="card__content card--material__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
7609 </div>
7610 </div>
7611*/
7612.card--material__title {
7613 /* mixin: material-font */
7614 font-family: 'Roboto', 'Noto', sans-serif;
7615 -webkit-font-smoothing: antialiased;
7616 font-weight: 400;
7617 font-weight: var(--material-font-weight);
7618
7619 font-size: 24px;
7620 margin: 8px 0 12px 0;
7621}
7622:root {
7623}
7624/*~
7625 name: Toast
7626 category: Toast
7627 markup: |
7628 <div class="toast">
7629 <div class="toast__message">Message Message Message Message Message Message</div>
7630 <button class="toast__button">ACTION</button>
7631 </div>
7632*/
7633.toast {
7634
7635 /* mixin: reset-font */
7636 font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
7637 -webkit-font-smoothing: antialiased;
7638 -moz-osx-font-smoothing: grayscale;
7639 font-weight: 400;
7640 font-weight: var(--font-weight);
7641
7642 position: absolute;
7643 z-index: 2;
7644 left: 8px;
7645 right: 8px;
7646 bottom: 0;
7647 margin: 8px 0;
7648 border-radius: 8px;
7649 background-color: rgba(0, 0, 0, 0.8);
7650 background-color: var(--toast-background-color);
7651 display: -webkit-flex;
7652 display: flex;
7653 min-height: 48px;
7654 line-height: 1.5;
7655 box-sizing: border-box;
7656 padding: 16px 16px;
7657}
7658.toast__message {
7659 font-size: 14px;
7660 color: white;
7661 color: var(--toast-text-color);
7662 -webkit-flex-grow: 1;
7663 flex-grow: 1;
7664 text-align: left;
7665 margin: 0 16px 0 0;
7666 white-space: normal;
7667}
7668.toast__button {
7669 font-size: 14px;
7670 color: white;
7671 color: var(--toast-button-text-color);
7672 -webkit-flex-grow: 0;
7673 flex-grow: 0;
7674 -webkit-appearance: none;
7675 appearance: none;
7676 border: none;
7677 background-color: transparent;
7678 cursor: default;
7679 text-transform: uppercase;
7680}
7681.toast__button:focus {
7682 outline: none;
7683}
7684.toast__button:active {
7685 opacity: 0.4;
7686}
7687/*~
7688 name: Material Toast
7689 category: Toast
7690 markup: |
7691 <div class="toast toast--material">
7692 <div class="toast__message toast--material__message">Message Message Message Message Message Message</div>
7693 <button class="toast__button toast--material__button">ACTION</button>
7694 </div>
7695*/
7696.toast--material {
7697 left: 0;
7698 right: 0;
7699 bottom: 0;
7700 margin: 0;
7701 background-color: rgba(0, 0, 0, 0.8);
7702 background-color: var(--material-toast-background-color);
7703 border-radius: 0;
7704 padding: 16px 24px;
7705}
7706.toast--material__message {
7707
7708 /* mixin: material-font */
7709 font-family: 'Roboto', 'Noto', sans-serif;
7710 -webkit-font-smoothing: antialiased;
7711 font-weight: 400;
7712 font-weight: var(--material-font-weight);
7713
7714 margin: 0 24px 0 0;
7715}
7716.toast--material__button {
7717
7718 /* mixin: material-font */
7719 font-family: 'Roboto', 'Noto', sans-serif;
7720 -webkit-font-smoothing: antialiased;
7721 font-weight: 400;
7722 font-weight: var(--material-font-weight);
7723
7724 color: #bbdefb;
7725
7726 color: var(--material-toast-button-text-color);
7727}
7728/* ------- */
7729/* Default */
7730/* ------- */
7731/* All toolbar */
7732.toolbar {
7733 top: 0;
7734 box-sizing: border-box;
7735 padding-top: 0;
7736}
7737.bottom-bar {
7738 bottom: 0;
7739 box-sizing: border-box;
7740 padding-bottom: 0;
7741}
7742/* All page__background with a ordinal toolbar */
7743.toolbar+.page__background {
7744 top: 44px;
7745 top: var(--toolbar-height);
7746}
7747/* All page__content without toolbars */
7748.page__content {
7749 top: 0;
7750 padding-top: 0;
7751
7752 bottom: 0;
7753}
7754/* All page__content with a toolbar */
7755.toolbar+.page__background+.page__content {
7756 top: 44px;
7757 top: var(--toolbar-height);
7758 padding-top: 0;
7759}
7760/* All page__content with a bottom-bar */
7761.page-with-bottom-toolbar > .page__content {
7762 bottom: 44px;
7763}
7764/* -------- */
7765/* Material */
7766/* -------- */
7767/* All page__background with a material toolbar */
7768.toolbar.toolbar--material+.page__background {
7769 top: 56px;
7770 top: var(--toolbar-material-height);
7771}
7772/* All page__content with a material toolbar */
7773.toolbar.toolbar--material+.page__background+.page__content {
7774 top: 56px;
7775 top: var(--toolbar-material-height);
7776 padding-top: 0;
7777}
7778/* -------- */
7779/* Others */
7780/* -------- */
7781/* All page__background with a transparent toolbar */
7782.toolbar.toolbar--transparent+.page__background {
7783 top: 0;
7784}
7785/* All page__content with a transparent cover-content toolbar and its direct descendant page_content */
7786.toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content,
7787.toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content {
7788 top: 0;
7789 padding-top: 44px;
7790 padding-top: var(--toolbar-height);
7791}
7792/* All page__content with a material transparent cover-content toolbar and its direct descendant page_content */
7793.toolbar.toolbar--material.toolbar--transparent.toolbar--cover-content+.page__background+.page__content,
7794.toolbar.toolbar--material.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content {
7795 top: 0;
7796 padding-top: 56px;
7797 padding-top: var(--toolbar-material-height);
7798}
7799/* -------- */
7800/* Tabbar */
7801/* -------- */
7802/* All top tabbar */
7803.tabbar--top {
7804 padding-top: 0;
7805}
7806/* All bottom tabbar */
7807.tabbar:not(.tabbar--top) {
7808 padding-bottom: 0;
7809}
7810/* non BEM */
7811:root {
7812 --iphonex-safe-area-inset-top-portrait: 44px;
7813 --iphonex-safe-area-inset-right-portrait: 0;
7814 --iphonex-safe-area-inset-bottom-portrait: 34px;
7815 --iphonex-safe-area-inset-left-portrait: 0;
7816
7817 --iphonex-safe-area-inset-top-landscape: 0;
7818 --iphonex-safe-area-inset-right-landscape: 44px;
7819 --iphonex-safe-area-inset-bottom-landscape: 21px;
7820 --iphonex-safe-area-inset-left-landscape: 44px;
7821}
7822/* @import './util.css'; */
7823@media (orientation: landscape) {
7824 html[onsflag-iphonex-landscape] .page__content {
7825 padding-left: 44px;
7826 padding-left: var(--iphonex-safe-area-inset-left-landscape);
7827 padding-right: 44px;
7828 padding-right: var(--iphonex-safe-area-inset-right-landscape);
7829 }
7830 /* Ignore if the page is in dialogs or modals */
7831 html[onsflag-iphonex-landscape] .dialog .page__content,
7832 html[onsflag-iphonex-landscape] .modal .page__content {
7833 padding-left: 0;
7834 padding-right: 0;
7835 }
7836}
7837/* @import './switch.css'; */
7838/* @import './range.css'; */
7839/* @import './notification.css'; */
7840@media (orientation: landscape) {
7841 html[onsflag-iphonex-landscape] .toolbar__left {
7842 padding-left: 44px;
7843 padding-left: var(--iphonex-safe-area-inset-left-landscape);
7844 }
7845
7846 html[onsflag-iphonex-landscape] .toolbar__right {
7847 padding-right: 44px;
7848 padding-right: var(--iphonex-safe-area-inset-right-landscape);
7849 }
7850
7851 html[onsflag-iphonex-landscape] .bottom-bar {
7852 padding-right: 44px;
7853 padding-right: var(--iphonex-safe-area-inset-right-landscape);
7854 padding-left: 44px;
7855 padding-left: var(--iphonex-safe-area-inset-left-landscape);
7856 }
7857}
7858/* @import './button.css'; */
7859/* @import './button-bar.css'; */
7860/* @import './segment.css'; */
7861@media (orientation: landscape) {
7862 html[onsflag-iphonex-landscape] .tabbar {
7863 padding-left: 44px;
7864 padding-left: var(--iphonex-safe-area-inset-left-landscape);
7865 padding-right: 44px;
7866 padding-right: var(--iphonex-safe-area-inset-right-landscape);
7867 width: calc(100% - 44px - 44px);
7868 width: calc(100% - var(--iphonex-safe-area-inset-left-landscape) - var(--iphonex-safe-area-inset-right-landscape));
7869 }
7870}
7871/* @import './toolbar-button.css'; */
7872/* @import './checkbox.css'; */
7873/* @import './radio-button.css'; */
7874/* @import './list.css'; */
7875/* @import './search-input.css'; */
7876/* @import './text-input.css'; */
7877/* @import './textarea.css'; */
7878/* @import './dialog.css'; */
7879/* @import './alert-dialog.css'; */
7880/* @import './popover.css'; */
7881/* @import './progress-bar.css'; */
7882/* @import './progress-circular.css'; */
7883@media (orientation: portrait) {
7884 /* For top safe area */
7885 html[onsflag-iphonex-portrait] .fab--top__left,
7886 html[onsflag-iphonex-portrait] .fab--top__center,
7887 html[onsflag-iphonex-portrait] .fab--top__right {
7888 top: calc(44px + 20px);
7889 top: calc(var(--iphonex-safe-area-inset-top-portrait) + 20px);
7890 }
7891
7892 /* For bottom safe area */
7893 html[onsflag-iphonex-portrait] .fab--bottom__left,
7894 html[onsflag-iphonex-portrait] .fab--bottom__center,
7895 html[onsflag-iphonex-portrait] .fab--bottom__right {
7896 bottom: calc(34px);
7897 bottom: calc(var(--iphonex-safe-area-inset-bottom-portrait)); /* Omit 20px space */
7898 }
7899}
7900@media (orientation: landscape) {
7901 /* For bottom safe area */
7902 html[onsflag-iphonex-landscape] .fab--bottom__left,
7903 html[onsflag-iphonex-landscape] .fab--bottom__center,
7904 html[onsflag-iphonex-landscape] .fab--bottom__right {
7905 bottom: calc(21px);
7906 bottom: calc(var(--iphonex-safe-area-inset-bottom-landscape)); /* Omit 20px space */
7907 }
7908
7909 /* For left safe area */
7910 html[onsflag-iphonex-landscape] .fab--top__left,
7911 html[onsflag-iphonex-landscape] .fab--bottom__left {
7912 left: calc(44px);
7913 left: calc(var(--iphonex-safe-area-inset-left-landscape)); /* Omit 20px space */
7914 }
7915
7916 /* For right safe area */
7917 html[onsflag-iphonex-landscape] .fab--top__right,
7918 html[onsflag-iphonex-landscape] .fab--bottom__right {
7919 right: calc(44px);
7920 right: calc(var(--iphonex-safe-area-inset-right-landscape)); /* Omit 20px space */
7921 }
7922}
7923/* @import './modal.css'; */
7924/* @import './select.css'; */
7925@media (orientation: portrait) {
7926 html[onsflag-iphonex-portrait] .action-sheet {
7927 bottom: calc(34px + 14px);
7928 bottom: calc(var(--iphonex-safe-area-inset-bottom-portrait) + 14px); /* bottom safe area + 14 pt (extra bottom margin) */
7929 }
7930}
7931@media (orientation: landscape) {
7932 html[onsflag-iphonex-landscape] .action-sheet {
7933 /* The width in landscape mode is the same as the width in portrait mode */
7934 left: calc((100vw - (100vh + 20px)) / 2);
7935 right: calc((100vw - (100vh + 20px)) / 2);
7936 bottom: calc(21px + 12px);
7937 bottom: calc(var(--iphonex-safe-area-inset-bottom-landscape) + 12px); /* bottom safe area + 12 pt (extra bottom margin) */
7938 }
7939}
7940/* @import './card.css'; */
7941@media (orientation: portrait) {
7942 html[onsflag-iphonex-portrait] .toast {
7943 bottom: 34px;
7944 bottom: var(--iphonex-safe-area-inset-bottom-portrait);
7945 }
7946}
7947@media (orientation: landscape) {
7948 html[onsflag-iphonex-landscape] .toast {
7949 left: calc(44px + 8px);
7950 left: calc(var(--iphonex-safe-area-inset-left-landscape) + 8px);
7951 right: calc(44px + 8px);
7952 right: calc(var(--iphonex-safe-area-inset-right-landscape) + 8px);
7953 bottom: 21px;
7954 bottom: var(--iphonex-safe-area-inset-bottom-landscape);
7955 }
7956}
7957/*
7958 Note:
7959
7960 :not(X) does not work if X is a complex selector like `.foo .bar` due to the spec of :not(X).
7961 Instead we have to use the following form for representing A:not(X A):not(Y A):not(Z A),
7962 which means `A which does not have any X, Y and Z as its ancestors`.
7963
7964 // Equivalent to A:not(X A):not(Y A):not(Z A) { foo: bar; }
7965 A {
7966 // Apply styles for A
7967 foo: bar;
7968 }
7969 X A,
7970 Y A,
7971 Z A {
7972 // Subtract `X A`, `Y A` and `Z A`
7973 // (Restore original styles of A)
7974 }
7975*/
7976/* Bars and page contents */
7977@media (orientation: portrait) {
7978 /* Outermost toolbar */
7979 html[onsflag-iphonex-portrait] .toolbar {
7980 top: 0;
7981 box-sizing: content-box;
7982 padding-top: 44px;
7983 padding-top: var(--iphonex-safe-area-inset-top-portrait);
7984 }
7985 /* Non-outermost */
7986 html[onsflag-iphonex-portrait] .dialog .toolbar, /* if wrapped with dialogs */
7987 html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar, /* if wrapped with a page with a toolbar */
7988 html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar { /* if wrapped with a top tabbar */
7989 /* Restore original styles */
7990 top: 0;
7991 box-sizing: border-box;
7992 padding-top: 0;
7993 }
7994
7995 /* Outermost bottom-bar */
7996 html[onsflag-iphonex-portrait] .bottom-bar {
7997 bottom: 0;
7998 box-sizing: content-box;
7999 padding-bottom: 34px;
8000 padding-bottom: var(--iphonex-safe-area-inset-bottom-portrait);
8001 }
8002 /* Non-outermost */
8003 html[onsflag-iphonex-portrait] .dialog .bottom-bar, /* if wrapped with dialogs */
8004 html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .bottom-bar, /* if wrapped with a page with a bottom-bar */
8005 html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .bottom-bar { /* if wrapped with a bottom tabbar */
8006 /* Restore original styles */
8007 bottom: 0;
8008 box-sizing: border-box;
8009 padding-bottom: 0;
8010 }
8011
8012 /* Outermost page__content without toolbars or bottom-bars */
8013 html[onsflag-iphonex-portrait] .page__content {
8014 top: 0;
8015 padding-top: 44px;
8016 padding-top: var(--iphonex-safe-area-inset-top-portrait);
8017 bottom: 0;
8018 padding-bottom: 34px;
8019 padding-bottom: var(--iphonex-safe-area-inset-bottom-portrait);
8020 }
8021 /* Non-outermost */
8022 html[onsflag-iphonex-portrait] .dialog .page__content, /* if wrapped with dialogs */
8023 html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .page__content, /* if wrapped with a page with a toolbar */
8024 html[onsflag-iphonex-portrait] .tabbar--top__content .page__content, /* if wrapped with a top tabbar */
8025 html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content { /* if the page has a toolbar */
8026 /* Restore original styles */
8027 top: 0;
8028 padding-top: 0;
8029 }
8030 html[onsflag-iphonex-portrait] .dialog .page__content, /* if wrapped with dialogs */
8031 html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .page__content, /* if wrapped with a page with a bottom-bar */
8032 html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .page__content, /* if wrapped with a bottom tabbar */
8033 html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content { /* if the page has a bottom-bar */
8034 /* Restore original styles */
8035 bottom: 0;
8036 padding-bottom: 0;
8037 }
8038
8039 /* Outermost page__content with a toolbar */
8040 html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background,
8041 html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content {
8042 top: calc(44px + 44px);
8043 top: calc(var(--iphonex-safe-area-inset-top-portrait) + var(--toolbar-height));
8044 padding-top: 0;
8045 }
8046 /* Non-outermost */
8047 html[onsflag-iphonex-portrait] .dialog .toolbar:not(.toolbar--cover-content)+.page__background,
8048 html[onsflag-iphonex-portrait] .dialog .toolbar:not(.toolbar--cover-content)+.page__background+.page__content, /* if wrapped with dialogs */
8049
8050 html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar:not(.toolbar--cover-content)+.page__background,
8051 html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar:not(.toolbar--cover-content)+.page__background+.page__content, /* if wrapped with a page with a toolbar */
8052
8053 html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar:not(.toolbar--cover-content)+.page__background,
8054 html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar:not(.toolbar--cover-content)+.page__background+.page__content { /* if wrapped with a top tabbar */
8055 /* Restore original styles */
8056 top: 44px;
8057 top: var(--toolbar-height);
8058 padding-top: 0;
8059 }
8060
8061 /* Outermost page__content with a bottom-bar */
8062 html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content {
8063 bottom: calc(34px + 44px);
8064 bottom: calc(var(--iphonex-safe-area-inset-bottom-portrait) + var(--toolbar-height));
8065 padding-bottom: 0;
8066 }
8067 /* Non-outermost */
8068 html[onsflag-iphonex-portrait] .dialog .page-with-bottom-toolbar > .page__content, /* if wrapped with dialogs */
8069 html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .page-with-bottom-toolbar > .page__content, /* if wrapped with a page with a bottom-bar */
8070 html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .page-with-bottom-toolbar > .page__content { /* if wrapped with a bottom tabbar */
8071 /* Restore original styles */
8072 bottom: 44px;
8073 bottom: var(--toolbar-height);
8074 padding-bottom: 0;
8075 }
8076
8077 /* Outermost page__content with a transparent cover-content toolbar and its direct descendant page_content */
8078 html[onsflag-iphonex-portrait] .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content,
8079 html[onsflag-iphonex-portrait] .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content {
8080 top: 0;
8081 padding-top: calc(44px + 44px);
8082 padding-top: calc(var(--iphonex-safe-area-inset-top-portrait) + var(--toolbar-height));
8083 }
8084 /* Non-outermost */
8085 html[onsflag-iphonex-portrait] .dialog .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content, /* if wrapped with dialogs */
8086 html[onsflag-iphonex-portrait] .dialog .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content,
8087 html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content, /* if wrapped with a page with a toolbar */
8088 html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page__content,
8089 html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content,
8090 html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content { /* if wrapped with a top tabbar */
8091 /* Restore original styles */
8092 top: 0;
8093 padding-top: 44px;
8094 padding-top: var(--toolbar-height);
8095 }
8096
8097 /* Outermost top tabbar */
8098 html[onsflag-iphonex-portrait] .tabbar--top {
8099 padding-top: 44px;
8100 padding-top: var(--iphonex-safe-area-inset-top-portrait);
8101 }
8102 /* Non-outermost */
8103 html[onsflag-iphonex-portrait] .dialog .tabbar--top, /* if wrapped with dialogs */
8104 html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .tabbar--top, /* if wrapped with a page with a toolbar */
8105 html[onsflag-iphonex-portrait] .tabbar--top__content .tabbar--top { /* if wrapped with a top tabbar */
8106 /* Restore original styles */
8107 padding-top: 0;
8108 }
8109
8110 /* Outermost tabbar--top__content */
8111 html[onsflag-iphonex-portrait] .tabbar--top__content {
8112 top: calc(44px + 49px);
8113 top: calc(var(--iphonex-safe-area-inset-top-portrait) + var(--tabbar-height));
8114 }
8115 /* Non-outermost */
8116 html[onsflag-iphonex-portrait] .dialog .tabbar--top__content, /* if wrapped with dialogs */
8117 html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .tabbar--top__content, /* if wrapped with a page with a toolbar */
8118 html[onsflag-iphonex-portrait] .tabbar--top__content .tabbar--top__content { /* if wrapped with a top tabbar */
8119 /* Restore original styles */
8120 top: 49px;
8121 top: var(--tabbar-height);
8122 }
8123
8124 /* Outermost bottom tabbar */
8125 html[onsflag-iphonex-portrait] .tabbar:not(.tabbar--top):not(.tabbar--top) {
8126 padding-bottom: 34px;
8127 padding-bottom: var(--iphonex-safe-area-inset-bottom-portrait);
8128 }
8129 /* Non-outermost */
8130 html[onsflag-iphonex-portrait] .dialog .tabbar:not(.tabbar--top):not(.tabbar--top), /* if wrapped with dialogs */
8131 html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .tabbar:not(.tabbar--top), /* if wrapped with a page with a bottom-bar */
8132 html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .tabbar:not(.tabbar--top) { /* if wrapped with a bottom tabbar */
8133 /* Restore original styles */
8134 padding-bottom: 0;
8135 }
8136
8137 /* Outermost.tabbar__content:not(.tabbar--top__content) */
8138 html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) {
8139 bottom: calc(34px + 49px);
8140 bottom: calc(var(--iphonex-safe-area-inset-bottom-portrait) + var(--tabbar-height));
8141 }
8142 /* Non-outermost */
8143 html[onsflag-iphonex-portrait] .dialog .tabbar__content:not(.tabbar--top__content), /* if wrapped with dialogs */
8144 html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .tabbar__content:not(.tabbar--top__content), /* if wrapped with a page with a bottom-bar */
8145 html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .tabbar__content:not(.tabbar--top__content) { /* if wrapped with a bottom tabbar */
8146 /* Restore original styles */
8147 bottom: 49px;
8148 bottom: var(--tabbar-height);
8149 }
8150}
8151@media (orientation: landscape) {
8152 /* Outermost bottom-bar */
8153 html[onsflag-iphonex-landscape] .bottom-bar {
8154 bottom: 0;
8155 box-sizing: content-box;
8156 padding-bottom: 21px;
8157 padding-bottom: var(--iphonex-safe-area-inset-bottom-landscape);
8158 }
8159 /* Non-outermost */
8160 html[onsflag-iphonex-landscape] .dialog .bottom-bar, /* if wrapped with dialogs */
8161 html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .bottom-bar, /* if wrapped with a page with a bottom-bar */
8162 html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .bottom-bar { /* if wrapped with a bottom tabbar */
8163 /* Restore original styles */
8164 bottom: 0;
8165 box-sizing: border-box;
8166 padding-bottom: 0;
8167 }
8168
8169 /* Outermost page__content without bottom-bars */
8170 html[onsflag-iphonex-landscape] .page__content {
8171 bottom: 0;
8172 padding-bottom: 21px;
8173 padding-bottom: var(--iphonex-safe-area-inset-bottom-landscape);
8174 }
8175 /* Non-outermost */
8176 html[onsflag-iphonex-landscape] .dialog .page__content, /* if wrapped with dialogs */
8177 html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .page__content, /* if wrapped with a page with a bottom-bar */
8178 html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .page__content, /* if wrapped with a bottom tabbar */
8179 html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content { /* if the page has a bottom-bar */
8180 /* Restore original styles */
8181 bottom: 0;
8182 padding-bottom: 0;
8183 }
8184
8185 /* Outermost page__content with a bottom-bar */
8186 html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content {
8187 bottom: calc(21px + 44px);
8188 bottom: calc(var(--iphonex-safe-area-inset-bottom-landscape) + var(--toolbar-height));
8189 padding-bottom: 0;
8190 }
8191 /* Non-outermost */
8192 html[onsflag-iphonex-landscape] .dialog .page-with-bottom-toolbar > .page__content, /* if wrapped with dialogs */
8193 html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .page-with-bottom-toolbar > .page__content, /* if wrapped with a page with a bottom-bar */
8194 html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .page-with-bottom-toolbar > .page__content { /* if wrapped with a bottom tabbar */
8195 /* Restore original styles */
8196 bottom: 44px;
8197 bottom: var(--toolbar-height);
8198 padding-bottom: 0;
8199 }
8200
8201 /* Outermost bottom tabbar */
8202 html[onsflag-iphonex-landscape] .tabbar:not(.tabbar--top) {
8203 padding-bottom: 21px;
8204 padding-bottom: var(--iphonex-safe-area-inset-bottom-landscape);
8205 }
8206 /* Non-outermost */
8207 html[onsflag-iphonex-landscape] .dialog .tabbar:not(.tabbar--top), /* if wrapped with dialogs */
8208 html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .tabbar:not(.tabbar--top), /* if wrapped with a page with a bottom-bar */
8209 html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .tabbar:not(.tabbar--top) { /* if wrapped with a bottom tabbar */
8210 /* Restore original styles */
8211 padding-bottom: 0;
8212 }
8213
8214 /* Outermost.tabbar__content:not(.tabbar--top__content) */
8215 html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) {
8216 bottom: calc(21px + 49px);
8217 bottom: calc(var(--iphonex-safe-area-inset-bottom-landscape) + var(--tabbar-height));
8218 }
8219 /* Non-outermost */
8220 html[onsflag-iphonex-landscape] .dialog .tabbar__content:not(.tabbar--top__content), /* if wrapped with dialogs */
8221 html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .tabbar__content:not(.tabbar--top__content), /* if wrapped with a page with a bottom-bar */
8222 html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .tabbar__content:not(.tabbar--top__content) { /* if wrapped with a bottom tabbar */
8223 /* Restore original styles */
8224 bottom: 49px;
8225 bottom: var(--tabbar-height);
8226 }
8227}
8228/* Lists in .page__content */
8229@media (orientation: landscape) {
8230 /* Only patching lists just under .page__content */
8231 html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) {
8232 margin-left: calc(-1 * 44px);
8233 margin-left: calc(-1 * var(--iphonex-safe-area-inset-left-landscape));
8234 margin-right: calc(-1 * 44px);
8235 margin-right: calc(-1 * var(--iphonex-safe-area-inset-right-landscape));
8236 }
8237
8238 /* For left safe area */
8239 html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-header {
8240 padding-left: calc(44px + 15px);
8241 padding-left: calc(var(--iphonex-safe-area-inset-left-landscape) + 15px);
8242 }
8243 html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item {
8244 /* margin-left is not suitable for iPhone X patch. Using padding-left here. */
8245 padding-left: calc(44px + 14px);
8246 padding-left: calc(var(--iphonex-safe-area-inset-left-landscape) + 14px);
8247 }
8248
8249 /* For right safe area */
8250 html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item--chevron:before {
8251 right: calc(44px + 16px);
8252 right: calc(var(--iphonex-safe-area-inset-right-landscape) + 16px);
8253 }
8254 html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item > .list-item__center:last-child {
8255 padding-right: calc(44px + 6px);
8256 padding-right: calc(var(--iphonex-safe-area-inset-right-landscape) + 6px);
8257 }
8258 html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item > .list-item__right {
8259 padding-right: calc(44px + 12px);
8260 padding-right: calc(var(--iphonex-safe-area-inset-right-landscape) + 12px);
8261 }
8262 html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item > .list-item--chevron__right {
8263 padding-right: calc(44px + 30px);
8264 padding-right: calc(var(--iphonex-safe-area-inset-right-landscape) + 30px);
8265 }
8266}
8267/* Lists in .page__content in dialogs and modals */
8268@media (orientation: landscape) {
8269 /* Only patching lists just under .page__content */
8270 html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) {
8271 margin-left: 0;
8272 margin-right: 0;
8273 }
8274
8275 /* For left safe area */
8276 html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-header {
8277 padding-left: 15px;
8278 }
8279 html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item {
8280 padding-left: 14px;
8281 }
8282
8283 /* For right safe area */
8284 html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item--chevron:before {
8285 right: 16px;
8286 }
8287 html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item > .list-item__center:last-child {
8288 padding-right: 6px;
8289 }
8290 html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item > .list-item__right {
8291 padding-right: 12px;
8292 }
8293 html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item > .list-item--chevron__right {
8294 padding-right: 30px;
8295 }
8296}
8297/* non BEM */