onsenui/css/onsen-css-components.css

HTML5 Mobile Framework & UI Components

/*!
 * Copyright 2013-2017 ASIAL CORPORATION
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */
/*!
 * Copyright 2012 Adobe Systems Inc.;
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */
:root {
  /* variables for iOS components */
  --background-color: #efeff4;
  --text-color: #1f1f21;
  --sub-text-color: #999;
  --highlight-color-rgb: 0, 118, 255;
  --highlight-color: rgb(var(--highlight-color-rgb));
  --second-highlight-color: #25a6d9;
  --border-color: #ccc;
  --button-background-color: var(--highlight-color);
  --button-cta-background-color: var(--second-highlight-color);
  --toolbar-background-color: #fafafa;
  --toolbar-button-color: var(--highlight-color);
  --toolbar-text-color: #1f1f21;
  --toolbar-border-color: #b2b2b2;
  --button-bar-color: var(--highlight-color);
  --button-bar-active-text-color: #fff;
  --button-bar-active-background-color: unset;
  --button-bar-active-background-color-default-blend-color: white;
  --button-bar-active-background-color-default-blend-time: -0.7s;
  --button-light-color: black;
  --segment-color: var(--highlight-color);
  --segment-active-text-color: #fff;
  --segment-active-background-color: unset;
  --segment-active-background-color-default-blend-color: white;
  --segment-active-background-color-default-blend-time: -0.7s;
  --list-background-color: #fff;
  --list-header-background-color: #eee;
  --list-tap-active-background-color: #d9d9d9;
  --list-item-chevron-color: #c7c7cc;
  --progress-bar-color: var(--highlight-color);
  --progress-bar-secondary-color: #65adff;
  --progress-bar-background-color: transparent;
  --progress-circle-primary-color: var(--highlight-color);
  --progress-circle-secondary-color: #65adff;
  --progress-circle-background-color: transparent;
  --tabbar-background-color: #fafafa;
  --tabbar-text-color: #999;
  --tabbar-highlight-text-color: var(--highlight-color);
  --tabbar-border-color: #ccc;
  --switch-highlight-color: #44db5e;
  --switch-border-color: #e5e5e5;
  --switch-background-color: white;
  --range-track-background-color: #a4aab3;
  --range-track-background-color-active: var(--highlight-color);
  --range-thumb-background-color: #fff;
  --modal-background-color: rgba(0, 0, 0, 0.7);
  --modal-text-color: #fff;
  --alert-dialog-background-color: #f4f4f4;
  --alert-dialog-text-color: #1f1f21;
  --alert-dialog-button-color: var(--highlight-color);
  --alert-dialog-separator-color: #ddd;
  --dialog-background-color: #f4f4f4;
  --dialog-text-color: var(--text-color);
  --popover-background-color: white;
  --popover-text-color: #1f1f21;
  --action-sheet-title-color: #8f8e94;
  --action-sheet-button-separator-color: rgba(0, 0, 0, 0.1);
  --action-sheet-button-color: var(--highlight-color);
  --action-sheet-button-destructive-color: #fe3824;
  --action-sheet-button-background-color: rgba(255, 255, 255, 0.9);
  --action-sheet-button-active-background-color: #e9e9e9;
  --action-sheet-cancel-button-background-color: #fff;
  --notification-background-color: #fe3824;
  --notification-color: white;
  --search-input-background-color: rgba(3, 3, 3, 0.09);
  --fab-text-color: #ffffff;
  --fab-background-color-rgb: var(--highlight-color-rgb);
  --fab-background-color: rgba(var(--fab-background-color-rgb));
  --fab-active-background-color: rgba(var(--fab-background-color-rgb), 0.7); /* color-mod(var(--fab-background-color) a(70%)) */
  --card-background-color: white;
  --card-text-color: #030303;
  --toast-background-color: rgba(0, 0, 0, 0.8);
  --toast-text-color: white;
  --toast-button-text-color: white;
  --select-input-color: var(--text-color);
  --select-input-border-color: var(--border-color);

  /* variables for Material Design components */
  --material-background-color: #eceff1;
  --material-text-color: var(--text-color);
  --material-notification-background-color: #e91e63;
  --material-notification-color: white;
  --material-switch-active-thumb-color: #37474f;
  --material-switch-active-background-color: rgba(55, 71, 79, 0.5); /* color-mod(#37474f a(50%)) */
  --material-switch-inactive-thumb-color: #f1f1f1;
  --material-switch-inactive-background-color: #b0afaf;
  --material-range-track-color: #bdbdbd;
  --material-range-thumb-color: #31313a;
  --material-range-disabled-thumb-color: #b0b0b0;
  --material-range-disabled-thumb-border-color: #eeeeee;
  --material-range-zero-thumb-color: #f2f2f2;
  --material-toolbar-background-color: #ffffff;
  --material-toolbar-text-color: #31313a;
  --material-toolbar-button-color: #1e88e5;
  --material-segment-background-color: #fafafa;
  --material-segment-active-background-color: #c8c8c8;
  --material-segment-text-color: rgba(0, 0, 0, 0.38); /* color-mod(black a(38%)) */
  --material-segment-active-text-color: #353535;
  --material-button-background-color: #2979ff;
  --material-button-text-color: #ffffff;
  --material-button-disabled-background-color: rgba(79, 79, 79, 0.26); /* color-mod(#4f4f4f a(26%)) */
  --material-button-disabled-color: rgba(0, 0, 0, 0.26); /* color-mod(black a(26%)) */
  --material-flat-button-active-background-color: rgba(153, 153, 153, 0.2); /* color-mod(#999 a(20%)) */
  --material-list-background-color: #fff;
  --material-list-item-separator-color: #eee;
  --material-list-header-text-color: #757575;
  --material-checkbox-active-color: #37474f;
  --material-checkbox-inactive-color: #717171;
  --material-checkbox-checkmark-color: #ffffff;
  --material-radio-button-active-color: #37474f;
  --material-radio-button-inactive-color: #717171;
  --material-radio-button-disabled-color: #afafaf;
  --material-text-input-text-color: #212121;
  --material-text-input-active-color: #3d5afe;
  --material-text-input-inactive-color: #afafaf;
  --material-search-background-color: #fafafa;
  --material-dialog-background-color: #ffffff;
  --material-dialog-text-color: var(--material-text-color);
  --material-alert-dialog-background-color: #ffffff;
  --material-alert-dialog-title-color: #31313a;
  --material-alert-dialog-content-color: rgba(49, 49, 58, 0.85);
  --material-alert-dialog-button-color: #37474f;
  --material-progress-bar-primary-color: #37474f;
  --material-progress-bar-secondary-color: #548ba7;
  --material-progress-bar-background-color: transparent;
  --material-progress-circle-primary-color: var(--material-progress-bar-primary-color);
  --material-progress-circle-secondary-color: var(--material-progress-bar-secondary-color);
  --material-progress-circle-background-color: transparent;
  --material-tabbar-background-color: #ffffff;
  --material-tabbar-text-color: #31313a;
  --material-tabbar-highlight-text-color: #31313a;
  --material-tabbar-highlight-color: rgba(49, 49, 58, 0.1);
  --material-fab-text-color: #31313a;
  --material-fab-background-color: #ffffff;
  --material-fab-active-background-color: rgba(255, 255, 255, 0.75);
  --material-card-background-color: white;
  --material-card-text-color: rgba(0, 0, 0, 0.54);
  --material-toast-background-color: rgba(0, 0, 0, 0.8);
  --material-toast-text-color: white;
  --material-toast-button-text-color: #bbdefb;
  --material-select-input-color: var(--material-text-color);
  --material-select-input-active-color: rgba(0, 0, 0, 0.15);
  --material-select-input-inactive-color: rgba(0, 0, 0, 0.81);
  --material-select-border-color: rgba(0, 0, 0, 0.12); /* color-mod(black a(12%)) */
  --material-popover-background-color: #fafafa;
  --material-popover-text-color: var(--material-text-color);
  --material-action-sheet-text-color: #686868;

  /* others */
  --tap-highlight-color: transparent;
}
:root {
  --input-bg-color: var(--background-color);
  --input-border-color: var(--border-color);
  --input-text-color: var(--text-color);
  --input-placeholder-color: var(--sub-text-color);
  --input-invalid-border-color: var(--border-color);
  --input-invalid-text-color: var(--text-color);
  --input-border: 1px solid var(--input-border-color);
  --font-size: 17px;
  --font-weight: 400;
  --material-font-size: 17px;
  --material-font-weight: 400;
  --font-size--mini: calc(var(--font-size) - 3px);
  --font-weight--large: 500;
  --background-color--input: transparent;
}
html {
  height: 100%;
  width: 100%;
}
body {
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  -webkit-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: var(--tap-highlight-color);
  -webkit-touch-callout: none;
}
input, textarea, select {
  -webkit-user-select: auto;
          user-select: auto;
  -moz-user-select: text;
  -webkit-touch-callout: none;
}
a, button, input, textarea, select {
  touch-action: manipulation;
}
input:active, input:focus, textarea:active, textarea:focus, select:active, select:focus {
  outline: none;
}
h1 {
  font-size: 36px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 24px;
}
h4, h5, h6 {
  font-size: 18px;
}
/* Hack to replicate the deprecated color-mod function from postcss-color-mod-function.
 * Replace this when an alternative function to color-mod is well-supported.
 * See: https://css-tricks.com/mixing-colors-in-pure-css/
 *
 * For tint, set __base variable to base color, __color variable to white, and
 * animation-delay to tint percentage in negative seconds e.g. 70% tint -> -0.7s.
 *
 * For blackness, do the same as tint but set __color variable to black.
 *
 * For alpha, do the same as tint but set __base variable (not __color!) to
 * transparent, and set __color variable to the color to alter.
 */
