third_party/polymer/v1_0/components-chromium/paper-toggle-button/paper-toggle-button.html

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 --><html><head><link rel="import" href="../polymer/polymer.html">
  10 <link rel="import" href="../paper-styles/color.html">
  11 <link rel="import" href="../paper-styles/default-theme.html">
  12 <link rel="import" href="../paper-ripple/paper-ripple.html">
  13 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
  14 <link rel="import" href="../iron-checked-element-behavior/iron-checked-element-behavior.html">
  15
  16 <!--
  17 `paper-toggle-button` provides a ON/OFF switch that user can toggle the state
  18 by tapping or by dragging the switch.
  19
  20 Example:
  21
  22     <paper-toggle-button></paper-toggle-button>
  23
  24 ### Styling
  25
  26 The following custom properties and mixins are available for styling:
  27
  28 Custom property | Description | Default
  29 ----------------|-------------|----------
  30 `--paper-toggle-button-unchecked-bar-color` | Slider color when the input is not checked | `#000000`
  31 `--paper-toggle-button-unchecked-button-color` | Button color when the input is not checked | `--paper-grey-50`
  32 `--paper-toggle-button-unchecked-ink-color` | Selected/focus ripple color when the input is not checked | `--dark-primary-color`
  33 `--paper-toggle-button-checked-bar-color` | Slider button color when the input is checked | `--default-primary-color`
  34 `--paper-toggle-button-checked-button-color` | Button color when the input is checked | `--default-primary-color`
  35 `--paper-toggle-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--default-primary-color`
  36 `--paper-toggle-button-unchecked-bar` | Mixin applied to the slider when the input is not checked | `{}`
  37 `--paper-toggle-button-unchecked-button` | Mixin applied to the slider button when the input is not checked | `{}`
  38 `--paper-toggle-button-checked-bar` | Mixin applied to the slider when the input is checked | `{}`
  39 `--paper-toggle-button-checked-button` | Mixin applied to the slider button when the input is checked | `{}`
  40
  41 @group Paper Elements
  42 @element paper-toggle-button
  43 @hero hero.svg
  44 @demo demo/index.html
  45 -->
  46
  47 </head><body><dom-module id="paper-toggle-button">
  48   <template>
  49
  50     <style>
  51       :host {
  52         display: inline-block;
  53       }
  54
  55       :host([disabled]) {
  56         pointer-events: none;
  57       }
  58
  59       :host(:focus) {
  60         outline:none;
  61       }
  62
  63       :host .toggle-bar {
  64         background-color: var(--paper-toggle-button-unchecked-bar-color, #000000);
  65         @apply(--paper-toggle-button-unchecked-bar);
  66       }
  67
  68       :host .toggle-button {
  69         background-color: var(--paper-toggle-button-unchecked-button-color, --paper-grey-50);
  70         @apply(--paper-toggle-button-unchecked-button);
  71       }
  72
  73       :host([checked]) .toggle-bar {
  74         background-color: var(--paper-toggle-button-checked-bar-color, --default-primary-color);
  75         @apply(--paper-toggle-button-checked-bar);
  76       }
  77
  78       :host([checked]) .toggle-button {
  79         background-color: var(--paper-toggle-button-checked-button-color, --default-primary-color);
  80         @apply(--paper-toggle-button-checked-button);
  81       }
  82
  83       :host .toggle-ink {
  84         color: var(--paper-toggle-button-unchecked-ink-color, --primary-text-color);
  85       }
  86
  87       :host([checked]) .toggle-ink {
  88         color: var(--paper-toggle-button-checked-ink-color, --default-primary-color);
  89       }
  90
  91       /* ID selectors should not be overriden by users. */
  92
  93       #toggleContainer {
  94         position: relative;
  95         width: 36px;
  96         height: 14px;
  97       }
  98
  99       #toggleBar {
 100         position: absolute;
 101         height: 100%;
 102         width: 100%;
 103         border-radius: 8px;
 104         pointer-events: none;
 105         opacity: 0.4;
 106         transition: background-color linear .08s;
 107       }
 108
 109       :host([checked]) #toggleBar {
 110         opacity: 0.5;
 111       }
 112
 113       :host([disabled]) #toggleBar {
 114         background-color: #000;
 115         opacity: 0.12;
 116       }
 117
 118       #toggleButton {
 119         position: absolute;
 120         top: -3px;
 121         height: 20px;
 122         width: 20px;
 123         border-radius: 50%;
 124         box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);
 125         transition: -webkit-transform linear .08s, background-color linear .08s;
 126         transition: transform linear .08s, background-color linear .08s;
 127         will-change: transform;
 128       }
 129
 130       #toggleButton.dragging {
 131         -webkit-transition: none;
 132         transition: none;
 133       }
 134
 135       :host([checked]) #toggleButton {
 136         -webkit-transform: translate(16px, 0);
 137         transform: translate(16px, 0);
 138       }
 139
 140       :host([disabled]) #toggleButton {
 141         background-color: #bdbdbd;
 142         opacity: 1;
 143       }
 144
 145       #ink {
 146         position: absolute;
 147         top: -14px;
 148         left: -14px;
 149         width: 48px;
 150         height: 48px;
 151         opacity: 0.5;
 152         pointer-events: none;
 153       }
 154     </style>
 155
 156     <div id="toggleContainer">
 157       <div id="toggleBar" class="toggle-bar"></div>
 158       <div id="toggleButton" class="toggle-button">
 159         <paper-ripple id="ink" class="toggle-ink circle" recenters=""></paper-ripple>
 160       </div>
 161     </div>
 162
 163   </template>
 164
 165   </dom-module>
 166 <script src="paper-toggle-button-extracted.js"></script></body></html>