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>