refactor(GUI): Convert Progress Button to Rendition

Convert progress-button component to Rendition

Change-type: minor
Signed-off-by: amdomanska <aga@resin.io>

lib/gui/app/components/progress-button/directives/progress-button.js

@@ -1,44 +0,0 @@
-/*
- * 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'
-
-/**
- * @summary ProgressButton directive
- * @function
- * @public
- *
- * @description
- * This directive provides a button containing a progress bar inside.
- * The button is styled by default as a primary button.
- *
- * @returns {Object} directive
- *
- * @example
- * <progress-button percentage="{{ 40 }}" striped>My Progress Button</progress-button>
- */
-module.exports = () => {
-  return {
-    template: require('../templates/progress-button.tpl.html'),
-    restrict: 'E',
-    replace: true,
-    transclude: true,
-    scope: {
-      percentage: '=',
-      striped: '@'
-    }
-  }
-}

lib/gui/app/components/progress-button/index.js

@@ -21,8 +21,14 @@
  */
 
 const angular = require('angular')
+const { react2angular } = require('react2angular')
+
 const MODULE_NAME = 'Etcher.Components.ProgressButton'
 const ProgressButton = angular.module(MODULE_NAME, [])
-ProgressButton.directive('progressButton', require('./directives/progress-button'))
+
+ProgressButton.component(
+  'progressButton',
+  react2angular(require('./progress-button.jsx'))
+)
 
 module.exports = MODULE_NAME

lib/gui/app/components/progress-button/progress-button.jsx

@@ -0,0 +1,151 @@
+/*
+ * 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'
+
+const React = require('react')
+const propTypes = require('prop-types')
+const Color = require('color')
+
+const { default: styled, keyframes } = require('styled-components')
+
+const { ProgressBar, Provider } = require('rendition')
+
+const { colors, consts } = require('./../../theme')
+const { StepButton, StepSelection } = require('./../../styled-components')
+
+const darkenForegroundStripes = 0.18
+const desaturateForegroundStripes = 0.2
+const progressButtonStripesForegroundColor = Color(colors.primary.background)
+  .darken(darkenForegroundStripes)
+  .desaturate(desaturateForegroundStripes)
+  .string()
+
+const desaturateBackgroundStripes = 0.05
+const progressButtonStripesBackgroundColor = Color(colors.primary.background)
+  .desaturate(desaturateBackgroundStripes)
+  .string()
+
+const ProgressButtonStripes = keyframes `
+  0% {
+    background-position: 0 0;
+  }
+
+  100% {
+    background-position: 20px 20px;
+  }
+`
+
+const FlashProgressBar = styled(ProgressBar) `
+  > div {
+    color: white !important;
+    text-shadow: none !important;
+  }
+
+  width: 100%;
+  max-width: ${consts.btnMaxWidth};
+  margin: auto;
+
+  background: ${Color(colors.warning.background).darken(darkenForegroundStripes).string()};
+`
+
+const FlashProgressBarValidating = styled(FlashProgressBar) `
+
+  // Notice that we add 0.01 to certain gradient stop positions.
+  // That workarounds a Chrome rendering issue where diagonal
+  // lines look spiky.
+  // See https://github.com/resin-io/etcher/issues/472
+
+  background-image: -webkit-gradient(linear, 0 0, 100% 100%,
+    color-stop(0.25, ${progressButtonStripesForegroundColor}),
+    color-stop(0.26, ${progressButtonStripesBackgroundColor}),
+    color-stop(0.50, ${progressButtonStripesBackgroundColor}),
+    color-stop(0.51, ${progressButtonStripesForegroundColor}),
+    color-stop(0.75, ${progressButtonStripesForegroundColor}),
+    color-stop(0.76 , ${progressButtonStripesBackgroundColor}),
+    to(${progressButtonStripesBackgroundColor}));
+
+  background-color: white;
+
+  animation: ${ProgressButtonStripes} 1s linear infinite;
+  overflow: hidden;
+
+  background-size: 20px 20px;
+`
+
+/**
+ * Progress Button component
+ */
+class ProgressButton extends React.Component {
+  render () {
+    if (this.props.active) {
+      if (this.props.striped) {
+        return (
+          <Provider>
+            <StepSelection>
+              <FlashProgressBarValidating
+                primary
+                emphasized
+                value= { this.props.percentage }
+              >
+                { this.props.label }
+              </FlashProgressBarValidating>
+            </StepSelection>
+          </Provider>
+        )
+      }
+
+      return (
+        <Provider>
+          <StepSelection>
+            <FlashProgressBar
+              warning
+              emphasized
+              value= { this.props.percentage }
+            >
+              { this.props.label }
+            </FlashProgressBar>
+          </StepSelection>
+        </Provider>
+      )
+    }
+
+    return (
+      <Provider>
+        <StepSelection>
+          <StepButton
+            primary
+            onClick= { this.props.callback }
+            disabled= { this.props.disabled }
+          >
+            {this.props.label}
+          </StepButton>
+        </StepSelection>
+      </Provider>
+    )
+  }
+}
+
+ProgressButton.propTypes = {
+  striped: propTypes.bool,
+  active: propTypes.bool,
+  percentage: propTypes.number,
+  label: propTypes.string,
+  disabled: propTypes.bool,
+  callback: propTypes.func
+}
+
+module.exports = ProgressButton

lib/gui/app/components/progress-button/styles/_progress-button.scss

