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

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 2646943003: Polymer: roll paper-slider, 1.0.11 -> 1.0.13 (Closed)
Patch Set: Rebase Created 3 years, 11 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-slider/bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider-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) 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 30 matching lines...) Expand all
41 Custom property | Description | Default 41 Custom property | Description | Default
42 ----------------|-------------|---------- 42 ----------------|-------------|----------
43 `--paper-slider-container-color` | The background color of the bar | `--paper-gr ey-400` 43 `--paper-slider-container-color` | The background color of the bar | `--paper-gr ey-400`
44 `--paper-slider-bar-color` | The background color of the slider | `transparent` 44 `--paper-slider-bar-color` | The background color of the slider | `transparent`
45 `--paper-slider-active-color` | The progress bar color | `--google-blue-700` 45 `--paper-slider-active-color` | The progress bar color | `--google-blue-700`
46 `--paper-slider-secondary-color` | The secondary progress bar color | `--google- blue-300` 46 `--paper-slider-secondary-color` | The secondary progress bar color | `--google- blue-300`
47 `--paper-slider-knob-color` | The knob color | `--google-blue-700` 47 `--paper-slider-knob-color` | The knob color | `--google-blue-700`
48 `--paper-slider-disabled-knob-color` | The disabled knob color | `--paper-grey-4 00` 48 `--paper-slider-disabled-knob-color` | The disabled knob color | `--paper-grey-4 00`
49 `--paper-slider-pin-color` | The pin color | `--google-blue-700` 49 `--paper-slider-pin-color` | The pin color | `--google-blue-700`
50 `--paper-slider-font-color` | The pin's text color | `#fff` 50 `--paper-slider-font-color` | The pin's text color | `#fff`
51 `--paper-slider-markers-color` | The snaps markers color | `#000`
51 `--paper-slider-disabled-active-color` | The disabled progress bar color | `--pa per-grey-400` 52 `--paper-slider-disabled-active-color` | The disabled progress bar color | `--pa per-grey-400`
52 `--paper-slider-disabled-secondary-color` | The disabled secondary progress bar color | `--paper-grey-400` 53 `--paper-slider-disabled-secondary-color` | The disabled secondary progress bar color | `--paper-grey-400`
53 `--paper-slider-knob-start-color` | The fill color of the knob at the far left | `transparent` 54 `--paper-slider-knob-start-color` | The fill color of the knob at the far left | `transparent`
54 `--paper-slider-knob-start-border-color` | The border color of the knob at the f ar left | `--paper-grey-400` 55 `--paper-slider-knob-start-border-color` | The border color of the knob at the f ar left | `--paper-grey-400`
55 `--paper-slider-pin-start-color` | The color of the pin at the far left | `--pap er-grey-400` 56 `--paper-slider-pin-start-color` | The color of the pin at the far left | `--pap er-grey-400`
56 `--paper-slider-height` | Height of the progress bar | `2px` 57 `--paper-slider-height` | Height of the progress bar | `2px`
57 `--paper-slider-input` | Mixin applied to the input in editable mode | `{}` 58 `--paper-slider-input` | Mixin applied to the input in editable mode | `{}`
58 59
59 @group Paper Elements 60 @group Paper Elements
60 @element paper-slider 61 @element paper-slider
(...skipping 12 matching lines...) Expand all
73 cursor: default; 74 cursor: default;
74 -webkit-user-select: none; 75 -webkit-user-select: none;
75 -moz-user-select: none; 76 -moz-user-select: none;
76 -ms-user-select: none; 77 -ms-user-select: none;
77 user-select: none; 78 user-select: none;
78 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 79 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
79 --paper-progress-active-color: var(--paper-slider-active-color, --google -blue-700); 80 --paper-progress-active-color: var(--paper-slider-active-color, --google -blue-700);
80 --paper-progress-secondary-color: var(--paper-slider-secondary-color, -- google-blue-300); 81 --paper-progress-secondary-color: var(--paper-slider-secondary-color, -- google-blue-300);
81 --paper-progress-disabled-active-color: var(--paper-slider-disabled-acti ve-color, --paper-grey-400); 82 --paper-progress-disabled-active-color: var(--paper-slider-disabled-acti ve-color, --paper-grey-400);
82 --paper-progress-disabled-secondary-color: var(--paper-slider-disabled-s econdary-color, --paper-grey-400); 83 --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);
83 } 85 }
84 86
85 /* focus shows the ripple */ 87 /* focus shows the ripple */
86 :host(:focus) { 88 :host(:focus) {
87 outline: none; 89 outline: none;
88 } 90 }
89 91
90 #sliderContainer { 92 #sliderContainer {
91 position: relative; 93 position: relative;
92 width: 100%; 94 width: 100%;
93 height: calc(30px + var(--paper-slider-height, 2px)); 95 height: calc(30px + var(--calculated-paper-slider-height));
94 margin-left: calc(15px + var(--paper-slider-height, 2px)/2); 96 margin-left: calc(15px + var(--calculated-paper-slider-height)/2);
95 margin-right: calc(15px + var(--paper-slider-height, 2px)/2); 97 margin-right: calc(15px + var(--calculated-paper-slider-height)/2);
96 } 98 }
97 99
98 #sliderContainer:focus { 100 #sliderContainer:focus {
99 outline: 0; 101 outline: 0;
100 } 102 }
101 103
102 #sliderContainer.editable { 104 #sliderContainer.editable {
103 margin-top: 12px; 105 margin-top: 12px;
104 margin-bottom: 12px; 106 margin-bottom: 12px;
105 } 107 }
106 108
107 .bar-container { 109 .bar-container {
108 position: absolute; 110 position: absolute;
109 top: 0; 111 top: 0;
110 bottom: 0; 112 bottom: 0;
111 left: 0; 113 left: 0;
112 right: 0; 114 right: 0;
113 overflow: hidden; 115 overflow: hidden;
114 } 116 }
115 117
116 .ring > .bar-container { 118 .ring > .bar-container {
117 left: calc(5px + var(--paper-slider-height, 2px)/2); 119 left: calc(5px + var(--calculated-paper-slider-height)/2);
118 transition: left 0.18s ease; 120 transition: left 0.18s ease;
119 } 121 }
120 122
121 .ring.expand.dragging > .bar-container { 123 .ring.expand.dragging > .bar-container {
122 transition: none; 124 transition: none;
123 } 125 }
124 126
125 .ring.expand:not(.pin) > .bar-container { 127 .ring.expand:not(.pin) > .bar-container {
126 left: calc(8px + var(--paper-slider-height, 2px)/2); 128 left: calc(8px + var(--calculated-paper-slider-height)/2);
127 } 129 }
128 130
129 #sliderBar { 131 #sliderBar {
130 padding: 15px 0; 132 padding: 15px 0;
131 width: 100%; 133 width: 100%;
132 background-color: var(--paper-slider-bar-color, transparent); 134 background-color: var(--paper-slider-bar-color, transparent);
133 --paper-progress-container-color: var(--paper-slider-container-color, -- paper-grey-400); 135 --paper-progress-container-color: var(--paper-slider-container-color, -- paper-grey-400);
134 --paper-progress-height: var(--paper-slider-height, 2px); 136 --paper-progress-height: var(--calculated-paper-slider-height);
135 } 137 }
136 138
137 .slider-markers { 139 .slider-markers {
138 position: absolute; 140 position: absolute;
139 top: calc(14px + var(--paper-slider-height,2px)/2); 141 top: calc(14px + var(--paper-slider-height,2px)/2);
140 height: var(--paper-slider-height, 2px); 142 height: var(--calculated-paper-slider-height);
141 left: 0; 143 left: 0;
142 right: -1px; 144 right: -1px;
143 box-sizing: border-box; 145 box-sizing: border-box;
144 pointer-events: none; 146 pointer-events: none;
145 @apply(--layout-horizontal); 147 @apply(--layout-horizontal);
146 } 148 }
147 149
148 .slider-marker { 150 .slider-marker {
149 @apply(--layout-flex); 151 @apply(--layout-flex);
150 } 152 }
151 .slider-markers::after, 153 .slider-markers::after,
152 .slider-marker::after { 154 .slider-marker::after {
153 content: ""; 155 content: "";
154 display: block; 156 display: block;
155 margin-left: -1px; 157 margin-left: -1px;
156 width: 2px; 158 width: 2px;
157 height: 2px; 159 height: var(--calculated-paper-slider-height);
158 border-radius: 50%; 160 border-radius: 50%;
159 background-color: black; 161 background-color: var(--paper-slider-markers-color, #000);
160 } 162 }
161 163
162 #sliderKnob { 164 .slider-knob {
163 position: absolute; 165 position: absolute;
164 left: 0; 166 left: 0;
165 top: 0; 167 top: 0;
166 margin-left: calc(-15px - var(--paper-slider-height, 2px)/2); 168 margin-left: calc(-15px - var(--calculated-paper-slider-height)/2);
167 width: calc(30px + var(--paper-slider-height, 2px)); 169 width: calc(30px + var(--calculated-paper-slider-height));
168 height: calc(30px + var(--paper-slider-height, 2px)); 170 height: calc(30px + var(--calculated-paper-slider-height));
169 } 171 }
170 172
171 .transiting > #sliderKnob { 173 .transiting > .slider-knob {
172 transition: left 0.08s ease; 174 transition: left 0.08s ease;
173 } 175 }
174 176
175 #sliderKnob:focus { 177 .slider-knob:focus {
176 outline: none; 178 outline: none;
177 } 179 }
178 180
179 #sliderKnob.dragging { 181 .slider-knob.dragging {
180 transition: none; 182 transition: none;
181 } 183 }
182 184
183 .snaps > #sliderKnob.dragging { 185 .snaps > .slider-knob.dragging {
184 transition: -webkit-transform 0.08s ease; 186 transition: -webkit-transform 0.08s ease;
185 transition: transform 0.08s ease; 187 transition: transform 0.08s ease;
186 } 188 }
187 189
188 #sliderKnobInner { 190 .slider-knob-inner {
189 margin: 10px; 191 margin: 10px;
190 width: calc(100% - 20px); 192 width: calc(100% - 20px);
191 height: calc(100% - 20px); 193 height: calc(100% - 20px);
192 background-color: var(--paper-slider-knob-color, --google-blue-700); 194 background-color: var(--paper-slider-knob-color, --google-blue-700);
193 border: 2px solid var(--paper-slider-knob-color, --google-blue-700); 195 border: 2px solid var(--paper-slider-knob-color, --google-blue-700);
194 border-radius: 50%; 196 border-radius: 50%;
195 197
196 -moz-box-sizing: border-box; 198 -moz-box-sizing: border-box;
197 box-sizing: border-box; 199 box-sizing: border-box;
198 200
199 transition-property: -webkit-transform, background-color, border; 201 transition-property: -webkit-transform, background-color, border;
200 transition-property: transform, background-color, border; 202 transition-property: transform, background-color, border;
201 transition-duration: 0.18s; 203 transition-duration: 0.18s;
202 transition-timing-function: ease; 204 transition-timing-function: ease;
203 } 205 }
204 206
205 .expand:not(.pin) > #sliderKnob > #sliderKnobInner { 207 .expand:not(.pin) > .slider-knob > .slider-knob-inner {
206 -webkit-transform: scale(1.5); 208 -webkit-transform: scale(1.5);
207 transform: scale(1.5); 209 transform: scale(1.5);
208 } 210 }
209 211
210 .ring > #sliderKnob > #sliderKnobInner { 212 .ring > .slider-knob > .slider-knob-inner {
211 background-color: var(--paper-slider-knob-start-color, transparent); 213 background-color: var(--paper-slider-knob-start-color, transparent);
212 border: 2px solid var(--paper-slider-knob-start-border-color, --paper-gr ey-400); 214 border: 2px solid var(--paper-slider-knob-start-border-color, --paper-gr ey-400);
213 } 215 }
214 216
215 #sliderKnobInner::before { 217 .slider-knob-inner::before {
216 background-color: var(--paper-slider-pin-color, --google-blue-700); 218 background-color: var(--paper-slider-pin-color, --google-blue-700);
217 } 219 }
218 220
219 .pin > #sliderKnob > #sliderKnobInner::before { 221 .pin > .slider-knob > .slider-knob-inner::before {
220 content: ""; 222 content: "";
221 position: absolute; 223 position: absolute;
222 top: 0; 224 top: 0;
223 left: 50%; 225 left: 50%;
224 margin-left: -13px; 226 margin-left: -13px;
225 width: 26px; 227 width: 26px;
226 height: 26px; 228 height: 26px;
227 border-radius: 50% 50% 50% 0; 229 border-radius: 50% 50% 50% 0;
228 230
229 -webkit-transform: rotate(-45deg) scale(0) translate(0); 231 -webkit-transform: rotate(-45deg) scale(0) translate(0);
230 transform: rotate(-45deg) scale(0) translate(0); 232 transform: rotate(-45deg) scale(0) translate(0);
231 } 233 }
232 234
233 #sliderKnobInner::before, 235 .slider-knob-inner::before,
234 #sliderKnobInner::after { 236 .slider-knob-inner::after {
235 transition: -webkit-transform .18s ease, background-color .18s ease; 237 transition: -webkit-transform .18s ease, background-color .18s ease;
236 transition: transform .18s ease, background-color .18s ease; 238 transition: transform .18s ease, background-color .18s ease;
237 } 239 }
238 240
239 .pin.ring > #sliderKnob > #sliderKnobInner::before { 241 .pin.ring > .slider-knob > .slider-knob-inner::before {
240 background-color: var(--paper-slider-pin-start-color, --paper-grey-400); 242 background-color: var(--paper-slider-pin-start-color, --paper-grey-400);
241 } 243 }
242 244
243 .pin.expand > #sliderKnob > #sliderKnobInner::before { 245 .pin.expand > .slider-knob > .slider-knob-inner::before {
244 -webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px); 246 -webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px);
245 transform: rotate(-45deg) scale(1) translate(17px, -17px); 247 transform: rotate(-45deg) scale(1) translate(17px, -17px);
246 } 248 }
247 249
248 .pin > #sliderKnob > #sliderKnobInner::after { 250 .pin > .slider-knob > .slider-knob-inner::after {
249 content: attr(value); 251 content: attr(value);
250 position: absolute; 252 position: absolute;
251 top: 0; 253 top: 0;
252 left: 50%; 254 left: 50%;
253 margin-left: -16px; 255 margin-left: -16px;
254 width: 32px; 256 width: 32px;
255 height: 26px; 257 height: 26px;
256 text-align: center; 258 text-align: center;
257 color: var(--paper-slider-font-color, #fff); 259 color: var(--paper-slider-font-color, #fff);
258 font-size: 10px; 260 font-size: 10px;
259 261
260 -webkit-transform: scale(0) translate(0); 262 -webkit-transform: scale(0) translate(0);
261 transform: scale(0) translate(0); 263 transform: scale(0) translate(0);
262 } 264 }
263 265
264 .pin.expand > #sliderKnob > #sliderKnobInner::after { 266 .pin.expand > .slider-knob > .slider-knob-inner::after {
265 -webkit-transform: scale(1) translate(0, -17px); 267 -webkit-transform: scale(1) translate(0, -17px);
266 transform: scale(1) translate(0, -17px); 268 transform: scale(1) translate(0, -17px);
267 } 269 }
268 270
269 /* paper-input */ 271 /* paper-input */
270 .slider-input { 272 .slider-input {
271 width: 50px; 273 width: 50px;
272 overflow: hidden; 274 overflow: hidden;
273 --paper-input-container-input: { 275 --paper-input-container-input: {
274 text-align: center; 276 text-align: center;
275 }; 277 };
276 @apply(--paper-slider-input); 278 @apply(--paper-slider-input);
277 } 279 }
278 280
279 /* disabled state */ 281 /* disabled state */
280 #sliderContainer.disabled { 282 #sliderContainer.disabled {
281 pointer-events: none; 283 pointer-events: none;
282 } 284 }
283 285
284 .disabled > #sliderKnob > #sliderKnobInner { 286 .disabled > .slider-knob > .slider-knob-inner {
285 background-color: var(--paper-slider-disabled-knob-color, --paper-grey-4 00); 287 background-color: var(--paper-slider-disabled-knob-color, --paper-grey-4 00);
286 border: 2px solid var(--paper-slider-disabled-knob-color, --paper-grey-4 00); 288 border: 2px solid var(--paper-slider-disabled-knob-color, --paper-grey-4 00);
287 -webkit-transform: scale3d(0.75, 0.75, 1); 289 -webkit-transform: scale3d(0.75, 0.75, 1);
288 transform: scale3d(0.75, 0.75, 1); 290 transform: scale3d(0.75, 0.75, 1);
289 } 291 }
290 292
291 .disabled.ring > #sliderKnob > #sliderKnobInner { 293 .disabled.ring > .slider-knob > .slider-knob-inner {
292 background-color: var(--paper-slider-knob-start-color, transparent); 294 background-color: var(--paper-slider-knob-start-color, transparent);
293 border: 2px solid var(--paper-slider-knob-start-border-color, --paper-gr ey-400); 295 border: 2px solid var(--paper-slider-knob-start-border-color, --paper-gr ey-400);
294 } 296 }
295 297
296 paper-ripple { 298 paper-ripple {
297 color: var(--paper-slider-knob-color, --google-blue-700); 299 color: var(--paper-slider-knob-color, --google-blue-700);
298 } 300 }
299 </style> 301 </style>
300 302
301 <div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, imm ediateValue, min, expand, dragging, transiting, editable)]]"> 303 <div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, imm ediateValue, min, expand, dragging, transiting, editable)]]">
302 <div class="bar-container"> 304 <div class="bar-container">
303 <paper-progress disabled$="[[disabled]]" id="sliderBar" aria-hidden="tru e" min="[[min]]" max="[[max]]" step="[[step]]" value="[[immediateValue]]" second ary-progress="[[secondaryProgress]]" on-down="_bardown" on-up="_resetKnob" on-tr ack="_onTrack"> 305 <paper-progress disabled$="[[disabled]]" id="sliderBar" aria-hidden="tru e" min="[[min]]" max="[[max]]" step="[[step]]" value="[[immediateValue]]" second ary-progress="[[secondaryProgress]]" on-down="_bardown" on-up="_resetKnob" on-tr ack="_onTrack">
304 </paper-progress> 306 </paper-progress>
305 </div> 307 </div>
306 308
307 <template is="dom-if" if="[[snaps]]"> 309 <template is="dom-if" if="[[snaps]]">
308 <div class="slider-markers"> 310 <div class="slider-markers">
309 <template is="dom-repeat" items="[[markers]]"> 311 <template is="dom-repeat" items="[[markers]]">
310 <div class="slider-marker"></div> 312 <div class="slider-marker"></div>
311 </template> 313 </template>
312 </div> 314 </div>
313 </template> 315 </template>
314 316
315 <div id="sliderKnob" on-down="_knobdown" on-up="_resetKnob" on-track="_onT rack" on-transitionend="_knobTransitionEnd"> 317 <div id="sliderKnob" class="slider-knob" on-down="_knobdown" on-up="_reset Knob" on-track="_onTrack" on-transitionend="_knobTransitionEnd">
316 <div id="sliderKnobInner" value$="[[immediateValue]]"></div> 318 <div class="slider-knob-inner" value$="[[immediateValue]]"></div>
317 </div> 319 </div>
318 </div> 320 </div>
319 321
320 <template is="dom-if" if="[[editable]]"> 322 <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=""> 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="">
322 </paper-input> 324 </paper-input>
323 </template> 325 </template>
324 </template> 326 </template>
325 327
326 </dom-module> 328 </dom-module>
327 <script src="paper-slider-extracted.js"></script></body></html> 329 <script src="paper-slider-extracted.js"></script></body></html>
OLDNEW
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-slider/bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider-extracted.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698