@-webkit-keyframes blend-background-color {
  0% {
    background-color: var(--blend-background-color__base);
  }

  100% {
    background-color: var(--blend-background-color__color);
  }
}
@keyframes blend-background-color {
  0% {
    background-color: var(--blend-background-color__base);
  }

  100% {
    background-color: var(--blend-background-color__color);
  }
}
@-webkit-keyframes blend-color {
  0% {
    color: var(--blend-color__base);
  }

  100% {
    color: var(--blend-color__color);
  }
}
@keyframes blend-color {
  0% {
    color: var(--blend-color__base);
  }

  100% {
    color: var(--blend-color__color);
  }
}
@-webkit-keyframes blend-border-color {
  0% {
    border-color: var(--blend-border-color__base);
  }

  100% {
    border-color: var(--blend-border-color__color);
  }
}
@keyframes blend-border-color {
  0% {
    border-color: var(--blend-border-color__base);
  }

  100% {
    border-color: var(--blend-border-color__color);
  }
}
:root {
  --page-background-color: var(--background-color);
  --page-material-background-color: var(--material-background-color);
}
.page {

  /* mixin: reset-font */
  font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-weight: var(--font-weight);

  background-color: #efeff4;

  background-color: var(--page-background-color);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-x: visible;
  overflow-y: hidden;
  color: #1f1f21;
  color: var(--text-color);
  -ms-overflow-style: none;
  -webkit-font-smoothing: antialiased;
}
.page::-webkit-scrollbar {
  display: none;
}
.page__content {
  background-color: #efeff4;
  background-color: var(--page-background-color);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
}
.page__background {
  background-color: #efeff4;
  background-color: var(--page-background-color);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
}
.page--material {

  /* mixin: material-font */
  font-family: 'Roboto', 'Noto', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  font-weight: var(--material-font-weight);

  background-color: #eceff1;

  background-color: var(--page-material-background-color);
}
.page--material__content {

  /* mixin: material-font */
  font-family: 'Roboto', 'Noto', sans-serif;
  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  font-weight: var(--font-weight);
}
.page__content h1,
.page__content h2,
.page__content h3,
.page__content h4,
.page__content h5 {

  /* mixin: material-font */
  font-family: 'Roboto', 'Noto', sans-serif;
  -webkit-font-smoothing: antialiased;

  font-weight: 500;

  font-weight: var(--font-weight--large);
  margin: 0.6em 0;
  padding: 0;
}
.page__content h1 {
  font-size: 28px;
}
.page__content h2 {
  font-size: 24px;
}
.page__content h3 {
  font-size: 20px;
}
.page--material__content h1,
.page--material__content h2,
.page--material__content h3,
.page--material__content h4,
.page--material__content h5 {

  /* mixin: material-font */
  font-family: 'Roboto', 'Noto', sans-serif;
  -webkit-font-smoothing: antialiased;

  font-weight: 500;

  font-weight: var(--font-weight--large);
  margin: 0.6em 0;
  padding: 0;
}
.page--material__content h1 {
  font-size: 28px;
}
.page--material__content h2 {
  font-size: 24px;
}
.page--material__content h3 {
  font-size: 20px;
}
.page--material__background {
  background-color: #eceff1;
  background-color: var(--page-material-background-color);
}
:root {
  --switch-checked-background-color: var(--switch-highlight-color); /* background color active */
  --switch-thumb-background-color: white;
  --switch-thumb-border-color: var(--border-color);
  --switch-thumb-border-color-active: var(--switch-highlight-color);
  --switch-height: 32px;
  --switch-width: 51px;
}
/*~
  name: Switch
  category: Switch
  elements: ons-switch
  markup: |
    <label class="switch">
      <input type="checkbox" class="switch__input">
      <div class="switch__toggle">
        <div class="switch__handle"></div>
      </div>
    </label>
    <label class="switch">
      <input type="checkbox" class="switch__input" checked>
      <div class="switch__toggle">
        <div class="switch__handle"></div>
      </div>
    </label>
    <label class="switch">
      <input type="checkbox" class="switch__input" disabled>
      <div class="switch__toggle">
        <div class="switch__handle"></div>
      </div>
    </label>
*/
.switch {
  display: inline-block;
  vertical-align: top;

  /* mixin: reset-box-model */
  box-sizing: border-box;
  background-clip: padding-box;

  /* mixin: hide-input-parent */
  position: relative;

  min-width: 51px;
  font-size: 17px;
  font-size: var(--font-size);
  padding: 0 20px;
  border: none;
  overflow: visible;
  width: 51px;
  width: var(--switch-width);
  height: 32px;
  height: var(--switch-height);
  z-index: 0;
  text-align: left;
}
.switch__input {

  /* mixin: hide-input */
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  vertical-align: top;
  outline: none;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
          appearance: none;

  z-index: 0;
}
/* switch toggle background */
.switch__toggle {
  background-color: white;
  background-color: var(--switch-background-color);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 30px;
  transition-property: all;
  transition-duration: 0.35s;
  transition-timing-function: ease-out;
  box-shadow: inset 0 0 0 2px #e5e5e5;
  box-shadow: inset 0 0 0 2px var(--switch-border-color);
}
/* switch toggle circle */
.switch__handle {
  /* mixin: reset-box-model */
  box-sizing: border-box;
  background-clip: padding-box;

  position: absolute;
  content: '';
  border-radius: 28px;
  height: 28px;
  width: 28px;
  background-color: white;
  background-color: var(--switch-thumb-background-color);
  left: 1px;
  top: 2px;
  transition-property: all;
  transition-duration: 0.35s;
  transition-timing-function: cubic-bezier(.59, .01, .5, .99);
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25), 0 3px 2px rgba(0, 0, 0, 0.25);
}
.switch--active__handle {
  transition: none;
}
:checked + .switch__toggle {
  box-shadow: inset 0 0 0 2px #44db5e;
  box-shadow: inset 0 0 0 2px var(--switch-checked-background-color);
  background-color: #44db5e;
  background-color: var(--switch-checked-background-color);
}
:checked + .switch__toggle > .switch__handle {
  left: 21px;
  box-shadow: 0 3px 2px rgba(0, 0, 0, 0.25);
}
:disabled + .switch__toggle {
  /* mixin: disabled */
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.switch__touch {
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: -10px;
  right: -10px;
}
/*~
  name: Material Switch
  category: Switch
  elements: ons-switch
  markup: |
    <label class="switch switch--material">
      <input type="checkbox" class="switch__input switch--material__input">
      <div class="switch__toggle switch--material__toggle">
        <div class="switch__handle switch--material__handle">
        </div>
      </div>
    </label>
    <label class="switch switch--material">
      <input type="checkbox" class="switch__input switch--material__input" checked>
      <div class="switch__toggle switch--material__toggle">
        <div class="switch__handle switch--material__handle">
        </div>
      </div>
    </label>
    <label class="switch switch--material">
      <input type="checkbox" class="switch__input switch--material__input" disabled>
      <div class="switch__toggle switch--material__toggle">
        <div class="switch__handle switch--material__handle">
        </div>
      </div>
    </label>
*/
.switch--material {
  width: 36px;
  height: 24px;
  padding: 0 10px;
  min-width: 36px;
}
.switch--material__toggle {
  background-color: #b0afaf;
  background-color: var(--material-switch-inactive-background-color);
  margin-top: 5px;
  height: 14px;
  box-shadow: none;
}
.switch--material__input {

  /* mixin: hide-input */
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  vertical-align: top;
  outline: none;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
          appearance: none;

  z-index: 0;
}
.switch--material__handle {
  background-color: #f1f1f1;
  background-color: var(--material-switch-inactive-thumb-color);
  left: 0;
  margin-top: -5px;
  width: 20px;
  height: 20px;

  /* mixin: material-shadow-2 */
  box-shadow:
    0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12),
    0 2px 4px -1px rgba(0, 0, 0, 0.4);
}
:checked + .switch--material__toggle {
  background-color: rgba(55, 71, 79, 0.5);
  background-color: var(--material-switch-active-background-color);
  box-shadow: none;
}
:checked + .switch--material__toggle > .switch--material__handle {
  left: 16px;
  background-color: #37474f;
  background-color: var(--material-switch-active-thumb-color);

  /* mixin: material-shadow-1 */
  box-shadow:
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12),
    0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.switch--material__handle:before {
  background: transparent;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 0;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.1s linear;
}
.switch--material__toggle > .switch--active__handle:before {
  box-shadow: 0 0 0 14px rgba(0, 0, 0, 0.12);
}
:checked + .switch--material__toggle > .switch--active__handle:before {
  /* Hack to replicate color-mod(var(--material-switch-active-thumb-color) alpha(20%)) */
  -webkit-animation: blend-box-shadow 1s -0.2s linear forwards paused;
          animation: blend-box-shadow 1s -0.2s linear forwards paused;
}
@-webkit-keyframes blend-box-shadow {
  0% {
    box-shadow: 0 0 0 14px transparent;
  }

  100% {
    box-shadow: 0 0 0 14px #37474f;
    box-shadow: 0 0 0 14px var(--material-switch-active-thumb-color);
  }
}
@keyframes blend-box-shadow {
  0% {
    box-shadow: 0 0 0 14px transparent;
  }

  100% {
    box-shadow: 0 0 0 14px #37474f;
    box-shadow: 0 0 0 14px var(--material-switch-active-thumb-color);
  }
}
.switch--material__touch {
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -15px;
  right: -15px;
}
:root {
  --range-thumb-size: 28px;
  --range-track-height: 2px;

  --material-range-track-height: 2px;
  --material-range-thumb-size: 14px;
  --material-range-thumb-radius: calc(var(--material-range-thumb-size) / 2);
  --material-range-thumb-vertical-margin: 24px;
  --material-range-thumb-horizontal-margin: 2px;
}
/*~
  name: Range
  category: Range
  elements: ons-range
  markup: |
    <div class="range">
      <input type="range" class="range__input">
      <input type="range" class="range__focus-ring">
    </div>

    <div class="range range--disabled">
      <input type="range" class="range__input" disabled>
      <input type="range" class="range__focus-ring" disabled>
    </div>
*/
.range {
  display: inline-block;
  position: relative;
  width: 100px;
  height: calc(28px + 2px);
  height: calc(var(--range-thumb-size) + 2px);
  margin: 0;
  padding: 0;
  background-image: linear-gradient(#a4aab3, #a4aab3);
  background-image: linear-gradient(var(--range-track-background-color), var(--range-track-background-color));
  background-position: left center;
  background-size: 100% 2px;
  background-size: 100% var(--range-track-height);
  background-repeat: no-repeat;
  background-color: transparent;
}
.range__input {
  /* mixin: reset-input */
  /* mixin: reset-box-model */
  box-sizing: border-box;

  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  vertical-align: top;
  outline: none;
  line-height: 1;

  -webkit-appearance: none;

          appearance: none;
  background-image: linear-gradient(rgb(0, 118, 255), rgb(0, 118, 255));
  background-image: linear-gradient(var(--range-track-background-color-active), var(--range-track-background-color-active));
  background-position: left center;
  background-size: 0% 2px;
  background-size: 0% var(--range-track-height);
  background-repeat: no-repeat;
  height: calc(28px + 2px);
  height: calc(var(--range-thumb-size) + 2px);
  position: relative;
  z-index: 1;
  width: 100%;
}
.range__input::-moz-range-track {
  position: relative;
  border: none;
  background: none;
  box-shadow: none;
  top: 0;
  margin: 0;
  padding: 0;
}
.range__input::-ms-track {
  position: relative;
  border: none;
  background-color: #a4aab3;
  background-color: var(--range-track-background-color);
  height: 0;
  border-radius: 50%;
}
.range__input::-webkit-slider-thumb {
  /* mixin: range__thumb */
  cursor: pointer;
  position: relative;
  height: 28px;
  height: var(--range-thumb-size);
  width: 28px;
  width: var(--range-thumb-size);
  background-color: #fff;
  background-color: var(--range-thumb-background-color);
  border: none;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25), 0 3px 2px rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  margin: 0;
  padding: 0;

  box-sizing: border-box;
  -webkit-appearance: none;
          appearance: none;
  top: 0;
  z-index: 1;
}
.range__input::-moz-range-thumb {
  /* mixin: range__thumb */
  cursor: pointer;
  position: relative;
  height: 28px;
  height: var(--range-thumb-size);
  width: 28px;
  width: var(--range-thumb-size);
  background-color: #fff;
  background-color: var(--range-thumb-background-color);
  border: none;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25), 0 3px 2px rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  margin: 0;
  padding: 0;
}
.range__input::-ms-thumb {
  /* mixin: range__thumb */
  cursor: pointer;
  position: relative;
  height: 28px;
  height: var(--range-thumb-size);
  width: 28px;
  width: var(--range-thumb-size);
  background-color: #fff;
  background-color: var(--range-thumb-background-color);
  border: none;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25), 0 3px 2px rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  margin: 0;
  padding: 0;

  top: 0;
}
.range__input::-ms-fill-lower {
  height: 2px;
  background-color: rgb(0, 118, 255);
  background-color: var(--range-track-background-color-active);
}
.range__input::-ms-tooltip {
  display: none;
}
.range__input:disabled {
  opacity: 1;
  pointer-events: none;
}
.range__focus-ring {
  pointer-events: none;
  top: 0;
  left: 0;
  display: none;

  /* mixin: reset-input */
  /* mixin: reset-box-model */
  box-sizing: border-box;

  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  border: none;
  vertical-align: top;
  outline: none;
  line-height: 1;

  -webkit-appearance: none;

          appearance: none;
  background: none;
  height: calc(28px + 2px);
  height: calc(var(--range-thumb-size) + 2px);
  position: absolute;
  z-index: 0;
  width: 100%;
}
.range--disabled {
  /* mixin: disabled */
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/*~
  name: Material Range
  category: Range
  elements: ons-range
  markup: |
    <div class="range range--material">
      <input type="range" class="range__input range--material__input" min="0" max="100">
      <!-- <input type="range" class="range__focus-ring range--material__focus-ring"> -->
    </div>

    <div class="range range--material range--disabled">
      <input type="range" class="range__input range--material__input" disabled>
      <!-- <input type="range" class="range__focus-ring range--material__focus-ring" disabled> -->
    </div>
*/
.range--material {
  position: relative;
  background-image: linear-gradient(#bdbdbd, #bdbdbd);
  background-image: linear-gradient(var(--material-range-track-color), var(--material-range-track-color));
}
.range--material__input {
  background-image: linear-gradient(#31313a, #31313a);
  background-image: linear-gradient(var(--material-range-thumb-color), var(--material-range-thumb-color));
  background-position: center left;
  background-size: 0% 2px;
}
.range--material__focus-ring {
  display: block;
}
.range--material__focus-ring::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 14px;
  width: var(--material-range-thumb-size);
  height: 14px;
  height: var(--material-range-thumb-size);
  border: none;
  box-shadow: 0 0 0 calc((32px - 14px) / 2) #31313a;
  box-shadow: 0 0 0 calc((32px - var(--material-range-thumb-size)) / 2) var(--material-range-thumb-color);
  background-color: #31313a;
  background-color: var(--material-range-thumb-color);
  border-radius: 50%;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;
  transition: opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}
.range--material__input.range__input--active + .range--material__focus-ring::-webkit-slider-thumb {
  opacity: 0.2;
  -webkit-transform: scale(1.5, 1.5, 1.5);
          transform: scale(1.5, 1.5, 1.5);
}
.range--material__input::-webkit-slider-thumb {
  position: relative;
  box-sizing: border-box;
  border: none;
  background-color: transparent;
  width: 14px;
  width: var(--material-range-thumb-size);
  height: 32px;
  border-radius: 0;
  box-shadow: none;
  background-image: radial-gradient(circle farthest-corner, #31313a 0%, #31313a calc(calc(14px / 2) - 0.4px), transparent calc(14px / 2));
  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));
  -webkit-transition: -webkit-transform 0.1s linear;
  transition: -webkit-transform 0.1s linear;
  transition: transform 0.1s linear;
  transition: transform 0.1s linear, -webkit-transform 0.1s linear;
  overflow: visible;
}
.range--material__input[_zero]::-webkit-slider-thumb {
  background-image: radial-gradient(circle farthest-corner, #f2f2f2 0%, #f2f2f2 4px, #bdbdbd 4px, #bdbdbd calc(calc(14px / 2) - 0.6px), transparent calc(calc(14px / 2)));
  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)));
}
.range--material__input[_zero] + .range--material__focus-ring::-webkit-slider-thumb {
  box-shadow: 0 0 0 calc((32px - 14px) / 2) #bdbdbd;
  box-shadow: 0 0 0 calc((32px - var(--material-range-thumb-size)) / 2) var(--material-range-track-color);
}
.range--material__input::-moz-range-track {
  background: none;
}
.range--material__input::-moz-range-thumb,
.range--material__input:focus::-moz-range-thumb {
  box-sizing: border-box;
  border: none;
  width: 14px;
  width: var(--material-range-thumb-size);
  height: 32px;
  border-radius: 0;
  background-color: transparent;
  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 */
  box-shadow: none;
}
.range--material__input:active::-webkit-slider-thumb,
.range--material__input.range__input--active::-webkit-slider-thumb { /* NOTICE: ":active" does not work on Android Chrome. */
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
  -webkit-transition: -webkit-transform 0.1s linear;
  transition: -webkit-transform 0.1s linear;
  transition: transform 0.1s linear;
  transition: transform 0.1s linear, -webkit-transform 0.1s linear;
}
/* stylelint-disable */
.range--disabled.range--material { /* stylelint-enable */
  opacity: 1;
}
/* stylelint-disable */
.range--disabled > .range--material__input { /* stylelint-enable */
  background-image: none;
}
.range--material__input:disabled::-webkit-slider-thumb {
  background-image: radial-gradient(circle farthest-corner, #b0b0b0 0%, #b0b0b0 4px, #eeeeee 4.4px, #eeeeee calc(calc(14px / 2) + 0.6px), transparent calc(calc(14px / 2) + 0.6px));
  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));
  -webkit-transition: none;
  transition: none;
}
.range--material__input:disabled::-moz-range-thumb {
  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 */
  -moz-transition: none;
  transition: none;
}
:root {
  --notification-border-radius: 19px;
  --notification-width: auto;
  --notification-height: 19px;
  --notification-min-width: 19px;
  --notification-padding: 0 4px;
  --notification-font-weight: var(--font-weight);
  --notification-font-size: 16px;

  --material-notification-font-size: 16px;
  --material-notification-font-weight: 500;
}
/*~
  name: Notification
  category: Notification
  markup: |
    <span class="notification">1</span>
    <span class="notification">10</span>
    <span class="notification">999</span>
*/
.notification {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font: inherit;
  border: none;

  /* mixin: reset-box-model */
  box-sizing: border-box;

  /* mixin: reset-base */
  background: transparent;

  /* mixin: reset-font */
  font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* mixin: reset-cursor */
  cursor: default;
  -webkit-user-select: none;
          user-select: none;

  /* mixin: ellipsis */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

  text-decoration: none;
  margin: 0;
  padding: 0 4px;
  padding: var(--notification-padding);
  width: auto;
  width: var(--notification-width);
  height: 19px;
  height: var(--notification-height);
  border-radius: 19px;
  border-radius: var(--notification-border-radius);
  background-color: #fe3824;
  background-color: var(--notification-background-color);
  color: white;
  color: var(--notification-color);
  text-align: center;
  font-size: 16px;
  font-size: var(--notification-font-size);
  min-width: 19px;
  min-width: var(--notification-min-width);
  line-height: 19px;
  line-height: var(--notification-height);
  font-weight: 400;
  font-weight: var(--notification-font-weight);
}
.notification:empty {
  display: none;
}
/*~
  name: Material Notification
  category: Notification
  markup: |
    <span class="notification notification--material">1</span>
    <span class="notification notification--material">10</span>
    <span class="notification notification--material">999</span>
*/
.notification--material {
  /* mixin: material-font */
  font-family: 'Roboto', 'Noto', sans-serif;
  -webkit-font-smoothing: antialiased;

  background-color: #e91e63;

  background-color: var(--material-notification-background-color);
  font-size: 16px;
  font-size: var(--material-notification-font-size);
  font-weight: 500;
  font-weight: var(--material-notification-font-weight);
  color: white;
  color: var(--material-notification-color);
}
:root {
  --toolbar-separator-color: var(--toolbar-border-color);

  --toolbar-height: 44px;
  --toolbar-box-shadow: none;
  --toolbar-padding: 0;
  --toolbar-separator: 1px solid var(--toolbar-separator-color);
  --toolbar-material-height: 56px;
}
/*~
  name: Toolbar
  category: Toolbar
  elements: ons-toolbar
  markup: |
    <div class="toolbar">
      <div class="toolbar__center">Navigation Bar</div>
    </div>
*/
.toolbar {
  /* mixin: toolbar */
  /* mixin: reset-font */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* mixin: reset-container */
  /* mixin: reset-box-model */
  box-sizing: border-box;
  /* mixin: reset-overflow */
  overflow: hidden;
  word-spacing: 0;
  /* mixin: reset-base */
  padding: 0;
  margin: 0;
  font: inherit;
  border: none;
  line-height: normal;
  /* mixin: reset-cursor */
  cursor: default;
  -webkit-user-select: none;
          user-select: none;
  z-index: 2;

  display: -webkit-flex;

  display: flex;
  -webkit-align-items: stretch;
          align-items: stretch;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  height: 44px;
  height: var(--toolbar-height);
  padding-left: 0;
  padding-left: var(--toolbar-padding);
  padding-right: 0;
  padding-right: var(--toolbar-padding);
  background: #fafafa;
  background: var(--toolbar-background-color);
  color: #1f1f21;
  color: var(--toolbar-text-color);
  box-shadow: none;
  box-shadow: var(--toolbar-box-shadow);
  font-weight: 400;
  font-weight: var(--font-weight);
  width: 100%;
  white-space: nowrap;
  border-bottom: none;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
  background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 100%);
  background-image: linear-gradient(0deg, var(--toolbar-separator-color), var(--toolbar-separator-color) 100%);
}
/* @media (--retina-query) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  .toolbar {
    background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%);
    background-image: linear-gradient(0deg, var(--toolbar-separator-color), var(--toolbar-separator-color) 50%, transparent 50%);
  }
}
.toolbar__bg {
  background: #fafafa;
  background: var(--toolbar-background-color);
}
.toolbar__item {

  /* mixin: toolbar__item */
  /* mixin: reset-box-model */
  box-sizing: border-box;
  /* mixin: reset-base */
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;

  height: 44px;

  height: var(--toolbar-height);
  overflow: visible;
  display: block;
  vertical-align: middle;
}
.toolbar__left {

  /* mixin: toolbar__item */
  /* mixin: reset-box-model */
  box-sizing: border-box;
  /* mixin: reset-base */
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;

  max-width: 50%;
  width: 27%;
  text-align: left;
  line-height: 44px;
  line-height: var(--toolbar-height);
}
.toolbar__right {

  /* mixin: toolbar__item */
  /* mixin: reset-box-model */
  box-sizing: border-box;
  /* mixin: reset-base */
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;

  max-width: 50%;
  width: 27%;
  text-align: right;
  line-height: 44px;
  line-height: var(--toolbar-height);
}
.toolbar__center {

  /* mixin: toolbar__item */
  /* mixin: reset-box-model */
  box-sizing: border-box;
  /* mixin: reset-base */
  padding: 0;
  margin: 0;
  font: inherit;
  background: transparent;
  border: none;

  width: 46%;
  text-align: center;
  line-height: 44px;
  line-height: var(--toolbar-height);
  font-size: 17px;
  font-size: var(--font-size);
  font-weight: 500;
  font-weight: var(--font-weight--large);
  color: #1f1f21;
  color: var(--toolbar-text-color);
}
.toolbar__title {
  line-height: 44px;
  line-height: var(--toolbar-height);
  font-size: 17px;
  font-size: var(--font-size);
  font-weight: 500;
  font-weight: var(--font-weight--large);
  color: #1f1f21;
  color: var(--toolbar-text-color);
  margin: 0;
  padding: 0;
  overflow: visible;
}
.toolbar__center:first-child:last-child {
  width: 100%;
}
/*~
  name: Toolbar Item
  category: Toolbar
  elements: ons-toolbar ons-toolbar-button
  markup: |
    <div class="toolbar">
      <div class="toolbar__left">
        <span class="toolbar-button">
          <i class="ion-ios-menu" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>

      <div class="toolbar__center">
        Navigation Bar
      </div>

      <div class="toolbar__right">
        <span class="toolbar-button">Label</span>
      </div>
    </div>
*/
/*~
  name: Toolbar with Outline Button
  category: Toolbar
  elements: ons-toolbar ons-toolbar-button
  markup: |
    <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
    <div class="toolbar">
      <div class="toolbar__left">
        <span class="toolbar-button toolbar-button--outline">
          <i class="ion-ios-menu" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>

      <div class="toolbar__center">
        Title
      </div>

      <div class="toolbar__right">
        <span class="toolbar-button toolbar-button--outline">Button</span>
      </div>
    </div>
*/
/*~
  name: Bottom Bar
  category: Toolbar
  elements: ons-bottom-toolbar
  markup: |
    <div class="bottom-bar">
      <div class="bottom-bar__line-height" style="text-align:center">Bottom Toolbar</div>
    </div>
*/
.bottom-bar {
  /* mixin: toolbar */
  /* mixin: reset-font */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* mixin: reset-container */
  /* mixin: reset-box-model */
  box-sizing: border-box;
  /* mixin: reset-overflow */
  white-space: nowrap;
  overflow: hidden;
  word-spacing: 0;
  /* mixin: reset-base */
  padding: 0;
  margin: 0;
  font: inherit;
  border: none;
  line-height: normal;
  /* mixin: reset-cursor */
  cursor: default;
  -webkit-user-select: none;
          user-select: none;
  z-index: 2;

  display: block;
  height: 44px;
  height: var(--toolbar-height);
  padding-left: 0;
  padding-left: var(--toolbar-padding);
  padding-right: 0;
  padding-right: var(--toolbar-padding);
  background: #fafafa;
  background: var(--toolbar-background-color);
  color: #1f1f21;
  color: var(--toolbar-text-color);
  box-shadow: none;
  box-shadow: var(--toolbar-box-shadow);
  font-weight: 400;
  font-weight: var(--font-weight);
  border-bottom: none;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  border-top: none;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: top;
  background-image: linear-gradient(180deg, #b2b2b2, #b2b2b2 100%);
  background-image: linear-gradient(180deg, var(--toolbar-separator-color), var(--toolbar-separator-color) 100%);
}
/* @media (--retina-query) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  .bottom-bar {
    background-image: linear-gradient(180deg, #b2b2b2, #b2b2b2 50%, transparent 50%);
    background-image: linear-gradient(180deg, var(--toolbar-separator-color), var(--toolbar-separator-color) 50%, transparent 50%);
  }
}
.bottom-bar__line-height {
  line-height: 44px;
  line-height: var(--toolbar-height);
  padding-bottom: 0;
  padding-top: 0;
}
.bottom-bar--aligned {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  line-height: 44px;
  line-height: var(--toolbar-height);
}
.bottom-bar--transparent {
  background-color: transparent;
  background-image: none;
  border: none;
}
/*~
  name: Toolbar with Segment
  category: Toolbar
  elements: ons-toolbar
  markup: |
    <div class="toolbar">
      <div class="toolbar__center">
        <div class="segment" style="width:200px;margin:7px 50px;">
          <div class="segment__item">
            <input type="radio" class="segment__input" name="navi-segment-a" checked>
            <div class="segment__button">One</div>
          </div>

          <div class="segment__item">
            <input type="radio" class="segment__input" name="navi-segment-a">
            <div class="segment__button">Two</div>
          </div>
        </div>
      </div>
    </div>
*/
/*~
  name: Material Toolbar
  category: Toolbar
  elements: ons-toolbar
  markup: |
    <div class="toolbar toolbar--material">
      <div class="toolbar__center toolbar--material__center">
        Title
      </div>
    </div>
*/
.toolbar--material {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  height: 56px;
  height: var(--toolbar-material-height);
  border-bottom: 0;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  padding: 0;
  background-color: #ffffff;
  background-color: var(--material-toolbar-background-color);
  background-size: 0;
}
/*~
  name: No Shadow Toolbar
  category: Toolbar
  elements: ons-toolbar
  markup: |
    <div class="toolbar toolbar--noshadow">
      <div class="toolbar__left">
        <span class="toolbar-button">
          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>
      <div class="toolbar__center">
        Navigation Bar
      </div>
      <div class="toolbar__right">
        <span class="toolbar-button">Label</span>
      </div>
    </div>
*/
.toolbar--noshadow {
  box-shadow: none;
  background-image: none;
  border-bottom: none;
}
.toolbar--material__left, .toolbar--material__right {

  /* mixin: toolbar--material-font */
  /* mixin: material-font */
  font-family: 'Roboto', 'Noto', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 20px;
  font-weight: 500;
  color: #31313a;
  color: var(--material-toolbar-text-color);

  height: 56px;

  height: var(--toolbar-material-height);
  min-width: 72px;
  width: auto;
  line-height: 56px;
  line-height: var(--toolbar-material-height);
}
.toolbar--material__center {

  /* mixin: toolbar--material-font */
  /* mixin: material-font */
  font-family: 'Roboto', 'Noto', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 20px;
  font-weight: 500;
  color: #31313a;
  color: var(--material-toolbar-text-color);

  height: 56px;

  height: var(--toolbar-material-height);
  width: auto;
  -webkit-flex-grow: 1;
          flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  line-height: 56px;
  line-height: var(--toolbar-material-height);
}
.toolbar--material__center:first-child {
  margin-left: 16px;
}
.toolbar--material__center:last-child {
  margin-right: 16px;
}
.toolbar--material__left:empty, .toolbar--material__right:empty {
  min-width: 16px;
}
/*~
  name: Material Toolbar with Icons
  category: Toolbar
  elements: ons-toolbar
  markup: |
    <div class="toolbar toolbar--material">
      <div class="toolbar__left toolbar--material__left">
        <span class="toolbar-button toolbar-button--material">
          <i class="zmdi zmdi-menu"></i>
        </span>
      </div>
      <div class="toolbar__center toolbar--material__center">
        Title
      </div>
      <div class="toolbar__right toolbar--material__right">
        <span class="toolbar-button toolbar-button--material">
          <i class="zmdi zmdi-search"></i>
        </span>
        <span class="toolbar-button toolbar-button--material">
          <i class="zmdi zmdi-favorite"></i>
        </span>
        <span class="toolbar-button toolbar-button--material">
          <i class="zmdi zmdi-more-vert"></i>
        </span>
      </div>
    </div>
*/
/*~
  name: Transparent Toolbar
  category: Toolbar
  elements: ons-toolbar
  markup: |
    <div class="toolbar toolbar--transparent">
      <div class="toolbar__left">
        <span class="toolbar-button">
          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>
      <div class="toolbar__center">
        Navigation Bar
      </div>
      <div class="toolbar__right">
        <span class="toolbar-button">Label</span>
      </div>
    </div>
*/
.toolbar--transparent {
  background-color: transparent;
  box-shadow: none;
  background-image: none;
  border-bottom: none;
}
:root {
  --button-text-color: white;
  --button-quiet-color: var(--highlight-color);
  --button-cta-color: white;
  --button-large-padding: 4px 12px;
  --button-padding: 4px 10px;
  --button-line-height: 32px;
  --button-large-line-height: 36px;
  --button-active-opacity: 0.2;
  --button-border-radius: 3px;
}
/*~
  name: Button
  category: Button
  elements: ons-button
  markup: |
    <button class="button">Button</button>
    <button class="button" disabled>Button</button>
*/
.button {
  position: relative;
  display: inline-block;

  /* mixin: reset-box-model */
  box-sizing: border-box;

  /* mixin: reset-base */
  margin: 0;

  /* mixin: reset-font */
  font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-weight: var(--font-weight);

  /* mixin: reset-cursor */
  cursor: default;
  -webkit-user-select: none;
          user-select: none;

  /* mixin: ellipsis */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

  height: auto;
  text-decoration: none;
  padding: 4px 10px;
  padding: var(--button-padding);
  font-size: 17px;
  font-size: var(--font-size);
  line-height: 32px;
  line-height: var(--button-line-height);
  letter-spacing: 0;
  color: white;
  color: var(--button-text-color);
  vertical-align: middle;
  background-color: rgb(0, 118, 255);
  background-color: var(--button-background-color);
  border: 0 solid currentColor;
  border-radius: 3px;
  border-radius: var(--button-border-radius);
  transition: none;
}
.button::-moz-focus-inner {
  outline: 0;
}
.button:hover {
  transition: none;
}
.button:active {
  background-color: rgb(0, 118, 255);
  background-color: var(--button-background-color);
  transition: none;
  opacity: 0.2;
  opacity: var(--button-active-opacity);
}
.button:focus {
  outline: 0;
}
.button:disabled, .button[disabled] {
  /* mixin: disabled */
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/*~
  name: Outline Button
  category: Button
  elements: ons-button
  markup: |
    <button class="button button--outline">Button</button>
    <button class="button button--outline" disabled>Button</button>
*/
.button--outline {
  background-color: transparent;
  border: 1px solid rgb(0, 118, 255);
  border: 1px solid var(--button-background-color);
  color: rgb(0, 118, 255);
  color: var(--button-background-color);
}
.button--outline:active {
  border: 1px solid rgb(0, 118, 255);
  border: 1px solid var(--button-background-color);