@@ -1,126 +0,0 @@
-/*
- * 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.
- */
-
-/**
- * A button with a progress bar inside.
- *
- * From http://tympanus.net/Development/ProgressButtonStyles/
- *
- * The state of the progress bar is controller by the width, in percentage,
- * of `.progress-button__bar`.
- *
- * If there is an action in place, the `active` attribute must be set to `true`.
- * This is useful to determine if the progress bar is paused from the point of view
- * of the styling.
- *
- * You can optionally pass the `.progress-button--striped` modified to get a striped
- * progress bar.
- *
- * The stripe implementation idea was taken from:
- *
- *   https://css-tricks.com/css3-progress-bars/
- *
- * Usage:
- *
- * <button class="progress-button" active="true">
- *   <span class="progress-button__content">Button text</span>
- *   <span class="progress-button__bar" style="width: 50%;"></span>
- * </button>
- */
-
-$progress-button-stripes-width: 20px;
-$progress-button-stripes-animation-duration: 1s;
-
-.progress-button {
-  @extend .button;
-  @extend .button-primary;
-  
-  overflow: hidden;
-
-  &[active="true"] {
-    background-color: $palette-theme-warning-background;
-  }
-
-  .progress-button__bar {
-    background-color: lighten($palette-theme-warning-background, 5%);
-  }
-
-  &.progress-button--striped {
-    $progress-button-stripes-background-color: desaturate($palette-theme-primary-background, 5%);
-    $progress-button-stripes-foreground-color: desaturate(darken($palette-theme-primary-background, 18%), 20%);
-
-    // Notice that we add `0.01` to certain gradient stop positions.
-    // That workarounds a Chrome rendering issue where diagonal
-    // lines look spiky.
-    // See https://github.com/resin-io/etcher/issues/472
-    background-image: -webkit-gradient(linear, 0 0, 100% 100%,
-      color-stop(0.25, $progress-button-stripes-foreground-color),
-      color-stop(0.25 + 0.01, $progress-button-stripes-background-color),
-      color-stop(0.50, $progress-button-stripes-background-color),
-      color-stop(0.50 + 0.01, $progress-button-stripes-foreground-color),
-      color-stop(0.75, $progress-button-stripes-foreground-color),
-      color-stop(0.75 + 0.01, $progress-button-stripes-background-color),
-      to($progress-button-stripes-background-color));
-
-    .progress-button__bar {
-      background-color: lighten($palette-theme-primary-background, 5%);
-    }
-
-  }
-
-}
-
-// Prevent the button from being clickable
-// when it has an active progress bar.
-.progress-button[active="true"] {
-  @extend .button-no-hover;
-}
-
-.progress-button__content {
-  position: relative;
-  z-index: 10;
-}
-
-.progress-button__bar {
-  position: absolute;
-  left: 0;
-  top: 0;
-
-  width: 0;
-  height: 100%;
-
-  // Subtle progress bar animation
-  transition: width 0.3s;
-
-}
-
-.progress-button--striped {
-  background-size: $progress-button-stripes-width $progress-button-stripes-width;
-  animation: progress-button-stripes $progress-button-stripes-animation-duration linear infinite;
-  overflow: hidden;
-}
-
-@keyframes progress-button-stripes {
-
-  0% {
-    background-position: 0 0;
-  }
-
-  100% {
-    background-position: $progress-button-stripes-width $progress-button-stripes-width;
-  }
-
-}

lib/gui/app/components/progress-button/templates/progress-button.tpl.html

@@ -1,7 +0,0 @@
-<button class="progress-button"
-  ng-class="{
-    'progress-button--striped': striped && striped != 'false'
-  }">
-    <span class="progress-button__content" ng-transclude></span>
-    <span class="progress-button__bar" ng-style="{ width: (percentage > 100 ? 100 : percentage) + '%' }"></span>
-</button>

lib/gui/app/pages/main/controllers/flash.js

@@ -28,6 +28,7 @@ const path = require('path')
 const store = require('../../../models/store')
 const constraints = require('../../../../../shared/drive-constraints')
 const availableDrives = require('../../../models/available-drives')
