This commit is contained in:
Jeremy Thomas
2017-04-02 14:03:52 +01:00
parent 15122898b5
commit ab6bf8e177
4 changed files with 52 additions and 6 deletions

View File

@@ -6,6 +6,7 @@
# Fix #589 notification delete # Fix #589 notification delete
# Fix #272 nav-right without nav-menu # Fix #272 nav-right without nav-menu
# Fix #616 hero and notification buttons # Fix #616 hero and notification buttons
# Fix #607 has-addons z-index
## 0.4.0 ## 0.4.0

View File

@@ -2274,20 +2274,38 @@ input[type="submit"].button {
border-radius: 0; 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 .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; 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:focus,
.field.has-addons .control .input.is-focused,
.field.has-addons .control .input:active, .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: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; 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 { .field.has-addons .control.is-expanded {
-webkit-box-flex: 1; -webkit-box-flex: 1;
-ms-flex-positive: 1; -ms-flex-positive: 1;

View File

@@ -505,6 +505,28 @@ doc-subtab: button
<p>You can group together addons as well:</p> <p>You can group together addons as well:</p>
</div> </div>
{% capture button_group_addons_example %} {% 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"> <div class="field has-addons">
<p class="control"> <p class="control">
<a class="button"> <a class="button">

View File

@@ -186,11 +186,16 @@ $input-radius: $radius !default
.input, .input,
.select select .select select
border-radius: 0 border-radius: 0
&:hover &:hover,
&.is-hovered
z-index: 2 z-index: 2
&:focus, &:focus,
&:active &.is-focused,
&:active,
&.is-active
z-index: 3 z-index: 3
&:hover
z-index: 4
&.is-expanded &.is-expanded
flex-grow: 1 flex-grow: 1
flex-shrink: 0 flex-shrink: 0