From 246b1ef02cac12873ba4d8498fc3221c9127dbe3 Mon Sep 17 00:00:00 2001
From: Aleksander Machniak <machniak@kolabsys.com>
Date: Fri, 13 Jul 2018 10:08:38 +0000
Subject: [PATCH] Elastic: Fix buttons box-shadow in :active and :focus state

---
 skins/elastic/styles/widgets/buttons.less  | 51 ++++++++++------------
 skins/elastic/styles/widgets/jqueryui.less |  4 +-
 2 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/skins/elastic/styles/widgets/buttons.less b/skins/elastic/styles/widgets/buttons.less
index bb5d7e990..2bc928b62 100644
--- a/skins/elastic/styles/widgets/buttons.less
+++ b/skins/elastic/styles/widgets/buttons.less
@@ -210,8 +210,8 @@ html.touch {
     }
 
     &:hover {
-        background: darken(@color-btn-secondary-background, 8%);
-        border-color: darken(@color-btn-secondary-background, 10%);
+        background: darken(@color-btn-secondary-background, 5%);
+        border-color: darken(@color-btn-secondary-background, 7%);
     }
 
     &.disabled,
@@ -221,15 +221,14 @@ html.touch {
         opacity: 1;
     }
 
-    &:not(:disabled):not(.disabled):active {
-        background: darken(@color-btn-secondary-background, 11%);
-        border-color: darken(@color-btn-secondary-background, 13%);
-        box-shadow: 0 0 0 .2rem fade(@color-btn-secondary-background, 53%);
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+        background: darken(@color-btn-secondary-background, 10%);
+        border-color: darken(@color-btn-secondary-background, 12%);
     }
 
-    &:not(:disabled):not(.disabled).active {
-        background: darken(@color-btn-secondary-background, 20%);
-        border-color: darken(@color-btn-secondary-background, 22%);
+    &:not(:disabled):not(.disabled):focus {
+        box-shadow: 0 0 0 .2rem fade(@color-btn-secondary-background, 53%) !important;
     }
 }
 
@@ -243,8 +242,8 @@ html.touch {
     }
 
     &:hover {
-        background: darken(@color-btn-primary-background, 8%);
-        border-color: darken(@color-btn-primary-background, 10%);
+        background: darken(@color-btn-primary-background, 5%);
+        border-color: darken(@color-btn-primary-background, 7%);
     }
 
     &.disabled,
@@ -254,15 +253,14 @@ html.touch {
         opacity: 1;
     }
 
-    &:not(:disabled):not(.disabled):active {
-        background: darken(@color-btn-primary-background, 11%);
-        border-color: darken(@color-btn-primary-background, 13%);
-        box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 53%);
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+        background: darken(@color-btn-primary-background, 10%);
+        border-color: darken(@color-btn-primary-background, 12%);
     }
 
-    &:not(:disabled):not(.disabled).active {
-        background: darken(@color-btn-primary-background, 20%);
-        border-color: darken(@color-btn-primary-background, 22%);
+    &:not(:disabled):not(.disabled):focus {
+        box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 53%) !important;
     }
 }
 
@@ -276,8 +274,8 @@ html.touch {
     }
 
     &:hover {
-        background: darken(@color-btn-danger-background, 8%);
-        border-color: darken(@color-btn-danger-background, 10%);
+        background: darken(@color-btn-danger-background, 5%);
+        border-color: darken(@color-btn-danger-background, 7%);
     }
 
     &.disabled,
@@ -287,14 +285,13 @@ html.touch {
         opacity: 1;
     }
 
-    &:not(:disabled):not(.disabled):active {
-        background: darken(@color-btn-danger-background, 11%);
-        border-color: darken(@color-btn-danger-background, 13%);
-        box-shadow: 0 0 0 .2rem fade(@color-btn-danger-background, 53%);
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+        background: darken(@color-btn-danger-background, 10%);
+        border-color: darken(@color-btn-danger-background, 12%);
     }
 
-    &:not(:disabled):not(.disabled).active {
-        background: darken(@color-btn-danger-background, 20%);
-        border-color: darken(@color-btn-danger-background, 22%);
+    &:not(:disabled):not(.disabled):focus {
+        box-shadow: 0 0 0 .2rem fade(@color-btn-danger-background, 53%) !important;
     }
 }
diff --git a/skins/elastic/styles/widgets/jqueryui.less b/skins/elastic/styles/widgets/jqueryui.less
index f18e96c0e..e19abe0bc 100644
--- a/skins/elastic/styles/widgets/jqueryui.less
+++ b/skins/elastic/styles/widgets/jqueryui.less
@@ -117,14 +117,16 @@
                 padding-right: 0;
                 padding-left: 0;
                 text-decoration: none;
+                color: @color-font;
 
                 &:focus {
-                    background-color: @color-input-border-focus-shadow;
+                    background-color: fade(@color-btn-primary-background, 50%);
                 }
 
                 &.options {
                     order: -1;
                     padding: .375rem .25rem;
+                    margin-right: .3rem;
 
                     &:before {
                         // this icon is for mobile version