+const selection = require('../../../models/selection-state')
 
 module.exports = function (
   $q,
@@ -106,9 +107,6 @@ module.exports = function (
    * @function
    * @public
    *
-   * @param {Object} image - image
-   * @param {Array<String>} devices - list of drive device paths
-   *
    * @example
    * FlashController.flashImageToDrive({
    *   path: 'rpi.img',
@@ -124,7 +122,10 @@ module.exports = function (
    *   '/dev/disk5'
    * ])
    */
-  this.flashImageToDrive = (image, devices) => {
+  this.flashImageToDrive = () => {
+    const image = selection.getImage()
+    const devices = selection.getSelectedDevices()
+
     if (flashState.isFlashing()) {
       return
     }

lib/gui/app/pages/main/main.js

@@ -36,7 +36,7 @@ const MainPage = angular.module(MODULE_NAME, [
   require('../../components/drive-selector/drive-selector'),
   require('../../components/tooltip-modal/tooltip-modal'),
   require('../../components/flash-error-modal/flash-error-modal'),
-  require('../../components/progress-button/progress-button'),
+  require('../../components/progress-button'),
   require('../../components/warning-modal/warning-modal'),
   require('../../components/file-selector'),
 

lib/gui/app/pages/main/templates/main.tpl.html

@@ -111,14 +111,14 @@
       </div>
 
       <div class="space-vertical-large">
-        <progress-button class="button-brick"
+        <progress-button
           tabindex="3"
+          striped="main.state.getFlashState().type == 'check'"
+          active = "main.state.isFlashing()"
           percentage="main.state.getFlashState().percentage"
-          striped="{{ main.state.getFlashState().type == 'check' }}"
+          label="flash.getProgressButtonLabel()"
-          ng-attr-active="{{ main.state.isFlashing() }}"
+          disabled="main.state.getLastFlashErrorCode() || main.shouldFlashStepBeDisabled()"
-          ng-click="flash.flashImageToDrive(main.selection.getImage(), main.selection.getSelectedDevices())"
+          callback="flash.flashImageToDrive" >
-          ng-disabled="main.shouldFlashStepBeDisabled() || main.state.getLastFlashErrorCode()">
-            <span ng-bind="flash.getProgressButtonLabel()"></span>
         </progress-button>
 
         <button class="button button-link button-abort-write"

lib/gui/app/scss/main.scss

@@ -32,7 +32,6 @@ $disabled-opacity: 0.2;
 @import "./components/button";
 @import "./components/tick";
 @import "../components/modal/styles/modal";
-@import "../components/progress-button/styles/progress-button";
 @import "../components/drive-selector/styles/drive-selector";
 @import "../components/svg-icon/styles/svg-icon";
 @import "../components/tooltip-modal/styles/tooltip-modal";

lib/gui/app/styled-components.js

@@ -0,0 +1,47 @@
+/*
+ * 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'
+
+const styled = require('styled-components').default
+const { colors, consts } = require('./theme')
+const {
+  Button, Flex
+} = require('rendition')
+
+exports.StepButton = styled(Button) `
+  width: 100%;
+  max-width: ${consts.btnMaxWidth};
+  margin: auto;
+  overflow: hidden;
+  font-weight: normal;
+  letter-spacing: 0.5px;
+
+  &:disabled {
+    background-color: ${colors.dark.disabled.background};
+    color: ${colors.dark.disabled.foreground};
+    &:hover {
+      background-color: ${colors.dark.disabled.background};
+      color: ${colors.dark.disabled.foreground};
+    }
+  }
+`
+
+exports.StepSelection = styled(Flex) `
+  flex-wrap: wrap;
+  justify-content: center;
+  color: $palette-theme-dark-foreground;
+`

lib/gui/app/theme.js

@@ -0,0 +1,67 @@
+/*
+ * 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'
+
+exports.colors = {
+  dark: {
+    foreground: '#fff',
+    background: '#4d5057',
+    soft: {
+      foreground: '#ddd',
+      background: '#64686a'
+    },
+    disabled: {
+      foreground: '#787c7f',
+      background: '#313339'
+    }
+  },
+  light: {
+    foreground: '#666',
+    background: '#fff',
+    soft: {
+      foreground: '#b3b3b3'
+    },
+    disabled: {
+      foreground: '#787c7f',
+      background: '#d5d5d5'
+    }
+  },
+  default: {
+    foreground: '#b3b3b3',
+    background: '#ececec'
+  },
+  primary: {
+    foreground: '#fff',
+    background: '#2297de'
+  },
+  warning: {
+    foreground: '#fff',
+    background: '#fca321'
+  },
+  danger: {
+    foreground: '#fff',
+    background: '#d9534f'
+  },
+  success: {
+    foreground: '#fff',
+    background: '#5fb835'
+  }
+}
+
+exports.consts = {
+  btnMaxWidth: '170px'
+}

lib/gui/css/main.css

@@ -237,10 +237,9 @@ th {
     page-break-after: avoid; }
   .navbar {
     display: none; }
-  .btn > .caret, .button > .caret, .progress-button > .caret,
+  .btn > .caret, .button > .caret,
   .dropup > .btn > .caret,
-  .dropup > .button > .caret,
+  .dropup > .button > .caret {
-  .dropup > .progress-button > .caret {
     border-top-color: #000 !important; }
   .label {
     border: 1px solid #000; }
@@ -2376,14 +2375,12 @@ input[type="search"] {
   .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"].button,
-  .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"].button,
-  .input-group-sm > .input-group-btn > input[type="time"].progress-button,
   .input-group-sm
   input[type="time"],
   input[type="datetime-local"].input-sm,
@@ -2391,7 +2388,6 @@ input[type="search"] {
   .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"].button,
-  .input-group-sm > .input-group-btn > input[type="datetime-local"].progress-button,
   .input-group-sm
   input[type="datetime-local"],
   input[type="month"].input-sm,
@@ -2399,7 +2395,6 @@ input[type="search"] {
   .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"].button,
-  .input-group-sm > .input-group-btn > input[type="month"].progress-button,
   .input-group-sm
   input[type="month"] {
     line-height: 30px; }
@@ -2407,14 +2402,12 @@ input[type="search"] {
   .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"].button,
-  .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"].button,
-  .input-group-lg > .input-group-btn > input[type="time"].progress-button,
   .input-group-lg
   input[type="time"],
   input[type="datetime-local"].input-lg,
@@ -2422,7 +2415,6 @@ input[type="search"] {
   .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"].button,
-  .input-group-lg > .input-group-btn > input[type="datetime-local"].progress-button,
   .input-group-lg
   input[type="datetime-local"],
   input[type="month"].input-lg,
@@ -2430,7 +2422,6 @@ input[type="search"] {
   .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"].button,
-  .input-group-lg > .input-group-btn > input[type="month"].progress-button,
   .input-group-lg
   input[type="month"] {
     line-height: 45px; } }
@@ -2509,20 +2500,17 @@ fieldset[disabled]
   .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,
-  .input-group-lg > .input-group-btn > .form-control-static.button,
+  .input-group-lg > .input-group-btn > .form-control-static.button, .form-control-static.input-sm, .input-group-sm > .form-control-static.form-control,
-  .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.button,
+  .input-group-sm > .input-group-btn > .form-control-static.button {
-  .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 > .button,
+.input-group-sm > .input-group-btn > .button {
-.input-group-sm > .input-group-btn > .progress-button {
   height: 30px;
   padding: 5px 10px;
   font-size: 12px;
@@ -2532,8 +2520,7 @@ 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.button,
+.input-group-sm > .input-group-btn > select.button {
-.input-group-sm > .input-group-btn > select.progress-button {
   height: 30px;
   line-height: 30px; }
 
@@ -2541,13 +2528,11 @@ 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.button,
-.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].button,
+.input-group-sm > .input-group-btn > select[multiple].button {
-.input-group-sm > .input-group-btn > select[multiple].progress-button {
   height: auto; }
 
 .form-group-sm .form-control {
@@ -2575,8 +2560,7 @@ 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 > .button,
+.input-group-lg > .input-group-btn > .button {
-.input-group-lg > .input-group-btn > .progress-button {
   height: 45px;
   padding: 10px 16px;
   font-size: 17px;
@@ -2586,8 +2570,7 @@ 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.button,
+.input-group-lg > .input-group-btn > select.button {
-.input-group-lg > .input-group-btn > select.progress-button {
   height: 45px;
   line-height: 45px; }
 
@@ -2595,13 +2578,11 @@ 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.button,
-.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].button,
+.input-group-lg > .input-group-btn > select[multiple].button {
-.input-group-lg > .input-group-btn > select[multiple].progress-button {
   height: auto; }
 
 .form-group-lg .form-control {
@@ -2647,7 +2628,6 @@ select[multiple].input-lg,
 .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 > .button + .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;
@@ -2658,7 +2638,6 @@ select[multiple].input-lg,
 .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 > .button + .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;
@@ -2843,7 +2822,7 @@ select[multiple].input-lg,
     padding-top: 6px;
     font-size: 12px; } }
 
-.btn, .button, .progress-button {
+.btn, .button {
   display: inline-block;
   margin-bottom: 0;
   font-weight: normal;
@@ -2862,32 +2841,30 @@ select[multiple].input-lg,
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none; }
-  .btn:focus, .button:focus, .progress-button:focus, .btn.focus, .focus.button, .focus.progress-button, .btn:active:focus, .button:active:focus, .progress-button:active:focus, .btn:active.focus, .button:active.focus, .progress-button:active.focus, .btn.active:focus, .active.button:focus, .active.progress-button:focus, .btn.active.focus, .active.focus.button, .active.focus.progress-button {
+  .btn:focus, .button:focus, .btn.focus, .focus.button, .btn:active:focus, .button:active:focus, .btn:active.focus, .button:active.focus, .btn.active:focus, .active.button:focus, .btn.active.focus, .active.focus.button {
     outline: thin dotted;
     outline: 5px auto -webkit-focus-ring-color;
     outline-offset: -2px; }
-  .btn:hover, .button:hover, .progress-button:hover, .btn:focus, .button:focus, .progress-button:focus, .btn.focus, .focus.button, .focus.progress-button {
+  .btn:hover, .button:hover, .btn:focus, .button:focus, .btn.focus, .focus.button {
     color: #333;
     text-decoration: none; }
-  .btn:active, .button:active, .progress-button:active, .btn.active, .active.button, .active.progress-button {
+  .btn:active, .button:active, .btn.active, .active.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, .disabled.button, .disabled.progress-button, .btn[disabled], [disabled].button, [disabled].progress-button,
+  .btn.disabled, .disabled.button, .btn[disabled], [disabled].button,
   fieldset[disabled] .btn,
-  fieldset[disabled] .button,
+  fieldset[disabled] .button {
-  fieldset[disabled] .progress-button {
     cursor: initial;
     opacity: 0.65;
     filter: alpha(opacity=65);
     -webkit-box-shadow: none;
     box-shadow: none; }
 
-a.btn.disabled, a.disabled.button, a.disabled.progress-button,
+a.btn.disabled, a.disabled.button,
 fieldset[disabled] a.btn,
-fieldset[disabled] a.button,
+fieldset[disabled] a.button {
-fieldset[disabled] a.progress-button {
   pointer-events: none; }
 
 .btn-default {
@@ -3136,19 +3113,19 @@ fieldset[disabled] a.progress-button {
     color: #777777;
     text-decoration: none; }
 
-.btn-lg, .btn-group-lg > .btn, .btn-group-lg > .button, .btn-group-lg > .progress-button {
+.btn-lg, .btn-group-lg > .btn, .btn-group-lg > .button {
   padding: 10px 16px;
   font-size: 17px;
   line-height: 1.33333;
   border-radius: 6px; }
 
-.btn-sm, .btn-group-sm > .btn, .btn-group-sm > .button, .btn-group-sm > .progress-button {
+.btn-sm, .btn-group-sm > .btn, .btn-group-sm > .button {
   padding: 5px 10px;
   font-size: 12px;
   line-height: 1.5;
   border-radius: 3px; }
 
-.btn-xs, .btn-group-xs > .btn, .btn-group-xs > .button, .btn-group-xs > .progress-button {
+.btn-xs, .btn-group-xs > .btn, .btn-group-xs > .button {
   padding: 1px 5px;
   font-size: 12px;
   line-height: 1.5;
@@ -3332,34 +3309,27 @@ tbody.collapse.in {
   position: relative;
   display: inline-block;
   vertical-align: middle; }
-  .btn-group > .btn, .btn-group > .button, .btn-group > .progress-button,
+  .btn-group > .btn, .btn-group > .button,
   .btn-group-vertical > .btn,
-  .btn-group-vertical > .button,
+  .btn-group-vertical > .button {
-  .btn-group-vertical > .progress-button {
     position: relative;
     float: left; }
-    .btn-group > .btn:hover, .btn-group > .button:hover, .btn-group > .progress-button:hover, .btn-group > .btn:focus, .btn-group > .button:focus, .btn-group > .progress-button:focus, .btn-group > .btn:active, .btn-group > .button:active, .btn-group > .progress-button:active, .btn-group > .btn.active, .btn-group > .active.button, .btn-group > .active.progress-button,
+    .btn-group > .btn:hover, .btn-group > .button:hover, .btn-group > .btn:focus, .btn-group > .button:focus, .btn-group > .btn:active, .btn-group > .button:active, .btn-group > .btn.active, .btn-group > .active.button,
     .btn-group-vertical > .btn:hover,
     .btn-group-vertical > .button:hover,
-    .btn-group-vertical > .progress-button:hover,
     .btn-group-vertical > .btn:focus,
     .btn-group-vertical > .button:focus,
-    .btn-group-vertical > .progress-button:focus,
     .btn-group-vertical > .btn:active,
     .btn-group-vertical > .button:active,
-    .btn-group-vertical > .progress-button:active,
     .btn-group-vertical > .btn.active,
-    .btn-group-vertical > .active.button,
+    .btn-group-vertical > .active.button {
-    .btn-group-vertical > .active.progress-button {
       z-index: 2; }
 
-.btn-group .btn + .btn, .btn-group .button + .btn, .btn-group .progress-button + .btn, .btn-group .btn + .button, .btn-group .button + .button, .btn-group .progress-button + .button, .btn-group .btn + .progress-button, .btn-group .button + .progress-button, .btn-group .progress-button + .progress-button,
+.btn-group .btn + .btn, .btn-group .button + .btn, .btn-group .btn + .button, .btn-group .button + .button,
 .btn-group .btn + .btn-group,
 .btn-group .button + .btn-group,
-.btn-group .progress-button + .btn-group,
 .btn-group .btn-group + .btn,
 .btn-group .btn-group + .button,
-.btn-group .btn-group + .progress-button,
 .btn-group .btn-group + .btn-group {
   margin-left: -1px; }
 
@@ -3370,25 +3340,25 @@ tbody.collapse.in {
     display: table; }
   .btn-toolbar:after {
     clear: both; }
-  .btn-toolbar .btn, .btn-toolbar .button, .btn-toolbar .progress-button,
+  .btn-toolbar .btn, .btn-toolbar .button,
   .btn-toolbar .btn-group,
   .btn-toolbar .input-group {
     float: left; }
-  .btn-toolbar > .btn, .btn-toolbar > .button, .btn-toolbar > .progress-button,
+  .btn-toolbar > .btn, .btn-toolbar > .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 > .button:not(:first-child):not(:last-child):not(.dropdown-toggle), .btn-group > .progress-button:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .btn-group > .button:not(:first-child):not(:last-child):not(.dropdown-toggle) {
   border-radius: 0; }
 
-.btn-group > .btn:first-child, .btn-group > .button:first-child, .btn-group > .progress-button:first-child {
+.btn-group > .btn:first-child, .btn-group > .button:first-child {
   margin-left: 0; }
-  .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle), .btn-group > .button:first-child:not(:last-child):not(.dropdown-toggle), .btn-group > .progress-button:first-child:not(:last-child):not(.dropdown-toggle) {
+  .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle), .btn-group > .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 > .button:last-child:not(:first-child), .btn-group > .progress-button:last-child:not(:first-child),
+.btn-group > .btn:last-child:not(:first-child), .btn-group > .button:last-child:not(:first-child),
 .btn-group > .dropdown-toggle:not(:first-child) {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0; }
@@ -3396,15 +3366,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) > .button, .btn-group > .btn-group:not(:first-child):not(:last-child) > .progress-button {
+.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn, .btn-group > .btn-group:not(:first-child):not(:last-child) > .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) > .button:last-child, .btn-group > .btn-group:first-child:not(:last-child) > .progress-button:last-child,
+.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child, .btn-group > .btn-group:first-child:not(:last-child) > .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) > .button:first-child, .btn-group > .btn-group:last-child:not(:first-child) > .progress-button:first-child {
+.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child, .btn-group > .btn-group:last-child:not(:first-child) > .button:first-child {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0; }
 
@@ -3412,11 +3382,11 @@ tbody.collapse.in {
 .btn-group.open .dropdown-toggle {
   outline: 0; }
 
-.btn-group > .btn + .dropdown-toggle, .btn-group > .button + .dropdown-toggle, .btn-group > .progress-button + .dropdown-toggle {
+.btn-group > .btn + .dropdown-toggle, .btn-group > .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-lg.btn-group > .button + .dropdown-toggle, .btn-group-lg.btn-group > .progress-button + .dropdown-toggle {
+.btn-group > .btn-lg + .dropdown-toggle, .btn-group-lg.btn-group > .btn + .dropdown-toggle, .btn-group-lg.btn-group > .button + .dropdown-toggle {
   padding-left: 12px;
   padding-right: 12px; }
 
@@ -3427,21 +3397,20 @@ tbody.collapse.in {
     -webkit-box-shadow: none;
     box-shadow: none; }
 
-.btn .caret, .button .caret, .progress-button .caret {
+.btn .caret, .button .caret {
   margin-left: 0; }
 
-.btn-lg .caret, .btn-group-lg > .btn .caret, .btn-group-lg > .button .caret, .btn-group-lg > .progress-button .caret {
+.btn-lg .caret, .btn-group-lg > .btn .caret, .btn-group-lg > .button .caret {
   border-width: 5px 5px 0;
   border-bottom-width: 0; }
 
-.dropup .btn-lg .caret, .dropup .btn-group-lg > .btn .caret, .dropup .btn-group-lg > .button .caret, .dropup .btn-group-lg > .progress-button .caret {
+.dropup .btn-lg .caret, .dropup .btn-group-lg > .btn .caret, .dropup .btn-group-lg > .button .caret {
   border-width: 0 5px 5px; }
 
-.btn-group-vertical > .btn, .btn-group-vertical > .button, .btn-group-vertical > .progress-button,
+.btn-group-vertical > .btn, .btn-group-vertical > .button,
 .btn-group-vertical > .btn-group,
 .btn-group-vertical > .btn-group > .btn,
-.btn-group-vertical > .btn-group > .button,
+.btn-group-vertical > .btn-group > .button {
-.btn-group-vertical > .btn-group > .progress-button {
   display: block;
   float: none;
   width: 100%;
@@ -3454,44 +3423,42 @@ tbody.collapse.in {
 .btn-group-vertical > .btn-group:after {
   clear: both; }
 
-.btn-group-vertical > .btn-group > .btn, .btn-group-vertical > .btn-group > .button, .btn-group-vertical > .btn-group > .progress-button {
+.btn-group-vertical > .btn-group > .btn, .btn-group-vertical > .btn-group > .button {
   float: none; }
 
-.btn-group-vertical > .btn + .btn, .btn-group-vertical > .button + .btn, .btn-group-vertical > .progress-button + .btn, .btn-group-vertical > .btn + .button, .btn-group-vertical > .button + .button, .btn-group-vertical > .progress-button + .button, .btn-group-vertical > .btn + .progress-button, .btn-group-vertical > .button + .progress-button, .btn-group-vertical > .progress-button + .progress-button,
+.btn-group-vertical > .btn + .btn, .btn-group-vertical > .button + .btn, .btn-group-vertical > .btn + .button, .btn-group-vertical > .button + .button,
 .btn-group-vertical > .btn + .btn-group,
 .btn-group-vertical > .button + .btn-group,
-.btn-group-vertical > .progress-button + .btn-group,
 .btn-group-vertical > .btn-group + .btn,
 .btn-group-vertical > .btn-group + .button,
-.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 > .button:not(:first-child):not(:last-child), .btn-group-vertical > .progress-button:not(:first-child):not(:last-child) {
+.btn-group-vertical > .btn:not(:first-child):not(:last-child), .btn-group-vertical > .button:not(:first-child):not(:last-child) {
   border-radius: 0; }
 
-.btn-group-vertical > .btn:first-child:not(:last-child), .btn-group-vertical > .button:first-child:not(:last-child), .btn-group-vertical > .progress-button:first-child:not(:last-child) {
+.btn-group-vertical > .btn:first-child:not(:last-child), .btn-group-vertical > .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 > .button:last-child:not(:first-child), .btn-group-vertical > .progress-button:last-child:not(:first-child) {
+.btn-group-vertical > .btn:last-child:not(:first-child), .btn-group-vertical > .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) > .button, .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .progress-button {
+.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn, .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .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) > .button: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) > .btn:last-child, .btn-group-vertical > .btn-group:first-child:not(:last-child) > .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) > .button:first-child, .btn-group-vertical > .btn-group:last-child:not(:first-child) > .progress-button: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) > .button:first-child {
   border-top-right-radius: 0;
   border-top-left-radius: 0; }
 
@@ -3500,26 +3467,23 @@ tbody.collapse.in {
   width: 100%;
   table-layout: fixed;
   border-collapse: separate; }
-  .btn-group-justified > .btn, .btn-group-justified > .button, .btn-group-justified > .progress-button,
+  .btn-group-justified > .btn, .btn-group-justified > .button,
   .btn-group-justified > .btn-group {
     float: none;
     display: table-cell;
     width: 1%; }
-  .btn-group-justified > .btn-group .btn, .btn-group-justified > .btn-group .button, .btn-group-justified > .btn-group .progress-button {
+  .btn-group-justified > .btn-group .btn, .btn-group-justified > .btn-group .button {
     width: 100%; }
   .btn-group-justified > .btn-group .dropdown-menu {
     left: auto; }
 
-[data-toggle="buttons"] > .btn input[type="radio"], [data-toggle="buttons"] > .button input[type="radio"], [data-toggle="buttons"] > .progress-button input[type="radio"],
+[data-toggle="buttons"] > .btn input[type="radio"], [data-toggle="buttons"] > .button input[type="radio"],
 [data-toggle="buttons"] > .btn input[type="checkbox"],
 [data-toggle="buttons"] > .button 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 > .button input[type="radio"],
-[data-toggle="buttons"] > .btn-group > .progress-button input[type="radio"],
 [data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"],
-[data-toggle="buttons"] > .btn-group > .button input[type="checkbox"],
+[data-toggle="buttons"] > .btn-group > .button input[type="checkbox"] {
-[data-toggle="buttons"] > .btn-group > .progress-button input[type="checkbox"] {
   position: absolute;
   clip: rect(0, 0, 0, 0);
   pointer-events: none; }
@@ -3569,16 +3533,14 @@ tbody.collapse.in {
   .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.button,
+  .input-group-sm > .input-group-btn > .input-group-addon.button {
-  .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.button,
+  .input-group-lg > .input-group-btn > .input-group-addon.button {
-  .input-group-lg > .input-group-btn > .input-group-addon.progress-button {
     padding: 10px 16px;
     font-size: 17px;
     border-radius: 6px; }
@@ -3590,17 +3552,13 @@ tbody.collapse.in {
 .input-group-addon:first-child,
 .input-group-btn:first-child > .btn,
 .input-group-btn:first-child > .button,
-.input-group-btn:first-child > .progress-button,
 .input-group-btn:first-child > .btn-group > .btn,
 .input-group-btn:first-child > .btn-group > .button,
-.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 > .button:not(:last-child):not(.dropdown-toggle),
-.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) > .button,
+.input-group-btn:last-child > .btn-group:not(:last-child) > .button {
-.input-group-btn:last-child > .btn-group:not(:last-child) > .progress-button {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0; }
 
@@ -3611,17 +3569,13 @@ tbody.collapse.in {
 .input-group-addon:last-child,
 .input-group-btn:last-child > .btn,
 .input-group-btn:last-child > .button,
-.input-group-btn:last-child > .progress-button,
 .input-group-btn:last-child > .btn-group > .btn,
 .input-group-btn:last-child > .btn-group > .button,
-.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 > .button:not(:first-child),
-.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) > .button,
+.input-group-btn:first-child > .btn-group:not(:first-child) > .button {
-.input-group-btn:first-child > .btn-group:not(:first-child) > .progress-button {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0; }
 
@@ -3632,16 +3586,16 @@ tbody.collapse.in {
   position: relative;
   font-size: 0;
   white-space: nowrap; }
-  .input-group-btn > .btn, .input-group-btn > .button, .input-group-btn > .progress-button {
+  .input-group-btn > .btn, .input-group-btn > .button {
     position: relative; }
-    .input-group-btn > .btn + .btn, .input-group-btn > .button + .btn, .input-group-btn > .progress-button + .btn, .input-group-btn > .btn + .button, .input-group-btn > .button + .button, .input-group-btn > .progress-button + .button, .input-group-btn > .btn + .progress-button, .input-group-btn > .button + .progress-button, .input-group-btn > .progress-button + .progress-button {
+    .input-group-btn > .btn + .btn, .input-group-btn > .button + .btn, .input-group-btn > .btn + .button, .input-group-btn > .button + .button {
       margin-left: -1px; }
-    .input-group-btn > .btn:hover, .input-group-btn > .button:hover, .input-group-btn > .progress-button:hover, .input-group-btn > .btn:focus, .input-group-btn > .button:focus, .input-group-btn > .progress-button:focus, .input-group-btn > .btn:active, .input-group-btn > .button:active, .input-group-btn > .progress-button:active {
+    .input-group-btn > .btn:hover, .input-group-btn > .button:hover, .input-group-btn > .btn:focus, .input-group-btn > .button:focus, .input-group-btn > .btn:active, .input-group-btn > .button:active {
       z-index: 2; }
-  .input-group-btn:first-child > .btn, .input-group-btn:first-child > .button, .input-group-btn:first-child > .progress-button,
+  .input-group-btn:first-child > .btn, .input-group-btn:first-child > .button,
   .input-group-btn:first-child > .btn-group {
     margin-right: -1px; }
-  .input-group-btn:last-child > .btn, .input-group-btn:last-child > .button, .input-group-btn:last-child > .progress-button,
+  .input-group-btn:last-child > .btn, .input-group-btn:last-child > .button,
   .input-group-btn:last-child > .btn-group {
     z-index: 2;
     margin-left: -1px; }
@@ -4020,10 +3974,10 @@ tbody.collapse.in {
 .navbar-btn {
   margin-top: 9px;
   margin-bottom: 9px; }
-  .navbar-btn.btn-sm, .btn-group-sm > .navbar-btn.btn, .btn-group-sm > .navbar-btn.button, .btn-group-sm > .navbar-btn.progress-button {
+  .navbar-btn.btn-sm, .btn-group-sm > .navbar-btn.btn, .btn-group-sm > .navbar-btn.button {
     margin-top: 10px;
     margin-bottom: 10px; }
-  .navbar-btn.btn-xs, .btn-group-xs > .navbar-btn.btn, .btn-group-xs > .navbar-btn.button, .btn-group-xs > .navbar-btn.progress-button {
+  .navbar-btn.btn-xs, .btn-group-xs > .navbar-btn.btn, .btn-group-xs > .navbar-btn.button {
     margin-top: 14px;
     margin-bottom: 14px; }
 
@@ -4320,7 +4274,7 @@ tbody.collapse.in {
   border-radius: .25em; }
   .label:empty {
     display: none; }
-  .btn .label, .button .label, .progress-button .label {
+  .btn .label, .button .label {
     position: relative;
     top: -1px; }
 
@@ -4374,13 +4328,12 @@ a.label:hover, a.label:focus {
   border-radius: 10px; }
   .badge:empty {
     display: none; }
-  .btn .badge, .button .badge, .progress-button .badge {
+  .btn .badge, .button .badge {
     position: relative;
     top: -1px; }
-  .btn-xs .badge, .btn-group-xs > .btn .badge, .btn-group-xs > .button .badge, .btn-group-xs > .progress-button .badge,
+  .btn-xs .badge, .btn-group-xs > .btn .badge, .btn-group-xs > .button .badge,
   .btn-group-xs > .btn .badge,
-  .btn-group-xs > .button .badge,
+  .btn-group-xs > .button .badge {
-  .btn-group-xs > .progress-button .badge {
     top: 0;
     padding: 1px 5px; }
   .list-group-item.active > .badge,
@@ -5270,10 +5223,10 @@ button.close {
     display: table; }
   .modal-footer:after {
     clear: both; }
-  .modal-footer .btn + .btn, .modal-footer .button + .btn, .modal-footer .progress-button + .btn, .modal-footer .btn + .button, .modal-footer .button + .button, .modal-footer .progress-button + .button, .modal-footer .btn + .progress-button, .modal-footer .button + .progress-button, .modal-footer .progress-button + .progress-button {
+  .modal-footer .btn + .btn, .modal-footer .button + .btn, .modal-footer .btn + .button, .modal-footer .button + .button {
     margin-left: 5px;
     margin-bottom: 0; }
-  .modal-footer .btn-group .btn + .btn, .modal-footer .btn-group .button + .btn, .modal-footer .btn-group .progress-button + .btn, .modal-footer .btn-group .btn + .button, .modal-footer .btn-group .button + .button, .modal-footer .btn-group .progress-button + .button, .modal-footer .btn-group .btn + .progress-button, .modal-footer .btn-group .button + .progress-button, .modal-footer .btn-group .progress-button + .progress-button {
+  .modal-footer .btn-group .btn + .btn, .modal-footer .btn-group .button + .btn, .modal-footer .btn-group .btn + .button, .modal-footer .btn-group .button + .button {
     margin-left: -1px; }
   .modal-footer .btn-block + .btn-block {
     margin-left: 0; }
@@ -5695,7 +5648,7 @@ button.close {
   color: #fff;
   text-align: center;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
-  .carousel-caption .btn, .carousel-caption .button, .carousel-caption .progress-button {
+  .carousel-caption .btn, .carousel-caption .button {
     text-shadow: none; }
 
 @media screen and (min-width: 768px) {
@@ -6110,7 +6063,7 @@ body {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.button, .progress-button {
+.button {
   padding: 10px;
   padding-top: 11px;
   border-radius: 2px;
@@ -6118,10 +6071,10 @@ body {
   letter-spacing: .5px;
   outline: none;
   position: relative; }
-  .button > .glyphicon, .progress-button > .glyphicon, .button > .tick, .progress-button > .tick {
+  .button > .glyphicon, .button > .tick {
     top: 2px;
     margin-right: 2px; }
-  .button[disabled], [disabled].progress-button {
+  .button[disabled] {
     background-color: #313339;
     color: #787c7f; }
 
@@ -6129,7 +6082,7 @@ body {
   display: block;
   width: 100%; }
 
-.button-no-hover, .button[disabled], [disabled].progress-button, .progress-button[active="true"] {
+.button-no-hover, .button[disabled] {
   pointer-events: none; }
 
 .button-default {
@@ -6141,13 +6094,12 @@ body {
   background-color: lightgray;
   color: #b3b3b3; }
 
-.button-primary, .progress-button {
+.button-primary {
   background-color: #2297de;
   color: #fff; }
 
-.button-primary:focus, .progress-button:focus,
+.button-primary:focus,
-.button-primary:hover,
+.button-primary:hover {
-.progress-button:hover {
   background-color: #1b79b2;
   color: #fff; }
 
@@ -6272,7 +6224,7 @@ body {
   display: flex !important;
   justify-content: center;
   align-items: center; }
-  .modal .button[disabled], .modal [disabled].progress-button {
+  .modal .button[disabled] {
     background-color: #d5d5d5;
     color: #787c7f; }
 
@@ -6280,81 +6232,6 @@ body {
   margin: 0;
   position: initial; }
 
-/*
- * 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.
- */
-/**
- * A button with a progress bar inside.
- *
- * From http://tympanus.net/Development/ProgressButtonStyles/
- *
- * The state of the progress bar is controller by the width, in percentage,
- * of `.progress-button__bar`.
- *
- * If there is an action in place, the `active` attribute must be set to `true`.
- * This is useful to determine if the progress bar is paused from the point of view
- * of the styling.
- *
- * You can optionally pass the `.progress-button--striped` modified to get a striped
- * progress bar.
- *
- * The stripe implementation idea was taken from:
- *
- *   https://css-tricks.com/css3-progress-bars/
- *
- * Usage:
- *
- * <button class="progress-button" active="true">
- *   <span class="progress-button__content">Button text</span>
- *   <span class="progress-button__bar" style="width: 50%;"></span>
- * </button>
- */
-.progress-button {
-  overflow: hidden; }
-  .progress-button[active="true"] {
-    background-color: #ff912f; }
-  .progress-button .progress-button__bar {
-    background-color: #ff9e49; }
-  .progress-button.progress-button--striped {
-    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #265d7e), color-stop(0.26, #2895d8), color-stop(0.5, #2895d8), color-stop(0.51, #265d7e), color-stop(0.75, #265d7e), color-stop(0.76, #2895d8), to(#2895d8)); }
-    .progress-button.progress-button--striped .progress-button__bar {
-      background-color: #38a1e1; }
-
-.progress-button__content {
-  position: relative;
-  z-index: 10; }
-
-.progress-button__bar {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 0;
-  height: 100%;
-  transition: width 0.3s; }
-
-.progress-button--striped {
-  background-size: 20px 20px;
-  animation: progress-button-stripes 1s linear infinite;
-  overflow: hidden; }
-
-@keyframes progress-button-stripes {
-  0% {
-    background-position: 0 0; }
-  100% {
-    background-position: 20px 20px; } }
-
 /*
  * Copyright 2016 resin.io
  *
@@ -6596,7 +6473,7 @@ svg-icon > img[disabled] {
   border-bottom: 1px dotted;
   padding-bottom: 2px; }
 
-.page-main .button.step-footer, .page-main .step-footer.progress-button {
+.page-main .button.step-footer {
   font-size: 12px;
   color: #2297de;
   border-radius: 0;
@@ -6720,7 +6597,7 @@ svg-icon > img[disabled] {
   margin: 0 auto 15px;
   max-width: 165px; }
 
-.page-finish .button-primary, .page-finish .progress-button {
+.page-finish .button-primary {
   min-width: 170px; }
 
 .page-finish .title {
@@ -10065,6 +9942,6 @@ body,
   text-align: right;
   padding: 5px 8px;
   font-size: 15px; }
-  .section-header > .button, .section-header > .progress-button {
+  .section-header > .button {
     padding-left: 3px;
     padding-right: 3px; }

package.json

@@ -56,6 +56,7 @@
     "bluebird-retry": "0.11.0",
     "bootstrap-sass": "3.3.6",
     "chalk": "1.1.3",
+    "color": "2.0.1",
     "command-join": "2.0.0",
     "debug": "3.1.0",
     "drivelist": "6.4.2",