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

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 1221923003: Update bower.json for Polymer elements and add PRESUBMIT.py (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: rebase Created 5 years, 5 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 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 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 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 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="../paper-styles/paper-styles.html">
11 <link rel="import" href="../paper-progress/paper-progress.html"> 11 <link rel="import" href="../paper-progress/paper-progress.html">
12 <link rel="import" href="../paper-input/paper-input.html"> 12 <link rel="import" href="../paper-input/paper-input.html">
13 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html"> 13 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
14 <link rel="import" href="../paper-ripple/paper-ripple.html"> 14 <link rel="import" href="../paper-ripple/paper-ripple.html">
15 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html "> 15 <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">
16 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavio r.html"> 17 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavio r.html">
17 18
18 <!-- 19 <!--
19 `paper-slider` allows user to select a value from a range of values by 20 `paper-slider` allows user to select a value from a range of values by
20 moving the slider thumb. The interactive nature of the slider makes it a 21 moving the slider thumb. The interactive nature of the slider makes it a
21 great choice for settings that reflect intensity levels, such as volume, 22 great choice for settings that reflect intensity levels, such as volume,
22 brightness, or color saturation. 23 brightness, or color saturation.
23 24
24 Example: 25 Example:
25 26
26 <paper-slider></paper-slider> 27 <paper-slider></paper-slider>
27 28
28 Use `min` and `max` to specify the slider range. Default is 0 to 100. 29 Use `min` and `max` to specify the slider range. Default is 0 to 100.
29 30
30 Example: 31 Example:
31 32
32 <paper-slider min="10" max="200" value="110"></paper-slider> 33 <paper-slider min="10" max="200" value="110"></paper-slider>
33 34
34 Styling slider: 35 ### Styling
35 36
36 To change the slider progress bar color: 37 The following custom properties and mixins are available for styling:
37 38
38 paper-slider { 39 Custom property | Description | Default
39 --paper-slider-active-color: #0f9d58; 40 ----------------|-------------|----------
40 } 41 `--paper-slider-bar-color` | The background color of the slider | `transparent`
41 42 `--paper-slider-active-color` | The progress bar color | `--google-blue-700`
42 To change the slider knob color: 43 `--paper-slider-secondary-color` | The secondary progress bar color | `--google- blue-300`
43 44 `--paper-slider-knob-color` | The knob color | `--google-blue-700`
44 paper-slider { 45 `--paper-slider-disabled-knob-color` | The disabled knob color | `--google-grey- 500`
45 --paper-slider-knob-color: #0f9d58; 46 `--paper-slider-pin-color` | The pin color | `--google-blue-700`
46 } 47 `--paper-slider-font-color` | The pin's text color | `#fff`
47 48 `--paper-slider-disabled-active-color` | The disabled progress bar color | `--go ogle-grey-500`
48 To change the slider pin color: 49 `--paper-slider-disabled-secondary-color` | The disabled secondary progress bar color | `--google-grey-300`
49
50 paper-slider {
51 --paper-slider-pin-color: #0f9d58;
52 }
53
54 To change the slider pin's font color:
55
56 paper-slider {
57 --paper-slider-pin-font-color: #0f9d58;
58 }
59
60 To change the slider secondary progress bar color:
61
62 paper-slider {
63 --paper-slider-secondary-color: #0f9d58;
64 }
65
66 To change the slider disabled active color:
67
68 paper-slider {
69 --paper-slider-disabled-active-color: #ccc;
70 }
71
72 To change the slider disabled secondary progress bar color:
73
74 paper-slider {
75 --paper-slider-disabled-secondary-color: #ccc;
76 }
77 50
78 @group Paper Elements 51 @group Paper Elements
79 @element paper-slider 52 @element paper-slider
80 @demo demo/index.html 53 @demo demo/index.html
81 @hero hero.svg 54 @hero hero.svg
82 --> 55 -->
83 56
84 </head><body><dom-module id="paper-slider"> 57 </head><body><dom-module id="paper-slider">
85 58
86 <link rel="import" type="css" href="paper-slider.css"> 59 <link rel="import" type="css" href="paper-slider.css">
87 60
88 <template> 61 <template>
89 <div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, imm ediateValue, min, expand, dragging, transiting, editable)]]"> 62 <div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, imm ediateValue, min, expand, dragging, transiting, editable)]]">
90 63
91 <div class="bar-container"> 64 <div class="bar-container">
92 <paper-progress id="sliderBar" aria-hidden="true" min="[[min]]" max="[[m ax]]" step="[[step]]" value="[[immediateValue]]" secondary-progress="[[secondary Progress]]" on-down="_bardown" on-up="_resetKnob" on-track="_onTrack"> 65 <paper-progress id="sliderBar" aria-hidden="true" min="[[min]]" max="[[m ax]]" step="[[step]]" value="[[immediateValue]]" secondary-progress="[[secondary Progress]]" on-down="_bardown" on-up="_resetKnob" on-track="_onTrack">
93 </paper-progress> 66 </paper-progress>
94 </div> 67 </div>
95 68
96 <template is="dom-if" if="[[snaps]]"> 69 <template is="dom-if" if="[[snaps]]">
97 <div class="slider-markers horizontal layout"> 70 <div class="slider-markers horizontal layout">
98 <template is="dom-repeat" items="[[markers]]"> 71 <template is="dom-repeat" items="[[markers]]">
99 <div class="slider-marker flex"></div> 72 <div class="slider-marker flex"></div>
100 </template> 73 </template>
101 </div> 74 </div>
102 </template> 75 </template>
103 76
104 <div id="sliderKnob" class="center-justified center horizontal layout" on- down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobT ransitionEnd"> 77 <div id="sliderKnob" class="center-justified center horizontal layout" on- down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobT ransitionEnd">
105 <paper-ripple id="ink" class="circle" center=""></paper-ripple> 78 <paper-ripple id="ink" class="circle" center="" hidden$="[[!receivedFo cusFromKeyboard]]"></paper-ripple>
106 <div id="sliderKnobInner" value$="[[immediateValue]]"></div> 79 <div id="sliderKnobInner" value$="[[immediateValue]]"></div>
107 </div> 80 </div>
108 </div> 81 </div>
109 82
110 <template is="dom-if" if="[[editable]]"> 83 <template is="dom-if" if="[[editable]]">
111 <paper-input id="input" class="slider-input" disabled$="[[disabled]]" on-c hange="_inputChange"> 84 <paper-input id="input" class="slider-input" disabled$="[[disabled]]" on-c hange="_inputChange">
112 </paper-input> 85 </paper-input>
113 </template> 86 </template>
114 </template> 87 </template>
115 88
116 </dom-module> 89 </dom-module>
117 90
118 <script src="paper-slider-extracted.js"></script></body></html> 91 <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