Index: third_party/polymer/v1_0/components/paper-progress/paper-progress.html |
diff --git a/third_party/polymer/v1_0/components/paper-progress/paper-progress.html b/third_party/polymer/v1_0/components/paper-progress/paper-progress.html |
deleted file mode 100644 |
index 3df2577b3b14cc93f5aa0f3043b27b1316e4cc2c..0000000000000000000000000000000000000000 |
--- a/third_party/polymer/v1_0/components/paper-progress/paper-progress.html |
+++ /dev/null |
@@ -1,227 +0,0 @@ |
-<!-- |
-@license |
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
-Code distributed by Google as part of the polymer project is also |
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
---> |
- |
-<link rel="import" href="../polymer/polymer.html"> |
-<link rel="import" href="../paper-styles/paper-styles.html"> |
-<link rel="import" href="../iron-range-behavior/iron-range-behavior.html"> |
-<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html"> |
- |
-<!-- |
-The progress bars are for situations where the percentage completed can be |
-determined. They give users a quick sense of how much longer an operation |
-will take. |
- |
-Example: |
- |
- <paper-progress value="10"></paper-progress> |
- |
-There is also a secondary progress which is useful for displaying intermediate |
-progress, such as the buffer level during a streaming playback progress bar. |
- |
-Example: |
- |
- <paper-progress value="10" secondary-progress="30"></paper-progress> |
- |
-### Styling progress bar: |
- |
-To change the active progress bar color: |
- |
- paper-progress { |
- --paper-progress-active-color: #e91e63; |
- } |
- |
-To change the secondary progress bar color: |
- |
- paper-progress { |
- --paper-progress-secondary-color: #f8bbd0; |
- } |
- |
-To change the progress bar background color: |
- |
- paper-progress { |
- --paper-progress-container-color: #64ffda; |
- } |
- |
-Add the class `transiting` to a paper-progress to animate the progress bar when |
-the value changed. You can also customize the transition: |
- |
- paper-progress { |
- --paper-progress-transition-duration: 0.08s; |
- --paper-progress-transition-timing-function: ease; |
- --paper-progress-transition-transition-delay: 0s; |
- } |
- |
-@group Paper Elements |
-@element paper-progress |
-@hero hero.svg |
-@demo demo/index.html |
---> |
- |
-<dom-module id="paper-progress"> |
- <style> |
- :host { |
- display: inline-block; |
- width: 200px; |
- height: 4px; |
- } |
- |
- :host(.transiting) #activeProgress, |
- :host(.transiting) #secondaryProgress { |
- -webkit-transition-property: -webkit-transform; |
- transition-property: transform; |
- |
- /* Duration */ |
- -webkit-transition-duration: var(--paper-progress-transition-duration, 0.08s); |
- transition-duration: var(--paper-progress-transition-duration, 0.08s); |
- |
- /* Timing function */ |
- -webkit-transition-timing-function: var(--paper-progress-transition-timing-function, ease); |
- transition-timing-function: var(--paper-progress-transition-timing-function, ease); |
- |
- /* Delay */ |
- -webkit-transition-delay: var(--paper-progress-transition-delay, 0s); |
- transition-delay: var(--paper-progress-transition-delay, 0s); |
- } |
- |
- #progressContainer { |
- position: relative; |
- height: 100%; |
- background-color: var(--paper-progress-container-color, --google-grey-300); |
- overflow: hidden; |
- } |
- |
- #activeProgress, |
- #secondaryProgress { |
- -webkit-transform-origin: left center; |
- transform-origin: left center; |
- -webkit-transform: scaleX(0); |
- transform: scaleX(0); |
- } |
- |
- #activeProgress { |
- background-color: var(--paper-progress-active-color, --google-green-500); |
- } |
- |
- #secondaryProgress { |
- background-color: var(--paper-progress-secondary-color, --google-green-100); |
- } |
- |
- #activeProgress.indeterminate { |
- -webkit-transform-origin: center center; |
- transform-origin: center center; |
- -webkit-animation: indeterminate-bar 1s linear infinite; |
- animation: indeterminate-bar 1s linear infinite; |
- } |
- |
- @-webkit-keyframes indeterminate-bar { |
- 0% { |
- -webkit-transform: translate(-50%) scaleX(0); |
- } |
- 50% { |
- -webkit-transform: translate(0%) scaleX(0.3); |
- } |
- 100% { |
- -webkit-transform: translate(50%) scaleX(0); |
- } |
- } |
- |
- @keyframes indeterminate-bar { |
- 0% { |
- transform: translate(-50%) scaleX(0); |
- } |
- 50% { |
- transform: translate(0%) scaleX(0.3); |
- } |
- 100% { |
- transform: translate(50%) scaleX(0); |
- } |
- } |
- </style> |
- <template> |
- <div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" aria-valuemin$="{{min}}" aria-valuemax$="{{max}}"> |
- <div id="secondaryProgress" class="fit"></div> |
- <div id="activeProgress" class="fit"></div> |
- </div> |
- </template> |
-</dom-module> |
- |
-<script> |
- Polymer({ |
- |
- is: 'paper-progress', |
- |
- behaviors: [ |
- Polymer.IronRangeBehavior |
- ], |
- |
- properties: { |
- |
- /** |
- * The number that represents the current secondary progress. |
- */ |
- secondaryProgress: { |
- type: Number, |
- value: 0, |
- notify: true |
- }, |
- |
- /** |
- * The secondary ratio |
- */ |
- secondaryRatio: { |
- type: Number, |
- value: 0, |
- readOnly: true, |
- observer: '_secondaryRatioChanged' |
- }, |
- |
- /** |
- * Use an indeterminate progress indicator. |
- */ |
- indeterminate: { |
- type: Boolean, |
- value: false, |
- notify: true, |
- observer: '_toggleIndeterminate' |
- } |
- }, |
- |
- observers: [ |
- '_ratioChanged(ratio)', |
- '_secondaryProgressChanged(secondaryProgress, min, max)' |
- ], |
- |
- _toggleIndeterminate: function() { |
- // If we use attribute/class binding, the animation sometimes doesn't translate properly |
- // on Safari 7.1. So instead, we toggle the class here in the update method. |
- this.toggleClass('indeterminate', this.indeterminate, this.$.activeProgress); |
- }, |
- |
- _transformProgress: function(progress, ratio) { |
- var transform = 'scaleX(' + (ratio / 100) + ')'; |
- progress.style.transform = progress.style.webkitTransform = transform; |
- }, |
- |
- _ratioChanged: function(ratio) { |
- this._transformProgress(this.$.activeProgress, ratio); |
- }, |
- |
- _secondaryRatioChanged: function(secondaryRatio) { |
- this._transformProgress(this.$.secondaryProgress, secondaryRatio); |
- }, |
- |
- _secondaryProgressChanged: function() { |
- this.secondaryProgress = this._clampValue(this.secondaryProgress); |
- this._setSecondaryRatio(this._calcRatio(this.secondaryProgress) * 100); |
- } |
- |
- }); |
- |
-</script> |