Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(5)

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-checkbox/paper-checkbox.html

Issue 1984963002: Roll Polymer elements (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <!-- 1 <!--
2 @license 2 @license
3 Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.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/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also 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/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --><html><head><link rel="import" href="../polymer/polymer.html"> 9 --><html><head><link rel="import" href="../polymer/polymer.html">
10 <link rel="import" href="../paper-styles/default-theme.html"> 10 <link rel="import" href="../paper-styles/default-theme.html">
(...skipping 20 matching lines...) Expand all
31 31
32 Custom property | Description | Default 32 Custom property | Description | Default
33 ----------------|-------------|---------- 33 ----------------|-------------|----------
34 `--paper-checkbox-unchecked-background-color` | Checkbox background color when t he input is not checked | `transparent` 34 `--paper-checkbox-unchecked-background-color` | Checkbox background color when t he input is not checked | `transparent`
35 `--paper-checkbox-unchecked-color` | Checkbox border color when the input is not checked | `--primary-text-color` 35 `--paper-checkbox-unchecked-color` | Checkbox border color when the input is not checked | `--primary-text-color`
36 `--paper-checkbox-unchecked-ink-color` | Selected/focus ripple color when the in put is not checked | `--primary-text-color` 36 `--paper-checkbox-unchecked-ink-color` | Selected/focus ripple color when the in put is not checked | `--primary-text-color`
37 `--paper-checkbox-checked-color` | Checkbox color when the input is checked | `- -primary-color` 37 `--paper-checkbox-checked-color` | Checkbox color when the input is checked | `- -primary-color`
38 `--paper-checkbox-checked-ink-color` | Selected/focus ripple color when the inpu t is checked | `--primary-color` 38 `--paper-checkbox-checked-ink-color` | Selected/focus ripple color when the inpu t is checked | `--primary-color`
39 `--paper-checkbox-checkmark-color` | Checkmark color | `white` 39 `--paper-checkbox-checkmark-color` | Checkmark color | `white`
40 `--paper-checkbox-label-color` | Label color | `--primary-text-color` 40 `--paper-checkbox-label-color` | Label color | `--primary-text-color`
41 `--paper-checkbox-label-checked-color` | Label color when the input is checked | `--paper-checkbox-label-color`
41 `--paper-checkbox-label-spacing` | Spacing between the label and the checkbox | `8px` 42 `--paper-checkbox-label-spacing` | Spacing between the label and the checkbox | `8px`
42 `--paper-checkbox-error-color` | Checkbox color when invalid | `--error-color` 43 `--paper-checkbox-error-color` | Checkbox color when invalid | `--error-color`
43 `--paper-checkbox-size` | Size of the checkbox | `18px` 44 `--paper-checkbox-size` | Size of the checkbox | `18px`
45 `--paper-checkbox-margin` | Margin around the checkbox container | `initial`
46 `--paper-checkbox-vertical-align` | Vertical alignment of the checkbox container | `middle`
44 47
45 This element applies the mixin `--paper-font-common-base` but does not import `p aper-styles/typography.html`. 48 This element applies the mixin `--paper-font-common-base` but does not import `p aper-styles/typography.html`.
46 In order to apply the `Roboto` font to this element, make sure you've imported ` paper-styles/typography.html`. 49 In order to apply the `Roboto` font to this element, make sure you've imported ` paper-styles/typography.html`.
47 50
48 @demo demo/index.html 51 @demo demo/index.html
49 --> 52 -->
50 53
51 </head><body><dom-module id="paper-checkbox"> 54 </head><body><dom-module id="paper-checkbox">
52 <template strip-whitespace=""> 55 <template strip-whitespace="">
53 <style> 56 <style>
(...skipping 13 matching lines...) Expand all
67 .hidden { 70 .hidden {
68 display: none; 71 display: none;
69 } 72 }
70 73
71 #checkboxContainer { 74 #checkboxContainer {
72 display: inline-block; 75 display: inline-block;
73 position: relative; 76 position: relative;
74 width: var(--calculated-paper-checkbox-size); 77 width: var(--calculated-paper-checkbox-size);
75 height: var(--calculated-paper-checkbox-size); 78 height: var(--calculated-paper-checkbox-size);
76 min-width: var(--calculated-paper-checkbox-size); 79 min-width: var(--calculated-paper-checkbox-size);
77 vertical-align: middle; 80 margin: var(--paper-checkbox-margin, initial);
81 vertical-align: var(--paper-checkbox-vertical-align, middle);
78 background-color: var(--paper-checkbox-unchecked-background-color, trans parent); 82 background-color: var(--paper-checkbox-unchecked-background-color, trans parent);
79 } 83 }
80 84
81 #ink { 85 #ink {
82 position: absolute; 86 position: absolute;
83 87
84 /* Center the ripple in the checkbox by negative offsetting it by 88 /* Center the ripple in the checkbox by negative offsetting it by
85 * (inkWidth - rippleWidth) / 2 */ 89 * (inkWidth - rippleWidth) / 2 */
86 top: calc(0px - (2.66 * var(--calculated-paper-checkbox-size) - var(--ca lculated-paper-checkbox-size)) / 2); 90 top: calc(0px - (2.66 * var(--calculated-paper-checkbox-size) - var(--ca lculated-paper-checkbox-size)) / 2);
87 left: calc(0px - (2.66 * var(--calculated-paper-checkbox-size) - var(--c alculated-paper-checkbox-size)) / 2); 91 left: calc(0px - (2.66 * var(--calculated-paper-checkbox-size) - var(--c alculated-paper-checkbox-size)) / 2);
(...skipping 78 matching lines...) Expand 10 before | Expand all | Expand 10 after
166 #checkboxLabel { 170 #checkboxLabel {
167 position: relative; 171 position: relative;
168 display: inline-block; 172 display: inline-block;
169 vertical-align: middle; 173 vertical-align: middle;
170 padding-left: var(--paper-checkbox-label-spacing, 8px); 174 padding-left: var(--paper-checkbox-label-spacing, 8px);
171 white-space: normal; 175 white-space: normal;
172 line-height: normal; 176 line-height: normal;
173 color: var(--paper-checkbox-label-color, --primary-text-color); 177 color: var(--paper-checkbox-label-color, --primary-text-color);
174 } 178 }
175 179
180 :host([checked]) #checkboxLabel {
181 color: var(--paper-checkbox-label-checked-color, --paper-checkbox-label- color);
182 }
183
176 :host-context([dir="rtl"]) #checkboxLabel { 184 :host-context([dir="rtl"]) #checkboxLabel {
177 padding-right: var(--paper-checkbox-label-spacing, 8px); 185 padding-right: var(--paper-checkbox-label-spacing, 8px);
178 padding-left: 0; 186 padding-left: 0;
179 } 187 }
180 188
181 #checkboxLabel[hidden] { 189 #checkboxLabel[hidden] {
182 display: none; 190 display: none;
183 } 191 }
184 192
185 /* disabled state */ 193 /* disabled state */
(...skipping 22 matching lines...) Expand all
208 <div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]"> 216 <div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]">
209 <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div> 217 <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div>
210 </div> 218 </div>
211 </div> 219 </div>
212 220
213 <div id="checkboxLabel"><content></content></div> 221 <div id="checkboxLabel"><content></content></div>
214 </template> 222 </template>
215 223
216 </dom-module> 224 </dom-module>
217 <script src="paper-checkbox-extracted.js"></script></body></html> 225 <script src="paper-checkbox-extracted.js"></script></body></html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698