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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-progress/paper-progress.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-progress/hero.svg ('k') | third_party/polymer/v1_0/components-chromium/paper-radio-button/.bower.json » ('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="../paper-styles/paper-styles.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-range-behavior/iron-range-behavior.html"> 11 <link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
11 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html"> 12 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
12 13
13 <!-- 14 <!--
14 The progress bars are for situations where the percentage completed can be 15 The progress bars are for situations where the percentage completed can be
15 determined. They give users a quick sense of how much longer an operation 16 determined. They give users a quick sense of how much longer an operation
16 will take. 17 will take.
17 18
18 Example: 19 Example:
19 20
20 <paper-progress value="10"></paper-progress> 21 <paper-progress value="10"></paper-progress>
21 22
22 There is also a secondary progress which is useful for displaying intermediate 23 There is also a secondary progress which is useful for displaying intermediate
23 progress, such as the buffer level during a streaming playback progress bar. 24 progress, such as the buffer level during a streaming playback progress bar.
24 25
25 Example: 26 Example:
26 27
27 <paper-progress value="10" secondary-progress="30"></paper-progress> 28 <paper-progress value="10" secondary-progress="30"></paper-progress>
28 29
29 Styling progress bar: 30 ### Styling progress bar:
30 31
31 To change the active progress bar color: 32 To change the active progress bar color:
32 33
33 paper-progress { 34 paper-progress {
34 --paper-progress-active-color: #e91e63; 35 --paper-progress-active-color: #e91e63;
35 } 36 }
36 37
37 To change the secondary progress bar color: 38 To change the secondary progress bar color:
38 39
39 paper-progress { 40 paper-progress {
40 --paper-progress-secondary-color: #f8bbd0; 41 --paper-progress-secondary-color: #f8bbd0;
41 } 42 }
42 43
43 To change the progress bar background color: 44 To change the progress bar background color:
44 45
45 paper-progress { 46 paper-progress {
46 --paper-progress-container-color: #64ffda; 47 --paper-progress-container-color: #64ffda;
47 } 48 }
48 49
50 Add the class `transiting` to a paper-progress to animate the progress bar when
51 the value changed. You can also customize the transition:
52
53 paper-progress {
54 --paper-progress-transition-duration: 0.08s;
55 --paper-progress-transition-timing-function: ease;
56 --paper-progress-transition-transition-delay: 0s;
57 }
58
49 @group Paper Elements 59 @group Paper Elements
50 @element paper-progress 60 @element paper-progress
51 @hero hero.svg 61 @hero hero.svg
52 @demo demo/index.html 62 @demo demo/index.html
53 --> 63 -->
54 64
55 </head><body><dom-module id="paper-progress"> 65 </head><body><dom-module id="paper-progress">
56 <style> 66 <style>
57 :host { 67 :host {
58 display: inline-block; 68 display: inline-block;
59 width: 200px; 69 width: 200px;
60 height: 4px; 70 height: 4px;
61 } 71 }
62 72
73 :host(.transiting) #activeProgress,
74 :host(.transiting) #secondaryProgress {
75 -webkit-transition-property: -webkit-transform;
76 transition-property: transform;
77
78 /* Duration */
79 -webkit-transition-duration: var(--paper-progress-transition-duration, 0.0 8s);
80 transition-duration: var(--paper-progress-transition-duration, 0.08s);
81
82 /* Timing function */
83 -webkit-transition-timing-function: var(--paper-progress-transition-timing -function, ease);
84 transition-timing-function: var(--paper-progress-transition-timing-functio n, ease);
85
86 /* Delay */
87 -webkit-transition-delay: var(--paper-progress-transition-delay, 0s);
88 transition-delay: var(--paper-progress-transition-delay, 0s);
89 }
90
63 #progressContainer { 91 #progressContainer {
64 position: relative; 92 position: relative;
65 height: 100%; 93 height: 100%;
66 background-color: var(--paper-progress-container-color, --google-grey-300) ; 94 background-color: var(--paper-progress-container-color, --google-grey-300) ;
67 overflow: hidden; 95 overflow: hidden;
68 } 96 }
69 97
70 #activeProgress, 98 #activeProgress,
71 #secondaryProgress { 99 #secondaryProgress {
72 -webkit-transform-origin: left center; 100 -webkit-transform-origin: left center;
(...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after
116 </style> 144 </style>
117 <template> 145 <template>
118 <div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" ar ia-valuemin$="{{min}}" aria-valuemax$="{{max}}"> 146 <div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" ar ia-valuemin$="{{min}}" aria-valuemax$="{{max}}">
119 <div id="secondaryProgress" class="fit"></div> 147 <div id="secondaryProgress" class="fit"></div>
120 <div id="activeProgress" class="fit"></div> 148 <div id="activeProgress" class="fit"></div>
121 </div> 149 </div>
122 </template> 150 </template>
123 </dom-module> 151 </dom-module>
124 152
125 <script src="paper-progress-extracted.js"></script></body></html> 153 <script src="paper-progress-extracted.js"></script></body></html>
OLDNEW
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-progress/hero.svg ('k') | third_party/polymer/v1_0/components-chromium/paper-radio-button/.bower.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698