mirror of
https://github.com/balena-io/etcher.git
synced 2025-07-24 19:56:37 +00:00
Invert progress bar stripes (#260)
Make the progress bar background striped, and the actual bar solid. Fixes: https://github.com/resin-io/etcher/issues/251 Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
This commit is contained in:
parent
1bfe88f2f4
commit
2862663ca7
@ -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; }
|
||||
|
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user