diff --git a/build/css/main.css b/build/css/main.css index c512fbf2..ae675ea5 100644 --- a/build/css/main.css +++ b/build/css/main.css @@ -6164,7 +6164,7 @@ button.btn:focus, button.progress-button:focus { .progress-button--primary .progress-button__bar { background: #6ca1e0; } -.progress-button--primary.progress-button--striped .progress-button__bar:after { +.progress-button--primary.progress-button--striped { background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #3b679b), color-stop(0.25, #5c93d6), color-stop(0.5, #5c93d6), color-stop(0.5, #3b679b), color-stop(0.75, #3b679b), color-stop(0.75, #5c93d6), to(#5c93d6)); } .progress-button[percentage="100"][active="false"] .progress-button__bar { @@ -6188,13 +6188,7 @@ button.btn:focus, button.progress-button:focus { height: 100%; transition: width 0.3s; } -.progress-button--striped .progress-button__bar:after { - content: ""; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; +.progress-button--striped { background-size: 20px 20px; animation: progress-button-stripes 1s linear infinite; overflow: hidden; } diff --git a/lib/browser/components/progress-button/styles/_progress-button.scss b/lib/browser/components/progress-button/styles/_progress-button.scss index d58fc697..8dca29a6 100644 --- a/lib/browser/components/progress-button/styles/_progress-button.scss +++ b/lib/browser/components/progress-button/styles/_progress-button.scss @@ -61,7 +61,7 @@ $progress-button-stripes-animation-duration: 1s; $progress-button-stripes-background-color: desaturate($brand-primary, 5%); $progress-button-stripes-color: desaturate(darken($brand-primary, 18%), 20%); - &.progress-button--striped .progress-button__bar:after { + &.progress-button--striped { background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, $progress-button-stripes-color), color-stop(0.25, $progress-button-stripes-background-color), @@ -105,15 +105,7 @@ $progress-button-stripes-animation-duration: 1s; } -.progress-button--striped .progress-button__bar:after { - content: ""; - - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - +.progress-button--striped { background-size: $progress-button-stripes-width $progress-button-stripes-width; animation: progress-button-stripes $progress-button-stripes-animation-duration linear infinite; overflow: hidden;