mirror of
https://github.com/balena-io/etcher.git
synced 2025-07-23 19:26:33 +00:00
fix(GUI): Fix styling issues with buttons
Change-type: patch Changelog-entry: Moved back the write cancel button Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzoa@balena.io>
This commit is contained in:
parent
76af6e975e
commit
afd888e14d
@ -24,7 +24,7 @@ const { default: styled, keyframes } = require('styled-components')
|
|||||||
|
|
||||||
const { ProgressBar, Provider } = require('rendition')
|
const { ProgressBar, Provider } = require('rendition')
|
||||||
|
|
||||||
const { colors, consts } = require('./../../theme')
|
const { colors } = require('./../../theme')
|
||||||
const { StepButton, StepSelection } = require('./../../styled-components')
|
const { StepButton, StepSelection } = require('./../../styled-components')
|
||||||
|
|
||||||
const darkenForegroundStripes = 0.18
|
const darkenForegroundStripes = 0.18
|
||||||
@ -51,13 +51,16 @@ const ProgressButtonStripes = keyframes `
|
|||||||
|
|
||||||
const FlashProgressBar = styled(ProgressBar) `
|
const FlashProgressBar = styled(ProgressBar) `
|
||||||
> div {
|
> div {
|
||||||
|
width: 200px;
|
||||||
|
height: 48px;
|
||||||
color: white !important;
|
color: white !important;
|
||||||
text-shadow: none !important;
|
text-shadow: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
width: 100%;
|
width: 200px;
|
||||||
max-width: ${consts.btnMaxWidth};
|
height: 48px;
|
||||||
margin: auto;
|
font-size: 16px;
|
||||||
|
line-height: 48px;
|
||||||
|
|
||||||
background: ${Color(colors.warning.background).darken(darkenForegroundStripes).string()};
|
background: ${Color(colors.warning.background).darken(darkenForegroundStripes).string()};
|
||||||
`
|
`
|
||||||
|
@ -24,14 +24,22 @@ const SvgIcon = require('../svg-icon/svg-icon.jsx')
|
|||||||
const Div = styled.div `
|
const Div = styled.div `
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 45px;
|
top: 45px;
|
||||||
left: 550px;
|
left: 545px;
|
||||||
|
|
||||||
> span.step-name {
|
> span.step-name {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
|
||||||
> span {
|
> span {
|
||||||
margin-left: 5px;
|
margin-left: 10px;
|
||||||
font-weight: normal;
|
}
|
||||||
|
|
||||||
|
> span:nth-child(2) {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
> span:nth-child(3) {
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: italic;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -48,11 +48,20 @@ svg-icon > img[disabled] {
|
|||||||
|
|
||||||
.page-main .button-brick {
|
.page-main .button-brick {
|
||||||
min-width: $btn-min-width;
|
min-width: $btn-min-width;
|
||||||
|
width: 200px;
|
||||||
|
height: 48px;
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-main .button-abort-write {
|
.page-main .button-abort-write {
|
||||||
margin-right: -35px;
|
width: 20px;
|
||||||
z-index: 1;
|
height: 20px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
position: absolute;
|
||||||
|
right: -17px;
|
||||||
|
top: 30%;
|
||||||
}
|
}
|
||||||
|
|
||||||
%step-border {
|
%step-border {
|
||||||
|
@ -67,6 +67,13 @@ $fa-font-path: "../../../node_modules/@fortawesome/fontawesome-free-webfonts/web
|
|||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: Roboto;
|
||||||
|
src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff');
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: Roboto;
|
font-family: Roboto;
|
||||||
src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff');
|
src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff');
|
||||||
@ -106,7 +113,7 @@ body,
|
|||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
color: $palette-theme-dark-disabled-foreground;
|
color: $palette-theme-dark-disabled-foreground;
|
||||||
margin: 0 60px 20px 60px;
|
margin: 0 30px 16px 30px;
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
border-top: 2px solid $palette-theme-dark-soft-background;
|
border-top: 2px solid $palette-theme-dark-soft-background;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -134,7 +141,6 @@ body,
|
|||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 50%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
> span[os-open-external] {
|
> span[os-open-external] {
|
||||||
@ -161,7 +167,7 @@ body,
|
|||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin: 20px 60px;
|
margin: 20px 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-header {
|
.section-header {
|
||||||
@ -187,8 +193,8 @@ featured-project {
|
|||||||
height: 360px;
|
height: 360px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
left: 5%;
|
left: 30px;
|
||||||
top: 10%;
|
top: 45px;
|
||||||
border-radius: 7px;
|
border-radius: 7px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
@ -21,7 +21,7 @@ $palette-theme-light-background: #fff;
|
|||||||
$palette-theme-dark-soft-foreground: #ddd;
|
$palette-theme-dark-soft-foreground: #ddd;
|
||||||
$palette-theme-dark-soft-background: #64686a;
|
$palette-theme-dark-soft-background: #64686a;
|
||||||
$palette-theme-light-soft-foreground: #b3b3b3;
|
$palette-theme-light-soft-foreground: #b3b3b3;
|
||||||
$palette-theme-dark-disabled-background: #313339;
|
$palette-theme-dark-disabled-background: #3a3c41;
|
||||||
$palette-theme-dark-disabled-foreground: #787c7f;
|
$palette-theme-dark-disabled-foreground: #787c7f;
|
||||||
$palette-theme-light-disabled-background: #d5d5d5;
|
$palette-theme-light-disabled-background: #d5d5d5;
|
||||||
$palette-theme-light-disabled-foreground: #787c7f;
|
$palette-theme-light-disabled-foreground: #787c7f;
|
||||||
|
@ -17,14 +17,15 @@
|
|||||||
'use strict'
|
'use strict'
|
||||||
|
|
||||||
const styled = require('styled-components').default
|
const styled = require('styled-components').default
|
||||||
const { colors, consts } = require('./theme')
|
const { colors } = require('./theme')
|
||||||
const {
|
const {
|
||||||
Button, Txt, Flex
|
Button, Txt, Flex
|
||||||
} = require('rendition')
|
} = require('rendition')
|
||||||
|
|
||||||
exports.StepButton = styled(Button) `
|
exports.StepButton = styled(Button) `
|
||||||
width: 100%;
|
width: 200px;
|
||||||
max-width: ${consts.btnMaxWidth};
|
height: 48px;
|
||||||
|
font-size: 16px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
@ -39,7 +40,6 @@ exports.StepButton = styled(Button) `
|
|||||||
`
|
`
|
||||||
|
|
||||||
exports.ChangeButton = styled(Button) `
|
exports.ChangeButton = styled(Button) `
|
||||||
font-size: 12px;
|
|
||||||
color: ${colors.primary.background};
|
color: ${colors.primary.background};
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -6075,7 +6075,7 @@ body {
|
|||||||
top: 2px;
|
top: 2px;
|
||||||
margin-right: 2px; }
|
margin-right: 2px; }
|
||||||
.button[disabled] {
|
.button[disabled] {
|
||||||
background-color: #313339;
|
background-color: #3a3c41;
|
||||||
color: #787c7f; }
|
color: #787c7f; }
|
||||||
|
|
||||||
.button-block {
|
.button-block {
|
||||||
@ -6425,11 +6425,20 @@ svg-icon > img[disabled] {
|
|||||||
position: relative; }
|
position: relative; }
|
||||||
|
|
||||||
.page-main .button-brick {
|
.page-main .button-brick {
|
||||||
min-width: 170px; }
|
min-width: 170px;
|
||||||
|
width: 200px;
|
||||||
|
height: 48px;
|
||||||
|
font-size: 16px; }
|
||||||
|
|
||||||
.page-main .button-abort-write {
|
.page-main .button-abort-write {
|
||||||
margin-right: -35px;
|
width: 20px;
|
||||||
z-index: 1; }
|
height: 20px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
position: absolute;
|
||||||
|
right: -17px;
|
||||||
|
top: 30%; }
|
||||||
|
|
||||||
.page-main .step-border-left, .page-main .step-border-right {
|
.page-main .step-border-left, .page-main .step-border-right {
|
||||||
height: 2px;
|
height: 2px;
|
||||||
@ -9872,6 +9881,12 @@ readers do not read off random characters that represent icons */
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal; }
|
font-style: normal; }
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: Roboto;
|
||||||
|
src: url("../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff");
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal; }
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: Roboto;
|
font-family: Roboto;
|
||||||
src: url("../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff");
|
src: url("../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff");
|
||||||
@ -9901,7 +9916,7 @@ body,
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
color: #787c7f;
|
color: #787c7f;
|
||||||
margin: 0 60px 20px 60px;
|
margin: 0 30px 16px 30px;
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
border-top: 2px solid #64686a;
|
border-top: 2px solid #64686a;
|
||||||
text-align: center; }
|
text-align: center; }
|
||||||
@ -9917,8 +9932,7 @@ body,
|
|||||||
.section-footer .footer-right {
|
.section-footer .footer-right {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0; }
|
||||||
top: 50%; }
|
|
||||||
.section-footer > span[os-open-external] {
|
.section-footer > span[os-open-external] {
|
||||||
display: flex; }
|
display: flex; }
|
||||||
|
|
||||||
@ -9937,7 +9951,7 @@ body,
|
|||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin: 20px 60px; }
|
margin: 20px 50px; }
|
||||||
|
|
||||||
.section-header {
|
.section-header {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
@ -9957,7 +9971,7 @@ featured-project.fp-visible webview {
|
|||||||
height: 360px;
|
height: 360px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
left: 5%;
|
left: 30px;
|
||||||
top: 10%;
|
top: 45px;
|
||||||
border-radius: 7px;
|
border-radius: 7px;
|
||||||
overflow: hidden; }
|
overflow: hidden; }
|
||||||
|
Loading…
x
Reference in New Issue
Block a user