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

Unified 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, 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 side-by-side diff with in-line comments
Download patch
Index: third_party/polymer/v1_0/components-chromium/paper-progress/paper-progress.html
diff --git a/third_party/polymer/v1_0/components-chromium/paper-progress/paper-progress.html b/third_party/polymer/v1_0/components-chromium/paper-progress/paper-progress.html
index 6076a648f46cfb98492978ff1f3f803cb1990d2a..9a0e813c7ab1c6585c22594ac50a6e33aa2dd5be 100644
--- a/third_party/polymer/v1_0/components-chromium/paper-progress/paper-progress.html
+++ b/third_party/polymer/v1_0/components-chromium/paper-progress/paper-progress.html
@@ -56,6 +56,17 @@ the value changed. You can also customize the transition:
--paper-progress-transition-transition-delay: 0s;
}
+The following mixins are available for styling:
+
+
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-progress-container` | Mixin applied to container | `{}`
+
+
+
+
@group Paper Elements
@element paper-progress
@hero hero.svg
@@ -91,8 +102,12 @@ the value changed. You can also customize the transition:
#progressContainer {
position: relative;
height: 100%;
- background-color: var(--paper-progress-container-color, --google-grey-300);
overflow: hidden;
+ @apply(--paper-progress-container);
+ }
+
+ #progressContainer, #indeterminateSplitter {
+ background-color: var(--paper-progress-container-color, --google-grey-300);
}
#activeProgress,
@@ -110,35 +125,87 @@ the value changed. You can also customize the transition:
#secondaryProgress {
background-color: var(--paper-progress-secondary-color, --google-green-100);
}
+
+ #indeterminateSplitter {
+ display: none;
+ }
#activeProgress.indeterminate {
+ -webkit-transform-origin: right center;
+ transform-origin: right center;
+ -webkit-animation: indeterminate-bar 2s linear infinite;
+ animation: indeterminate-bar 2s linear infinite;
+ }
+
+ #indeterminateSplitter.indeterminate {
+ display: block;
-webkit-transform-origin: center center;
transform-origin: center center;
- -webkit-animation: indeterminate-bar 1s linear infinite;
- animation: indeterminate-bar 1s linear infinite;
+ -webkit-animation: indeterminate-splitter 2s linear infinite;
+ animation: indeterminate-splitter 2s linear infinite;
}
@-webkit-keyframes indeterminate-bar {
0% {
- -webkit-transform: translate(-50%) scaleX(0);
+ -webkit-transform: scaleX(1) translateX(-100%);
}
50% {
- -webkit-transform: translate(0%) scaleX(0.3);
+ -webkit-transform: scaleX(1) translateX(0%);
+ }
+ 75% {
+ -webkit-transform: scaleX(1) translateX(0%);
+ -webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91);
}
100% {
- -webkit-transform: translate(50%) scaleX(0);
+ -webkit-transform: scaleX(0) translateX(0%);
+ }
+ }
+
+ @-webkit-keyframes indeterminate-splitter {
+ 0% {
+ -webkit-transform: scaleX(.75) translateX(-125%);
+ }
+ 30% {
+ -webkit-transform: scaleX(.75) translateX(-125%);
+ -webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8);
+ }
+ 90% {
+ -webkit-transform: scaleX(.75) translateX(125%);
+ }
+ 100% {
+ -webkit-transform: scaleX(.75) translateX(125%);
}
}
@keyframes indeterminate-bar {
0% {
- transform: translate(-50%) scaleX(0);
+ transform: scaleX(1) translateX(-100%);
}
50% {
- transform: translate(0%) scaleX(0.3);
+ transform: scaleX(1) translateX(0%);
+ }
+ 75% {
+ transform: scaleX(1) translateX(0%);
+ animation-timing-function: cubic-bezier(.28,.62,.37,.91);
+ }
+ 100% {
+ transform: scaleX(0) translateX(0%);
+ }
+ }
+
+ @keyframes indeterminate-splitter {
+ 0% {
+ transform: scaleX(.75) translateX(-125%);
+ }
+ 30% {
+ transform: scaleX(.75) translateX(-125%);
+ animation-timing-function: cubic-bezier(.42,0,.6,.8);
+ }
+ 90% {
+ transform: scaleX(.75) translateX(125%);
}
100% {
- transform: translate(50%) scaleX(0);
+ transform: scaleX(.75) translateX(125%);
}
}
</style>
@@ -146,6 +213,7 @@ the value changed. You can also customize the transition:
<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 id="indeterminateSplitter" class="fit"></div>
</div>
</template>
</dom-module>

Powered by Google App Engine
This is Rietveld 408576698