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

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 1561893002: [Polymer] Roll polymer to latest version (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: update grdp Created 4 years, 11 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/bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-progress/paper-progress-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-range-behavior/iron-range-behavior.html"> 11 <link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
11 <link rel="import" href="../paper-styles/color.html"> 12 <link rel="import" href="../paper-styles/color.html">
12 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
13 13
14 <!-- 14 <!--
15 Material design: [Progress & activity](https://www.google.com/design/spec/compon ents/progress-activity.html)
16
15 The progress bars are for situations where the percentage completed can be 17 The progress bars are for situations where the percentage completed can be
16 determined. They give users a quick sense of how much longer an operation 18 determined. They give users a quick sense of how much longer an operation
17 will take. 19 will take.
18 20
19 Example: 21 Example:
20 22
21 <paper-progress value="10"></paper-progress> 23 <paper-progress value="10"></paper-progress>
22 24
23 There is also a secondary progress which is useful for displaying intermediate 25 There is also a secondary progress which is useful for displaying intermediate
24 progress, such as the buffer level during a streaming playback progress bar. 26 progress, such as the buffer level during a streaming playback progress bar.
(...skipping 26 matching lines...) Expand all
51 the value changed. You can also customize the transition: 53 the value changed. You can also customize the transition:
52 54
53 paper-progress { 55 paper-progress {
54 --paper-progress-transition-duration: 0.08s; 56 --paper-progress-transition-duration: 0.08s;
55 --paper-progress-transition-timing-function: ease; 57 --paper-progress-transition-timing-function: ease;
56 --paper-progress-transition-transition-delay: 0s; 58 --paper-progress-transition-transition-delay: 0s;
57 } 59 }
58 60
59 The following mixins are available for styling: 61 The following mixins are available for styling:
60 62
61 Custom property | Description | Default 63 Custom property | Description | Default
62 --------------------------------------------|----------------------------------- ----------|---------- 64 ----------------------------------------------|--------------------------------- ------------|--------------
63 --paper-progress-container-color | Mixin applied to container | --google-grey-300 65 `--paper-progress-container-color` | Mixin applied to container | `--google-grey-300`
64 --paper-progress-transition-duration | Duration of the transition | 0.008s 66 `--paper-progress-transition-duration` | Duration of the transition | `0.008s`
65 --paper-progress-transition-timing-function | The timing function for the transi tion | ease 67 `--paper-progress-transition-timing-function` | The timing function for the tran sition | `ease`
66 --paper-progress-transition-delay | delay for the transition | 0s 68 `--paper-progress-transition-delay` | delay for the transition | `0s`
67 --paper-progress-active-color | The color of the active bar | --google-green-500 69 `--paper-progress-active-color` | The color of the active bar | `--google-green-500`
68 --paper-progress-secondary-color | The color of the secondary bar | --google-green-100 70 `--paper-progress-secondary-color` | The color of the secondary bar | `--google-green-100`
69 --paper-progress-disabled-active-color | The color of the active bar if dis abled | --google-grey-500 71 `--paper-progress-disabled-active-color` | The color of the active bar if d isabled | `--google-grey-500`
70 --paper-progress-disabled-secondary-color | The color of the secondary bar if disabled | --google-grey-300 72 `--paper-progress-disabled-secondary-color` | The color of the secondary bar i f disabled | `--google-grey-300`
71 --paper-progress-height | The height of the progress bar | 4px 73 `--paper-progress-height` | The height of the progress bar | `4px`
72 74
73 @group Paper Elements 75 @group Paper Elements
74 @element paper-progress 76 @element paper-progress
75 @hero hero.svg 77 @hero hero.svg
76 @demo demo/index.html 78 @demo demo/index.html
77 --> 79 -->
78 80
79 </head><body><dom-module id="paper-progress"> 81 </head><body><dom-module id="paper-progress">
80 <style> 82 <template>
81 :host { 83 <style>
82 display: block; 84 :host {
83 width: 200px; 85 display: block;
84 position: relative; 86 width: 200px;
85 overflow: hidden; 87 position: relative;
86 } 88 overflow: hidden;
89 }
87 90
88 #progressContainer { 91 #progressContainer {
89 position: relative; 92 position: relative;
90 } 93 }
91 94
92 #progressContainer, 95 #progressContainer,
93 /* the stripe for the indeterminate animation*/ 96 /* the stripe for the indeterminate animation*/
94 .indeterminate:after { 97 .indeterminate::after {
95 height: var(--paper-progress-height, 4px); 98 height: var(--paper-progress-height, 4px);
96 } 99 }
97 100
98 #primaryProgress, 101 #primaryProgress,
99 #secondaryProgress, 102 #secondaryProgress,
100 .indeterminate:after { 103 .indeterminate::after {
101 @apply(--layout-fit); 104 @apply(--layout-fit);
102 } 105 }
103 106
104 #progressContainer, 107 #progressContainer,
105 .indeterminate:after { 108 .indeterminate::after {
106 background-color: var(--paper-progress-container-color, --google-grey-300) ; 109 background-color: var(--paper-progress-container-color, --google-grey-30 0);
107 } 110 }
108 111
109 :host(.transiting) #primaryProgress, 112 :host(.transiting) #primaryProgress,
110 :host(.transiting) #secondaryProgress { 113 :host(.transiting) #secondaryProgress {
111 -webkit-transition-property: -webkit-transform; 114 -webkit-transition-property: -webkit-transform;
112 transition-property: transform; 115 transition-property: transform;
113 116
114 /* Duration */ 117 /* Duration */
115 -webkit-transition-duration: var(--paper-progress-transition-duration, 0.0 8s); 118 -webkit-transition-duration: var(--paper-progress-transition-duration, 0 .08s);
116 transition-duration: var(--paper-progress-transition-duration, 0.08s); 119 transition-duration: var(--paper-progress-transition-duration, 0.08s);
117 120
118 /* Timing function */ 121 /* Timing function */
119 -webkit-transition-timing-function: var(--paper-progress-transition-timing -function, ease); 122 -webkit-transition-timing-function: var(--paper-progress-transition-timi ng-function, ease);
120 transition-timing-function: var(--paper-progress-transition-timing-functio n, ease); 123 transition-timing-function: var(--paper-progress-transition-timing-funct ion, ease);
121 124
122 /* Delay */ 125 /* Delay */
123 -webkit-transition-delay: var(--paper-progress-transition-delay, 0s); 126 -webkit-transition-delay: var(--paper-progress-transition-delay, 0s);
124 transition-delay: var(--paper-progress-transition-delay, 0s); 127 transition-delay: var(--paper-progress-transition-delay, 0s);
125 } 128 }
126 129
127 #primaryProgress, 130 #primaryProgress,
128 #secondaryProgress { 131 #secondaryProgress {
129 @apply(--layout-fit); 132 @apply(--layout-fit);
130 -webkit-transform-origin: left center; 133 -webkit-transform-origin: left center;
131 transform-origin: left center; 134 transform-origin: left center;
132 -webkit-transform: scaleX(0); 135 -webkit-transform: scaleX(0);
133 transform: scaleX(0); 136 transform: scaleX(0);
134 will-change: transform; 137 will-change: transform;
135 } 138 }
136 139
137 #primaryProgress { 140 #primaryProgress {
138 background-color: var(--paper-progress-active-color, --google-green-500); 141 background-color: var(--paper-progress-active-color, --google-green-500) ;
139 } 142 }
140 143
141 #secondaryProgress { 144 #secondaryProgress {
142 position: relative; 145 position: relative;
143 background-color: var(--paper-progress-secondary-color, --google-green-100 ); 146 background-color: var(--paper-progress-secondary-color, --google-green-1 00);
144 } 147 }
145 148
146 :host([disabled]) #primaryProgress { 149 :host([disabled]) #primaryProgress {
147 background-color: var(--paper-progress-disabled-active-color, --google-gre y-500); 150 background-color: var(--paper-progress-disabled-active-color, --google-g rey-500);
148 } 151 }
149 152
150 :host([disabled]) #secondaryProgress { 153 :host([disabled]) #secondaryProgress {
151 background-color: var(--paper-progress-disabled-active-color, --google-gre y-300); 154 background-color: var(--paper-progress-disabled-secondary-color, --googl e-grey-300);
152 } 155 }
153 156
154 :host(:not([disabled])) #primaryProgress.indeterminate { 157 :host(:not([disabled])) #primaryProgress.indeterminate {
155 -webkit-transform-origin: right center; 158 -webkit-transform-origin: right center;
156 transform-origin: right center; 159 transform-origin: right center;
157 -webkit-animation: indeterminate-bar 2s linear infinite; 160 -webkit-animation: indeterminate-bar 2s linear infinite;
158 animation: indeterminate-bar 2s linear infinite; 161 animation: indeterminate-bar 2s linear infinite;
159 } 162 }
160 163
161 :host(:not([disabled])) #primaryProgress.indeterminate:after { 164 :host(:not([disabled])) #primaryProgress.indeterminate::after {
162 content: ""; 165 content: "";
163 -webkit-transform-origin: center center; 166 -webkit-transform-origin: center center;
164 transform-origin: center center; 167 transform-origin: center center;
165 168
166 -webkit-animation: indeterminate-splitter 2s linear infinite; 169 -webkit-animation: indeterminate-splitter 2s linear infinite;
167 animation: indeterminate-splitter 2s linear infinite; 170 animation: indeterminate-splitter 2s linear infinite;
168 } 171 }
169 172
170 @-webkit-keyframes indeterminate-bar { 173 @-webkit-keyframes indeterminate-bar {
171 0% { 174 0% {
172 -webkit-transform: scaleX(1) translateX(-100%); 175 -webkit-transform: scaleX(1) translateX(-100%);
176 }
177 50% {
178 -webkit-transform: scaleX(1) translateX(0%);
179 }
180 75% {
181 -webkit-transform: scaleX(1) translateX(0%);
182 -webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91);
183 }
184 100% {
185 -webkit-transform: scaleX(0) translateX(0%);
186 }
173 } 187 }
174 50% { 188
175 -webkit-transform: scaleX(1) translateX(0%); 189 @-webkit-keyframes indeterminate-splitter {
190 0% {
191 -webkit-transform: scaleX(.75) translateX(-125%);
192 }
193 30% {
194 -webkit-transform: scaleX(.75) translateX(-125%);
195 -webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8);
196 }
197 90% {
198 -webkit-transform: scaleX(.75) translateX(125%);
199 }
200 100% {
201 -webkit-transform: scaleX(.75) translateX(125%);
202 }
176 } 203 }
177 75% { 204
178 -webkit-transform: scaleX(1) translateX(0%); 205 @keyframes indeterminate-bar {
179 -webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91); 206 0% {
207 transform: scaleX(1) translateX(-100%);
208 }
209 50% {
210 transform: scaleX(1) translateX(0%);
211 }
212 75% {
213 transform: scaleX(1) translateX(0%);
214 animation-timing-function: cubic-bezier(.28,.62,.37,.91);
215 }
216 100% {
217 transform: scaleX(0) translateX(0%);
218 }
180 } 219 }
181 100% { 220
182 -webkit-transform: scaleX(0) translateX(0%); 221 @keyframes indeterminate-splitter {
222 0% {
223 transform: scaleX(.75) translateX(-125%);
224 }
225 30% {
226 transform: scaleX(.75) translateX(-125%);
227 animation-timing-function: cubic-bezier(.42,0,.6,.8);
228 }
229 90% {
230 transform: scaleX(.75) translateX(125%);
231 }
232 100% {
233 transform: scaleX(.75) translateX(125%);
234 }
183 } 235 }
184 } 236 </style>
185 237
186 @-webkit-keyframes indeterminate-splitter {
187 0% {
188 -webkit-transform: scaleX(.75) translateX(-125%);
189 }
190 30% {
191 -webkit-transform: scaleX(.75) translateX(-125%);
192 -webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8);
193 }
194 90% {
195 -webkit-transform: scaleX(.75) translateX(125%);
196 }
197 100% {
198 -webkit-transform: scaleX(.75) translateX(125%);
199 }
200 }
201
202 @keyframes indeterminate-bar {
203 0% {
204 transform: scaleX(1) translateX(-100%);
205 }
206 50% {
207 transform: scaleX(1) translateX(0%);
208 }
209 75% {
210 transform: scaleX(1) translateX(0%);
211 animation-timing-function: cubic-bezier(.28,.62,.37,.91);
212 }
213 100% {
214 transform: scaleX(0) translateX(0%);
215 }
216 }
217
218 @keyframes indeterminate-splitter {
219 0% {
220 transform: scaleX(.75) translateX(-125%);
221 }
222 30% {
223 transform: scaleX(.75) translateX(-125%);
224 animation-timing-function: cubic-bezier(.42,0,.6,.8);
225 }
226 90% {
227 transform: scaleX(.75) translateX(125%);
228 }
229 100% {
230 transform: scaleX(.75) translateX(125%);
231 }
232 }
233 </style>
234 <template>
235 <div id="progressContainer"> 238 <div id="progressContainer">
236 <div id="secondaryProgress" hidden$="[[_hideSecondaryProgress(secondaryRat io)]]"></div> 239 <div id="secondaryProgress" hidden$="[[_hideSecondaryProgress(secondaryRat io)]]"></div>
237 <div id="primaryProgress"></div> 240 <div id="primaryProgress"></div>
238 </div> 241 </div>
239 </template> 242 </template>
240 </dom-module> 243 </dom-module>
241 244
242 <script src="paper-progress-extracted.js"></script></body></html> 245 <script src="paper-progress-extracted.js"></script></body></html>
OLDNEW
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-progress/bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-progress/paper-progress-extracted.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698