Fix #607

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
 

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;

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">

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