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