Fix #607

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e49e5bea3152797008e83f60cf0acca00971c509..67481e8d5de598f8595129f57b7cb426b3423e00 100644 (file)
--- 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 e2dd0d25d1f38ca96d8fda17d96bf32a4c4b9fd7..cf17a95b85fbecae56f2e2ab7832de3e3ecba2ba 100644 (file)
--- 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 48ca15fd99016ca9365ae83b3b86d5ae82fe8a18..fd43edd998f8e9fee9bff43bb6c17942eac25317 100644 (file)
--- 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 a98ec057dd38ba6500bbf504f13bac642fcdaa6e..c922d6bf8892ba8f30a9e1620e5892a558e34459 100644 (file)
--- 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