Index: third_party/polymer/components/paper-checkbox/paper-checkbox.html |
diff --git a/third_party/polymer/components/paper-checkbox/paper-checkbox.html b/third_party/polymer/components/paper-checkbox/paper-checkbox.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..9184ded7813612909e902c2ade0a7cb8d4bc5d61 |
--- /dev/null |
+++ b/third_party/polymer/components/paper-checkbox/paper-checkbox.html |
@@ -0,0 +1,311 @@ |
+<!-- |
+@license |
+Copyright (c) 2016 The Polymer Project Authors. All rights reserved. |
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
+Code distributed by Google as part of the polymer project is also |
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
+--> |
+ |
+<link rel="import" href="../polymer/polymer.html"> |
+<link rel="import" href="../paper-styles/default-theme.html"> |
+<link rel="import" href="../paper-behaviors/paper-checked-element-behavior.html"> |
+ |
+<!-- |
+Material design: [Checkbox](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox) |
+ |
+`paper-checkbox` is a button that can be either checked or unchecked. User |
+can tap the checkbox to check or uncheck it. Usually you use checkboxes |
+to allow user to select multiple options from a set. If you have a single |
+ON/OFF option, avoid using a single checkbox and use `paper-toggle-button` |
+instead. |
+ |
+Example: |
+ |
+ <paper-checkbox>label</paper-checkbox> |
+ |
+ <paper-checkbox checked> label</paper-checkbox> |
+ |
+### Styling |
+ |
+The following custom properties and mixins are available for styling: |
+ |
+Custom property | Description | Default |
+----------------|-------------|---------- |
+`--paper-checkbox-unchecked-background-color` | Checkbox background color when the input is not checked | `transparent` |
+`--paper-checkbox-unchecked-color` | Checkbox border color when the input is not checked | `--primary-text-color` |
+`--paper-checkbox-unchecked-ink-color` | Selected/focus ripple color when the input is not checked | `--primary-text-color` |
+`--paper-checkbox-checked-color` | Checkbox color when the input is checked | `--primary-color` |
+`--paper-checkbox-checked-ink-color` | Selected/focus ripple color when the input is checked | `--primary-color` |
+`--paper-checkbox-checkmark-color` | Checkmark color | `white` |
+`--paper-checkbox-label-color` | Label color | `--primary-text-color` |
+`--paper-checkbox-label-checked-color` | Label color when the input is checked | `--paper-checkbox-label-color` |
+`--paper-checkbox-label-spacing` | Spacing between the label and the checkbox | `8px` |
+`--paper-checkbox-label` | Mixin applied to the label | `{}` |
+`--paper-checkbox-label-checked` | Mixin applied to the label when the input is checked | `{}` |
+`--paper-checkbox-error-color` | Checkbox color when invalid | `--error-color` |
+`--paper-checkbox-size` | Size of the checkbox | `18px` |
+`--paper-checkbox-ink-size` | Size of the ripple | `48px` |
+`--paper-checkbox-margin` | Margin around the checkbox container | `initial` |
+`--paper-checkbox-vertical-align` | Vertical alignment of the checkbox container | `middle` |
+ |
+This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`. |
+In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`. |
+ |
+@demo demo/index.html |
+--> |
+ |
+<dom-module id="paper-checkbox"> |
+ <template strip-whitespace> |
+ <style> |
+ :host { |
+ display: inline-block; |
+ white-space: nowrap; |
+ cursor: pointer; |
+ --calculated-paper-checkbox-size: var(--paper-checkbox-size, 18px); |
+ /* -1px is a sentinel for the default and is replaced in `attached`. */ |
+ --calculated-paper-checkbox-ink-size: var(--paper-checkbox-ink-size, -1px); |
+ @apply(--paper-font-common-base); |
+ line-height: 0; |
+ -webkit-tap-highlight-color: transparent; |
+ } |
+ |
+ :host([hidden]) { |
+ display: none !important; |
+ } |
+ |
+ :host(:focus) { |
+ outline: none; |
+ } |
+ |
+ .hidden { |
+ display: none; |
+ } |
+ |
+ #checkboxContainer { |
+ display: inline-block; |
+ position: relative; |
+ width: var(--calculated-paper-checkbox-size); |
+ height: var(--calculated-paper-checkbox-size); |
+ min-width: var(--calculated-paper-checkbox-size); |
+ margin: var(--paper-checkbox-margin, initial); |
+ vertical-align: var(--paper-checkbox-vertical-align, middle); |
+ background-color: var(--paper-checkbox-unchecked-background-color, transparent); |
+ } |
+ |
+ #ink { |
+ position: absolute; |
+ |
+ /* Center the ripple in the checkbox by negative offsetting it by |
+ * (inkWidth - rippleWidth) / 2 */ |
+ top: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2); |
+ left: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2); |
+ width: var(--calculated-paper-checkbox-ink-size); |
+ height: var(--calculated-paper-checkbox-ink-size); |
+ color: var(--paper-checkbox-unchecked-ink-color, var(--primary-text-color)); |
+ opacity: 0.6; |
+ pointer-events: none; |
+ } |
+ |
+ :host-context([dir="rtl"]) #ink { |
+ right: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2); |
+ left: auto; |
+ } |
+ |
+ #ink[checked] { |
+ color: var(--paper-checkbox-checked-ink-color, var(--primary-color)); |
+ } |
+ |
+ #checkbox { |
+ position: relative; |
+ box-sizing: border-box; |
+ height: 100%; |
+ border: solid 2px; |
+ border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color)); |
+ border-radius: 2px; |
+ pointer-events: none; |
+ -webkit-transition: background-color 140ms, border-color 140ms; |
+ transition: background-color 140ms, border-color 140ms; |
+ } |
+ |
+ /* checkbox checked animations */ |
+ #checkbox.checked #checkmark { |
+ -webkit-animation: checkmark-expand 140ms ease-out forwards; |
+ animation: checkmark-expand 140ms ease-out forwards; |
+ } |
+ |
+ @-webkit-keyframes checkmark-expand { |
+ 0% { |
+ -webkit-transform: scale(0, 0) rotate(45deg); |
+ } |
+ 100% { |
+ -webkit-transform: scale(1, 1) rotate(45deg); |
+ } |
+ } |
+ |
+ @keyframes checkmark-expand { |
+ 0% { |
+ transform: scale(0, 0) rotate(45deg); |
+ } |
+ 100% { |
+ transform: scale(1, 1) rotate(45deg); |
+ } |
+ } |
+ |
+ #checkbox.checked { |
+ background-color: var(--paper-checkbox-checked-color, var(--primary-color)); |
+ border-color: var(--paper-checkbox-checked-color, var(--primary-color)); |
+ } |
+ |
+ #checkmark { |
+ position: absolute; |
+ width: 36%; |
+ height: 70%; |
+ border-style: solid; |
+ border-top: none; |
+ border-left: none; |
+ border-right-width: calc(2/15 * var(--calculated-paper-checkbox-size)); |
+ border-bottom-width: calc(2/15 * var(--calculated-paper-checkbox-size)); |
+ border-color: var(--paper-checkbox-checkmark-color, white); |
+ -webkit-transform-origin: 97% 86%; |
+ transform-origin: 97% 86%; |
+ box-sizing: content-box; /* protect against page-level box-sizing */ |
+ } |
+ |
+ :host-context([dir="rtl"]) #checkmark { |
+ -webkit-transform-origin: 50% 14%; |
+ transform-origin: 50% 14%; |
+ } |
+ |
+ /* label */ |
+ #checkboxLabel { |
+ position: relative; |
+ display: inline-block; |
+ vertical-align: middle; |
+ padding-left: var(--paper-checkbox-label-spacing, 8px); |
+ white-space: normal; |
+ line-height: normal; |
+ color: var(--paper-checkbox-label-color, var(--primary-text-color)); |
+ @apply(--paper-checkbox-label); |
+ } |
+ |
+ :host([checked]) #checkboxLabel { |
+ color: var(--paper-checkbox-label-checked-color, var(--paper-checkbox-label-color, var(--primary-text-color))); |
+ @apply(--paper-checkbox-label-checked); |
+ } |
+ |
+ :host-context([dir="rtl"]) #checkboxLabel { |
+ padding-right: var(--paper-checkbox-label-spacing, 8px); |
+ padding-left: 0; |
+ } |
+ |
+ #checkboxLabel[hidden] { |
+ display: none; |
+ } |
+ |
+ /* disabled state */ |
+ |
+ :host([disabled]) #checkbox { |
+ opacity: 0.5; |
+ border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color)); |
+ } |
+ |
+ :host([disabled][checked]) #checkbox { |
+ background-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color)); |
+ opacity: 0.5; |
+ } |
+ |
+ :host([disabled]) #checkboxLabel { |
+ opacity: 0.65; |
+ } |
+ |
+ /* invalid state */ |
+ #checkbox.invalid:not(.checked) { |
+ border-color: var(--paper-checkbox-error-color, var(--error-color)); |
+ } |
+ </style> |
+ |
+ <div id="checkboxContainer"> |
+ <div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]"> |
+ <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div> |
+ </div> |
+ </div> |
+ |
+ <div id="checkboxLabel"><content></content></div> |
+ </template> |
+ |
+ <script> |
+ Polymer({ |
+ is: 'paper-checkbox', |
+ |
+ behaviors: [ |
+ Polymer.PaperCheckedElementBehavior |
+ ], |
+ |
+ hostAttributes: { |
+ role: 'checkbox', |
+ 'aria-checked': false, |
+ tabindex: 0 |
+ }, |
+ |
+ properties: { |
+ /** |
+ * Fired when the checked state changes due to user interaction. |
+ * |
+ * @event change |
+ */ |
+ |
+ /** |
+ * Fired when the checked state changes. |
+ * |
+ * @event iron-change |
+ */ |
+ ariaActiveAttribute: { |
+ type: String, |
+ value: 'aria-checked' |
+ } |
+ }, |
+ |
+ attached: function() { |
+ var inkSize = this.getComputedStyleValue('--calculated-paper-checkbox-ink-size').trim(); |
+ // If unset, compute and set the default `--paper-checkbox-ink-size`. |
+ if (inkSize === '-1px') { |
+ var checkboxSize = parseFloat(this.getComputedStyleValue('--calculated-paper-checkbox-size').trim()); |
+ var defaultInkSize = Math.floor((8 / 3) * checkboxSize); |
+ |
+ // The checkbox and ripple need to have the same parity so that their |
+ // centers align. |
+ if (defaultInkSize % 2 !== checkboxSize % 2) { |
+ defaultInkSize++; |
+ } |
+ |
+ this.customStyle['--paper-checkbox-ink-size'] = defaultInkSize + 'px'; |
+ this.updateStyles(); |
+ } |
+ }, |
+ |
+ _computeCheckboxClass: function(checked, invalid) { |
+ var className = ''; |
+ if (checked) { |
+ className += 'checked '; |
+ } |
+ if (invalid) { |
+ className += 'invalid'; |
+ } |
+ return className; |
+ }, |
+ |
+ _computeCheckmarkClass: function(checked) { |
+ return checked ? '' : 'hidden'; |
+ }, |
+ |
+ // create ripple inside the checkboxContainer |
+ _createRipple: function() { |
+ this._rippleContainer = this.$.checkboxContainer; |
+ return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this); |
+ } |
+ |
+ }); |
+ </script> |
+</dom-module> |