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>

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; }

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;
+}

lib/gui/pages/main/templates/main.tpl.html

@@ -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>

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;