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

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 1336623003: [MD settings] updating polymer to 1.1.13 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: changed Polymer.IronCheckedElementBehavior name Created 5 years, 3 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="../paper-styles/paper-styles.html"> 10 <link rel="import" href="../paper-styles/paper-styles.html">
11 <link rel="import" href="../paper-styles/paper-styles-classes.html">
11 <link rel="import" href="../iron-range-behavior/iron-range-behavior.html"> 12 <link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
12 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
13 13
14 <!-- 14 <!--
15 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
16 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
17 will take. 17 will take.
18 18
19 Example: 19 Example:
20 20
21 <paper-progress value="10"></paper-progress> 21 <paper-progress value="10"></paper-progress>
22 22
(...skipping 25 matching lines...) Expand all
48 } 48 }
49 49
50 Add the class `transiting` to a paper-progress to animate the progress bar when 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: 51 the value changed. You can also customize the transition:
52 52
53 paper-progress { 53 paper-progress {
54 --paper-progress-transition-duration: 0.08s; 54 --paper-progress-transition-duration: 0.08s;
55 --paper-progress-transition-timing-function: ease; 55 --paper-progress-transition-timing-function: ease;
56 --paper-progress-transition-transition-delay: 0s; 56 --paper-progress-transition-transition-delay: 0s;
57 } 57 }
58 58
59 The following mixins are available for styling: 59 The following mixins are available for styling:
60 60
61 61 Custom property | Description | Default
62 62 --------------------------------------------|----------------------------------- ----------|----------
63 Custom property | Description | Default 63 --paper-progress-container-color | Mixin applied to container | --google-grey-300
64 ----------------|-------------|---------- 64 --paper-progress-transition-duration | Duration of the transition | 0.008s
65 `--paper-progress-container` | Mixin applied to container | `{}` 65 --paper-progress-transition-timing-function | The timing function for the transi tion | ease
66 66 --paper-progress-transition-delay | delay for the transition | 0s
67 67 --paper-progress-active-color | The color of the active bar | --google-green-500
68 68 --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
70 --paper-progress-disabled-secondary-color | The color of the secondary bar if disabled | --google-grey-300
71 --paper-progress-height | The height of the progress bar | 4px
69 72
70 @group Paper Elements 73 @group Paper Elements
71 @element paper-progress 74 @element paper-progress
72 @hero hero.svg 75 @hero hero.svg
73 @demo demo/index.html 76 @demo demo/index.html
74 --> 77 -->
75 78
76 </head><body><dom-module id="paper-progress"> 79 </head><body><dom-module id="paper-progress">
77 <style> 80 <style>
78 :host { 81 :host {
79 display: inline-block; 82 display: block;
80 width: 200px; 83 width: 200px;
81 height: 4px; 84 position: relative;
85 overflow: hidden;
82 } 86 }
83 87
84 :host(.transiting) #activeProgress, 88 #progressContainer {
85 :host(.transiting) #secondaryProgress { 89 position: relative;
90 }
91
92 #progressContainer,
93 /* the stripe for the indeterminate animation*/
94 .indeterminate:after {
95 height: var(--paper-progress-height, 4px);
96 }
97
98 #primaryProgress,
99 #secondaryProgress,
100 .indeterminate:after {
101 @apply(--layout-fit);
102 }
103
104 #progressContainer,
105 .indeterminate:after {
106 background-color: var(--paper-progress-container-color, --google-grey-300) ;
107 }
108
109 :host(.transiting) > * {
86 -webkit-transition-property: -webkit-transform; 110 -webkit-transition-property: -webkit-transform;
87 transition-property: transform; 111 transition-property: transform;
88 112
89 /* Duration */ 113 /* Duration */
90 -webkit-transition-duration: var(--paper-progress-transition-duration, 0.0 8s); 114 -webkit-transition-duration: var(--paper-progress-transition-duration, 0.0 8s);
91 transition-duration: var(--paper-progress-transition-duration, 0.08s); 115 transition-duration: var(--paper-progress-transition-duration, 0.08s);
92 116
93 /* Timing function */ 117 /* Timing function */
94 -webkit-transition-timing-function: var(--paper-progress-transition-timing -function, ease); 118 -webkit-transition-timing-function: var(--paper-progress-transition-timing -function, ease);
95 transition-timing-function: var(--paper-progress-transition-timing-functio n, ease); 119 transition-timing-function: var(--paper-progress-transition-timing-functio n, ease);
96 120
97 /* Delay */ 121 /* Delay */
98 -webkit-transition-delay: var(--paper-progress-transition-delay, 0s); 122 -webkit-transition-delay: var(--paper-progress-transition-delay, 0s);
99 transition-delay: var(--paper-progress-transition-delay, 0s); 123 transition-delay: var(--paper-progress-transition-delay, 0s);
100 } 124 }
101 125
102 #progressContainer { 126 #primaryProgress,
103 position: relative;
104 height: 100%;
105 overflow: hidden;
106 @apply(--paper-progress-container);
107 }
108
109 #progressContainer, #indeterminateSplitter {
110 background-color: var(--paper-progress-container-color, --google-grey-300) ;
111 }
112
113 #activeProgress,
114 #secondaryProgress { 127 #secondaryProgress {
128 @apply(--layout-fit);
115 -webkit-transform-origin: left center; 129 -webkit-transform-origin: left center;
116 transform-origin: left center; 130 transform-origin: left center;
117 -webkit-transform: scaleX(0); 131 -webkit-transform: scaleX(0);
118 transform: scaleX(0); 132 transform: scaleX(0);
133 will-change: transform;
119 } 134 }
120 135
121 #activeProgress { 136 #primaryProgress {
122 background-color: var(--paper-progress-active-color, --google-green-500); 137 background-color: var(--paper-progress-active-color, --google-green-500);
123 } 138 }
124 139
125 #secondaryProgress { 140 #secondaryProgress {
141 position: relative;
126 background-color: var(--paper-progress-secondary-color, --google-green-100 ); 142 background-color: var(--paper-progress-secondary-color, --google-green-100 );
127 } 143 }
128 144
129 #indeterminateSplitter { 145 :host([disabled]) #primaryProgress {
130 display: none; 146 background-color: var(--paper-progress-disabled-active-color, --google-gre y-500);
131 } 147 }
132 148
133 #activeProgress.indeterminate { 149 :host([disabled]) #secondaryProgress {
150 background-color: var(--paper-progress-disabled-active-color, --google-gre y-300);
151 }
152
153 :host(:not([disabled])) #primaryProgress.indeterminate {
134 -webkit-transform-origin: right center; 154 -webkit-transform-origin: right center;
135 transform-origin: right center; 155 transform-origin: right center;
136 -webkit-animation: indeterminate-bar 2s linear infinite; 156 -webkit-animation: indeterminate-bar 2s linear infinite;
137 animation: indeterminate-bar 2s linear infinite; 157 animation: indeterminate-bar 2s linear infinite;
138 } 158 }
139 159
140 #indeterminateSplitter.indeterminate { 160 :host(:not([disabled])) #primaryProgress.indeterminate:after {
141 display: block; 161 content: "";
142 -webkit-transform-origin: center center; 162 -webkit-transform-origin: center center;
143 transform-origin: center center; 163 transform-origin: center center;
164
144 -webkit-animation: indeterminate-splitter 2s linear infinite; 165 -webkit-animation: indeterminate-splitter 2s linear infinite;
145 animation: indeterminate-splitter 2s linear infinite; 166 animation: indeterminate-splitter 2s linear infinite;
146 } 167 }
147 168
148 @-webkit-keyframes indeterminate-bar { 169 @-webkit-keyframes indeterminate-bar {
149 0% { 170 0% {
150 -webkit-transform: scaleX(1) translateX(-100%); 171 -webkit-transform: scaleX(1) translateX(-100%);
151 } 172 }
152 50% { 173 50% {
153 -webkit-transform: scaleX(1) translateX(0%); 174 -webkit-transform: scaleX(1) translateX(0%);
(...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after
203 } 224 }
204 90% { 225 90% {
205 transform: scaleX(.75) translateX(125%); 226 transform: scaleX(.75) translateX(125%);
206 } 227 }
207 100% { 228 100% {
208 transform: scaleX(.75) translateX(125%); 229 transform: scaleX(.75) translateX(125%);
209 } 230 }
210 } 231 }
211 </style> 232 </style>
212 <template> 233 <template>
213 <div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" ar ia-valuemin$="{{min}}" aria-valuemax$="{{max}}"> 234 <div id="progressContainer">
214 <div id="secondaryProgress" class="fit"></div> 235 <div id="secondaryProgress" hidden$="[[_hideSecondaryProgress(secondaryRat io)]]"></div>
215 <div id="activeProgress" class="fit"></div> 236 <div id="primaryProgress"></div>
216 <div id="indeterminateSplitter" class="fit"></div>
217 </div> 237 </div>
218 </template> 238 </template>
219 </dom-module> 239 </dom-module>
220 240
221 <script src="paper-progress-extracted.js"></script></body></html> 241 <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