From c27c9c3a2fc8f885d9725e6c3c6cd905405c975a Mon Sep 17 00:00:00 2001
From: Juan Cruz Viotti <jviottidc@gmail.com>
Date: Mon, 4 Apr 2016 18:48:16 -0400
Subject: [PATCH] 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.

The current workaround consists of:

- Iterate through all the Bootstrap button styles.
- Set the default 'background', `color` and `border-color` to match the
style of the normal state.

Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
---
 build/css/main.css               | 30 +++++++++++++++++++
 lib/scss/components/_button.scss | 50 ++++++++++++++++++++++++++++++++
 2 files changed, 80 insertions(+)

diff --git a/build/css/main.css b/build/css/main.css
index d2d8cf47..de9c239b 100644
--- a/build/css/main.css
+++ b/build/css/main.css
@@ -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
diff --git a/lib/scss/components/_button.scss b/lib/scss/components/_button.scss
index 1f4bd455..b65632f7 100644
--- a/lib/scss/components/_button.scss
+++ b/lib/scss/components/_button.scss
@@ -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