Refactor caption as a scss component

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 {

lib/components/hero-caption.html

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

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>
 

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>

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

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