From 5048a0d7fbb52f577b9b2b0ed290e98c5678774e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kadir=20Do=C4=9Fan?= <kadir.doggan@gmail.com>
Date: Wed, 18 Jul 2018 13:09:20 +0100
Subject: [PATCH] Fixes #1992 - Disabled form elements hover state is
 overlapping, if control has add-ons elements (#1993)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* <!-- PLEASE READ THE FOLLOWING INSTRUCTIONS -->
<!-- DO NOT REBUILD THE CSS OUTPUT IN YOUR PR -->

<!-- Choose one of the following: -->
This is a bugfix
<!-- New feature? Update the CHANGELOG.md too, and eventually the Docs. -->
<!-- Improvement? Explain how and why. -->
<!-- Bugfix? Reference that issue as well. -->
If a form field is disabled and that form field uses has add-on element ( has-addons ), hover state is overlapping to add-on element.

### Proposed solution
<!-- Which specific problem does this PR solve and how?  -->
<!-- If it fixes a particular Issue, add "Fixes #ISSUE_NUMBER" in your title -->
This solution excludes disabled form elements hover state which is used within has-addons fields wrapper.
Fixes #1992

### Tradeoffs
<!-- What are the drawbacks of this solution? Are there alternative ones? -->
<!-- Think of performance, build time, usability, complexity, coupling…) -->
No tradeoffs.

### Testing Done
I checkout out master and changed the lines.

* Disabled form elements hover state is overlapping, if control has add-ons elements
If a form field is disabled and that form field uses has add-on element ( has-addons ), hover state is overlapping to add-on element.

* Disabled form elements hover state is overlapping, if control has add-ons elements
If a form field is disabled and that form field uses has add-on element ( has-addons ), hover state is overlapping to add-on element.
---
 sass/elements/form.sass | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/sass/elements/form.sass b/sass/elements/form.sass
index 6a2deb8e..96631183 100644
--- a/sass/elements/form.sass
+++ b/sass/elements/form.sass
@@ -449,16 +449,17 @@ $help-size: $size-small !default
       .button,
       .input,
       .select select
-        &:hover,
-        &.is-hovered
-          z-index: 2
-        &:focus,
-        &.is-focused,
-        &:active,
-        &.is-active
-          z-index: 3
-          &:hover
-            z-index: 4
+        &:not([disabled])
+          &:hover,
+          &.is-hovered
+            z-index: 2
+          &:focus,
+          &.is-focused,
+          &:active,
+          &.is-active
+            z-index: 3
+            &:hover
+              z-index: 4
       &.is-expanded
         flex-grow: 1
     &.has-addons-centered