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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 1633603004: Add script to remove prefixed CSS from third_party/polymer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: add missing files Created 3 years, 9 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-radio-button/paper-radio-button.html ('k') | third_party/polymer/v1_0/components-chromium/paper-spinner/paper-spinner-styles.html » ('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) 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="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html "> 10 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html ">
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after
65 65
66 </head><body><dom-module id="paper-slider"> 66 </head><body><dom-module id="paper-slider">
67 <template strip-whitespace=""> 67 <template strip-whitespace="">
68 <style> 68 <style>
69 :host { 69 :host {
70 @apply(--layout); 70 @apply(--layout);
71 @apply(--layout-justified); 71 @apply(--layout-justified);
72 @apply(--layout-center); 72 @apply(--layout-center);
73 width: 200px; 73 width: 200px;
74 cursor: default; 74 cursor: default;
75 -webkit-user-select: none;
76 -moz-user-select: none;
77 -ms-user-select: none;
78 user-select: none; 75 user-select: none;
79 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 76 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
80 --paper-progress-active-color: var(--paper-slider-active-color, --google -blue-700); 77 --paper-progress-active-color: var(--paper-slider-active-color, --google -blue-700);
81 --paper-progress-secondary-color: var(--paper-slider-secondary-color, -- google-blue-300); 78 --paper-progress-secondary-color: var(--paper-slider-secondary-color, -- google-blue-300);
82 --paper-progress-disabled-active-color: var(--paper-slider-disabled-acti ve-color, --paper-grey-400); 79 --paper-progress-disabled-active-color: var(--paper-slider-disabled-acti ve-color, --paper-grey-400);
83 --paper-progress-disabled-secondary-color: var(--paper-slider-disabled-s econdary-color, --paper-grey-400); 80 --paper-progress-disabled-secondary-color: var(--paper-slider-disabled-s econdary-color, --paper-grey-400);
84 --calculated-paper-slider-height: var(--paper-slider-height, 2px); 81 --calculated-paper-slider-height: var(--paper-slider-height, 2px);
85 } 82 }
86 83
87 /* focus shows the ripple */ 84 /* focus shows the ripple */
(...skipping 88 matching lines...) Expand 10 before | Expand all | Expand 10 after
176 173
177 .slider-knob:focus { 174 .slider-knob:focus {
178 outline: none; 175 outline: none;
179 } 176 }
180 177
181 .slider-knob.dragging { 178 .slider-knob.dragging {
182 transition: none; 179 transition: none;
183 } 180 }
184 181
185 .snaps > .slider-knob.dragging { 182 .snaps > .slider-knob.dragging {
186 transition: -webkit-transform 0.08s ease;
187 transition: transform 0.08s ease; 183 transition: transform 0.08s ease;
188 } 184 }
189 185
190 .slider-knob-inner { 186 .slider-knob-inner {
191 margin: 10px; 187 margin: 10px;
192 width: calc(100% - 20px); 188 width: calc(100% - 20px);
193 height: calc(100% - 20px); 189 height: calc(100% - 20px);
194 background-color: var(--paper-slider-knob-color, --google-blue-700); 190 background-color: var(--paper-slider-knob-color, --google-blue-700);
195 border: 2px solid var(--paper-slider-knob-color, --google-blue-700); 191 border: 2px solid var(--paper-slider-knob-color, --google-blue-700);
196 border-radius: 50%; 192 border-radius: 50%;
197 193
198 -moz-box-sizing: border-box;
199 box-sizing: border-box; 194 box-sizing: border-box;
200 195
201 transition-property: -webkit-transform, background-color, border;
202 transition-property: transform, background-color, border; 196 transition-property: transform, background-color, border;
203 transition-duration: 0.18s; 197 transition-duration: 0.18s;
204 transition-timing-function: ease; 198 transition-timing-function: ease;
205 } 199 }
206 200
207 .expand:not(.pin) > .slider-knob > .slider-knob-inner { 201 .expand:not(.pin) > .slider-knob > .slider-knob-inner {
208 -webkit-transform: scale(1.5);
209 transform: scale(1.5); 202 transform: scale(1.5);
210 } 203 }
211 204
212 .ring > .slider-knob > .slider-knob-inner { 205 .ring > .slider-knob > .slider-knob-inner {
213 background-color: var(--paper-slider-knob-start-color, transparent); 206 background-color: var(--paper-slider-knob-start-color, transparent);
214 border: 2px solid var(--paper-slider-knob-start-border-color, --paper-gr ey-400); 207 border: 2px solid var(--paper-slider-knob-start-border-color, --paper-gr ey-400);
215 } 208 }
216 209
217 .slider-knob-inner::before { 210 .slider-knob-inner::before {
218 background-color: var(--paper-slider-pin-color, --google-blue-700); 211 background-color: var(--paper-slider-pin-color, --google-blue-700);
219 } 212 }
220 213
221 .pin > .slider-knob > .slider-knob-inner::before { 214 .pin > .slider-knob > .slider-knob-inner::before {
222 content: ""; 215 content: "";
223 position: absolute; 216 position: absolute;
224 top: 0; 217 top: 0;
225 left: 50%; 218 left: 50%;
226 margin-left: -13px; 219 margin-left: -13px;
227 width: 26px; 220 width: 26px;
228 height: 26px; 221 height: 26px;
229 border-radius: 50% 50% 50% 0; 222 border-radius: 50% 50% 50% 0;
230 223
231 -webkit-transform: rotate(-45deg) scale(0) translate(0);
232 transform: rotate(-45deg) scale(0) translate(0); 224 transform: rotate(-45deg) scale(0) translate(0);
233 } 225 }
234 226
235 .slider-knob-inner::before, 227 .slider-knob-inner::before,
236 .slider-knob-inner::after { 228 .slider-knob-inner::after {
237 transition: -webkit-transform .18s ease, background-color .18s ease;
238 transition: transform .18s ease, background-color .18s ease; 229 transition: transform .18s ease, background-color .18s ease;
239 } 230 }
240 231
241 .pin.ring > .slider-knob > .slider-knob-inner::before { 232 .pin.ring > .slider-knob > .slider-knob-inner::before {
242 background-color: var(--paper-slider-pin-start-color, --paper-grey-400); 233 background-color: var(--paper-slider-pin-start-color, --paper-grey-400);
243 } 234 }
244 235
245 .pin.expand > .slider-knob > .slider-knob-inner::before { 236 .pin.expand > .slider-knob > .slider-knob-inner::before {
246 -webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px);
247 transform: rotate(-45deg) scale(1) translate(17px, -17px); 237 transform: rotate(-45deg) scale(1) translate(17px, -17px);
248 } 238 }
249 239
250 .pin > .slider-knob > .slider-knob-inner::after { 240 .pin > .slider-knob > .slider-knob-inner::after {
251 content: attr(value); 241 content: attr(value);
252 position: absolute; 242 position: absolute;
253 top: 0; 243 top: 0;
254 left: 50%; 244 left: 50%;
255 margin-left: -16px; 245 margin-left: -16px;
256 width: 32px; 246 width: 32px;
257 height: 26px; 247 height: 26px;
258 text-align: center; 248 text-align: center;
259 color: var(--paper-slider-font-color, #fff); 249 color: var(--paper-slider-font-color, #fff);
260 font-size: 10px; 250 font-size: 10px;
261 251
262 -webkit-transform: scale(0) translate(0);
263 transform: scale(0) translate(0); 252 transform: scale(0) translate(0);
264 } 253 }
265 254
266 .pin.expand > .slider-knob > .slider-knob-inner::after { 255 .pin.expand > .slider-knob > .slider-knob-inner::after {
267 -webkit-transform: scale(1) translate(0, -17px);
268 transform: scale(1) translate(0, -17px); 256 transform: scale(1) translate(0, -17px);
269 } 257 }
270 258
271 /* paper-input */ 259 /* paper-input */
272 .slider-input { 260 .slider-input {
273 width: 50px; 261 width: 50px;
274 overflow: hidden; 262 overflow: hidden;
275 --paper-input-container-input: { 263 --paper-input-container-input: {
276 text-align: center; 264 text-align: center;
277 }; 265 };
278 @apply(--paper-slider-input); 266 @apply(--paper-slider-input);
279 } 267 }
280 268
281 /* disabled state */ 269 /* disabled state */
282 #sliderContainer.disabled { 270 #sliderContainer.disabled {
283 pointer-events: none; 271 pointer-events: none;
284 } 272 }
285 273
286 .disabled > .slider-knob > .slider-knob-inner { 274 .disabled > .slider-knob > .slider-knob-inner {
287 background-color: var(--paper-slider-disabled-knob-color, --paper-grey-4 00); 275 background-color: var(--paper-slider-disabled-knob-color, --paper-grey-4 00);
288 border: 2px solid var(--paper-slider-disabled-knob-color, --paper-grey-4 00); 276 border: 2px solid var(--paper-slider-disabled-knob-color, --paper-grey-4 00);
289 -webkit-transform: scale3d(0.75, 0.75, 1);
290 transform: scale3d(0.75, 0.75, 1); 277 transform: scale3d(0.75, 0.75, 1);
291 } 278 }
292 279
293 .disabled.ring > .slider-knob > .slider-knob-inner { 280 .disabled.ring > .slider-knob > .slider-knob-inner {
294 background-color: var(--paper-slider-knob-start-color, transparent); 281 background-color: var(--paper-slider-knob-start-color, transparent);
295 border: 2px solid var(--paper-slider-knob-start-border-color, --paper-gr ey-400); 282 border: 2px solid var(--paper-slider-knob-start-border-color, --paper-gr ey-400);
296 } 283 }
297 284
298 paper-ripple { 285 paper-ripple {
299 color: var(--paper-slider-knob-color, --google-blue-700); 286 color: var(--paper-slider-knob-color, --google-blue-700);
(...skipping 20 matching lines...) Expand all
320 </div> 307 </div>
321 308
322 <template is="dom-if" if="[[editable]]"> 309 <template is="dom-if" if="[[editable]]">
323 <paper-input id="input" type="number" step="[[step]]" min="[[min]]" max="[ [max]]" class="slider-input" disabled$="[[disabled]]" value="[[immediateValue]]" on-change="_changeValue" on-keydown="_inputKeyDown" no-label-float=""> 310 <paper-input id="input" type="number" step="[[step]]" min="[[min]]" max="[ [max]]" class="slider-input" disabled$="[[disabled]]" value="[[immediateValue]]" on-change="_changeValue" on-keydown="_inputKeyDown" no-label-float="">
324 </paper-input> 311 </paper-input>
325 </template> 312 </template>
326 </template> 313 </template>
327 314
328 </dom-module> 315 </dom-module>
329 <script src="paper-slider-extracted.js"></script></body></html> 316 <script src="paper-slider-extracted.js"></script></body></html>
OLDNEW
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-radio-button/paper-radio-button.html ('k') | third_party/polymer/v1_0/components-chromium/paper-spinner/paper-spinner-styles.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698