From fb49b6ce4d75d5477af59f238a0a2088dd32bf99 Mon Sep 17 00:00:00 2001 From: Juan Cruz Viotti Date: Fri, 26 Aug 2016 10:26:45 -0400 Subject: [PATCH] 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 --- build/css/main.css | 135 ++++++++++++--------- lib/gui/pages/main/styles/_main.scss | 90 ++++++++++++++ lib/gui/pages/main/templates/main.tpl.html | 2 +- lib/gui/scss/main.scss | 76 +----------- 4 files changed, 167 insertions(+), 136 deletions(-) create mode 100644 lib/gui/pages/main/styles/_main.scss diff --git a/build/css/main.css b/build/css/main.css index 4f5b56f6..bd76054c 100644 --- a/build/css/main.css +++ b/build/css/main.css @@ -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; } diff --git a/lib/gui/pages/main/styles/_main.scss b/lib/gui/pages/main/styles/_main.scss new file mode 100644 index 00000000..fc976e60 --- /dev/null +++ b/lib/gui/pages/main/styles/_main.scss @@ -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; +} diff --git a/lib/gui/pages/main/templates/main.tpl.html b/lib/gui/pages/main/templates/main.tpl.html index dd4423e1..88e23901 100644 --- a/lib/gui/pages/main/templates/main.tpl.html +++ b/lib/gui/pages/main/templates/main.tpl.html @@ -1,4 +1,4 @@ -
+
diff --git a/lib/gui/scss/main.scss b/lib/gui/scss/main.scss index 6e44c6cd..b9524714 100644 --- a/lib/gui/scss/main.scss +++ b/lib/gui/scss/main.scss @@ -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;