third_party/polymer/v1_0/components-chromium/paper-checkbox/paper-checkbox.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-ripple/paper-ripple.html">
  11 <link rel="import" href="../paper-styles/default-theme.html">
  12 <link rel="import" href="../paper-styles/color.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-checkbox` is a button that can be either checked or unchecked.  User
  18 can tap the checkbox to check or uncheck it.  Usually you use checkboxes
  19 to allow user to select multiple options from a set.  If you have a single
  20 ON/OFF option, avoid using a single checkbox and use `paper-toggle-button`
  21 instead.
  22
  23 Example:
  24
  25     <paper-checkbox>label</paper-checkbox>
  26
  27     <paper-checkbox checked> label</paper-checkbox>
  28
  29 ### Styling
  30
  31 The following custom properties and mixins are available for styling:
  32
  33 Custom property | Description | Default
  34 ----------------|-------------|----------
  35 `--paper-checkbox-unchecked-background-color` | Checkbox background color when the input is not checked | `transparent`
  36 `--paper-checkbox-unchecked-color` | Checkbox border color when the input is not checked | `--primary-text-color`
  37 `--paper-checkbox-unchecked-ink-color` | Selected/focus ripple color when the input is not checked | `--primary-text-color`
  38 `--paper-checkbox-checked-color` | Checkbox color when the input is checked | `--default-primary-color`
  39 `--paper-checkbox-checked-ink-color` | Selected/focus ripple color when the input is checked | `--default-primary-color`
  40 `--paper-checkbox-checkmark-color` | Checkmark color | `white`
  41 `--paper-checkbox-label-color` | Label color | `--primary-text-color`
  42 `--paper-checkbox-error-color` | Checkbox color when invalid | `--google-red-500`
  43
  44 @demo demo/index.html
  45 -->
  46
  47 </head><body><dom-module id="paper-checkbox">
  48   <template>
  49     <style>
  50       :host {
  51         display: inline-block;
  52         white-space: nowrap;
  53       }
  54
  55       :host(:focus) {
  56         outline: none;
  57       }
  58
  59       .hidden {
  60         display: none;
  61       }
  62
  63       #checkboxContainer {
  64         display: inline-block;
  65         position: relative;
  66         width: 18px;
  67         height: 18px;
  68         cursor: pointer;
  69         -webkit-transform: translateZ(0);
  70         transform: translateZ(0);
  71         vertical-align: middle;
  72         background-color: var(--paper-checkbox-unchecked-background-color, transparent);
  73       }
  74
  75       :host #ink {
  76         position: absolute;
  77         top: -15px;
  78         left: -15px;
  79         width: 48px;
  80         height: 48px;
  81         color: var(--paper-checkbox-unchecked-ink-color, --primary-text-color);
  82         opacity: 0.6;
  83         pointer-events: none;
  84       }
  85
  86       :host #ink[checked] {
  87         color: var(--paper-checkbox-checked-ink-color, --default-primary-color);
  88       }
  89
  90       :host #checkbox {
  91         position: relative;
  92         box-sizing: border-box;
  93         height: 100%;
  94         border: solid 2px;
  95         border-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
  96         border-radius: 2px;
  97         pointer-events: none;
  98         -webkit-transition: background-color 140ms, border-color 140ms;
  99         transition: background-color 140ms, border-color 140ms;
 100       }
 101
 102       /* checkbox checked animations */
 103       #checkbox.checked #checkmark {
 104         -webkit-animation: checkmark-expand 140ms ease-out forwards;
 105         animation: checkmark-expand 140ms ease-out forwards;
 106       }
 107
 108       @-webkit-keyframes checkmark-expand {
 109         0% {
 110           top: 9px;
 111           left: 6px;
 112           width: 0px;
 113           height: 0px;
 114         }
 115         100% {
 116           top: -1px;
 117           left: 4px;
 118           width: 5px;
 119           height: 10px;
 120         }
 121       }
 122
 123       @keyframes checkmark-expand {
 124         0% {
 125           top: 9px;
 126           left: 6px;
 127           width: 0px;
 128           height: 0px;
 129         }
 130         100% {
 131           top: -1px;
 132           left: 4px;
 133           width: 5px;
 134           height: 10px;
 135         }
 136       }
 137
 138       :host #checkbox.checked {
 139         background-color: var(--paper-checkbox-checked-color, --default-primary-color);
 140         border-color: var(--paper-checkbox-checked-color, --default-primary-color);
 141       }
 142
 143       :host #checkmark {
 144         -webkit-transform: rotate(45deg);
 145         transform: rotate(45deg);
 146         position: absolute;
 147         top: -1px;
 148         left: 4px;
 149         width: 5px;
 150         height: 10px;
 151         border-style: solid;
 152         border-top: none;
 153         border-left: none;
 154         border-right-width: 2px;
 155         border-bottom-width: 2px;
 156         border-color: var(--paper-checkbox-checkmark-color, white);
 157       }
 158
 159       /* label */
 160       #checkboxLabel {
 161         position: relative;
 162         display: inline-block;
 163         vertical-align: middle;
 164         padding-left: 8px;
 165         white-space: normal;
 166         pointer-events: none;
 167         color: var(--paper-checkbox-label-color, --primary-text-color);
 168       }
 169
 170       #checkboxLabel[hidden] {
 171         display: none;
 172       }
 173
 174       /* disabled state */
 175       :host([disabled]) {
 176         pointer-events: none;
 177       }
 178
 179       :host([disabled]) #checkbox {
 180         opacity: 0.5;
 181         border-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
 182       }
 183
 184       :host([disabled][checked]) #checkbox {
 185         background-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
 186         opacity: 0.5;
 187       }
 188
 189       :host([disabled]) #checkboxLabel  {
 190         opacity: 0.65;
 191       }
 192
 193       /* invalid state */
 194       #checkbox.invalid:not(.checked) {
 195         border-color: var(--paper-checkbox-error-color, --google-red-500);
 196       }
 197     </style>
 198
 199     <div id="checkboxContainer">
 200       <paper-ripple id="ink" class="circle" center="" checked$="[[checked]]"></paper-ripple>
 201       <div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]">
 202         <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div>
 203       </div>
 204     </div>
 205
 206     <div id="checkboxLabel"><content></content></div>
 207   </template>
 208
 209   </dom-module>
 210 <script src="paper-checkbox-extracted.js"></script></body></html>