Merge pull request #243 from resin-io/fix/button-focus-state

Undo `:focus` styles from Bootstrap.
This commit is contained in:
Juan Cruz Viotti 2016-04-05 09:02:59 -04:00
commit b1bd064cac
2 changed files with 80 additions and 0 deletions

View File

@ -6040,6 +6040,36 @@ html {
top: 2px;
margin-right: 2px; }
.btn-default:focus {
background-color: #ececec;
color: #b3b3b3;
border-color: #ccc; }
.btn-primary:focus, .progress-button--primary:focus {
background-color: #5793db;
color: #fff;
border-color: #4286d7; }
.btn-success:focus {
background-color: #5cb85c;
color: #fff;
border-color: #4cae4c; }
.btn-info:focus {
background-color: #5bc0de;
color: #fff;
border-color: #46b8da; }
.btn-warning:focus {
background-color: #f0ad4e;
color: #fff;
border-color: #eea236; }
.btn-danger:focus {
background-color: #d9534f;
color: #fff;
border-color: #d43f3a; }
/*
* Remove blue/orange outline
* !important is needed here for some reason

View File

@ -51,6 +51,56 @@
margin-right: 2px;
}
// Create map from Bootstrap `.btn` type styles
// since its not possible to perform variable
// interpolation (e.g: `$btn-${type}-bg`).
// See https://github.com/sass/sass/issues/132
$btn-types-styles: (
default: (
bg: $btn-default-bg,
color: $btn-default-color,
border: $btn-default-border
),
primary: (
bg: $btn-primary-bg,
color: $btn-primary-color,
border: $btn-primary-border
),
success: (
bg: $btn-success-bg,
color: $btn-success-color,
border: $btn-success-border
),
info: (
bg: $btn-info-bg,
color: $btn-info-color,
border: $btn-info-border
),
warning: (
bg: $btn-warning-bg,
color: $btn-warning-color,
border: $btn-warning-border
),
danger: (
bg: $btn-danger-bg,
color: $btn-danger-color,
border: $btn-danger-border
)
);
// Undo `:focus` styles from Bootstrap.
// On Electron, the user can click and press over a button,
// then move the mouse away from the button and release,
// and the button will erroneusly keep the `:focus` state style.
@each $style in map-keys($btn-types-styles) {
.btn-#{$style}:focus {
$btn-styles: map-get($btn-types-styles, $style);
background-color: map-get($btn-styles, "bg");
color: map-get($btn-styles, "color");
border-color: map-get($btn-styles, "border");
}
}
/*
* Remove blue/orange outline
* !important is needed here for some reason