mirror of
https://github.com/balena-io/etcher.git
synced 2025-04-24 15:27:17 +00:00
refactor(GUI): move main page specific styles to pages/main/styles (#660)
There are many SCSS rules in `lib/gui/scss/main.scss` that only apply to the main page. In order to keep things tidy, those styles were moved to `lib/gui/pages/main/styles/_main.scss`. Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
This commit is contained in:
Juan Cruz Viotti
GitHub
parent
3c5eff3739
commit
fb49b6ce4d
@ -4405,7 +4405,7 @@ a.badge:hover, a.badge:focus {
|
||||
height: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
.thumbnail .caption, .thumbnail .icon-caption {
|
||||
.thumbnail .caption, .thumbnail .page-main .icon-caption, .page-main .thumbnail .icon-caption {
|
||||
padding: 9px;
|
||||
color: white; }
|
||||
|
||||
@ -5681,7 +5681,7 @@ button.close {
|
||||
.clearfix:after {
|
||||
clear: both; }
|
||||
|
||||
.center-block, .icon-caption {
|
||||
.center-block, .page-main .icon-caption {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
@ -6036,7 +6036,7 @@ html {
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
.caption, .icon-caption {
|
||||
.caption, .page-main .icon-caption {
|
||||
font-weight: bold;
|
||||
font-size: 11px;
|
||||
margin-bottom: 0; }
|
||||
@ -6503,6 +6503,76 @@ button.btn:focus, button.progress-button:focus {
|
||||
overflow: hidden;
|
||||
word-wrap: break-word; }
|
||||
|
||||
/*
|
||||
* Copyright 2016 Resin.io
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
.page-main .icon-caption {
|
||||
margin-top: 10px; }
|
||||
.page-main .icon-caption[disabled] {
|
||||
color: #787c7f; }
|
||||
|
||||
.page-main .soft {
|
||||
color: #787c7f; }
|
||||
|
||||
.page-main .relative {
|
||||
position: relative; }
|
||||
|
||||
.page-main .step-border-left, .page-main .step-border-right {
|
||||
height: 2px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
width: 230px;
|
||||
top: 95px; }
|
||||
.page-main [disabled].step-border-left, .page-main [disabled].step-border-right {
|
||||
background-color: #787c7f; }
|
||||
|
||||
.page-main .step-border-left {
|
||||
left: -120px; }
|
||||
|
||||
.page-main .step-border-right {
|
||||
right: -120px; }
|
||||
|
||||
.page-main .step-tooltip {
|
||||
display: block;
|
||||
margin: -5px auto -20px;
|
||||
color: #85898c;
|
||||
font-size: 10px; }
|
||||
|
||||
.page-main .step-footer {
|
||||
margin-top: 10px;
|
||||
margin-bottom: -40px;
|
||||
color: #85898c;
|
||||
font-size: 10px; }
|
||||
|
||||
.page-main .step-footer-split {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: 170px; }
|
||||
|
||||
.page-main .step-footer-underline {
|
||||
border-bottom: 1px dotted;
|
||||
padding-bottom: 2px; }
|
||||
|
||||
.page-main .btn.step-footer, .page-main .step-footer.progress-button {
|
||||
font-size: 12px;
|
||||
border-bottom: 1px dashed;
|
||||
border-radius: 0;
|
||||
padding: 0; }
|
||||
|
||||
/*
|
||||
* Copyright 2016 Resin.io
|
||||
*
|
||||
@ -6585,20 +6655,9 @@ button.btn:focus, button.progress-button:focus {
|
||||
padding: 0px;
|
||||
min-width: 2px; }
|
||||
|
||||
.icon-caption {
|
||||
margin-top: 10px; }
|
||||
.icon-caption[disabled] {
|
||||
color: #787c7f; }
|
||||
|
||||
body {
|
||||
letter-spacing: 1px; }
|
||||
|
||||
.relative {
|
||||
position: relative; }
|
||||
|
||||
.soft {
|
||||
color: #787c7f; }
|
||||
|
||||
.section-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -6615,60 +6674,16 @@ body {
|
||||
padding: 0; }
|
||||
.section-footer .svg-icon {
|
||||
margin: 0 13px; }
|
||||
.section-footer .caption[os-open-external], .section-footer [os-open-external].icon-caption {
|
||||
.section-footer .caption[os-open-external], .section-footer .page-main [os-open-external].icon-caption, .page-main .section-footer [os-open-external].icon-caption {
|
||||
border-bottom: 1px dashed;
|
||||
padding-bottom: 2px; }
|
||||
.section-footer .caption[os-open-external]:hover, .section-footer [os-open-external].icon-caption:hover {
|
||||
.section-footer .caption[os-open-external]:hover, .section-footer .page-main [os-open-external].icon-caption:hover, .page-main .section-footer [os-open-external].icon-caption:hover {
|
||||
color: #85898c; }
|
||||
.section-footer .footer-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%; }
|
||||
|
||||
.step-border, .step-border-left, .step-border-right {
|
||||
height: 2px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
width: 230px;
|
||||
top: 95px; }
|
||||
.step-border[disabled], [disabled].step-border-left, [disabled].step-border-right {
|
||||
background-color: #787c7f; }
|
||||
|
||||
.step-border-left {
|
||||
left: -120px; }
|
||||
|
||||
.step-border-right {
|
||||
right: -120px; }
|
||||
|
||||
.step-tooltip {
|
||||
display: block;
|
||||
margin: -5px auto -20px;
|
||||
color: #85898c;
|
||||
font-size: 10px; }
|
||||
|
||||
.step-footer {
|
||||
margin-top: 10px;
|
||||
margin-bottom: -40px;
|
||||
color: #85898c;
|
||||
font-size: 10px; }
|
||||
|
||||
.step-footer-split {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: 170px; }
|
||||
|
||||
.step-footer-underline {
|
||||
border-bottom: 1px dotted;
|
||||
padding-bottom: 2px; }
|
||||
|
||||
.btn.step-footer, .step-footer.progress-button {
|
||||
font-size: 12px;
|
||||
border-bottom: 1px dashed;
|
||||
border-radius: 0;
|
||||
padding: 0; }
|
||||
|
||||
.wrapper {
|
||||
height: 100%;
|
||||
margin: 20px 60px; }
|
||||
|
||||
90
lib/gui/pages/main/styles/_main.scss
Normal file
90
lib/gui/pages/main/styles/_main.scss
Normal file
@ -0,0 +1,90 @@
|
||||
/*
|
||||
* Copyright 2016 Resin.io
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.page-main .icon-caption {
|
||||
@extend .caption;
|
||||
@extend .center-block;
|
||||
|
||||
margin-top: 10px;
|
||||
|
||||
&[disabled] {
|
||||
color: $color-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.page-main .soft {
|
||||
color: $color-disabled;
|
||||
}
|
||||
|
||||
.page-main .relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
%step-border {
|
||||
height: 2px;
|
||||
background-color: $text-color;
|
||||
position: absolute;
|
||||
width: 230px;
|
||||
top: 95px;
|
||||
|
||||
&[disabled] {
|
||||
background-color: $color-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.page-main .step-border-left {
|
||||
@extend %step-border;
|
||||
left: -120px;
|
||||
}
|
||||
|
||||
.page-main .step-border-right {
|
||||
@extend %step-border;
|
||||
right: -120px;
|
||||
}
|
||||
|
||||
.page-main .step-tooltip {
|
||||
display: block;
|
||||
margin: -5px auto -20px;
|
||||
color: lighten($color-disabled, 5%);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.page-main .step-footer {
|
||||
margin-top: 10px;
|
||||
margin-bottom: -40px;
|
||||
color: lighten($color-disabled, 5%);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.page-main .step-footer-split {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: $btn-min-width;
|
||||
}
|
||||
|
||||
.page-main .step-footer-underline {
|
||||
border-bottom: 1px dotted;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.page-main .btn.step-footer {
|
||||
font-size: 12px;
|
||||
border-bottom: 1px dashed;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="row around-xs">
|
||||
<div class="page-main row around-xs">
|
||||
<div class="col-xs" ng-controller="ImageSelectionController as image">
|
||||
<div class="box text-center" os-dropzone="image.selectImage($file)">
|
||||
<svg-icon class="center-block" path="{{ main.selection.getImageLogo() || '../../../assets/image.svg' }}"></svg-icon>
|
||||
|
||||
@ -49,32 +49,14 @@ $alert-padding: 13px;
|
||||
@import "../components/svg-icon/styles/svg-icon";
|
||||
@import "../components/drive-selector/styles/drive-selector";
|
||||
@import "../components/tooltip-modal/styles/tooltip-modal";
|
||||
@import "../pages/main/styles/main";
|
||||
@import "../pages/settings/styles/settings";
|
||||
@import "../pages/finish/styles/finish";
|
||||
|
||||
.icon-caption {
|
||||
@extend .caption;
|
||||
@extend .center-block;
|
||||
|
||||
margin-top: 10px;
|
||||
|
||||
&[disabled] {
|
||||
color: $color-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.soft {
|
||||
color: $color-disabled;
|
||||
}
|
||||
|
||||
.section-footer {
|
||||
@extend .text-center;
|
||||
|
||||
@ -117,62 +99,6 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.step-border {
|
||||
height: 2px;
|
||||
background-color: $text-color;
|
||||
position: absolute;
|
||||
width: 230px;
|
||||
top: 95px;
|
||||
|
||||
&[disabled] {
|
||||
background-color: $color-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.step-border-left {
|
||||
@extend .step-border;
|
||||
left: -120px;
|
||||
}
|
||||
|
||||
.step-border-right {
|
||||
@extend .step-border;
|
||||
right: -120px;
|
||||
}
|
||||
|
||||
.step-tooltip {
|
||||
display: block;
|
||||
margin: -5px auto -20px;
|
||||
color: lighten($color-disabled, 5%);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.step-footer {
|
||||
margin-top: 10px;
|
||||
margin-bottom: -40px;
|
||||
color: lighten($color-disabled, 5%);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.step-footer-split {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: $btn-min-width;
|
||||
}
|
||||
|
||||
.step-footer-underline {
|
||||
border-bottom: 1px dotted;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.btn.step-footer {
|
||||
font-size: 12px;
|
||||
border-bottom: 1px dashed;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
height: 100%;
|
||||
margin: 20px 60px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user