ui/webui/resources/cr_elements/cr_toggle/cr_toggle.html

<link rel="import" href="../../html/polymer.html">

<link rel="import" href="chrome://resources/polymer/v1_0/paper-behaviors/paper-ripple-behavior.html">
<link rel="import" href="../shared_vars_css.html">

<dom-module id="cr-toggle">
  <template>
    <style>
      :host {
        --cr-toggle-checked-bar-color: var(--google-blue-600);
        --cr-toggle-checked-button-color: var(--google-blue-600);
        --cr-toggle-checked-ink-color: var(--google-blue-600);
        --cr-toggle-ripple-opacity: .15;
        --cr-toggle-unchecked-bar-color: var(--google-grey-400);
        --cr-toggle-unchecked-button-color: white;
        --cr-toggle-unchecked-ink-color: var(--google-grey-600);
        cursor: pointer;
        display: block;
        outline: none;
      }

      :host-context([dark]) {
        --cr-toggle-checked-bar-color: var(--google-blue-refresh-300);
        --cr-toggle-checked-button-color: var(--google-blue-refresh-300);
        --cr-toggle-checked-ink-color: var(--google-blue-refresh-300);
        --cr-toggle-ripple-opacity: .4;
        --cr-toggle-unchecked-bar-color: var(--google-grey-refresh-500);
        --cr-toggle-unchecked-button-color: var(--google-grey-refresh-300);
        --cr-toggle-unchecked-ink-color: var(--google-grey-refresh-300);
      }

      :host([disabled]) {
        cursor: initial;
        opacity: var(--cr-disabled-opacity);
        pointer-events: none;
      }

      button {
        background: none;
        border: none;
        cursor: inherit;
        display: block;
        outline: inherit;
        padding: 0;
        position: relative;
        width: 34px;
        z-index: 0;
      }

      #bar {
        background-color: var(--cr-toggle-unchecked-bar-color);
        border-radius: 8px;
        height: 12px;
        left: 3px;
        position: absolute;
        top: 2px;
        transition: background-color linear 80ms;
        width: 28px;
        z-index: 0;
      }

      :host([checked]) #bar {
        background-color: var(--cr-toggle-checked-bar-color);
        opacity: 0.5;
      }

      #knob {
        background-color: var(--cr-toggle-unchecked-button-color);
        border-radius: 50%;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
        display: block;
        height: 16px;
        position: relative;
        transition: transform linear 80ms, background-color linear 80ms;
        width: 16px;
        z-index: 1;
      }

      :host([checked]) #knob {
        background-color: var(--cr-toggle-checked-button-color);
        transform: translate3d(18px, 0, 0);
      }

      :host-context([dir=rtl]):host([checked]) #knob {
        transform: translate3d(-18px, 0, 0);
      }

      paper-ripple {
        --paper-ripple-opacity: var(--cr-toggle-ripple-opacity);
        color: var(--cr-toggle-unchecked-ink-color);
        height: 40px;
        left: -12px;
        pointer-events: none;
        top: -12px;
        transition: color linear 80ms;
        width: 40px;
      }

      :host-context([dir=rtl]) paper-ripple {
        left: auto;
        right: -12px;
      }

      :host([checked]) paper-ripple {
        color: var(--cr-toggle-checked-ink-color);
      }

      :host-context(html:not([dark])):host([checked]) paper-ripple {
        --paper-ripple-opacity: 0.2;
      }
    </style>
    <!-- A <button> is used (instead of a plain <div>) to avoid a corner case
         when pointerdown is initiated in cr-toggle, but pointerup happens
         outside the bounds of cr-toggle, which would end up firing a 'click'
         event on the parent and unexpectedly modify the toggle's state (see
         context at crbug.com/689158 and crbug.com/768555). The 'click'
         event is not fired when the <button> wrapper is used. -->
    <button tabindex="-1" on-focus="onButtonFocus_">
      <span id="bar"></span>
      <span id="knob"></span>
    </button>
  </template>
  <script src="cr_toggle.js"></script>
</dom-module>