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

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

Powered by Google App Engine
This is Rietveld 408576698