third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider.html - Issue 1984963002: Roll Polymer elements

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

Issue 1984963002: Roll Polymer elements (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 4 years, 6 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') | Hide Comments ('s')

OLD	NEW
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 22 matching lines...) Expand all Loading...
33 Example:	33 Example:

34	34

35 <paper-slider min="10" max="200" value="110"></paper-slider>	35 <paper-slider min="10" max="200" value="110"></paper-slider>

36	36

37 ### Styling	37 ### Styling

38	38

39 The following custom properties and mixins are available for styling:	39 The following custom properties and mixins are available for styling:

40	40

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-bar-color` \| The background color of the slider \| `transparent`	44 `--paper-slider-bar-color` \| The background color of the slider \| `transparent`

44 `--paper-slider-active-color` \| The progress bar color \| `--google-blue-700`	45 `--paper-slider-active-color` \| The progress bar color \| `--google-blue-700`

45 `--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`

46 `--paper-slider-knob-color` \| The knob color \| `--google-blue-700`	47 `--paper-slider-knob-color` \| The knob color \| `--google-blue-700`

47 `--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`

48 `--paper-slider-pin-color` \| The pin color \| `--google-blue-700`	49 `--paper-slider-pin-color` \| The pin color \| `--google-blue-700`

49 `--paper-slider-font-color` \| The pin's text color \| `#fff`	50 `--paper-slider-font-color` \| The pin's text color \| `#fff`

50 `--paper-slider-disabled-active-color` \| The disabled progress bar color \| `--pa per-grey-400`	51 `--paper-slider-disabled-active-color` \| The disabled progress bar color \| `--pa per-grey-400`

51 `--paper-slider-disabled-secondary-color` \| The disabled secondary progress bar color \| `--paper-grey-400`	52 `--paper-slider-disabled-secondary-color` \| The disabled secondary progress bar color \| `--paper-grey-400`

52 `--paper-slider-knob-start-color` \| The fill color of the knob at the far left \| `transparent`	53 `--paper-slider-knob-start-color` \| The fill color of the knob at the far left \| `transparent`

(...skipping 69 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
122 }	123 }

123	124

124 .ring.expand:not(.pin) > .bar-container {	125 .ring.expand:not(.pin) > .bar-container {

125 left: calc(8px + var(--paper-slider-height, 2px)/2);	126 left: calc(8px + var(--paper-slider-height, 2px)/2);

126 }	127 }

127	128

128 #sliderBar {	129 #sliderBar {

129 padding: 15px 0;	130 padding: 15px 0;

130 width: 100%;	131 width: 100%;

131 background-color: var(--paper-slider-bar-color, transparent);	132 background-color: var(--paper-slider-bar-color, transparent);

132 --paper-progress-container-color: var(--paper-grey-400);	133 --paper-progress-container-color: var(--paper-slider-container-color, -- paper-grey-400);

133 --paper-progress-height: var(--paper-slider-height, 2px);	134 --paper-progress-height: var(--paper-slider-height, 2px);

134 }	135 }

135	136

136 .slider-markers {	137 .slider-markers {

137 position: absolute;	138 position: absolute;

138 top: calc(14px + var(--paper-slider-height,2px)/2);	139 top: calc(14px + var(--paper-slider-height,2px)/2);

139 height: var(--paper-slider-height, 2px);	140 height: var(--paper-slider-height, 2px);

140 left: 0;	141 left: 0;

141 right: -1px;	142 right: -1px;

142 box-sizing: border-box;	143 box-sizing: border-box;

(...skipping 148 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
291 background-color: var(--paper-slider-knob-start-color, transparent);	292 background-color: var(--paper-slider-knob-start-color, transparent);

292 border: 2px solid var(--paper-slider-knob-start-border-color, --paper-gr ey-400);	293 border: 2px solid var(--paper-slider-knob-start-border-color, --paper-gr ey-400);

293 }	294 }

294	295

295 paper-ripple {	296 paper-ripple {

296 color: var(--paper-slider-knob-color, --google-blue-700);	297 color: var(--paper-slider-knob-color, --google-blue-700);

297 }	298 }

298 </style>	299 </style>

299	300

300 <div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, imm ediateValue, min, expand, dragging, transiting, editable)]]">	301 <div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, imm ediateValue, min, expand, dragging, transiting, editable)]]">

301

302 <div class="bar-container">	302 <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">	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">

304 </paper-progress>	304 </paper-progress>

305 </div>	305 </div>

306	306

307 <template is="dom-if" if="[[snaps]]">	307 <template is="dom-if" if="[[snaps]]">

308 <div class="slider-markers">	308 <div class="slider-markers">

309 <template is="dom-repeat" items="[[markers]]">	309 <template is="dom-repeat" items="[[markers]]">

310 <div class="slider-marker"></div>	310 <div class="slider-marker"></div>

311 </template>	311 </template>

312 </div>	312 </div>

313 </template>	313 </template>

314	314

315 <div id="sliderKnob" on-down="_knobdown" on-up="_resetKnob" on-track="_onT rack" on-transitionend="_knobTransitionEnd">	315 <div id="sliderKnob" on-down="_knobdown" on-up="_resetKnob" on-track="_onT rack" on-transitionend="_knobTransitionEnd">

316 <div id="sliderKnobInner" value$="[[immediateValue]]"></div>	316 <div id="sliderKnobInner" value$="[[immediateValue]]"></div>

317 </div>	317 </div>

318 </div>	318 </div>

319	319

320 <template is="dom-if" if="[[editable]]">	320 <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="">	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="">

322 </paper-input>	322 </paper-input>

323 </template>	323 </template>

324 </template>	324 </template>

325	325

326 </dom-module>	326 </dom-module>

327 <script src="paper-slider-extracted.js"></script></body></html>	327 <script src="paper-slider-extracted.js"></script></body></html>

OLD	NEW