UNPKG

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