From ab6bf8e17752cfcb79c951db14e1f8d59a897e94 Mon Sep 17 00:00:00 2001
From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sun, 2 Apr 2017 14:03:52 +0100
Subject: [PATCH] Fix #607

---
 CHANGELOG.md                            |  1 +
 docs/css/bulma-docs.css                 | 26 +++++++++++++++++++++----
 docs/documentation/elements/button.html | 22 +++++++++++++++++++++
 sass/elements/form.sass                 |  9 +++++++--
 4 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e49e5bea..67481e8d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 # Fix #589 notification delete
 # Fix #272 nav-right without nav-menu
 # Fix #616 hero and notification buttons
+# Fix #607 has-addons z-index
 
 ## 0.4.0
 
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index e2dd0d25..cf17a95b 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -2274,20 +2274,38 @@ input[type="submit"].button {
   border-radius: 0;
 }
 
-.field.has-addons .control .button:hover,
+.field.has-addons .control .button:hover, .field.has-addons .control .button.is-hovered,
 .field.has-addons .control .input:hover,
-.field.has-addons .control .select select:hover {
+.field.has-addons .control .input.is-hovered,
+.field.has-addons .control .select select:hover,
+.field.has-addons .control .select select.is-hovered {
   z-index: 2;
 }
 
-.field.has-addons .control .button:focus, .field.has-addons .control .button:active,
+.field.has-addons .control .button:focus, .field.has-addons .control .button.is-focused, .field.has-addons .control .button:active, .field.has-addons .control .button.is-active,
 .field.has-addons .control .input:focus,
+.field.has-addons .control .input.is-focused,
 .field.has-addons .control .input:active,
+.field.has-addons .control .input.is-active,
 .field.has-addons .control .select select:focus,
-.field.has-addons .control .select select:active {
+.field.has-addons .control .select select.is-focused,
+.field.has-addons .control .select select:active,
+.field.has-addons .control .select select.is-active {
   z-index: 3;
 }
 
+.field.has-addons .control .button:focus:hover, .field.has-addons .control .button.is-focused:hover, .field.has-addons .control .button:active:hover, .field.has-addons .control .button.is-active:hover,
+.field.has-addons .control .input:focus:hover,
+.field.has-addons .control .input.is-focused:hover,
+.field.has-addons .control .input:active:hover,
+.field.has-addons .control .input.is-active:hover,
+.field.has-addons .control .select select:focus:hover,
+.field.has-addons .control .select select.is-focused:hover,
+.field.has-addons .control .select select:active:hover,
+.field.has-addons .control .select select.is-active:hover {
+  z-index: 4;
+}
+
 .field.has-addons .control.is-expanded {
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html
index 48ca15fd..fd43edd9 100644
--- a/docs/documentation/elements/button.html
+++ b/docs/documentation/elements/button.html
@@ -505,6 +505,28 @@ doc-subtab: button
       <p>You can group together addons as well:</p>
     </div>
 {% capture button_group_addons_example %}
+<div class="field has-addons">
+  <p class="control">
+    <a class="button is-active">
+      <span>Foo</span>
+    </a>
+  </p>
+  <p class="control">
+    <a class="button">
+      <span>Bar</span>
+    </a>
+  </p>
+  <p class="control">
+    <a class="button is-active">
+      <span>Lorem</span>
+    </a>
+  </p>
+  <p class="control">
+    <a class="button">
+      <span>Ipsum</span>
+    </a>
+  </p>
+</div>
 <div class="field has-addons">
   <p class="control">
     <a class="button">
diff --git a/sass/elements/form.sass b/sass/elements/form.sass
index a98ec057..c922d6bf 100644
--- a/sass/elements/form.sass
+++ b/sass/elements/form.sass
@@ -186,11 +186,16 @@ $input-radius:              $radius !default
       .input,
       .select select
         border-radius: 0
-        &:hover
+        &:hover,
+        &.is-hovered
           z-index: 2
         &:focus,
-        &:active
+        &.is-focused,
+        &:active,
+        &.is-active
           z-index: 3
+          &:hover
+            z-index: 4
       &.is-expanded
         flex-grow: 1
         flex-shrink: 0