jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-27 21:26:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Invert progress bar stripes (#260)

Browse Source 
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:
Juan Cruz Viotti 2016-04-08 10:06:56 -04:00
parent 1bfe88f2f4
commit 2862663ca7
2 changed files with 4 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
build/css/main.css
View File

@ -6164,7 +6164,7 @@ button.btn:focus, button.progress-button:focus {
.progress-button--primary .progress-button__bar { .progress-button--primary .progress-button__bar {
background: #6ca1e0; } 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)); } 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 { .progress-button[percentage="100"][active="false"] .progress-button__bar {
@ -6188,13 +6188,7 @@ button.btn:focus, button.progress-button:focus {
height: 100%; height: 100%;
transition: width 0.3s; } transition: width 0.3s; }
.progress-button--striped .progress-button__bar:after { .progress-button--striped {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: 20px 20px; background-size: 20px 20px;
animation: progress-button-stripes 1s linear infinite; animation: progress-button-stripes 1s linear infinite;
overflow: hidden; } overflow: hidden; }

12
lib/browser/components/progress-button/styles/_progress-button.scss
View File

@ -61,7 +61,7 @@ $progress-button-stripes-animation-duration: 1s;
$progress-button-stripes-background-color: desaturate($brand-primary, 5%); $progress-button-stripes-background-color: desaturate($brand-primary, 5%);
$progress-button-stripes-color: desaturate(darken($brand-primary, 18%), 20%); $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%, background-image: -webkit-gradient(linear, 0 0, 100% 100%,
color-stop(0.25, $progress-button-stripes-color), color-stop(0.25, $progress-button-stripes-color),
color-stop(0.25, $progress-button-stripes-background-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 { .progress-button--striped {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: $progress-button-stripes-width $progress-button-stripes-width; background-size: $progress-button-stripes-width $progress-button-stripes-width;
animation: progress-button-stripes $progress-button-stripes-animation-duration linear infinite; animation: progress-button-stripes $progress-button-stripes-animation-duration linear infinite;
overflow: hidden; overflow: hidden;