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 {
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;
<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>
</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">
</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>
justify-content: flex-start
.control
margin-right: -1px
- &:hover
- z-index: 2
- &:focus,
- &:active
- z-index: 3
&:first-child
.button,
.input,
.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