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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2314283002: Roll Polymer (Closed)
Patch Set: dep Created 4 years, 3 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
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-checkbox/bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-checkbox/paper-checkbox-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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 26 matching lines...) Expand all
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-checked-color` | Label color when the input is checked | `--paper-checkbox-label-color`
42 `--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`
43 `--paper-checkbox-label` | Mixin applied to the label | `{}` 43 `--paper-checkbox-label` | Mixin applied to the label | `{}`
44 `--paper-checkbox-label-checked` | Mixin applied to the label when the input is checked | `{}` 44 `--paper-checkbox-label-checked` | Mixin applied to the label when the input is checked | `{}`
45 `--paper-checkbox-error-color` | Checkbox color when invalid | `--error-color` 45 `--paper-checkbox-error-color` | Checkbox color when invalid | `--error-color`
46 `--paper-checkbox-size` | Size of the checkbox | `18px` 46 `--paper-checkbox-size` | Size of the checkbox | `18px`
47 `--paper-checkbox-ink-size` | Size of the ripple | `48px`
47 `--paper-checkbox-margin` | Margin around the checkbox container | `initial` 48 `--paper-checkbox-margin` | Margin around the checkbox container | `initial`
48 `--paper-checkbox-vertical-align` | Vertical alignment of the checkbox container | `middle` 49 `--paper-checkbox-vertical-align` | Vertical alignment of the checkbox container | `middle`
49 50
50 This element applies the mixin `--paper-font-common-base` but does not import `p aper-styles/typography.html`. 51 This element applies the mixin `--paper-font-common-base` but does not import `p aper-styles/typography.html`.
51 In order to apply the `Roboto` font to this element, make sure you've imported ` paper-styles/typography.html`. 52 In order to apply the `Roboto` font to this element, make sure you've imported ` paper-styles/typography.html`.
52 53
53 @demo demo/index.html 54 @demo demo/index.html
54 --> 55 -->
55 56
56 </head><body><dom-module id="paper-checkbox"> 57 </head><body><dom-module id="paper-checkbox">
57 <template strip-whitespace=""> 58 <template strip-whitespace="">
58 <style> 59 <style>
59 :host { 60 :host {
60 display: inline-block; 61 display: inline-block;
61 white-space: nowrap; 62 white-space: nowrap;
62 cursor: pointer; 63 cursor: pointer;
63 --calculated-paper-checkbox-size: var(--paper-checkbox-size, 18px); 64 --calculated-paper-checkbox-size: var(--paper-checkbox-size, 18px);
65 /* -1px is a sentinel for the default and is replaced in `attached`. */
66 --calculated-paper-checkbox-ink-size: var(--paper-checkbox-ink-size, -1p x);
64 @apply(--paper-font-common-base); 67 @apply(--paper-font-common-base);
65 line-height: 0; 68 line-height: 0;
66 -webkit-tap-highlight-color: transparent; 69 -webkit-tap-highlight-color: transparent;
67 } 70 }
68 71
69 :host([hidden]) { 72 :host([hidden]) {
70 display: none !important; 73 display: none !important;
71 } 74 }
72 75
73 :host(:focus) { 76 :host(:focus) {
(...skipping 13 matching lines...) Expand all
87 margin: var(--paper-checkbox-margin, initial); 90 margin: var(--paper-checkbox-margin, initial);
88 vertical-align: var(--paper-checkbox-vertical-align, middle); 91 vertical-align: var(--paper-checkbox-vertical-align, middle);
89 background-color: var(--paper-checkbox-unchecked-background-color, trans parent); 92 background-color: var(--paper-checkbox-unchecked-background-color, trans parent);
90 } 93 }
91 94
92 #ink { 95 #ink {
93 position: absolute; 96 position: absolute;
94 97
95 /* Center the ripple in the checkbox by negative offsetting it by 98 /* Center the ripple in the checkbox by negative offsetting it by
96 * (inkWidth - rippleWidth) / 2 */ 99 * (inkWidth - rippleWidth) / 2 */
97 top: calc(0px - (2.66 * var(--calculated-paper-checkbox-size) - var(--ca lculated-paper-checkbox-size)) / 2); 100 top: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calcu lated-paper-checkbox-size)) / 2);
98 left: calc(0px - (2.66 * var(--calculated-paper-checkbox-size) - var(--c alculated-paper-checkbox-size)) / 2); 101 left: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calc ulated-paper-checkbox-size)) / 2);
99 width: calc(2.66 * var(--calculated-paper-checkbox-size)); 102 width: var(--calculated-paper-checkbox-ink-size);
100 height: calc(2.66 * var(--calculated-paper-checkbox-size)); 103 height: var(--calculated-paper-checkbox-ink-size);
101 color: var(--paper-checkbox-unchecked-ink-color, --primary-text-color); 104 color: var(--paper-checkbox-unchecked-ink-color, var(--primary-text-colo r));
102 opacity: 0.6; 105 opacity: 0.6;
103 pointer-events: none; 106 pointer-events: none;
104 } 107 }
105 108
106 :host-context([dir="rtl"]) #ink { 109 :host-context([dir="rtl"]) #ink {
107 right: calc(0px - (2.66 * var(--calculated-paper-checkbox-size) - var(-- calculated-paper-checkbox-size)) / 2); 110 right: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--cal culated-paper-checkbox-size)) / 2);
108 left: auto; 111 left: auto;
109 } 112 }
110 113
111 #ink[checked] { 114 #ink[checked] {
112 color: var(--paper-checkbox-checked-ink-color, --primary-color); 115 color: var(--paper-checkbox-checked-ink-color, var(--primary-color));
113 } 116 }
114 117
115 #checkbox { 118 #checkbox {
116 position: relative; 119 position: relative;
117 box-sizing: border-box; 120 box-sizing: border-box;
118 height: 100%; 121 height: 100%;
119 border: solid 2px; 122 border: solid 2px;
120 border-color: var(--paper-checkbox-unchecked-color, --primary-text-color ); 123 border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-c olor));
121 border-radius: 2px; 124 border-radius: 2px;
122 pointer-events: none; 125 pointer-events: none;
123 -webkit-transition: background-color 140ms, border-color 140ms; 126 -webkit-transition: background-color 140ms, border-color 140ms;
124 transition: background-color 140ms, border-color 140ms; 127 transition: background-color 140ms, border-color 140ms;
125 } 128 }
126 129
127 /* checkbox checked animations */ 130 /* checkbox checked animations */
128 #checkbox.checked #checkmark { 131 #checkbox.checked #checkmark {
129 -webkit-animation: checkmark-expand 140ms ease-out forwards; 132 -webkit-animation: checkmark-expand 140ms ease-out forwards;
130 animation: checkmark-expand 140ms ease-out forwards; 133 animation: checkmark-expand 140ms ease-out forwards;
(...skipping 11 matching lines...) Expand all
142 @keyframes checkmark-expand { 145 @keyframes checkmark-expand {
143 0% { 146 0% {
144 transform: scale(0, 0) rotate(45deg); 147 transform: scale(0, 0) rotate(45deg);
145 } 148 }
146 100% { 149 100% {
147 transform: scale(1, 1) rotate(45deg); 150 transform: scale(1, 1) rotate(45deg);
148 } 151 }
149 } 152 }
150 153
151 #checkbox.checked { 154 #checkbox.checked {
152 background-color: var(--paper-checkbox-checked-color, --primary-color); 155 background-color: var(--paper-checkbox-checked-color, var(--primary-colo r));
153 border-color: var(--paper-checkbox-checked-color, --primary-color); 156 border-color: var(--paper-checkbox-checked-color, var(--primary-color));
154 } 157 }
155 158
156 #checkmark { 159 #checkmark {
157 position: absolute; 160 position: absolute;
158 width: 36%; 161 width: 36%;
159 height: 70%; 162 height: 70%;
160 border-style: solid; 163 border-style: solid;
161 border-top: none; 164 border-top: none;
162 border-left: none; 165 border-left: none;
163 border-right-width: calc(2/15 * var(--calculated-paper-checkbox-size)); 166 border-right-width: calc(2/15 * var(--calculated-paper-checkbox-size));
(...skipping 10 matching lines...) Expand all
174 } 177 }
175 178
176 /* label */ 179 /* label */
177 #checkboxLabel { 180 #checkboxLabel {
178 position: relative; 181 position: relative;
179 display: inline-block; 182 display: inline-block;
180 vertical-align: middle; 183 vertical-align: middle;
181 padding-left: var(--paper-checkbox-label-spacing, 8px); 184 padding-left: var(--paper-checkbox-label-spacing, 8px);
182 white-space: normal; 185 white-space: normal;
183 line-height: normal; 186 line-height: normal;
184 color: var(--paper-checkbox-label-color, --primary-text-color); 187 color: var(--paper-checkbox-label-color, var(--primary-text-color));
185 @apply(--paper-checkbox-label); 188 @apply(--paper-checkbox-label);
186 } 189 }
187 190
188 :host([checked]) #checkboxLabel { 191 :host([checked]) #checkboxLabel {
189 color: var(--paper-checkbox-label-checked-color, --paper-checkbox-label- color); 192 color: var(--paper-checkbox-label-checked-color, var(--paper-checkbox-la bel-color, var(--primary-text-color)));
190 @apply(--paper-checkbox-label-checked); 193 @apply(--paper-checkbox-label-checked);
191 } 194 }
192 195
193 :host-context([dir="rtl"]) #checkboxLabel { 196 :host-context([dir="rtl"]) #checkboxLabel {
194 padding-right: var(--paper-checkbox-label-spacing, 8px); 197 padding-right: var(--paper-checkbox-label-spacing, 8px);
195 padding-left: 0; 198 padding-left: 0;
196 } 199 }
197 200
198 #checkboxLabel[hidden] { 201 #checkboxLabel[hidden] {
199 display: none; 202 display: none;
200 } 203 }
201 204
202 /* disabled state */ 205 /* disabled state */
203 206
204 :host([disabled]) #checkbox { 207 :host([disabled]) #checkbox {
205 opacity: 0.5; 208 opacity: 0.5;
206 border-color: var(--paper-checkbox-unchecked-color, --primary-text-color ); 209 border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-c olor));
207 } 210 }
208 211
209 :host([disabled][checked]) #checkbox { 212 :host([disabled][checked]) #checkbox {
210 background-color: var(--paper-checkbox-unchecked-color, --primary-text-c olor); 213 background-color: var(--paper-checkbox-unchecked-color, var(--primary-te xt-color));
211 opacity: 0.5; 214 opacity: 0.5;
212 } 215 }
213 216
214 :host([disabled]) #checkboxLabel { 217 :host([disabled]) #checkboxLabel {
215 opacity: 0.65; 218 opacity: 0.65;
216 } 219 }
217 220
218 /* invalid state */ 221 /* invalid state */
219 #checkbox.invalid:not(.checked) { 222 #checkbox.invalid:not(.checked) {
220 border-color: var(--paper-checkbox-error-color, --error-color); 223 border-color: var(--paper-checkbox-error-color, var(--error-color));
221 } 224 }
222 </style> 225 </style>
223 226
224 <div id="checkboxContainer"> 227 <div id="checkboxContainer">
225 <div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]"> 228 <div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]">
226 <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div> 229 <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div>
227 </div> 230 </div>
228 </div> 231 </div>
229 232
230 <div id="checkboxLabel"><content></content></div> 233 <div id="checkboxLabel"><content></content></div>
231 </template> 234 </template>
232 235
233 </dom-module> 236 </dom-module>
234 <script src="paper-checkbox-extracted.js"></script></body></html> 237 <script src="paper-checkbox-extracted.js"></script></body></html>
OLDNEW
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-checkbox/bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-checkbox/paper-checkbox-extracted.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698