From 6f7ea4e7724720684c65ac82548a5aa06292b99a Mon Sep 17 00:00:00 2001
From: Juan Cruz Viotti <jviottidc@gmail.com>
Date: Wed, 30 Mar 2016 15:06:45 -0400
Subject: [PATCH] Convert hero-progress-button into an Angular directive

---
 build/css/main.css                        | 286 ++++++++++++++--------
 lib/browser/app.js                        |   6 +-
 lib/browser/components/progress-button.js |  41 ++++
 lib/components/hero-progress-button.html  |  69 ------
 lib/index.html                            |   1 -
 lib/partials/main.html                    |   4 +-
 lib/scss/components/_progress-button.scss |  58 +++++
 lib/scss/main.scss                        |  13 +-
 8 files changed, 293 insertions(+), 185 deletions(-)
 create mode 100644 lib/browser/components/progress-button.js
 delete mode 100644 lib/components/hero-progress-button.html
 create mode 100644 lib/scss/components/_progress-button.scss

diff --git a/build/css/main.css b/build/css/main.css
index d5220d81..b93f06e4 100644
--- a/build/css/main.css
+++ b/build/css/main.css
@@ -237,8 +237,9 @@ th {
     page-break-after: avoid; }
   .navbar {
     display: none; }
-  .btn > .caret,
-  .dropup > .btn > .caret {
+  .btn > .caret, .progress-button > .caret,
+  .dropup > .btn > .caret,
+  .dropup > .progress-button > .caret {
     border-top-color: #000 !important; }
   .label {
     border: 1px solid #000; }
@@ -2373,46 +2374,54 @@ input[type="search"] {
   input[type="date"].input-sm, .input-group-sm > input[type="date"].form-control,
   .input-group-sm > input[type="date"].input-group-addon,
   .input-group-sm > .input-group-btn > input[type="date"].btn,
+  .input-group-sm > .input-group-btn > input[type="date"].progress-button,
   .input-group-sm input[type="date"],
   input[type="time"].input-sm,
   .input-group-sm > input[type="time"].form-control,
   .input-group-sm > input[type="time"].input-group-addon,
   .input-group-sm > .input-group-btn > input[type="time"].btn,
+  .input-group-sm > .input-group-btn > input[type="time"].progress-button,
   .input-group-sm
   input[type="time"],
   input[type="datetime-local"].input-sm,
   .input-group-sm > input[type="datetime-local"].form-control,
   .input-group-sm > input[type="datetime-local"].input-group-addon,
   .input-group-sm > .input-group-btn > input[type="datetime-local"].btn,
+  .input-group-sm > .input-group-btn > input[type="datetime-local"].progress-button,
   .input-group-sm
   input[type="datetime-local"],
   input[type="month"].input-sm,
   .input-group-sm > input[type="month"].form-control,
   .input-group-sm > input[type="month"].input-group-addon,
   .input-group-sm > .input-group-btn > input[type="month"].btn,
+  .input-group-sm > .input-group-btn > input[type="month"].progress-button,
   .input-group-sm
   input[type="month"] {
     line-height: 30px; }
   input[type="date"].input-lg, .input-group-lg > input[type="date"].form-control,
   .input-group-lg > input[type="date"].input-group-addon,
   .input-group-lg > .input-group-btn > input[type="date"].btn,
+  .input-group-lg > .input-group-btn > input[type="date"].progress-button,
   .input-group-lg input[type="date"],
   input[type="time"].input-lg,
   .input-group-lg > input[type="time"].form-control,
   .input-group-lg > input[type="time"].input-group-addon,
   .input-group-lg > .input-group-btn > input[type="time"].btn,
+  .input-group-lg > .input-group-btn > input[type="time"].progress-button,
   .input-group-lg
   input[type="time"],
   input[type="datetime-local"].input-lg,
   .input-group-lg > input[type="datetime-local"].form-control,
   .input-group-lg > input[type="datetime-local"].input-group-addon,
   .input-group-lg > .input-group-btn > input[type="datetime-local"].btn,
+  .input-group-lg > .input-group-btn > input[type="datetime-local"].progress-button,
   .input-group-lg
   input[type="datetime-local"],
   input[type="month"].input-lg,
   .input-group-lg > input[type="month"].form-control,
   .input-group-lg > input[type="month"].input-group-addon,
   .input-group-lg > .input-group-btn > input[type="month"].btn,
+  .input-group-lg > .input-group-btn > input[type="month"].progress-button,
   .input-group-lg
   input[type="month"] {
     line-height: 45px; } }
@@ -2490,15 +2499,18 @@ fieldset[disabled]
   min-height: 31px; }
   .form-control-static.input-lg, .input-group-lg > .form-control-static.form-control,
   .input-group-lg > .form-control-static.input-group-addon,
-  .input-group-lg > .input-group-btn > .form-control-static.btn, .form-control-static.input-sm, .input-group-sm > .form-control-static.form-control,
+  .input-group-lg > .input-group-btn > .form-control-static.btn,
+  .input-group-lg > .input-group-btn > .form-control-static.progress-button, .form-control-static.input-sm, .input-group-sm > .form-control-static.form-control,
   .input-group-sm > .form-control-static.input-group-addon,
-  .input-group-sm > .input-group-btn > .form-control-static.btn {
+  .input-group-sm > .input-group-btn > .form-control-static.btn,
+  .input-group-sm > .input-group-btn > .form-control-static.progress-button {
     padding-left: 0;
     padding-right: 0; }
 
 .input-sm, .input-group-sm > .form-control,
 .input-group-sm > .input-group-addon,
-.input-group-sm > .input-group-btn > .btn {
+.input-group-sm > .input-group-btn > .btn,
+.input-group-sm > .input-group-btn > .progress-button {
   height: 30px;
   padding: 5px 10px;
   font-size: 12px;
@@ -2507,17 +2519,20 @@ fieldset[disabled]
 
 select.input-sm, .input-group-sm > select.form-control,
 .input-group-sm > select.input-group-addon,
-.input-group-sm > .input-group-btn > select.btn {
+.input-group-sm > .input-group-btn > select.btn,
+.input-group-sm > .input-group-btn > select.progress-button {
   height: 30px;
   line-height: 30px; }
 
 textarea.input-sm, .input-group-sm > textarea.form-control,
 .input-group-sm > textarea.input-group-addon,
 .input-group-sm > .input-group-btn > textarea.btn,
+.input-group-sm > .input-group-btn > textarea.progress-button,
 select[multiple].input-sm,
 .input-group-sm > select[multiple].form-control,
 .input-group-sm > select[multiple].input-group-addon,
-.input-group-sm > .input-group-btn > select[multiple].btn {
+.input-group-sm > .input-group-btn > select[multiple].btn,
+.input-group-sm > .input-group-btn > select[multiple].progress-button {
   height: auto; }
 
 .form-group-sm .form-control {
@@ -2544,7 +2559,8 @@ select[multiple].input-sm,
 
 .input-lg, .input-group-lg > .form-control,
 .input-group-lg > .input-group-addon,
-.input-group-lg > .input-group-btn > .btn {
+.input-group-lg > .input-group-btn > .btn,
+.input-group-lg > .input-group-btn > .progress-button {
   height: 45px;
   padding: 10px 16px;
   font-size: 17px;
@@ -2553,17 +2569,20 @@ select[multiple].input-sm,
 
 select.input-lg, .input-group-lg > select.form-control,
 .input-group-lg > select.input-group-addon,
-.input-group-lg > .input-group-btn > select.btn {
+.input-group-lg > .input-group-btn > select.btn,
+.input-group-lg > .input-group-btn > select.progress-button {
   height: 45px;
   line-height: 45px; }
 
 textarea.input-lg, .input-group-lg > textarea.form-control,
 .input-group-lg > textarea.input-group-addon,
 .input-group-lg > .input-group-btn > textarea.btn,
+.input-group-lg > .input-group-btn > textarea.progress-button,
 select[multiple].input-lg,
 .input-group-lg > select[multiple].form-control,
 .input-group-lg > select[multiple].input-group-addon,
-.input-group-lg > .input-group-btn > select[multiple].btn {
+.input-group-lg > .input-group-btn > select[multiple].btn,
+.input-group-lg > .input-group-btn > select[multiple].progress-button {
   height: auto; }
 
 .form-group-lg .form-control {
@@ -2608,6 +2627,7 @@ select[multiple].input-lg,
 .input-lg + .form-control-feedback, .input-group-lg > .form-control + .form-control-feedback,
 .input-group-lg > .input-group-addon + .form-control-feedback,
 .input-group-lg > .input-group-btn > .btn + .form-control-feedback,
+.input-group-lg > .input-group-btn > .progress-button + .form-control-feedback,
 .input-group-lg + .form-control-feedback,
 .form-group-lg .form-control + .form-control-feedback {
   width: 45px;
@@ -2617,6 +2637,7 @@ select[multiple].input-lg,
 .input-sm + .form-control-feedback, .input-group-sm > .form-control + .form-control-feedback,
 .input-group-sm > .input-group-addon + .form-control-feedback,
 .input-group-sm > .input-group-btn > .btn + .form-control-feedback,
+.input-group-sm > .input-group-btn > .progress-button + .form-control-feedback,
 .input-group-sm + .form-control-feedback,
 .form-group-sm .form-control + .form-control-feedback {
   width: 30px;
@@ -2801,7 +2822,7 @@ select[multiple].input-lg,
     padding-top: 6px;
     font-size: 12px; } }
 
-.btn {
+.btn, .progress-button {
   display: inline-block;
   margin-bottom: 0;
   font-weight: normal;
@@ -2820,28 +2841,30 @@ select[multiple].input-lg,
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none; }
-  .btn:focus, .btn.focus, .btn:active:focus, .btn:active.focus, .btn.active:focus, .btn.active.focus {
+  .btn:focus, .progress-button:focus, .btn.focus, .focus.progress-button, .btn:active:focus, .progress-button:active:focus, .btn:active.focus, .progress-button:active.focus, .btn.active:focus, .active.progress-button:focus, .btn.active.focus, .active.focus.progress-button {
     outline: thin dotted;
     outline: 5px auto -webkit-focus-ring-color;
     outline-offset: -2px; }
-  .btn:hover, .btn:focus, .btn.focus {
+  .btn:hover, .progress-button:hover, .btn:focus, .progress-button:focus, .btn.focus, .focus.progress-button {
     color: #333;
     text-decoration: none; }
-  .btn:active, .btn.active {
+  .btn:active, .progress-button:active, .btn.active, .active.progress-button {
     outline: 0;
     background-image: none;
     -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
     box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
-  .btn.disabled, .btn[disabled],
-  fieldset[disabled] .btn {
+  .btn.disabled, .disabled.progress-button, .btn[disabled], [disabled].progress-button,
+  fieldset[disabled] .btn,
+  fieldset[disabled] .progress-button {
     cursor: initial;
     opacity: 0.65;
     filter: alpha(opacity=65);
     -webkit-box-shadow: none;
     box-shadow: none; }
 
-a.btn.disabled,
-fieldset[disabled] a.btn {
+a.btn.disabled, a.disabled.progress-button,
+fieldset[disabled] a.btn,
+fieldset[disabled] a.progress-button {
   pointer-events: none; }
 
 .btn-default {
@@ -2881,40 +2904,48 @@ fieldset[disabled] a.btn {
     color: #fff;
     background-color: #333; }
 
-.btn-primary {
+.btn-primary, .progress-button--primary {
   color: #fff;
   background-color: #5793db;
   border-color: #4286d7; }
-  .btn-primary:focus, .btn-primary.focus {
+  .btn-primary:focus, .progress-button--primary:focus, .btn-primary.focus, .focus.progress-button--primary {
     color: #fff;
     background-color: #2d78d2;
     border-color: #1b487e; }
-  .btn-primary:hover {
+  .btn-primary:hover, .progress-button--primary:hover {
     color: #fff;
     background-color: #2d78d2;
     border-color: #2767b5; }
-  .btn-primary:active, .btn-primary.active,
-  .open > .btn-primary.dropdown-toggle {
+  .btn-primary:active, .progress-button--primary:active, .btn-primary.active, .active.progress-button--primary,
+  .open > .btn-primary.dropdown-toggle,
+  .open > .dropdown-toggle.progress-button--primary {
     color: #fff;
     background-color: #2d78d2;
     border-color: #2767b5; }
-    .btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:active.focus, .btn-primary.active:hover, .btn-primary.active:focus, .btn-primary.active.focus,
+    .btn-primary:active:hover, .progress-button--primary:active:hover, .btn-primary:active:focus, .progress-button--primary:active:focus, .btn-primary:active.focus, .progress-button--primary:active.focus, .btn-primary.active:hover, .active.progress-button--primary:hover, .btn-primary.active:focus, .active.progress-button--primary:focus, .btn-primary.active.focus, .active.focus.progress-button--primary,
     .open > .btn-primary.dropdown-toggle:hover,
+    .open > .dropdown-toggle.progress-button--primary:hover,
     .open > .btn-primary.dropdown-toggle:focus,
-    .open > .btn-primary.dropdown-toggle.focus {
+    .open > .dropdown-toggle.progress-button--primary:focus,
+    .open > .btn-primary.dropdown-toggle.focus,
+    .open > .dropdown-toggle.focus.progress-button--primary {
       color: #fff;
       background-color: #2767b5;
       border-color: #1b487e; }
-  .btn-primary:active, .btn-primary.active,
-  .open > .btn-primary.dropdown-toggle {
+  .btn-primary:active, .progress-button--primary:active, .btn-primary.active, .active.progress-button--primary,
+  .open > .btn-primary.dropdown-toggle,
+  .open > .dropdown-toggle.progress-button--primary {
     background-image: none; }
-  .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus,
+  .btn-primary.disabled:hover, .disabled.progress-button--primary:hover, .btn-primary.disabled:focus, .disabled.progress-button--primary:focus, .btn-primary.disabled.focus, .disabled.focus.progress-button--primary, .btn-primary[disabled]:hover, [disabled].progress-button--primary:hover, .btn-primary[disabled]:focus, [disabled].progress-button--primary:focus, .btn-primary[disabled].focus, [disabled].focus.progress-button--primary,
   fieldset[disabled] .btn-primary:hover,
+  fieldset[disabled] .progress-button--primary:hover,
   fieldset[disabled] .btn-primary:focus,
-  fieldset[disabled] .btn-primary.focus {
+  fieldset[disabled] .progress-button--primary:focus,
+  fieldset[disabled] .btn-primary.focus,
+  fieldset[disabled] .focus.progress-button--primary {
     background-color: #5793db;
     border-color: #4286d7; }
-  .btn-primary .badge {
+  .btn-primary .badge, .progress-button--primary .badge {
     color: #5793db;
     background-color: #fff; }
 
@@ -3087,19 +3118,19 @@ fieldset[disabled] a.btn {
     color: #ddd;
     text-decoration: none; }
 
-.btn-lg, .btn-group-lg > .btn {
+.btn-lg, .btn-group-lg > .btn, .btn-group-lg > .progress-button {
   padding: 10px 16px;
   font-size: 17px;
   line-height: 1.33333;
   border-radius: 6px; }
 
-.btn-sm, .btn-group-sm > .btn {
+.btn-sm, .btn-group-sm > .btn, .btn-group-sm > .progress-button {
   padding: 5px 10px;
   font-size: 12px;
   line-height: 1.5;
   border-radius: 3px; }
 
-.btn-xs, .btn-group-xs > .btn {
+.btn-xs, .btn-group-xs > .btn, .btn-group-xs > .progress-button {
   padding: 1px 5px;
   font-size: 12px;
   line-height: 1.5;
@@ -3283,20 +3314,27 @@ tbody.collapse.in {
   position: relative;
   display: inline-block;
   vertical-align: middle; }
-  .btn-group > .btn,
-  .btn-group-vertical > .btn {
+  .btn-group > .btn, .btn-group > .progress-button,
+  .btn-group-vertical > .btn,
+  .btn-group-vertical > .progress-button {
     position: relative;
     float: left; }
-    .btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active,
+    .btn-group > .btn:hover, .btn-group > .progress-button:hover, .btn-group > .btn:focus, .btn-group > .progress-button:focus, .btn-group > .btn:active, .btn-group > .progress-button:active, .btn-group > .btn.active, .btn-group > .active.progress-button,
     .btn-group-vertical > .btn:hover,
+    .btn-group-vertical > .progress-button:hover,
     .btn-group-vertical > .btn:focus,
+    .btn-group-vertical > .progress-button:focus,
     .btn-group-vertical > .btn:active,
-    .btn-group-vertical > .btn.active {
+    .btn-group-vertical > .progress-button:active,
+    .btn-group-vertical > .btn.active,
+    .btn-group-vertical > .active.progress-button {
       z-index: 2; }
 
-.btn-group .btn + .btn,
+.btn-group .btn + .btn, .btn-group .progress-button + .btn, .btn-group .btn + .progress-button, .btn-group .progress-button + .progress-button,
 .btn-group .btn + .btn-group,
+.btn-group .progress-button + .btn-group,
 .btn-group .btn-group + .btn,
+.btn-group .btn-group + .progress-button,
 .btn-group .btn-group + .btn-group {
   margin-left: -1px; }
 
@@ -3307,25 +3345,25 @@ tbody.collapse.in {
     display: table; }
   .btn-toolbar:after {
     clear: both; }
-  .btn-toolbar .btn,
+  .btn-toolbar .btn, .btn-toolbar .progress-button,
   .btn-toolbar .btn-group,
   .btn-toolbar .input-group {
     float: left; }
-  .btn-toolbar > .btn,
+  .btn-toolbar > .btn, .btn-toolbar > .progress-button,
   .btn-toolbar > .btn-group,
   .btn-toolbar > .input-group {
     margin-left: 5px; }
 
-.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .btn-group > .progress-button:not(:first-child):not(:last-child):not(.dropdown-toggle) {
   border-radius: 0; }
 
-.btn-group > .btn:first-child {
+.btn-group > .btn:first-child, .btn-group > .progress-button:first-child {
   margin-left: 0; }
-  .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
+  .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle), .btn-group > .progress-button:first-child:not(:last-child):not(.dropdown-toggle) {
     border-bottom-right-radius: 0;
     border-top-right-radius: 0; }
 
-.btn-group > .btn:last-child:not(:first-child),
+.btn-group > .btn:last-child:not(:first-child), .btn-group > .progress-button:last-child:not(:first-child),
 .btn-group > .dropdown-toggle:not(:first-child) {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0; }
@@ -3333,15 +3371,15 @@ tbody.collapse.in {
 .btn-group > .btn-group {
   float: left; }
 
-.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
+.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn, .btn-group > .btn-group:not(:first-child):not(:last-child) > .progress-button {
   border-radius: 0; }
 
-.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,
+.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child, .btn-group > .btn-group:first-child:not(:last-child) > .progress-button:last-child,
 .btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0; }
 
-.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
+.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child, .btn-group > .btn-group:last-child:not(:first-child) > .progress-button:first-child {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0; }
 
@@ -3349,11 +3387,11 @@ tbody.collapse.in {
 .btn-group.open .dropdown-toggle {
   outline: 0; }
 
-.btn-group > .btn + .dropdown-toggle {
+.btn-group > .btn + .dropdown-toggle, .btn-group > .progress-button + .dropdown-toggle {
   padding-left: 8px;
   padding-right: 8px; }
 
-.btn-group > .btn-lg + .dropdown-toggle, .btn-group-lg.btn-group > .btn + .dropdown-toggle {
+.btn-group > .btn-lg + .dropdown-toggle, .btn-group-lg.btn-group > .btn + .dropdown-toggle, .btn-group-lg.btn-group > .progress-button + .dropdown-toggle {
   padding-left: 12px;
   padding-right: 12px; }
 
@@ -3364,19 +3402,20 @@ tbody.collapse.in {
     -webkit-box-shadow: none;
     box-shadow: none; }
 
-.btn .caret {
+.btn .caret, .progress-button .caret {
   margin-left: 0; }
 
-.btn-lg .caret, .btn-group-lg > .btn .caret {
+.btn-lg .caret, .btn-group-lg > .btn .caret, .btn-group-lg > .progress-button .caret {
   border-width: 5px 5px 0;
   border-bottom-width: 0; }
 
-.dropup .btn-lg .caret, .dropup .btn-group-lg > .btn .caret {
+.dropup .btn-lg .caret, .dropup .btn-group-lg > .btn .caret, .dropup .btn-group-lg > .progress-button .caret {
   border-width: 0 5px 5px; }
 
-.btn-group-vertical > .btn,
+.btn-group-vertical > .btn, .btn-group-vertical > .progress-button,
 .btn-group-vertical > .btn-group,
-.btn-group-vertical > .btn-group > .btn {
+.btn-group-vertical > .btn-group > .btn,
+.btn-group-vertical > .btn-group > .progress-button {
   display: block;
   float: none;
   width: 100%;
@@ -3389,40 +3428,42 @@ tbody.collapse.in {
 .btn-group-vertical > .btn-group:after {
   clear: both; }
 
-.btn-group-vertical > .btn-group > .btn {
+.btn-group-vertical > .btn-group > .btn, .btn-group-vertical > .btn-group > .progress-button {
   float: none; }
 
-.btn-group-vertical > .btn + .btn,
+.btn-group-vertical > .btn + .btn, .btn-group-vertical > .progress-button + .btn, .btn-group-vertical > .btn + .progress-button, .btn-group-vertical > .progress-button + .progress-button,
 .btn-group-vertical > .btn + .btn-group,
+.btn-group-vertical > .progress-button + .btn-group,
 .btn-group-vertical > .btn-group + .btn,
+.btn-group-vertical > .btn-group + .progress-button,
 .btn-group-vertical > .btn-group + .btn-group {
   margin-top: -1px;
   margin-left: 0; }
 
-.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
+.btn-group-vertical > .btn:not(:first-child):not(:last-child), .btn-group-vertical > .progress-button:not(:first-child):not(:last-child) {
   border-radius: 0; }
 
-.btn-group-vertical > .btn:first-child:not(:last-child) {
+.btn-group-vertical > .btn:first-child:not(:last-child), .btn-group-vertical > .progress-button:first-child:not(:last-child) {
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0; }
 
-.btn-group-vertical > .btn:last-child:not(:first-child) {
+.btn-group-vertical > .btn:last-child:not(:first-child), .btn-group-vertical > .progress-button:last-child:not(:first-child) {
   border-top-right-radius: 0;
   border-top-left-radius: 0;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px; }
 
-.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
+.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn, .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .progress-button {
   border-radius: 0; }
 
-.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
+.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, .btn-group-vertical > .btn-group:first-child:not(:last-child) > .progress-button:last-child,
 .btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0; }
 
-.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
+.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child, .btn-group-vertical > .btn-group:last-child:not(:first-child) > .progress-button:first-child {
   border-top-right-radius: 0;
   border-top-left-radius: 0; }
 
@@ -3431,20 +3472,23 @@ tbody.collapse.in {
   width: 100%;
   table-layout: fixed;
   border-collapse: separate; }
-  .btn-group-justified > .btn,
+  .btn-group-justified > .btn, .btn-group-justified > .progress-button,
   .btn-group-justified > .btn-group {
     float: none;
     display: table-cell;
     width: 1%; }
-  .btn-group-justified > .btn-group .btn {
+  .btn-group-justified > .btn-group .btn, .btn-group-justified > .btn-group .progress-button {
     width: 100%; }
   .btn-group-justified > .btn-group .dropdown-menu {
     left: auto; }
 
-[data-toggle="buttons"] > .btn input[type="radio"],
+[data-toggle="buttons"] > .btn input[type="radio"], [data-toggle="buttons"] > .progress-button input[type="radio"],
 [data-toggle="buttons"] > .btn input[type="checkbox"],
+[data-toggle="buttons"] > .progress-button input[type="checkbox"],
 [data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
-[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
+[data-toggle="buttons"] > .btn-group > .progress-button input[type="radio"],
+[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"],
+[data-toggle="buttons"] > .btn-group > .progress-button input[type="checkbox"] {
   position: absolute;
   clip: rect(0, 0, 0, 0);
   pointer-events: none; }
@@ -3493,13 +3537,15 @@ tbody.collapse.in {
   border-radius: 4px; }
   .input-group-addon.input-sm,
   .input-group-sm > .input-group-addon,
-  .input-group-sm > .input-group-btn > .input-group-addon.btn {
+  .input-group-sm > .input-group-btn > .input-group-addon.btn,
+  .input-group-sm > .input-group-btn > .input-group-addon.progress-button {
     padding: 5px 10px;
     font-size: 12px;
     border-radius: 3px; }
   .input-group-addon.input-lg,
   .input-group-lg > .input-group-addon,
-  .input-group-lg > .input-group-btn > .input-group-addon.btn {
+  .input-group-lg > .input-group-btn > .input-group-addon.btn,
+  .input-group-lg > .input-group-btn > .input-group-addon.progress-button {
     padding: 10px 16px;
     font-size: 17px;
     border-radius: 6px; }
@@ -3510,10 +3556,14 @@ tbody.collapse.in {
 .input-group .form-control:first-child,
 .input-group-addon:first-child,
 .input-group-btn:first-child > .btn,
+.input-group-btn:first-child > .progress-button,
 .input-group-btn:first-child > .btn-group > .btn,
+.input-group-btn:first-child > .btn-group > .progress-button,
 .input-group-btn:first-child > .dropdown-toggle,
 .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
-.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
+.input-group-btn:last-child > .progress-button:not(:last-child):not(.dropdown-toggle),
+.input-group-btn:last-child > .btn-group:not(:last-child) > .btn,
+.input-group-btn:last-child > .btn-group:not(:last-child) > .progress-button {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0; }
 
@@ -3523,10 +3573,14 @@ tbody.collapse.in {
 .input-group .form-control:last-child,
 .input-group-addon:last-child,
 .input-group-btn:last-child > .btn,
+.input-group-btn:last-child > .progress-button,
 .input-group-btn:last-child > .btn-group > .btn,
+.input-group-btn:last-child > .btn-group > .progress-button,
 .input-group-btn:last-child > .dropdown-toggle,
 .input-group-btn:first-child > .btn:not(:first-child),
-.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
+.input-group-btn:first-child > .progress-button:not(:first-child),
+.input-group-btn:first-child > .btn-group:not(:first-child) > .btn,
+.input-group-btn:first-child > .btn-group:not(:first-child) > .progress-button {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0; }
 
@@ -3537,16 +3591,16 @@ tbody.collapse.in {
   position: relative;
   font-size: 0;
   white-space: nowrap; }
-  .input-group-btn > .btn {
+  .input-group-btn > .btn, .input-group-btn > .progress-button {
     position: relative; }
-    .input-group-btn > .btn + .btn {
+    .input-group-btn > .btn + .btn, .input-group-btn > .progress-button + .btn, .input-group-btn > .btn + .progress-button, .input-group-btn > .progress-button + .progress-button {
       margin-left: -1px; }
-    .input-group-btn > .btn:hover, .input-group-btn > .btn:focus, .input-group-btn > .btn:active {
+    .input-group-btn > .btn:hover, .input-group-btn > .progress-button:hover, .input-group-btn > .btn:focus, .input-group-btn > .progress-button:focus, .input-group-btn > .btn:active, .input-group-btn > .progress-button:active {
       z-index: 2; }
-  .input-group-btn:first-child > .btn,
+  .input-group-btn:first-child > .btn, .input-group-btn:first-child > .progress-button,
   .input-group-btn:first-child > .btn-group {
     margin-right: -1px; }
-  .input-group-btn:last-child > .btn,
+  .input-group-btn:last-child > .btn, .input-group-btn:last-child > .progress-button,
   .input-group-btn:last-child > .btn-group {
     z-index: 2;
     margin-left: -1px; }
@@ -3925,10 +3979,10 @@ tbody.collapse.in {
 .navbar-btn {
   margin-top: 9px;
   margin-bottom: 9px; }
-  .navbar-btn.btn-sm, .btn-group-sm > .navbar-btn.btn {
+  .navbar-btn.btn-sm, .btn-group-sm > .navbar-btn.btn, .btn-group-sm > .navbar-btn.progress-button {
     margin-top: 10px;
     margin-bottom: 10px; }
-  .navbar-btn.btn-xs, .btn-group-xs > .navbar-btn.btn {
+  .navbar-btn.btn-xs, .btn-group-xs > .navbar-btn.btn, .btn-group-xs > .navbar-btn.progress-button {
     margin-top: 14px;
     margin-bottom: 14px; }
 
@@ -4221,7 +4275,7 @@ tbody.collapse.in {
   border-radius: .25em; }
   .label:empty {
     display: none; }
-  .btn .label {
+  .btn .label, .progress-button .label {
     position: relative;
     top: -1px; }
 
@@ -4275,11 +4329,12 @@ a.label:hover, a.label:focus {
   border-radius: 10px; }
   .badge:empty {
     display: none; }
-  .btn .badge {
+  .btn .badge, .progress-button .badge {
     position: relative;
     top: -1px; }
-  .btn-xs .badge, .btn-group-xs > .btn .badge,
-  .btn-group-xs > .btn .badge {
+  .btn-xs .badge, .btn-group-xs > .btn .badge, .btn-group-xs > .progress-button .badge,
+  .btn-group-xs > .btn .badge,
+  .btn-group-xs > .progress-button .badge {
     top: 0;
     padding: 1px 5px; }
   .list-group-item.active > .badge,
@@ -5169,10 +5224,10 @@ button.close {
     display: table; }
   .modal-footer:after {
     clear: both; }
-  .modal-footer .btn + .btn {
+  .modal-footer .btn + .btn, .modal-footer .progress-button + .btn, .modal-footer .btn + .progress-button, .modal-footer .progress-button + .progress-button {
     margin-left: 5px;
     margin-bottom: 0; }
-  .modal-footer .btn-group .btn + .btn {
+  .modal-footer .btn-group .btn + .btn, .modal-footer .btn-group .progress-button + .btn, .modal-footer .btn-group .btn + .progress-button, .modal-footer .btn-group .progress-button + .progress-button {
     margin-left: -1px; }
   .modal-footer .btn-block + .btn-block {
     margin-left: 0; }
@@ -5594,7 +5649,7 @@ button.close {
   color: #fff;
   text-align: center;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
-  .carousel-caption .btn {
+  .carousel-caption .btn, .carousel-caption .progress-button {
     text-shadow: none; }
 
 @media screen and (min-width: 768px) {
@@ -5930,7 +5985,7 @@ button.close {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-button.btn {
+button.btn, button.progress-button {
   padding: 10px;
   padding-top: 11px;
   border-radius: 2px;
@@ -5938,17 +5993,17 @@ button.btn {
   letter-spacing: 0.5px;
   outline: none;
   position: relative; }
-  button.btn[disabled] {
+  button.btn[disabled], button[disabled].progress-button {
     background-color: #313339;
     color: #787c7f;
     pointer-events: none; }
-    button.btn[disabled]:hover {
+    button.btn[disabled]:hover, button[disabled].progress-button:hover {
       background-color: #36383e; }
 
-.btn:not(.btn-link) {
+.btn:not(.btn-link), .progress-button:not(.btn-link) {
   min-width: 170px; }
 
-.btn > .glyphicon, .btn > .tick {
+.btn > .glyphicon, .progress-button > .glyphicon, .btn > .tick, .progress-button > .tick {
   top: 2px;
   margin-right: 2px; }
 
@@ -5957,7 +6012,7 @@ button.btn {
  * !important is needed here for some reason
  * despite the rule having top precedence.
  */
-button.btn:focus {
+button.btn:focus, button.progress-button:focus {
   outline: none !important; }
 
 /*
@@ -5987,21 +6042,52 @@ button.btn:focus {
 .tick--error {
   background-color: #d9534f; }
 
+/*
+ * 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.
+ */
+.progress-button[percentage="100"][active="false"] .progress-button__bar {
+  background-color: #5cb85c; }
+
+.progress-button[percentage="100"][active="true"] .progress-button__bar {
+  background-color: #f0ad4e; }
+
+.progress-button[active="true"] {
+  pointer-events: none; }
+
+.progress-button--primary .progress-button__bar {
+  background: #6ca1e0; }
+
+.progress-button__content {
+  position: relative;
+  z-index: 10;
+  transition: transform 0.3s; }
+
+.progress-button__bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 100%;
+  transition: width 0.3s, opacity 0.3s; }
+
 html {
   background-color: #535760; }
 
 hero-icon[disabled] .caption {
   color: #787c7f; }
 
-hero-progress-button .bar {
-  background: #6ca1e0; }
-
-hero-progress-button[percentage="100"][active="false"] .bar {
-  background-color: #5cb85c; }
-
-hero-progress-button[percentage="100"][active="true"] .bar {
-  background-color: #f0ad4e; }
-
 hero-icon[disabled] path {
   fill: #787c7f; }
 
@@ -6085,6 +6171,6 @@ body {
 .section-header {
   padding: 5px 8px;
   font-size: 15px; }
-  .section-header > .btn {
+  .section-header > .btn, .section-header > .progress-button {
     padding-left: 3px;
     padding-right: 3px; }
diff --git a/lib/browser/app.js b/lib/browser/app.js
index 7adb6a04..9d8c5ab0 100644
--- a/lib/browser/app.js
+++ b/lib/browser/app.js
@@ -38,6 +38,7 @@ require('./browser/modules/notifier');
 require('./browser/modules/analytics');
 require('./browser/controllers/finish');
 require('./browser/controllers/navigation');
+require('./browser/components/progress-button');
 
 const app = angular.module('Etcher', [
   'ui.router',
@@ -54,7 +55,10 @@ const app = angular.module('Etcher', [
 
   // Controllers
   'Etcher.controllers.finish',
-  'Etcher.controllers.navigation'
+  'Etcher.controllers.navigation',
+
+  // Components
+  'Etcher.Components.ProgressButton'
 ]);
 
 app.config(function($stateProvider, $urlRouterProvider) {
diff --git a/lib/browser/components/progress-button.js b/lib/browser/components/progress-button.js
new file mode 100644
index 00000000..a7ee4920
--- /dev/null
+++ b/lib/browser/components/progress-button.js
@@ -0,0 +1,41 @@
+/*
+ * 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.
+ */
+
+'use strict';
+
+/**
+ * @module Etcher.Components.ProgressButton
+ */
+
+const angular = require('angular');
+const ProgressButton = angular.module('Etcher.Components.ProgressButton', []);
+
+ProgressButton.directive('progressButton', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    scope: {
+      percentage: '='
+    },
+    template: [
+      '<button class="progress-button progress-button--primary">',
+        '<span class="progress-button__content" ng-transclude></span>',
+        '<span class="progress-button__bar" ng-style="{ width: percentage + \'%\' }"></span>',
+      '</button>'
+    ].join('\n')
+  };
+});
diff --git a/lib/components/hero-progress-button.html b/lib/components/hero-progress-button.html
deleted file mode 100644
index 26afd046..00000000
--- a/lib/components/hero-progress-button.html
+++ /dev/null
@@ -1,69 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<!-- From http://tympanus.net/Development/ProgressButtonStyles/ -->
-<dom-module id="hero-progress-button">
-  <template>
-    <style>
-      :host[active="true"] {
-        pointer-events: none;
-      }
-
-      :host ::content .text {
-        position: relative;
-        z-index: 10;
-        transition: transform 0.3s;
-      }
-
-      :host ::content .bar {
-        position: absolute;
-        left: 0;
-        top: 0;
-
-        width: 0;
-        height: 100%;
-
-        transition: width 0.3s, opacity 0.3s;
-      }
-    </style>
-
-    <button class="btn btn-primary" disabled="{{disabled}}">
-      <span class="text">
-        <content></content>
-      </span>
-      <span class="bar"></span>
-    </button>
-  </template>
-
-  <script>
-    Polymer({
-      is: 'hero-progress-button',
-      properties: {
-        active: {
-          type: Boolean
-        },
-        disabled: {
-          type: String
-        },
-        percentage: {
-          type: Number,
-          value: 0,
-          notify: true
-        }
-      },
-      setProgress: function(percentage) {
-        'use strict';
-
-        let bar = this.querySelector('.bar');
-        bar.style.width = percentage + '%';
-      },
-      ready: function() {
-        'use strict';
-
-        this.setProgress(this.percentage);
-        this.addEventListener('percentage-changed', function(event) {
-          this.setProgress(event.detail.value);
-        }.bind(this));
-      }
-    });
-  </script>
-</dom-module>
diff --git a/lib/index.html b/lib/index.html
index 6ff5c064..ee903519 100644
--- a/lib/index.html
+++ b/lib/index.html
@@ -8,7 +8,6 @@
     <link rel="stylesheet" type="text/css" href="css/angular.css">
 
     <link rel="import" href="components/hero-icon.html">
-    <link rel="import" href="components/hero-progress-button.html">
 
     <script>
       window._trackJs = {
diff --git a/lib/partials/main.html b/lib/partials/main.html
index 513403f7..ad59c924 100644
--- a/lib/partials/main.html
+++ b/lib/partials/main.html
@@ -58,7 +58,7 @@
       <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() }}"
+        <progress-button percentage="app.writer.state.progress" ng-attr-active="{{ app.writer.isBurning() }}"
           ng-click="app.burn(app.selection.getImage(), app.selection.getDrive())"
           ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">
             <span ng-show="app.writer.state.progress == 100 && app.writer.isBurning()">Finishing...</span>
@@ -66,7 +66,7 @@
             <span ng-show="app.writer.state.progress == 0 && app.writer.isBurning() && !app.writer.state.speed">Starting...</span>
             <span ng-show="app.writer.state.speed && app.writer.state.progress != 100"
               ng-bind="app.writer.state.progress + '% '"></span>
-        </hero-progress-button>
+        </progress-button>
 
         <p class="step-footer" ng-bind="app.writer.state.speed.toFixed(2) + ' MB/s'" ng-show="app.writer.state.speed && app.writer.state.progress != 100"></p>
       </div>
diff --git a/lib/scss/components/_progress-button.scss b/lib/scss/components/_progress-button.scss
new file mode 100644
index 00000000..167963aa
--- /dev/null
+++ b/lib/scss/components/_progress-button.scss
@@ -0,0 +1,58 @@
+/*
+ * 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.
+ */
+
+// From http://tympanus.net/Development/ProgressButtonStyles/
+
+.progress-button {
+  @extend .btn;
+}
+
+.progress-button[percentage="100"][active="false"] .progress-button__bar {
+  background-color: $brand-success;
+}
+
+.progress-button[percentage="100"][active="true"] .progress-button__bar {
+  background-color: $brand-warning;
+}
+
+.progress-button[active="true"] {
+  pointer-events: none;
+}
+
+.progress-button--primary {
+  @extend .btn-primary;
+
+  .progress-button__bar {
+    background: lighten($brand-primary, 5);
+  }
+}
+
+.progress-button__content {
+  position: relative;
+  z-index: 10;
+  transition: transform 0.3s;
+}
+
+.progress-button__bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+
+  width: 0;
+  height: 100%;
+
+  transition: width 0.3s, opacity 0.3s;
+}
diff --git a/lib/scss/main.scss b/lib/scss/main.scss
index 5f1951d1..04980258 100644
--- a/lib/scss/main.scss
+++ b/lib/scss/main.scss
@@ -34,6 +34,7 @@ $link-hover-decoration: none;
 @import "./components/caption";
 @import "./components/button";
 @import "./components/tick";
+@import "./components/progress-button";
 
 // Prevent white flash when running application
 html {
@@ -44,18 +45,6 @@ hero-icon[disabled] .caption {
   color: $color-disabled;
 }
 
-hero-progress-button .bar {
-  background: lighten($brand-primary, 5);
-}
-
-hero-progress-button[percentage="100"][active="false"] .bar {
-  background-color: $brand-success;
-}
-
-hero-progress-button[percentage="100"][active="true"] .bar {
-  background-color: $brand-warning;
-}
-
 hero-icon[disabled]  path {
   fill: $color-disabled;
 }