From: Kadir Doğan <kadir.doggan@gmail.com>
Date: Wed, 18 Jul 2018 12:09:20 +0000 (+0100)
Subject: Fixes #1992 - Disabled form elements hover state is overlapping, if control has add... 
X-Git-Tag: 0.7.2~69
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=5048a0d7fbb52f577b9b2b0ed290e98c5678774e;p=thirdparty%2Fbulma.git

Fixes #1992 - Disabled form elements hover state is overlapping, if control has add-ons elements (#1993)

* <!-- 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 6a2deb8e8..96631183f 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