Cleanup CSS (#471)

This is by no means a complete CSS refactoring. There still a lot to be
done. This encompasses mostly:

- Move "Finish page" specific styles to that module.
- Remove unused CSS rules.
- Move generic Bootstrap rules to `_bootstrap.scss`.

Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>

build/css/main.css

@@ -5916,6 +5916,9 @@ html {
   border: none;
   border-radius: 2px; }
 
+[uib-tooltip] {
+  cursor: default; }
+
 /*
  * Copyright 2016 Resin.io
  *
@@ -6282,25 +6285,6 @@ button.btn:focus, button.progress-button:focus {
 .alert-ribbon--open {
   top: 0; }
 
-/*
- * 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.
- */
-.list-group-item[disabled] {
-  text-decoration: line-through;
-  cursor: not-allowed; }
-
 /*
  * Copyright 2016 Resin.io
  *
@@ -6464,35 +6448,51 @@ button.btn:focus, button.progress-button:focus {
 .page-settings .checkbox input[type="checkbox"]:not(:checked) + * {
   color: #ddd; }
 
-.monospace {
+/*
+ * 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-finish .button-label {
+  margin: 0 auto 15px;
+  max-width: 165px; }
+
+.page-finish .label {
+  display: inline-block; }
+
+.page-finish .monospace {
   font-family: monospace; }
 
+.page-finish .soft {
+  color: #ddd; }
+
+.page-finish .separator-xs {
+  flex-grow: 0;
+  background-color: #64686a;
+  padding: 0px;
+  min-width: 2px; }
+
 .icon-caption {
   margin-top: 10px; }
   .icon-caption[disabled] {
     color: #787c7f; }
 
-.block {
-  display: block; }
-
-.inline-block {
-  display: inline-block; }
-
 body {
   letter-spacing: 1px; }
 
-.content {
-  height: 100%; }
-
 .relative {
   position: relative; }
 
-.soft {
-  color: #ddd; }
-
-[uib-tooltip] {
-  cursor: default; }
-
 .section-footer {
   display: flex;
   align-items: center;
@@ -6557,16 +6557,6 @@ body {
   border-radius: 0;
   padding: 0; }
 
-.separator-xs {
-  flex-grow: 0;
-  background-color: #64686a;
-  padding: 0px;
-  min-width: 2px; }
-
-.button-label {
-  margin: 0 auto 15px;
-  max-width: 165px; }
-
 .wrapper {
   height: 100%;
   margin: 20px 60px; }

lib/gui/pages/finish/styles/_finish.scss

@@ -14,7 +14,28 @@
  * limitations under the License.
  */
 
-.list-group-item[disabled] {
+.page-finish .button-label {
-  text-decoration: line-through;
+  margin: 0 auto $spacing-medium;
-  cursor: not-allowed;
+
+  // Keep some spacing at the sides
+  max-width: $btn-min-width - 5px;
+}
+
+.page-finish .label {
+  display: inline-block;
+}
+
+.page-finish .monospace {
+  font-family: monospace;
+}
+
+.page-finish .soft {
+  color: $gray-light;
+}
+
+.page-finish .separator-xs {
+  flex-grow: 0;
+  background-color: darken($color-disabled, 8%);
+  padding: 0px;
+  min-width: 2px;
 }

lib/gui/pages/finish/templates/success.tpl.html

@@ -1,4 +1,4 @@
-<div class="row around-xs">
+<div class="page-finish row around-xs">
   <div class="col-xs">
     <div class="box text-center">
       <h3><span class="tick tick--success" class="space-right-tiny"></span> Flash Complete!</h3>
@@ -28,7 +28,7 @@
         </div>
       </div>
 
-      <span class="inline-block label label-default">CRC32 CHECKSUM : <b class="monospace">{{ ::finish.params.checksum }}</b></span>
+      <span class="label label-default">CRC32 CHECKSUM : <b class="monospace">{{ ::finish.params.checksum }}</b></span>
     </div>
   </div>
 </div>

lib/gui/scss/main.scss

@@ -44,15 +44,11 @@ $alert-padding: 13px;
 @import "./components/tick";
 @import "./components/modal";
 @import "./components/alert-ribbon";
-@import "./components/list-group";
 @import "../components/update-notifier/styles/update-notifier";
 @import "../components/progress-button/styles/progress-button";
 @import "../components/svg-icon/styles/svg-icon";
 @import "../pages/settings/styles/settings";
-
+@import "../pages/finish/styles/finish";
-.monospace {
-  font-family: monospace;
-}
 
 .icon-caption {
   @extend .caption;
@@ -65,34 +61,14 @@ $alert-padding: 13px;
   }
 }
 
-.block {
-  display: block;
-}
-
-.inline-block {
-  display: inline-block;
-}
-
 body {
   letter-spacing: 1px;
 }
 
-.content {
-  height: 100%;
-}
-
 .relative {
   position: relative;
 }
 
-.soft {
-  color: $gray-light;
-}
-
-[uib-tooltip] {
-  cursor: default;
-}
-
 .section-footer {
   @extend .text-center;
 
@@ -184,20 +160,6 @@ body {
   padding: 0;
 }
 
-.separator-xs {
-  flex-grow: 0;
-  background-color: darken($color-disabled, 8%);
-  padding: 0px;
-  min-width: 2px;
-}
-
-.button-label {
-  margin: 0 auto $spacing-medium;
-
-  // Keep some spacing at the sides
-  max-width: $btn-min-width - 5px;
-}
-
 .wrapper {
   height: 100%;
   margin: 20px 60px;

lib/gui/scss/modules/_bootstrap.scss

@@ -39,3 +39,7 @@ html {
   border: none;
   border-radius: 2px;
 }
+
+[uib-tooltip] {
+  cursor: default;
+}