From 01ec52f4d7cbbcb31374d72127da90217e7d9ed9 Mon Sep 17 00:00:00 2001
From: Juan Cruz Viotti <jviottidc@gmail.com>
Date: Wed, 30 Mar 2016 13:57:14 -0400
Subject: [PATCH] Refactor caption as a scss component

---
 build/css/main.css                | 22 +++++++++++++++++++++-
 lib/components/hero-caption.html  | 20 --------------------
 lib/components/hero-icon.html     |  6 +++---
 lib/index.html                    |  3 +--
 lib/scss/components/_caption.scss | 21 +++++++++++++++++++++
 lib/scss/main.scss                |  3 ++-
 6 files changed, 48 insertions(+), 27 deletions(-)
 delete mode 100644 lib/components/hero-caption.html
 create mode 100644 lib/scss/components/_caption.scss

diff --git a/build/css/main.css b/build/css/main.css
index b05fd02c..b7cd87be 100644
--- a/build/css/main.css
+++ b/build/css/main.css
@@ -5895,10 +5895,30 @@ button.close {
   background-color: #5c5e5c;
   color: #787c7f; }
 
+/*
+ * 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.
+ */
+.caption {
+  font-weight: bold;
+  font-size: 11px;
+  margin-bottom: 0; }
+
 html {
   background-color: #535760; }
 
-hero-icon[disabled] hero-caption {
+hero-icon[disabled] .caption {
   color: #787c7f; }
 
 hero-button .btn {
diff --git a/lib/components/hero-caption.html b/lib/components/hero-caption.html
deleted file mode 100644
index 082f259c..00000000
--- a/lib/components/hero-caption.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<dom-module id="hero-caption">
-  <template>
-    <style>
-      :host ::content strong {
-        font-size: 11px;
-      }
-    </style>
-    <div>
-      <strong>
-        <content></content>
-      </strong>
-    </div>
-  </template>
-
-  <script>
-    Polymer({ is: 'hero-caption' });
-  </script>
-</dom-module>
diff --git a/lib/components/hero-icon.html b/lib/components/hero-icon.html
index 49a7fd61..25437cc6 100644
--- a/lib/components/hero-icon.html
+++ b/lib/components/hero-icon.html
@@ -1,10 +1,10 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="hero-caption.html">
 
 <dom-module id="hero-icon">
   <template>
     <style>
-      :host ::content div {
+      :host ::content .caption {
+        display: block;
         margin-top: 10px;
       }
 
@@ -15,7 +15,7 @@
     <div class="icon"></div>
 
     <template is="dom-if" if="{{label}}">
-      <hero-caption>{{label}}</hero-caption>
+      <span class="caption">{{label}}</span>
     </template>
   </template>
 
diff --git a/lib/index.html b/lib/index.html
index e6454a50..00668f6c 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-caption.html">
     <link rel="import" href="components/hero-icon.html">
     <link rel="import" href="components/hero-button.html">
     <link rel="import" href="components/hero-progress-button.html">
@@ -49,7 +48,7 @@
 
       <div class="col-xs">
         <div class="box text-right">
-          <hero-caption><span ng-click="navigation.open('https://github.com/resin-io/etcher')">AN OPEN SOURCE PROJECT</span> BY <span ng-click="navigation.open('https://resin.io')">RESIN.IO</span></hero-caption>
+          <p class="caption"><span ng-click="navigation.open('https://github.com/resin-io/etcher')">AN OPEN SOURCE PROJECT</span> BY <span ng-click="navigation.open('https://resin.io')">RESIN.IO</span></p>
         </div>
       </div>
     </footer>
diff --git a/lib/scss/components/_caption.scss b/lib/scss/components/_caption.scss
new file mode 100644
index 00000000..7f055ef4
--- /dev/null
+++ b/lib/scss/components/_caption.scss
@@ -0,0 +1,21 @@
+/*
+ * 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.
+ */
+
+.caption {
+  font-weight: bold;
+  font-size: 11px;
+  margin-bottom: 0;
+}
diff --git a/lib/scss/main.scss b/lib/scss/main.scss
index 3a274c33..70162032 100644
--- a/lib/scss/main.scss
+++ b/lib/scss/main.scss
@@ -32,13 +32,14 @@ $link-hover-decoration: none;
 
 @import "./modules/space";
 @import "./components/badge";
+@import "./components/caption";
 
 // Prevent white flash when running application
 html {
   background-color: $body-bg;
 }
 
-hero-icon[disabled] hero-caption {
+hero-icon[disabled] .caption {
   color: $color-disabled;
 }