jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-04-24 07:17:18 +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

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

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

@ -6315,16 +6315,16 @@ body {
* <span class="progress-button__bar" style="width: 50%;"></span>
* </button>
*/
.progress-button[active="true"] {
background-color: #ff912f; }
.progress-button .progress-button__bar {
background-color: #ff9e49; }
.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)); }
.progress-button.progress-button--striped .progress-button__bar {
.progress-button {
overflow: hidden; }
.progress-button[active="true"] {
background-color: #ff912f; }
.progress-button .progress-button__bar {
background-color: #ff9e49; }
.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)); }
.progress-button.progress-button--striped .progress-button__bar {
background-color: #ff9e49; }
.progress-button__content {
position: relative;