Refactor tick as a scss component

build/css/main.css

@@ -256,7 +256,7 @@ th {
   src: url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot");
   src: url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); }
 
-.glyphicon {
+.glyphicon, .tick {
   position: relative;
   top: 1px;
   display: inline-block;
@@ -322,10 +322,10 @@ th {
 .glyphicon-th-list:before {
   content: "\e012"; }
 
-.glyphicon-ok:before {
+.glyphicon-ok:before, .tick--success:before {
   content: "\e013"; }
 
-.glyphicon-remove:before {
+.glyphicon-remove:before, .tick--error:before {
   content: "\e014"; }
 
 .glyphicon-zoom-in:before {
@@ -5948,7 +5948,7 @@ button.btn {
 .btn:not(.btn-link) {
   min-width: 170px; }
 
-.btn > .glyphicon {
+.btn > .glyphicon, .btn > .tick {
   top: 2px;
   margin-right: 2px; }
 
@@ -5960,6 +5960,33 @@ button.btn {
 button.btn:focus {
   outline: none !important; }
 
+/*
+ * 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.
+ */
+.tick {
+  display: inline-block;
+  border-radius: 50%;
+  padding: 5px;
+  font-size: 18px; }
+
+.tick--success {
+  background-color: #5fb835; }
+
+.tick--error {
+  background-color: #d9534f; }
+
 html {
   background-color: #535760; }
 

lib/components/hero-tick.html

@@ -1,48 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<dom-module id="hero-tick">
-  <template>
-    <style>
-      :host ::content .glyphicon {
-        display: inline-block;
-        border-radius: 50%;
-        padding: 5px;
-        font-size: 18px;
-      }
-
-      :host ::content .glyphicon-ok {
-        background-color: rgb(95, 184, 53);
-      }
-
-      :host ::content .glyphicon-remove {
-        background-color: #d9534f;
-      }
-    </style>
-
-    <span class="glyphicon"></span>
-  </template>
-
-  <script>
-    Polymer({
-      is: 'hero-tick',
-      properties: {
-        type: {
-          type: String
-        }
-      },
-      ready: function() {
-        'use strict';
-
-        let glyphicon = this.querySelector('.glyphicon');
-
-        if (this.type === 'success') {
-          glyphicon.className += ' glyphicon-ok';
-        } else if (this.type === 'error') {
-          glyphicon.className += ' glyphicon-remove';
-        } else {
-          throw new Error(`Unknown hero-tick type: ${this.state}`);
-        }
-      }
-    });
-  </script>
-</dom-module>

lib/index.html

@@ -9,7 +9,6 @@
 
     <link rel="import" href="components/hero-icon.html">
     <link rel="import" href="components/hero-progress-button.html">
-    <link rel="import" href="components/hero-tick.html">
 
     <script>
       window._trackJs = {

lib/partials/success.html

@@ -1,7 +1,7 @@
 <div class="row around-xs">
   <div class="col-xs">
     <div class="box text-center">
-      <h3><hero-tick type="success" class="space-right-tiny"></hero-tick> Burn Complete!</h3>
+      <h3><span class="tick tick--success" class="space-right-tiny"></span> Burn Complete!</h3>
       <p class="soft"
         ng-controller="SettingsController as settings"
         ng-show="settings.storage.unmountOnSuccess">Safely ejected and ready for use</p>

lib/scss/components/_tick.scss

@@ -0,0 +1,36 @@
+/*
+ * 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.
+ */
+
+.tick {
+  @extend .glyphicon;
+
+  display: inline-block;
+  border-radius: 50%;
+  padding: 5px;
+  font-size: 18px;
+}
+
+.tick--success {
+  @extend .glyphicon-ok;
+
+  background-color: rgb(95, 184, 53);
+}
+
+.tick--error {
+  @extend .glyphicon-remove;
+
+  background-color: #d9534f;
+}

lib/scss/main.scss

@@ -33,6 +33,7 @@ $link-hover-decoration: none;
 @import "./components/badge";
 @import "./components/caption";
 @import "./components/button";
+@import "./components/tick";
 
 // Prevent white flash when running application
 html {