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

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 1401633002: Update Polymer from 1.1.4 -> 1.1.5 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: dzhioev@ review 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
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider.css ('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="../paper-styles/paper-styles.html"> 10 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
11 <link rel="import" href="../paper-styles/color.html">
11 <link rel="import" href="../paper-progress/paper-progress.html"> 12 <link rel="import" href="../paper-progress/paper-progress.html">
12 <link rel="import" href="../paper-input/paper-input.html"> 13 <link rel="import" href="../paper-input/paper-input.html">
13 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html"> 14 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
14 <link rel="import" href="../paper-ripple/paper-ripple.html"> 15 <link rel="import" href="../paper-ripple/paper-ripple.html">
15 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html "> 16 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html ">
16 <link rel="import" href="../iron-range-behavior/iron-range-behavior.html"> 17 <link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
17 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavio r.html"> 18 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavio r.html">
18 19
19 <!-- 20 <!--
21 Material design: [Sliders](https://www.google.com/design/spec/components/sliders .html)
22
20 `paper-slider` allows user to select a value from a range of values by 23 `paper-slider` allows user to select a value from a range of values by
21 moving the slider thumb. The interactive nature of the slider makes it a 24 moving the slider thumb. The interactive nature of the slider makes it a
22 great choice for settings that reflect intensity levels, such as volume, 25 great choice for settings that reflect intensity levels, such as volume,
23 brightness, or color saturation. 26 brightness, or color saturation.
24 27
25 Example: 28 Example:
26 29
27 <paper-slider></paper-slider> 30 <paper-slider></paper-slider>
28 31
29 Use `min` and `max` to specify the slider range. Default is 0 to 100. 32 Use `min` and `max` to specify the slider range. Default is 0 to 100.
(...skipping 22 matching lines...) Expand all
52 `--paper-slider-pin-start-color` | The color of the pin at the far left | `#c8c8 c8` 55 `--paper-slider-pin-start-color` | The color of the pin at the far left | `#c8c8 c8`
53 `--paper-slider-height` | Height of the progress bar | `2px` 56 `--paper-slider-height` | Height of the progress bar | `2px`
54 57
55 @group Paper Elements 58 @group Paper Elements
56 @element paper-slider 59 @element paper-slider
57 @demo demo/index.html 60 @demo demo/index.html
58 @hero hero.svg 61 @hero hero.svg
59 --> 62 -->
60 63
61 </head><body><dom-module id="paper-slider"> 64 </head><body><dom-module id="paper-slider">
62 65 <template strip-whitespace="">
63 <link rel="import" type="css" href="paper-slider.css"> 66 <style>
64 67 :host {
65 <template> 68 display: inline-block;
69 width: 200px;
70 cursor: default;
71 -webkit-user-select: none;
72 -moz-user-select: none;
73 -ms-user-select: none;
74 user-select: none;
75 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
76 --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);
78 --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);
80 }
81
82 /* focus shows the ripple */
83 :host(:focus) {
84 outline: none;
85 }
86
87 #sliderContainer {
88 position: relative;
89 width: calc(100% - 32px);
90 height: 32px;
91 }
92
93 #sliderContainer:focus {
94 outline: 0;
95 }
96
97 #sliderContainer.editable {
98 float: left;
99 width: calc(100% - 72px);
100 margin: 12px 0;
101 }
102
103 .bar-container {
104 position: absolute;
105 top: 0;
106 left: 16px;
107 height: 100%;
108 width: 100%;
109 overflow: hidden;
110 }
111
112 .ring > .bar-container {
113 left: 20px;
114 width: calc(100% - 4px);
115 transition: left 0.18s ease, width 0.18s ease;
116 }
117
118 .ring.expand:not(.pin) > .bar-container {
119 left: 30px;
120 width: calc(100% - 14px);
121 }
122
123 .ring.expand.dragging > .bar-container {
124 transition: none;
125 }
126
127 #sliderBar {
128 position: absolute;
129 top: 15px;
130 left: 0;
131 width: 100%;
132 padding: 8px 0;
133 margin: -8px 0;
134 background-color: var(--paper-slider-bar-color, transparent);
135 --paper-progress-height: var(--paper-slider-height, 2px);
136 }
137
138 .ring #sliderBar {
139 left: -4px;
140 width: calc(100% + 4px);
141 }
142
143 .ring.expand:not(.pin) #sliderBar {
144 left: -14px;
145 width: calc(100% + 14px);
146 }
147
148 .slider-markers {
149 position: absolute;
150 top: 15px;
151 left: 15px;
152 height: 2px;
153 width: calc(100% + 2px);
154 box-sizing: border-box;
155 pointer-events: none;
156 }
157
158 .slider-markers::after,
159 .slider-marker::after {
160 content: "";
161 display: block;
162 width: 2px;
163 height: 2px;
164 border-radius: 50%;
165 background-color: black;
166 }
167
168 #sliderKnob {
169 @apply(--layout-center-justified);
170 @apply(--layout-center);
171 @apply(--layout-horizontal);
172
173 position: absolute;
174 left: 0;
175 top: 0;
176 width: 32px;
177 height: 32px;
178 }
179
180 .transiting > #sliderKnob {
181 transition: left 0.08s ease;
182 }
183
184 #sliderKnob:focus {
185 outline: none;
186 }
187
188 #sliderKnob.dragging {
189 transition: none;
190 }
191
192 .snaps > #sliderKnob.dragging {
193 transition: -webkit-transform 0.08s ease;
194 transition: transform 0.08s ease;
195 }
196
197 #sliderKnobInner {
198 width: 12px;
199 height: 12px;
200 border-radius: 50%;
201 background-color: var(--paper-slider-knob-color, --google-blue-700);
202
203 -moz-box-sizing: border-box;
204 box-sizing: border-box;
205
206 transition-property: height, width, background-color, border;
207 transition-duration: 0.1s;
208 transition-timing-function: ease;
209 }
210
211 .expand:not(.pin) > #sliderKnob > #sliderKnobInner {
212 width: 100%;
213 height: 100%;
214
215 -webkit-transform: translateZ(0);
216 transform: translateZ(0);
217 }
218
219 .ring > #sliderKnob > #sliderKnobInner {
220 background-color: var(--paper-slider-knob-start-color, transparent);
221 border: 2px solid var(--paper-slider-knob-start-border-color, #c8c8c8);
222 }
223
224 #sliderKnobInner::before {
225 background-color: var(--paper-slider-pin-color, --google-blue-700);
226 }
227
228 .pin > #sliderKnob > #sliderKnobInner::before {
229 content: "";
230 position: absolute;
231 top: 0;
232 left: 0;
233 width: 26px;
234 height: 26px;
235 margin-left: 3px;
236 border-radius: 50% 50% 50% 0;
237
238 -webkit-transform: rotate(-45deg) scale(0) translate(0);
239 transform: rotate(-45deg) scale(0) translate(0);
240 }
241
242 #sliderKnobInner::before,
243 #sliderKnobInner::after {
244 transition: -webkit-transform .2s ease, background-color .18s ease;
245 transition: transform .2s ease, background-color .18s ease;
246 }
247
248 .pin.ring > #sliderKnob > #sliderKnobInner::before {
249 background-color: var(--paper-slider-pin-start-color, #c8c8c8);
250 }
251
252 .pin.expand > #sliderKnob > #sliderKnobInner::before {
253 -webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px);
254 transform: rotate(-45deg) scale(1) translate(17px, -17px);
255 }
256
257 .pin > #sliderKnob > #sliderKnobInner::after {
258 content: attr(value);
259 position: absolute;
260 top: 0;
261 left: 0;
262 width: 32px;
263 height: 26px;
264 text-align: center;
265 color: var(--paper-slider-font-color, #fff);
266 font-size: 10px;
267
268 -webkit-transform: scale(0) translate(0);
269 transform: scale(0) translate(0);
270 }
271
272 .pin.expand > #sliderKnob > #sliderKnobInner::after {
273 -webkit-transform: scale(1) translate(0, -17px);
274 transform: scale(1) translate(0, -17px);
275 }
276
277 /* paper-input */
278 .slider-input {
279 width: 50px;
280 float: right;
281 overflow: hidden;
282 --paper-input-container-input: {
283 text-align: center;
284 };
285 }
286
287 /* disabled state */
288 #sliderContainer.disabled {
289 pointer-events: none;
290 }
291
292 .disabled > #sliderKnob > #sliderKnobInner {
293 width: 8px;
294 height: 8px;
295 background-color: var(--paper-slider-disabled-knob-color, --google-grey- 500);
296 }
297
298 .disabled.ring > #sliderKnob > #sliderKnobInner {
299 background-color: transparent;
300 }
301
302 paper-ripple {
303 color: var(--paper-slider-knob-color, --google-blue-700);
304 }
305
306 </style>
66 <div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, imm ediateValue, min, expand, dragging, transiting, editable)]]"> 307 <div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, imm ediateValue, min, expand, dragging, transiting, editable)]]">
67 308
68 <div class="bar-container"> 309 <div class="bar-container">
69 <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"> 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">
70 </paper-progress> 311 </paper-progress>
71 </div> 312 </div>
72 313
73 <template is="dom-if" if="[[snaps]]"> 314 <template is="dom-if" if="[[snaps]]">
74 <div class="slider-markers horizontal layout"> 315 <div class="slider-markers horizontal layout">
75 <template is="dom-repeat" items="[[markers]]"> 316 <template is="dom-repeat" items="[[markers]]">
76 <div class="slider-marker flex"></div> 317 <div class="slider-marker flex"></div>
77 </template> 318 </template>
78 </div> 319 </div>
79 </template> 320 </template>
80 321
81 <div id="sliderKnob" class="center-justified center horizontal layout" on- down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobT ransitionEnd"> 322 <div id="sliderKnob" class="center-justified center horizontal layout" on- down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobT ransitionEnd">
82 <paper-ripple center="" id="ink" class="circle" hidden$="[[!receivedFo cusFromKeyboard]]">
83 </paper-ripple>
84 <div id="sliderKnobInner" value$="[[immediateValue]]"></div> 323 <div id="sliderKnobInner" value$="[[immediateValue]]"></div>
85 </div> 324 </div>
86 </div> 325 </div>
87
88 <template is="dom-if" if="[[editable]]"> 326 <template is="dom-if" if="[[editable]]">
89 <paper-input id="input" class="slider-input" disabled$="[[disabled]]" on-c hange="_inputChange" value="[[_fixForInput(immediateValue)]]"> 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="">
90 </paper-input> 328 </paper-input>
91 </template> 329 </template>
92 </template> 330 </template>
93
94 </dom-module> 331 </dom-module>
95 332
96 <script src="paper-slider-extracted.js"></script></body></html> 333 <script src="paper-slider-extracted.js"></script></body></html>
OLDNEW
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider.css ('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