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

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 1261403002: Add paper-menu-button and its dependencies to third_party/polymer (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: reproduce.sh Created 5 years, 4 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-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">
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after
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:
60
61
62
63 Custom property | Description | Default
64 ----------------|-------------|----------
65 `--paper-progress-container` | Mixin applied to container | `{}`
66
67
68
69
59 @group Paper Elements 70 @group Paper Elements
60 @element paper-progress 71 @element paper-progress
61 @hero hero.svg 72 @hero hero.svg
62 @demo demo/index.html 73 @demo demo/index.html
63 --> 74 -->
64 75
65 </head><body><dom-module id="paper-progress"> 76 </head><body><dom-module id="paper-progress">
66 <style> 77 <style>
67 :host { 78 :host {
68 display: inline-block; 79 display: inline-block;
(...skipping 15 matching lines...) Expand all
84 transition-timing-function: var(--paper-progress-transition-timing-functio n, ease); 95 transition-timing-function: var(--paper-progress-transition-timing-functio n, ease);
85 96
86 /* Delay */ 97 /* Delay */
87 -webkit-transition-delay: var(--paper-progress-transition-delay, 0s); 98 -webkit-transition-delay: var(--paper-progress-transition-delay, 0s);
88 transition-delay: var(--paper-progress-transition-delay, 0s); 99 transition-delay: var(--paper-progress-transition-delay, 0s);
89 } 100 }
90 101
91 #progressContainer { 102 #progressContainer {
92 position: relative; 103 position: relative;
93 height: 100%; 104 height: 100%;
105 overflow: hidden;
106 @apply(--paper-progress-container);
107 }
108
109 #progressContainer, #indeterminateSplitter {
94 background-color: var(--paper-progress-container-color, --google-grey-300) ; 110 background-color: var(--paper-progress-container-color, --google-grey-300) ;
95 overflow: hidden;
96 } 111 }
97 112
98 #activeProgress, 113 #activeProgress,
99 #secondaryProgress { 114 #secondaryProgress {
100 -webkit-transform-origin: left center; 115 -webkit-transform-origin: left center;
101 transform-origin: left center; 116 transform-origin: left center;
102 -webkit-transform: scaleX(0); 117 -webkit-transform: scaleX(0);
103 transform: scaleX(0); 118 transform: scaleX(0);
104 } 119 }
105 120
106 #activeProgress { 121 #activeProgress {
107 background-color: var(--paper-progress-active-color, --google-green-500); 122 background-color: var(--paper-progress-active-color, --google-green-500);
108 } 123 }
109 124
110 #secondaryProgress { 125 #secondaryProgress {
111 background-color: var(--paper-progress-secondary-color, --google-green-100 ); 126 background-color: var(--paper-progress-secondary-color, --google-green-100 );
112 } 127 }
128
129 #indeterminateSplitter {
130 display: none;
131 }
113 132
114 #activeProgress.indeterminate { 133 #activeProgress.indeterminate {
134 -webkit-transform-origin: right center;
135 transform-origin: right center;
136 -webkit-animation: indeterminate-bar 2s linear infinite;
137 animation: indeterminate-bar 2s linear infinite;
138 }
139
140 #indeterminateSplitter.indeterminate {
141 display: block;
115 -webkit-transform-origin: center center; 142 -webkit-transform-origin: center center;
116 transform-origin: center center; 143 transform-origin: center center;
117 -webkit-animation: indeterminate-bar 1s linear infinite; 144 -webkit-animation: indeterminate-splitter 2s linear infinite;
118 animation: indeterminate-bar 1s linear infinite; 145 animation: indeterminate-splitter 2s linear infinite;
119 } 146 }
120 147
121 @-webkit-keyframes indeterminate-bar { 148 @-webkit-keyframes indeterminate-bar {
122 0% { 149 0% {
123 -webkit-transform: translate(-50%) scaleX(0); 150 -webkit-transform: scaleX(1) translateX(-100%);
124 } 151 }
125 50% { 152 50% {
126 -webkit-transform: translate(0%) scaleX(0.3); 153 -webkit-transform: scaleX(1) translateX(0%);
154 }
155 75% {
156 -webkit-transform: scaleX(1) translateX(0%);
157 -webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91);
127 } 158 }
128 100% { 159 100% {
129 -webkit-transform: translate(50%) scaleX(0); 160 -webkit-transform: scaleX(0) translateX(0%);
161 }
162 }
163
164 @-webkit-keyframes indeterminate-splitter {
165 0% {
166 -webkit-transform: scaleX(.75) translateX(-125%);
167 }
168 30% {
169 -webkit-transform: scaleX(.75) translateX(-125%);
170 -webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8);
171 }
172 90% {
173 -webkit-transform: scaleX(.75) translateX(125%);
174 }
175 100% {
176 -webkit-transform: scaleX(.75) translateX(125%);
130 } 177 }
131 } 178 }
132 179
133 @keyframes indeterminate-bar { 180 @keyframes indeterminate-bar {
134 0% { 181 0% {
135 transform: translate(-50%) scaleX(0); 182 transform: scaleX(1) translateX(-100%);
136 } 183 }
137 50% { 184 50% {
138 transform: translate(0%) scaleX(0.3); 185 transform: scaleX(1) translateX(0%);
186 }
187 75% {
188 transform: scaleX(1) translateX(0%);
189 animation-timing-function: cubic-bezier(.28,.62,.37,.91);
139 } 190 }
140 100% { 191 100% {
141 transform: translate(50%) scaleX(0); 192 transform: scaleX(0) translateX(0%);
193 }
194 }
195
196 @keyframes indeterminate-splitter {
197 0% {
198 transform: scaleX(.75) translateX(-125%);
199 }
200 30% {
201 transform: scaleX(.75) translateX(-125%);
202 animation-timing-function: cubic-bezier(.42,0,.6,.8);
203 }
204 90% {
205 transform: scaleX(.75) translateX(125%);
206 }
207 100% {
208 transform: scaleX(.75) translateX(125%);
142 } 209 }
143 } 210 }
144 </style> 211 </style>
145 <template> 212 <template>
146 <div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" ar ia-valuemin$="{{min}}" aria-valuemax$="{{max}}"> 213 <div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" ar ia-valuemin$="{{min}}" aria-valuemax$="{{max}}">
147 <div id="secondaryProgress" class="fit"></div> 214 <div id="secondaryProgress" class="fit"></div>
148 <div id="activeProgress" class="fit"></div> 215 <div id="activeProgress" class="fit"></div>
216 <div id="indeterminateSplitter" class="fit"></div>
149 </div> 217 </div>
150 </template> 218 </template>
151 </dom-module> 219 </dom-module>
152 220
153 <script src="paper-progress-extracted.js"></script></body></html> 221 <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-progress/paper-progress-extracted.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698