Fix level and card

This commit is contained in:
Jeremy Thomas 2017-03-13 12:33:34 +00:00
parent b93c3789b6
commit e48e671eb7
4 changed files with 40 additions and 41 deletions

View File

@ -1863,14 +1863,6 @@ input[type="submit"].button {
margin-right: -1px;
}
.field.has-addons .control:hover {
z-index: 2;
}
.field.has-addons .control:focus, .field.has-addons .control:active {
z-index: 3;
}
.field.has-addons .control:first-child .button,
.field.has-addons .control:first-child .input,
.field.has-addons .control:first-child .select select {
@ -1891,6 +1883,20 @@ input[type="submit"].button {
border-radius: 0;
}
.field.has-addons .control .button:hover,
.field.has-addons .control .input:hover,
.field.has-addons .control .select select:hover {
z-index: 2;
}
.field.has-addons .control .button:focus, .field.has-addons .control .button:active,
.field.has-addons .control .input:focus,
.field.has-addons .control .input:active,
.field.has-addons .control .select select:focus,
.field.has-addons .control .select select:active {
z-index: 3;
}
.field.has-addons .control.is-expanded {
flex-grow: 1;
flex-shrink: 0;

View File

@ -23,7 +23,7 @@ doc-subtab: card
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image" style="height: 40px; width: 40px;">
<figure class="image is-48x48">
<img src="{{site.url}}/images/placeholders/96x96.png" alt="Image">
</figure>
</div>

View File

@ -41,12 +41,16 @@ doc-subtab: level
</p>
</div>
<div class="level-item">
<p class="control has-addons">
<input class="input" type="text" placeholder="Find a post">
<button class="button">
Search
</button>
</p>
<div class="field has-addons">
<p class="control">
<input class="input" type="text" placeholder="Find a post">
</p>
<p class="control">
<button class="button">
Search
</button>
</p>
</div>
</div>
</div>
<div class="level-right structure-item" title="level-right">
@ -82,12 +86,16 @@ doc-subtab: level
</p>
</div>
<div class="level-item">
<p class="control has-addons">
<input class="input" type="text" placeholder="Find a post">
<button class="button">
Search
</button>
</p>
<div class="field has-addons">
<p class="control">
<input class="input" type="text" placeholder="Find a post">
</p>
<p class="control">
<button class="button">
Search
</button>
</p>
</div>
</div>
</div>

View File

@ -172,11 +172,6 @@ $input-radius: $radius !default
justify-content: flex-start
.control
margin-right: -1px
&:hover
z-index: 2
&:focus,
&:active
z-index: 3
&:first-child
.button,
.input,
@ -193,24 +188,14 @@ $input-radius: $radius !default
.input,
.select select
border-radius: 0
&:hover
z-index: 2
&:focus,
&:active
z-index: 3
&.is-expanded
flex-grow: 1
flex-shrink: 0
// width: auto
// .control:first-child &
// border-radius: $input-radius 0 0 $input-radius
// select
// border-radius: $input-radius 0 0 $input-radius
// .control:last-child &
// border-radius: 0 $input-radius $input-radius 0
// select
// border-radius: 0 $input-radius $input-radius 0
// .select select
// &:hover
// z-index: 2
// &:focus,
// &:active
// z-index: 3
&.has-addons-centered
justify-content: center
&.has-addons-right