jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-12 22:06:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(GUI): make sure progress button is always rounded (#1768)

Browse Source 
At the moment the progress button which has slightly rounded corners
allows the "__bar" to overflow. This causes the corners to become
angular again which looks weird. I set the button's "overflow" to
"hidden" to fix this issue.

Changelog-Entry: Make sure the progress button is always rounded.
Change-Type: patch
This commit is contained in:
Niklas Higi 2017-10-14 14:41:00 +02:00 committed by Jonas Hermsmeier
parent 78fdc5b07e
commit 6acfcfd23c
2 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/gui/components/progress-button/styles/_progress-button.scss
View File

@ -48,6 +48,8 @@ $progress-button-stripes-animation-duration: 1s;
@extend .button; @extend .button;
@extend .button-primary; @extend .button-primary;
overflow: hidden;
&[active="true"] { &[active="true"] {
background-color: $palette-theme-warning-background; background-color: $palette-theme-warning-background;
} }

4
lib/gui/css/main.css
View File

@ -6315,12 +6315,12 @@ body {
* <span class="progress-button__bar" style="width: 50%;"></span> * <span class="progress-button__bar" style="width: 50%;"></span>
* </button> * </button>
*/ */
.progress-button {
overflow: hidden; }
.progress-button[active="true"] { .progress-button[active="true"] {
background-color: #ff912f; } background-color: #ff912f; }
.progress-button .progress-button__bar { .progress-button .progress-button__bar {
background-color: #ff9e49; } background-color: #ff9e49; }
.progress-button.progress-button--striped { .progress-button.progress-button--striped {
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #bd6415), color-stop(0.26, #fa9134), color-stop(0.5, #fa9134), color-stop(0.51, #bd6415), color-stop(0.75, #bd6415), color-stop(0.76, #fa9134), to(#fa9134)); } background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #bd6415), color-stop(0.26, #fa9134), color-stop(0.5, #fa9134), color-stop(0.51, #bd6415), color-stop(0.75, #bd6415), color-stop(0.76, #fa9134), to(#fa9134)); }
.progress-button.progress-button--striped .progress-button__bar { .progress-button.progress-button--striped .progress-button__bar {