Fixes #1992 - Disabled form elements hover state is overlapping, if control has add...

* <!-- 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.

diff --git a/sass/elements/form.sass b/sass/elements/form.sass
index 6a2deb8e8717930baf3e4a9a6a8367adbefccd25..96631183f524286baa0643d53084d689226d108f 100644 (file)
--- 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