From d47eaa8a2a496decad91e5b71e95925bb45d7354 Mon Sep 17 00:00:00 2001
From: Juan Cruz Viotti <jviottidc@gmail.com>
Date: Wed, 30 Mar 2016 13:47:36 -0400
Subject: [PATCH] Refactor badge as a scss component

---
 build/css/main.css              | 34 ++++++++++++++++++++++++++++-----
 lib/components/hero-badge.html  | 24 -----------------------
 lib/index.html                  |  1 -
 lib/partials/main.html          |  7 ++++---
 lib/scss/components/_badge.scss | 30 +++++++++++++++++++++++++++++
 lib/scss/main.scss              | 11 +----------
 lib/scss/modules/_space.scss    |  4 ++++
 7 files changed, 68 insertions(+), 43 deletions(-)
 delete mode 100644 lib/components/hero-badge.html
 create mode 100644 lib/scss/components/_badge.scss

diff --git a/build/css/main.css b/build/css/main.css
index 1d29458c..b05fd02c 100644
--- a/build/css/main.css
+++ b/build/css/main.css
@@ -5854,6 +5854,9 @@ button.close {
   margin-top: 15px;
   margin-bottom: 15px; }
 
+.space-top-medium {
+  margin-top: 15px; }
+
 .space-vertical-large {
   margin-top: 30px;
   margin-bottom: 30px; }
@@ -5864,16 +5867,37 @@ button.close {
 .space-right-tiny {
   margin-right: 5px; }
 
-html {
+/*
+ * 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.
+ */
+.badge {
+  border: 2px solid;
+  border-radius: 50%;
+  padding: 7px 10px;
+  position: relative;
+  z-index: 10;
+  letter-spacing: 0;
   background-color: #535760; }
 
-hero-badge .badge {
-  background-color: #535760; }
-
-hero-badge[disabled] .badge {
+.badge[disabled] {
   background-color: #5c5e5c;
   color: #787c7f; }
 
+html {
+  background-color: #535760; }
+
 hero-icon[disabled] hero-caption {
   color: #787c7f; }
 
diff --git a/lib/components/hero-badge.html b/lib/components/hero-badge.html
deleted file mode 100644
index 017a68fb..00000000
--- a/lib/components/hero-badge.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<dom-module id="hero-badge">
-  <template>
-    <style is="custom-style">
-      :host ::content .badge {
-        border: 2px solid;
-        border-radius: 50%;
-        padding: 7px 10px;
-        position: relative;
-        z-index: 10;
-        letter-spacing: 0;
-      }
-    </style>
-
-    <span class="badge">
-      <content></content>
-    </span>
-  </template>
-
-  <script>
-    Polymer({ is: 'hero-badge' });
-  </script>
-</dom-module>
diff --git a/lib/index.html b/lib/index.html
index d3f9c971..e6454a50 100644
--- a/lib/index.html
+++ b/lib/index.html
@@ -7,7 +7,6 @@
     <link rel="stylesheet" type="text/css" href="css/desktop.css">
     <link rel="stylesheet" type="text/css" href="css/angular.css">
 
-    <link rel="import" href="components/hero-badge.html">
     <link rel="import" href="components/hero-caption.html">
     <link rel="import" href="components/hero-icon.html">
     <link rel="import" href="components/hero-button.html">
diff --git a/lib/partials/main.html b/lib/partials/main.html
index 716f0324..40273f8f 100644
--- a/lib/partials/main.html
+++ b/lib/partials/main.html
@@ -2,7 +2,7 @@
   <div class="col-xs">
     <div class="box text-center">
       <hero-icon path="images/image.svg" label="SELECT IMAGE"></hero-icon>
-      <hero-badge class="block space-vertical-medium">1</hero-badge>
+      <span class="badge space-top-medium">1</span>
 
       <div class="space-vertical-large">
         <div ng-hide="app.selection.hasImage()">
@@ -22,7 +22,8 @@
       <div class="step-border-right" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()"></div>
 
       <hero-icon path="images/drive.svg" ng-disabled="!app.selection.hasImage()" label="SELECT DRIVE"></hero-icon>
-      <hero-badge class="block space-vertical-medium" ng-disabled="!app.selection.hasImage()">2</hero-badge>
+
+      <span class="badge space-top-medium" ng-disabled="!app.selection.hasImage()">2</span>
 
       <div class="space-vertical-large">
         <div ng-hide="app.selection.hasDrive()">
@@ -53,7 +54,7 @@
   <div class="col-xs">
     <div class="box text-center">
       <hero-icon path="images/burn.svg" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()" label="BURN IMAGE"></hero-icon>
-      <hero-badge class="block space-vertical-medium" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">3</hero-badge>
+      <span class="badge space-top-medium" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">3</span>
 
       <div class="space-vertical-large">
         <hero-progress-button percentage="{{ app.writer.state.progress }}" ng-attr-active="{{ app.writer.isBurning() }}"
diff --git a/lib/scss/components/_badge.scss b/lib/scss/components/_badge.scss
new file mode 100644
index 00000000..722e62c2
--- /dev/null
+++ b/lib/scss/components/_badge.scss
@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+
+.badge {
+  border: 2px solid;
+  border-radius: 50%;
+  padding: 7px 10px;
+  position: relative;
+  z-index: 10;
+  letter-spacing: 0;
+  background-color: $body-bg;
+}
+
+.badge[disabled] {
+  background-color: #5c5e5c;
+  color: $color-disabled;
+}
diff --git a/lib/scss/main.scss b/lib/scss/main.scss
index 22057a52..3a274c33 100644
--- a/lib/scss/main.scss
+++ b/lib/scss/main.scss
@@ -23,7 +23,6 @@ $font-size-base: 13px;
 $cursor-disabled: initial;
 $color-disabled: rgb(120, 124, 127);
 $btn-disabled: rgb(49, 51, 57);
-$badge-disabled: rgb(92, 94, 92);
 $btn-padding: 10px;
 $btn-min-width: 170px;
 $link-color: $gray-light;
@@ -32,21 +31,13 @@ $link-hover-decoration: none;
 @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
 
 @import "./modules/space";
+@import "./components/badge";
 
 // Prevent white flash when running application
 html {
   background-color: $body-bg;
 }
 
-hero-badge .badge {
-  background-color: $body-bg;
-}
-
-hero-badge[disabled] .badge {
-  background-color: $badge-disabled;
-  color: $color-disabled;
-}
-
 hero-icon[disabled] hero-caption {
   color: $color-disabled;
 }
diff --git a/lib/scss/modules/_space.scss b/lib/scss/modules/_space.scss
index edd426c7..64f67a04 100644
--- a/lib/scss/modules/_space.scss
+++ b/lib/scss/modules/_space.scss
@@ -27,6 +27,10 @@ $spacing-tiny: 5px;
   margin-bottom: $spacing-medium;
 }
 
+.space-top-medium {
+  margin-top: $spacing-medium;
+}
+
 .space-vertical-large {
   margin-top: $spacing-large;
   margin-bottom: $spacing-large;