jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-04-24 23:37:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(GUI): use new design blue and spacing (#2327)

Browse Source 
We use the new design blue, spacing, and order of step buttons.

Closes: https://github.com/resin-io/etcher/issues/2310
Change-Type: patch
This commit is contained in:
Benedict Aas 2018-05-14 15:58:45 +01:00 committed by GitHub
parent b57c9a51f8
commit 81a75ca955
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 35 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
lib/gui/app/pages/main/styles/_main.scss
View File

@ -79,11 +79,15 @@ svg-icon > img[disabled] {
}
.page-main .step-footer {
margin-top: 10px;
width: 100%;
color: $palette-theme-dark-disabled-foreground;
font-size: 10px;
}
.page-main p.step-footer {
margin-top: 9px;
}
.page-main .step-footer-split {
position: absolute;
top: 39px;
@ -111,6 +115,10 @@ svg-icon > img[disabled] {
margin-top: 1px;
}
.page-main div.step-fill {
margin-top: 25px;
}
.page-main .step-drive.step-list {
&::-webkit-scrollbar {
width: 4px;
@ -133,7 +141,6 @@ svg-icon > img[disabled] {
height: 39px;
width: 100%;
margin-right: 4.5px;
margin-bottom: 10px;
font-weight: bold;
color: $palette-theme-primary-foreground;
}
@ -141,6 +148,7 @@ svg-icon > img[disabled] {
.page-main .step-size {
margin-right: 4.5px;
color: $palette-theme-dark-disabled-foreground;
margin-top: 10px;
}
.page-main .step-list {

12
lib/gui/app/pages/main/templates/main.tpl.html
View File

@ -26,13 +26,12 @@
class="step-image step-name"
ng-bind="main.selection.getImageName() || image.getImageBasename() | middleEllipsis:20"
uib-tooltip="{{ image.getImageBasename() }}"></span>
<button class="button button-link step-footer"
tabindex="1"
ng-click="image.reselectImage()"
ng-hide="main.state.isFlashing()">Change</button>
<span class="step-image step-size">{{ main.selection.getImageSize() | closestUnit }}</span>
</div>
<button class="button button-link step-footer"
tabindex="1"
ng-click="image.reselectImage()"
ng-hide="main.state.isFlashing()">Change</button>
</div>
</div>
</div>
@ -88,6 +87,9 @@
ng-click="drive.reselectDrive()">Change</button>
</div>
<div ng-if="main.selection.getSelectedDevices().length > 1"
ng-class="{
'step-fill': !drive.shouldShowDrivesButton()
}"
class="step-drive step-list">
<div ng-repeat="driveObj in drive.getMemoizedSelectedDrives()"
uib-tooltip="{{ driveObj.description }} ({{ driveObj.displayName }})">

2
lib/gui/app/scss/modules/_theme.scss
View File

@ -27,7 +27,7 @@ $palette-theme-light-disabled-background: #d5d5d5;
$palette-theme-light-disabled-foreground: #787c7f;
$palette-theme-default-background: #ececec;
$palette-theme-default-foreground: #b3b3b3;
$palette-theme-primary-background: #5793db;
$palette-theme-primary-background: #2297de;
$palette-theme-primary-foreground: #fff;
$palette-theme-warning-background: #ff912f;
$palette-theme-warning-foreground: #fff;

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

@ -6142,13 +6142,13 @@ body {
color: #b3b3b3; }
.button-primary, .progress-button {
background-color: #5793db;
background-color: #2297de;
color: #fff; }
.button-primary:focus, .progress-button:focus,
.button-primary:hover,
.progress-button:hover {
background-color: #2d78d2;
background-color: #1b79b2;
color: #fff; }
.button-danger {
@ -6246,7 +6246,7 @@ body {
max-height: 250px;
overflow: auto; }
.modal-body a {
color: #5793db; }
color: #2297de; }
.modal-body > p {
white-space: pre-line; }
.modal-body > p:last-child {
@ -6328,9 +6328,9 @@ body {
.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, #3b679b), color-stop(0.26, #5c93d6), color-stop(0.5, #5c93d6), color-stop(0.51, #3b679b), color-stop(0.75, #3b679b), color-stop(0.76, #5c93d6), to(#5c93d6)); }
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #265d7e), color-stop(0.26, #2895d8), color-stop(0.5, #2895d8), color-stop(0.51, #265d7e), color-stop(0.75, #265d7e), color-stop(0.76, #2895d8), to(#2895d8)); }
.progress-button.progress-button--striped .progress-button__bar {
background-color: #6ca1e0; }
background-color: #38a1e1; }
.progress-button__content {
position: relative;
@ -6420,8 +6420,8 @@ body {
border: none;
outline: none; }
.modal-drive-selector-modal .list-group-item progress::-webkit-progress-value {
border-bottom: 1px solid #296cbd;
background-color: #5793db; }
border-bottom: 1px solid #176a9c;
background-color: #2297de; }
.modal-drive-selector-modal .list-group-item-heading {
font-size: 13px; }
@ -6551,10 +6551,13 @@ svg-icon > img[disabled] {
font-size: 10px; }
.page-main .step-footer {
margin-top: 10px;
width: 100%;
color: #787c7f;
font-size: 10px; }
.page-main p.step-footer {
margin-top: 9px; }
.page-main .step-footer-split {
position: absolute;
top: 39px;
@ -6571,13 +6574,16 @@ svg-icon > img[disabled] {
.page-main .button.step-footer, .page-main .step-footer.progress-button {
font-size: 12px;
color: #5793db;
color: #2297de;
border-radius: 0;
padding: 0; }
.page-main .step-drive.glyphicon, .page-main .step-drive.tick {
margin-top: 1px; }
.page-main div.step-fill {
margin-top: 25px; }
.page-main .step-drive.step-list::-webkit-scrollbar {
width: 4px; }
@ -6595,13 +6601,13 @@ svg-icon > img[disabled] {
height: 39px;
width: 100%;
margin-right: 4.5px;
margin-bottom: 10px;
font-weight: bold;
color: #fff; }
.page-main .step-size {
margin-right: 4.5px;
color: #787c7f; }
color: #787c7f;
margin-top: 10px; }
.page-main .step-list {
height: 80px;