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

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 1468623004: Update Polymer from 1.2.1 -> 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@travis-yml
Patch Set: local-state.html Created 5 years 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
« components/proximity_auth/webui/resources/local-state.html ('K') | « third_party/polymer/v1_0/components-chromium/paper-slider/hero.svg ('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-flex-layout/iron-flex-layout.html"> 10 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
(...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after
58 @group Paper Elements 58 @group Paper Elements
59 @element paper-slider 59 @element paper-slider
60 @demo demo/index.html 60 @demo demo/index.html
61 @hero hero.svg 61 @hero hero.svg
62 --> 62 -->
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 display: inline-block; 68 @apply(--layout);
69 @apply(--layout-justified);
70 @apply(--layout-center);
69 width: 200px; 71 width: 200px;
70 cursor: default; 72 cursor: default;
71 -webkit-user-select: none; 73 -webkit-user-select: none;
72 -moz-user-select: none; 74 -moz-user-select: none;
73 -ms-user-select: none; 75 -ms-user-select: none;
74 user-select: none; 76 user-select: none;
75 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 77 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
76 --paper-progress-active-color: var(--paper-slider-active-color, --google -blue-700); 78 --paper-progress-active-color: var(--paper-slider-active-color, --google -blue-700);
77 --paper-progress-secondary-color: var(--paper-slider-secondary-color, -- google-blue-300); 79 --paper-progress-secondary-color: var(--paper-slider-secondary-color, -- google-blue-300);
78 --paper-progress-disabled-active-color: var(--paper-slider-disabled-acti ve-color, --google-grey-500); 80 --paper-progress-disabled-active-color: var(--paper-slider-disabled-acti ve-color, --google-grey-500);
79 --paper-progress-disabled-secondary-color: var(--paper-slider-disabled-s econdary-color, --google-grey-300); 81 --paper-progress-disabled-secondary-color: var(--paper-slider-disabled-s econdary-color, --google-grey-300);
80 } 82 }
81 83
82 /* focus shows the ripple */ 84 /* focus shows the ripple */
83 :host(:focus) { 85 :host(:focus) {
84 outline: none; 86 outline: none;
85 } 87 }
86 88
87 #sliderContainer { 89 #sliderContainer {
88 position: relative; 90 position: relative;
89 width: calc(100% - 32px); 91 width: 100%;
90 height: 32px; 92 height: calc(30px + var(--paper-slider-height, 2px));
93 margin-left: calc(15px + var(--paper-slider-height, 2px)/2);
94 margin-right: calc(15px + var(--paper-slider-height, 2px)/2);
91 } 95 }
92 96
93 #sliderContainer:focus { 97 #sliderContainer:focus {
94 outline: 0; 98 outline: 0;
95 } 99 }
96 100
97 #sliderContainer.editable { 101 #sliderContainer.editable {
98 float: left; 102 margin-top: 12px;
99 width: calc(100% - 72px); 103 margin-bottom: 12px;
100 margin: 12px 0;
101 } 104 }
102 105
103 .bar-container { 106 .bar-container {
104 position: absolute; 107 position: absolute;
105 top: 0; 108 top: 0;
106 left: 16px; 109 bottom: 0;
107 height: 100%; 110 left: 0;
108 width: 100%; 111 right: 0;
109 overflow: hidden; 112 overflow: hidden;
110 } 113 }
111 114
112 .ring > .bar-container { 115 .ring > .bar-container {
113 left: 20px; 116 left: calc(5px + var(--paper-slider-height, 2px)/2);
114 width: calc(100% - 4px);
115 transition: left 0.18s ease, width 0.18s ease; 117 transition: left 0.18s ease, width 0.18s ease;
116 } 118 }
117 119
118 .ring.expand:not(.pin) > .bar-container {
119 left: 30px;
120 width: calc(100% - 14px);
121 }
122
123 .ring.expand.dragging > .bar-container { 120 .ring.expand.dragging > .bar-container {
124 transition: none; 121 transition: none;
125 } 122 }
126 123
124 .ring.expand:not(.pin) > .bar-container {
125 left: calc(15px + var(--paper-slider-height, 2px)/2);
126 }
127
127 #sliderBar { 128 #sliderBar {
128 position: absolute; 129 padding: 15px 0;
129 top: 15px;
130 left: 0;
131 width: 100%; 130 width: 100%;
132 padding: 8px 0;
133 margin: -8px 0;
134 background-color: var(--paper-slider-bar-color, transparent); 131 background-color: var(--paper-slider-bar-color, transparent);
135 --paper-progress-height: var(--paper-slider-height, 2px); 132 --paper-progress-height: var(--paper-slider-height, 2px);
136 } 133 }
137 134
138 .ring #sliderBar { 135 .ring #sliderBar {
139 left: -4px; 136 margin-left: calc(-5px - var(--paper-slider-height, 2px)/2);
140 width: calc(100% + 4px); 137 width: calc(100% + 5px + var(--paper-slider-height, 2px)/2);
141 } 138 }
142
143 .ring.expand:not(.pin) #sliderBar { 139 .ring.expand:not(.pin) #sliderBar {
144 left: -14px; 140 margin-left: calc(-15px - var(--paper-slider-height, 2px)/2);
145 width: calc(100% + 14px); 141 width: calc(100% + 15px + var(--paper-slider-height, 2px)/2);
146 } 142 }
147 143
148 .slider-markers { 144 .slider-markers {
149 position: absolute; 145 position: absolute;
150 top: 15px; 146 top: calc(14px + var(--paper-slider-height,2px)/2);
151 left: 15px; 147 height: var(--paper-slider-height, 2px);
152 height: 2px; 148 left: 0;
153 width: calc(100% + 2px); 149 right: -1px;
154 box-sizing: border-box; 150 box-sizing: border-box;
155 pointer-events: none; 151 pointer-events: none;
152 @apply(--layout-horizontal);
156 } 153 }
157 154
155 .slider-marker {
156 @apply(--layout-flex);
157 }
158 .slider-markers::after, 158 .slider-markers::after,
159 .slider-marker::after { 159 .slider-marker::after {
160 content: ""; 160 content: "";
161 display: block; 161 display: block;
162 margin-left: -1px;
162 width: 2px; 163 width: 2px;
163 height: 2px; 164 height: 2px;
164 border-radius: 50%; 165 border-radius: 50%;
165 background-color: black; 166 background-color: black;
166 } 167 }
167 168
168 #sliderKnob { 169 #sliderKnob {
169 @apply(--layout-center-justified);
170 @apply(--layout-center);
171 @apply(--layout-horizontal);
172
173 position: absolute; 170 position: absolute;
174 left: 0; 171 left: 0;
175 top: 0; 172 top: 0;
176 width: 32px; 173 margin-left: calc(-15px - var(--paper-slider-height, 2px)/2);
177 height: 32px; 174 width: calc(30px + var(--paper-slider-height, 2px));
175 height: calc(30px + var(--paper-slider-height, 2px));
178 } 176 }
179 177
180 .transiting > #sliderKnob { 178 .transiting > #sliderKnob {
181 transition: left 0.08s ease; 179 transition: left 0.08s ease;
182 } 180 }
183 181
184 #sliderKnob:focus { 182 #sliderKnob:focus {
185 outline: none; 183 outline: none;
186 } 184 }
187 185
188 #sliderKnob.dragging { 186 #sliderKnob.dragging {
189 transition: none; 187 transition: none;
190 } 188 }
191 189
192 .snaps > #sliderKnob.dragging { 190 .snaps > #sliderKnob.dragging {
193 transition: -webkit-transform 0.08s ease; 191 transition: -webkit-transform 0.08s ease;
194 transition: transform 0.08s ease; 192 transition: transform 0.08s ease;
195 } 193 }
196 194
197 #sliderKnobInner { 195 #sliderKnobInner {
198 width: 12px; 196 margin: 10px;
199 height: 12px; 197 width: calc(100% - 20px);
198 height: calc(100% - 20px);
200 border-radius: 50%; 199 border-radius: 50%;
201 background-color: var(--paper-slider-knob-color, --google-blue-700); 200 background-color: var(--paper-slider-knob-color, --google-blue-700);
202 201
203 -moz-box-sizing: border-box; 202 -moz-box-sizing: border-box;
204 box-sizing: border-box; 203 box-sizing: border-box;
205 204
206 transition-property: height, width, background-color, border; 205 transition-property: margin, height, width, background-color, border;
207 transition-duration: 0.1s; 206 transition-duration: 0.1s;
208 transition-timing-function: ease; 207 transition-timing-function: ease;
209 } 208 }
210 209
211 .expand:not(.pin) > #sliderKnob > #sliderKnobInner { 210 .expand:not(.pin) > #sliderKnob > #sliderKnobInner {
211 margin: 0;
212 width: 100%; 212 width: 100%;
213 height: 100%; 213 height: 100%;
214 214
215 -webkit-transform: translateZ(0); 215 -webkit-transform: translateZ(0);
216 transform: translateZ(0); 216 transform: translateZ(0);
217 } 217 }
218 218
219 .ring > #sliderKnob > #sliderKnobInner { 219 .ring > #sliderKnob > #sliderKnobInner {
220 background-color: var(--paper-slider-knob-start-color, transparent); 220 background-color: var(--paper-slider-knob-start-color, transparent);
221 border: 2px solid var(--paper-slider-knob-start-border-color, #c8c8c8); 221 border: 2px solid var(--paper-slider-knob-start-border-color, #c8c8c8);
222 } 222 }
223 223
224 #sliderKnobInner::before { 224 #sliderKnobInner::before {
225 background-color: var(--paper-slider-pin-color, --google-blue-700); 225 background-color: var(--paper-slider-pin-color, --google-blue-700);
226 } 226 }
227 227
228 .pin > #sliderKnob > #sliderKnobInner::before { 228 .pin > #sliderKnob > #sliderKnobInner::before {
229 content: ""; 229 content: "";
230 position: absolute; 230 position: absolute;
231 top: 0; 231 top: 0;
232 left: 0; 232 left: 50%;
233 margin-left: -13px;
233 width: 26px; 234 width: 26px;
234 height: 26px; 235 height: 26px;
235 margin-left: 3px;
236 border-radius: 50% 50% 50% 0; 236 border-radius: 50% 50% 50% 0;
237 237
238 -webkit-transform: rotate(-45deg) scale(0) translate(0); 238 -webkit-transform: rotate(-45deg) scale(0) translate(0);
239 transform: rotate(-45deg) scale(0) translate(0); 239 transform: rotate(-45deg) scale(0) translate(0);
240 } 240 }
241 241
242 #sliderKnobInner::before, 242 #sliderKnobInner::before,
243 #sliderKnobInner::after { 243 #sliderKnobInner::after {
244 transition: -webkit-transform .2s ease, background-color .18s ease; 244 transition: -webkit-transform .2s ease, background-color .18s ease;
245 transition: transform .2s ease, background-color .18s ease; 245 transition: transform .2s ease, background-color .18s ease;
246 } 246 }
247 247
248 .pin.ring > #sliderKnob > #sliderKnobInner::before { 248 .pin.ring > #sliderKnob > #sliderKnobInner::before {
249 background-color: var(--paper-slider-pin-start-color, #c8c8c8); 249 background-color: var(--paper-slider-pin-start-color, #c8c8c8);
250 } 250 }
251 251
252 .pin.expand > #sliderKnob > #sliderKnobInner::before { 252 .pin.expand > #sliderKnob > #sliderKnobInner::before {
253 -webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px); 253 -webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px);
254 transform: rotate(-45deg) scale(1) translate(17px, -17px); 254 transform: rotate(-45deg) scale(1) translate(17px, -17px);
255 } 255 }
256 256
257 .pin > #sliderKnob > #sliderKnobInner::after { 257 .pin > #sliderKnob > #sliderKnobInner::after {
258 content: attr(value); 258 content: attr(value);
259 position: absolute; 259 position: absolute;
260 top: 0; 260 top: 0;
261 left: 0; 261 left: 50%;
262 margin-left: -16px;
262 width: 32px; 263 width: 32px;
263 height: 26px; 264 height: 26px;
264 text-align: center; 265 text-align: center;
265 color: var(--paper-slider-font-color, #fff); 266 color: var(--paper-slider-font-color, #fff);
266 font-size: 10px; 267 font-size: 10px;
267 268
268 -webkit-transform: scale(0) translate(0); 269 -webkit-transform: scale(0) translate(0);
269 transform: scale(0) translate(0); 270 transform: scale(0) translate(0);
270 } 271 }
271 272
272 .pin.expand > #sliderKnob > #sliderKnobInner::after { 273 .pin.expand > #sliderKnob > #sliderKnobInner::after {
273 -webkit-transform: scale(1) translate(0, -17px); 274 -webkit-transform: scale(1) translate(0, -17px);
274 transform: scale(1) translate(0, -17px); 275 transform: scale(1) translate(0, -17px);
275 } 276 }
276 277
277 /* paper-input */ 278 /* paper-input */
278 .slider-input { 279 .slider-input {
279 width: 50px; 280 width: 50px;
280 float: right;
281 overflow: hidden; 281 overflow: hidden;
282 --paper-input-container-input: { 282 --paper-input-container-input: {
283 text-align: center; 283 text-align: center;
284 }; 284 };
285 } 285 }
286 286
287 /* disabled state */ 287 /* disabled state */
288 #sliderContainer.disabled { 288 #sliderContainer.disabled {
289 pointer-events: none; 289 pointer-events: none;
290 } 290 }
291 291
292 .disabled > #sliderKnob {
293 top: 2px;
294 margin-left: calc(-13px - var(--paper-slider-height, 2px)/2);
295 width: calc(26px + var(--paper-slider-height, 2px));
296 height: calc(26px + var(--paper-slider-height, 2px));
297 }
298
292 .disabled > #sliderKnob > #sliderKnobInner { 299 .disabled > #sliderKnob > #sliderKnobInner {
293 width: 8px;
294 height: 8px;
295 background-color: var(--paper-slider-disabled-knob-color, --google-grey- 500); 300 background-color: var(--paper-slider-disabled-knob-color, --google-grey- 500);
296 } 301 }
297 302
298 .disabled.ring > #sliderKnob > #sliderKnobInner { 303 .disabled.ring > #sliderKnob > #sliderKnobInner {
299 background-color: transparent; 304 background-color: transparent;
300 } 305 }
301 306
302 paper-ripple { 307 paper-ripple {
303 color: var(--paper-slider-knob-color, --google-blue-700); 308 color: var(--paper-slider-knob-color, --google-blue-700);
304 } 309 }
305 310
306 </style> 311 </style>
307 <div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, imm ediateValue, min, expand, dragging, transiting, editable)]]"> 312 <div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, imm ediateValue, min, expand, dragging, transiting, editable)]]">
308 313
309 <div class="bar-container"> 314 <div class="bar-container">
310 <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"> 315 <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">
311 </paper-progress> 316 </paper-progress>
312 </div> 317 </div>
313 318
314 <template is="dom-if" if="[[snaps]]"> 319 <template is="dom-if" if="[[snaps]]">
315 <div class="slider-markers horizontal layout"> 320 <div class="slider-markers">
316 <template is="dom-repeat" items="[[markers]]"> 321 <template is="dom-repeat" items="[[markers]]">
317 <div class="slider-marker flex"></div> 322 <div class="slider-marker"></div>
318 </template> 323 </template>
319 </div> 324 </div>
320 </template> 325 </template>
321 326
322 <div id="sliderKnob" class="center-justified center horizontal layout" on- down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobT ransitionEnd"> 327 <div id="sliderKnob" on-down="_knobdown" on-up="_resetKnob" on-track="_onT rack" on-transitionend="_knobTransitionEnd">
323 <div id="sliderKnobInner" value$="[[immediateValue]]"></div> 328 <div id="sliderKnobInner" value$="[[immediateValue]]"></div>
324 </div> 329 </div>
325 </div> 330 </div>
326 <template is="dom-if" if="[[editable]]"> 331 <template is="dom-if" if="[[editable]]">
327 <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=""> 332 <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="">
328 </paper-input> 333 </paper-input>
329 </template> 334 </template>
330 </template> 335 </template>
331 </dom-module> 336 </dom-module>
332 337
333 <script src="paper-slider-extracted.js"></script></body></html> 338 <script src="paper-slider-extracted.js"></script></body></html>
OLDNEW
« components/proximity_auth/webui/resources/local-state.html ('K') | « third_party/polymer/v1_0/components-chromium/paper-slider/hero.svg ('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