jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-23 19:26:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(GUI): Convert Progress Button to Rendition

Browse Source 
Convert progress-button component to Rendition

Change-type: minor
Signed-off-by: amdomanska <aga@resin.io>
This commit is contained in:
amdomanska 2018-08-31 13:17:04 +01:00 committed by Lorenzo Alberto Maria Ambrosi
parent 7227c76538
commit b3aab5116a
13 changed files with 368 additions and 396 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
lib/gui/app/components/progress-button/directives/progress-button.js
View File

@ -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: '@'
}
}
}

8
lib/gui/app/components/progress-button/progress-button.js → lib/gui/app/components/progress-button/index.js
View File

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

151
lib/gui/app/components/progress-button/progress-button.jsx Normal file
View File

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

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

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

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

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

9
lib/gui/app/pages/main/controllers/flash.js
View File

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

2
lib/gui/app/pages/main/main.js
View File

@ -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'),

12
lib/gui/app/pages/main/templates/main.tpl.html
View File

@ -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' }}"
ng-attr-active="{{ main.state.isFlashing() }}"
ng-click="flash.flashImageToDrive(main.selection.getImage(), main.selection.getSelectedDevices())"
ng-disabled="main.shouldFlashStepBeDisabled() || main.state.getLastFlashErrorCode()">
<span ng-bind="flash.getProgressButtonLabel()"></span>
label="flash.getProgressButtonLabel()"
disabled="main.state.getLastFlashErrorCode() || main.shouldFlashStepBeDisabled()"
callback="flash.flashImageToDrive" >
</progress-button>
<button class="button button-link button-abort-write"

1
lib/gui/app/scss/main.scss
View File

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

47
lib/gui/app/styled-components.js Normal file
View File

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

67
lib/gui/app/theme.js Normal file
View File

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

289
lib/gui/css/main.css
View File

@ -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 > .progress-button > .caret {
.dropup > .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.progress-button, .form-control-static.input-sm, .input-group-sm > .form-control-static.form-control,
.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-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.progress-button {
.input-group-sm > .input-group-btn > .form-control-static.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 > .progress-button {
.input-group-sm > .input-group-btn > .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.progress-button {
.input-group-sm > .input-group-btn > select.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].progress-button {
.input-group-sm > .input-group-btn > select[multiple].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 > .progress-button {
.input-group-lg > .input-group-btn > .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.progress-button {
.input-group-lg > .input-group-btn > select.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].progress-button {
.input-group-lg > .input-group-btn > select[multiple].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] .progress-button {
fieldset[disabled] .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.progress-button {
fieldset[disabled] a.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 > .progress-button {
.btn-group-vertical > .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.progress-button {
.btn-group-vertical > .active.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 > .progress-button {
.btn-group-vertical > .btn-group > .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 > .progress-button input[type="checkbox"] {
[data-toggle="buttons"] > .btn-group > .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.progress-button {
.input-group-sm > .input-group-btn > .input-group-addon.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.progress-button {
.input-group-lg > .input-group-btn > .input-group-addon.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) > .progress-button {
.input-group-btn:last-child > .btn-group:not(:last-child) > .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) > .progress-button {
.input-group-btn:first-child > .btn-group:not(:first-child) > .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 > .progress-button .badge {
.btn-group-xs > .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:hover,
.progress-button:hover {
.button-primary:focus,
.button-primary: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; }

1
package.json
View File

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