Permalink
Browse files

bug: Buffered progress-bar did not show dots at the end

  • Loading branch information...
MikeMitterer committed May 3, 2017
1 parent 1237311 commit c946f8bdfbfd0e29ce6f60da40df85b3ae8f1ccf
Showing with 36 additions and 33 deletions.
  1. +21 −21 lib/assets/styles/material.css
  2. +1 −1 lib/assets/styles/material.min.css
  3. +14 −11 lib/assets/styles/progress/_progress.orig.scss
@@ -4903,7 +4903,7 @@ input.mdl-button[type="submit"] {
position: absolute;
top: 0;
bottom: 0;
width: 0%;
width: 0;
-webkit-transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
@@ -4926,8 +4926,8 @@ input.mdl-button[type="submit"] {
.mdl-progress:not(.mdl-progress__indeterminate):not(.mdl-progress__indeterminate) > .auxbar {
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), -webkit-linear-gradient(left, #3f51b5, #3f51b5);
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(to right, #3f51b5, #3f51b5);
-webkit-mask: url("/buffer.svg?embed");
mask: url("/buffer.svg?embed"); } }
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2212%22%20height%3D%224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cellipse%20cx%3D%222%22%20cy%3D%222%22%20rx%3D%222%22%20ry%3D%222%22%3E%3Canimate%20attributeName%3D%22cx%22%20from%3D%222%22%20to%3D%22-10%22%20dur%3D%220.6s%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Fellipse%3E%3Cellipse%20cx%3D%2214%22%20cy%3D%222%22%20rx%3D%222%22%20ry%3D%222%22%20class%3D%22loader%22%3E%3Canimate%20attributeName%3D%22cx%22%20from%3D%2214%22%20to%3D%222%22%20dur%3D%220.6s%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Fellipse%3E%3C%2Fsvg%3E");
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2212%22%20height%3D%224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cellipse%20cx%3D%222%22%20cy%3D%222%22%20rx%3D%222%22%20ry%3D%222%22%3E%3Canimate%20attributeName%3D%22cx%22%20from%3D%222%22%20to%3D%22-10%22%20dur%3D%220.6s%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Fellipse%3E%3Cellipse%20cx%3D%2214%22%20cy%3D%222%22%20rx%3D%222%22%20ry%3D%222%22%20class%3D%22loader%22%3E%3Canimate%20attributeName%3D%22cx%22%20from%3D%2214%22%20to%3D%222%22%20dur%3D%220.6s%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Fellipse%3E%3C%2Fsvg%3E"); } }
.mdl-progress:not(.mdl-progress--indeterminate) > .auxbar,
.mdl-progress:not(.mdl-progress__indeterminate) > .auxbar {
@@ -4961,53 +4961,53 @@ input.mdl-button[type="submit"] {
@-webkit-keyframes indeterminate1 {
0% {
left: 0%;
width: 0%; }
left: 0;
width: 0; }
50% {
left: 25%;
width: 75%; }
75% {
left: 100%;
width: 0%; } }
width: 0; } }
@keyframes indeterminate1 {
0% {
left: 0%;
width: 0%; }
left: 0;
width: 0; }
50% {
left: 25%;
width: 75%; }
75% {
left: 100%;
width: 0%; } }
width: 0; } }
@-webkit-keyframes indeterminate2 {
0% {
left: 0%;
width: 0%; }
left: 0;
width: 0; }
50% {
left: 0%;
width: 0%; }
left: 0;
width: 0; }
75% {
left: 0%;
left: 0;
width: 25%; }
100% {
left: 100%;
width: 0%; } }
width: 0; } }
@keyframes indeterminate2 {
0% {
left: 0%;
width: 0%; }
left: 0;
width: 0; }
50% {
left: 0%;
width: 0%; }
left: 0;
width: 0; }
75% {
left: 0%;
left: 0;
width: 25%; }
100% {
left: 100%;
width: 0%; } }
width: 0; } }
.mdl-navigation {
display: -webkit-box;

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -29,7 +29,7 @@
position: absolute;
top: 0;
bottom: 0;
width: 0%;
width: 0;
transition: width 0.2s $animation-curve-default;
}
@@ -56,7 +56,10 @@
.mdl-progress:not(.mdl-progress__indeterminate):not(.mdl-progress__indeterminate) > .auxbar {
background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
linear-gradient(to right, $progress-main-color, $progress-main-color);
mask: url('#{$progress-image-path}/buffer.svg?embed');
// mask: url('#{$progress-image-path}/buffer.svg?embed');
mask: svg-buffer();
}
}
@@ -87,34 +90,34 @@
@keyframes indeterminate1 {
0% {
left: 0%;
width: 0%;
left: 0;
width: 0;
}
50% {
left: 25%;
width: 75%;
}
75% {
left: 100%;
width: 0%;
width: 0;
}
}
@keyframes indeterminate2 {
0% {
left: 0%;
width: 0%;
left: 0;
width: 0;
}
50% {
left: 0%;
width: 0%;
left: 0;
width: 0;
}
75% {
left: 0%;
left: 0;
width: 25%;
}
100% {
left: 100%;
width: 0%;
width: 0;
}
}

0 comments on commit c946f8b

Please sign in to comment.