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

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

Issue 1410143002: Update Polymer to fix closure compile (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@iron-list5
Patch Set: Created 5 years, 2 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) 2015 The Polymer Project Authors. All rights reserved. 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.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-ripple/paper-ripple.html"> 10 <link rel="import" href="../paper-ripple/paper-ripple.html">
(...skipping 22 matching lines...) Expand all
33 33
34 Custom property | Description | Default 34 Custom property | Description | Default
35 ----------------|-------------|---------- 35 ----------------|-------------|----------
36 `--paper-checkbox-unchecked-background-color` | Checkbox background color when t he input is not checked | `transparent` 36 `--paper-checkbox-unchecked-background-color` | Checkbox background color when t he input is not checked | `transparent`
37 `--paper-checkbox-unchecked-color` | Checkbox border color when the input is not checked | `--primary-text-color` 37 `--paper-checkbox-unchecked-color` | Checkbox border color when the input is not checked | `--primary-text-color`
38 `--paper-checkbox-unchecked-ink-color` | Selected/focus ripple color when the in put is not checked | `--primary-text-color` 38 `--paper-checkbox-unchecked-ink-color` | Selected/focus ripple color when the in put is not checked | `--primary-text-color`
39 `--paper-checkbox-checked-color` | Checkbox color when the input is checked | `- -default-primary-color` 39 `--paper-checkbox-checked-color` | Checkbox color when the input is checked | `- -default-primary-color`
40 `--paper-checkbox-checked-ink-color` | Selected/focus ripple color when the inpu t is checked | `--default-primary-color` 40 `--paper-checkbox-checked-ink-color` | Selected/focus ripple color when the inpu t is checked | `--default-primary-color`
41 `--paper-checkbox-checkmark-color` | Checkmark color | `white` 41 `--paper-checkbox-checkmark-color` | Checkmark color | `white`
42 `--paper-checkbox-label-color` | Label color | `--primary-text-color` 42 `--paper-checkbox-label-color` | Label color | `--primary-text-color`
43 `--paper-checkbox-label-spacing` | Spacing between the label and the checkbox | `8px`
43 `--paper-checkbox-error-color` | Checkbox color when invalid | `--google-red-500 ` 44 `--paper-checkbox-error-color` | Checkbox color when invalid | `--google-red-500 `
44 45
45 @demo demo/index.html 46 @demo demo/index.html
46 --> 47 -->
47 48
48 </head><body><dom-module id="paper-checkbox"> 49 </head><body><dom-module id="paper-checkbox">
49 <template strip-whitespace=""> 50 <template strip-whitespace="">
50 <style> 51 <style>
51 :host { 52 :host {
52 display: inline-block; 53 display: inline-block;
(...skipping 13 matching lines...) Expand all
66 position: relative; 67 position: relative;
67 width: 18px; 68 width: 18px;
68 height: 18px; 69 height: 18px;
69 cursor: pointer; 70 cursor: pointer;
70 -webkit-transform: translateZ(0); 71 -webkit-transform: translateZ(0);
71 transform: translateZ(0); 72 transform: translateZ(0);
72 vertical-align: middle; 73 vertical-align: middle;
73 background-color: var(--paper-checkbox-unchecked-background-color, trans parent); 74 background-color: var(--paper-checkbox-unchecked-background-color, trans parent);
74 } 75 }
75 76
76 :host #ink { 77 #ink {
77 position: absolute; 78 position: absolute;
78 top: -15px; 79 top: -15px;
79 left: -15px; 80 left: -15px;
80 width: 48px; 81 width: 48px;
81 height: 48px; 82 height: 48px;
82 color: var(--paper-checkbox-unchecked-ink-color, --primary-text-color); 83 color: var(--paper-checkbox-unchecked-ink-color, --primary-text-color);
83 opacity: 0.6; 84 opacity: 0.6;
84 pointer-events: none; 85 pointer-events: none;
85 } 86 }
86 87
87 :host #ink[checked] { 88 :host-context([dir="rtl"]) #ink {
89 right: -15px;
90 left: auto;
91 }
92
93 #ink[checked] {
88 color: var(--paper-checkbox-checked-ink-color, --default-primary-color); 94 color: var(--paper-checkbox-checked-ink-color, --default-primary-color);
89 } 95 }
90 96
91 :host #checkbox { 97 #checkbox {
92 position: relative; 98 position: relative;
93 box-sizing: border-box; 99 box-sizing: border-box;
94 height: 100%; 100 height: 100%;
95 border: solid 2px; 101 border: solid 2px;
96 border-color: var(--paper-checkbox-unchecked-color, --primary-text-color ); 102 border-color: var(--paper-checkbox-unchecked-color, --primary-text-color );
97 border-radius: 2px; 103 border-radius: 2px;
98 pointer-events: none; 104 pointer-events: none;
99 -webkit-transition: background-color 140ms, border-color 140ms; 105 -webkit-transition: background-color 140ms, border-color 140ms;
100 transition: background-color 140ms, border-color 140ms; 106 transition: background-color 140ms, border-color 140ms;
101 } 107 }
(...skipping 27 matching lines...) Expand all
129 height: 0px; 135 height: 0px;
130 } 136 }
131 100% { 137 100% {
132 top: -1px; 138 top: -1px;
133 left: 4px; 139 left: 4px;
134 width: 5px; 140 width: 5px;
135 height: 10px; 141 height: 10px;
136 } 142 }
137 } 143 }
138 144
139 :host #checkbox.checked { 145 #checkbox.checked {
140 background-color: var(--paper-checkbox-checked-color, --default-primary- color); 146 background-color: var(--paper-checkbox-checked-color, --default-primary- color);
141 border-color: var(--paper-checkbox-checked-color, --default-primary-colo r); 147 border-color: var(--paper-checkbox-checked-color, --default-primary-colo r);
142 } 148 }
143 149
144 :host #checkmark { 150 #checkmark {
145 -webkit-transform: rotate(45deg); 151 -webkit-transform: rotate(45deg);
146 transform: rotate(45deg); 152 transform: rotate(45deg);
147 position: absolute; 153 position: absolute;
148 top: -1px; 154 top: -1px;
149 left: 4px; 155 left: 4px;
150 width: 5px; 156 width: 5px;
151 height: 10px; 157 height: 10px;
152 border-style: solid; 158 border-style: solid;
153 border-top: none; 159 border-top: none;
154 border-left: none; 160 border-left: none;
155 border-right-width: 2px; 161 border-right-width: 2px;
156 border-bottom-width: 2px; 162 border-bottom-width: 2px;
157 border-color: var(--paper-checkbox-checkmark-color, white); 163 border-color: var(--paper-checkbox-checkmark-color, white);
158 } 164 }
159 165
160 /* label */ 166 /* label */
161 #checkboxLabel { 167 #checkboxLabel {
162 position: relative; 168 position: relative;
163 display: inline-block; 169 display: inline-block;
164 vertical-align: middle; 170 vertical-align: middle;
165 padding-left: 8px; 171 padding-left: var(--paper-checkbox-label-spacing, 8px);
166 white-space: normal; 172 white-space: normal;
167 pointer-events: none; 173 pointer-events: none;
168 color: var(--paper-checkbox-label-color, --primary-text-color); 174 color: var(--paper-checkbox-label-color, --primary-text-color);
169 } 175 }
170 176
177 :host-context([dir="rtl"]) #checkboxLabel {
178 padding-right: var(--paper-checkbox-label-spacing, 8px);
179 padding-left: 0;
180 }
181
171 #checkboxLabel[hidden] { 182 #checkboxLabel[hidden] {
172 display: none; 183 display: none;
173 } 184 }
174 185
175 /* disabled state */ 186 /* disabled state */
176 :host([disabled]) { 187 :host([disabled]) {
177 pointer-events: none; 188 pointer-events: none;
178 } 189 }
179 190
180 :host([disabled]) #checkbox { 191 :host([disabled]) #checkbox {
(...skipping 20 matching lines...) Expand all
201 <div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]"> 212 <div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]">
202 <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div> 213 <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div>
203 </div> 214 </div>
204 </div> 215 </div>
205 216
206 <div id="checkboxLabel"><content></content></div> 217 <div id="checkboxLabel"><content></content></div>
207 </template> 218 </template>
208 219
209 </dom-module> 220 </dom-module>
210 <script src="paper-checkbox-extracted.js"></script></body></html> 221 <script src="paper-checkbox-extracted.js"></script></body></html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698