search call with input+button appearing when filled search field

This commit is contained in:
jorge 2021-06-23 18:58:15 +02:00
parent 081b44976c
commit 81511ae260
4 changed files with 31 additions and 7 deletions

View File

@ -108,6 +108,8 @@ $global-button-cursor: auto;
$global-color-pick-contrast-tolerance: 0; $global-color-pick-contrast-tolerance: 0;
$print-transparent-backgrounds: true; $print-transparent-backgrounds: true;
$print-hrefs: true; $print-hrefs: true;
$global-duration-archive: 0.3s; //duration of css transitions
$global-bezier-archive: cubic-bezier(0, 0, 0.43, 1.49);
@include add-foundation-colors; @include add-foundation-colors;

View File

@ -26,7 +26,7 @@ button,.button {
color: $button-color-alt; color: $button-color-alt;
font-size: $global-font-size*1.3; font-size: $global-font-size*1.3;
border-color: $button-color-alt; border-color: $button-color-alt;
border-radius: 4rem; border-radius: $global-radius-archive*2;
&:hover{ &:hover{
color: $anchor-color; color: $anchor-color;
border-color: $anchor-color; border-color: $anchor-color;
@ -34,7 +34,15 @@ button,.button {
} }
} }
.search { .search {
button,.button { .button {
border-color: $primary-color; border-color: $primary-color;
} }
button.appear{
min-width: unset;
background-color: $primary-color;
color: $white;
border-radius:$global-radius-archive;
// padding:0;
border: none;
}
} }

View File

@ -2,6 +2,15 @@
.button{ .button{
border-color: $primary-color; border-color: $primary-color;
} }
button.appear{
display:none;
}
input:not(:placeholder-shown) {
+ button {
display: block;
z-index: 2;
}
}
.hollow { .hollow {
border-color: $primary-color; border-color: $primary-color;
color: $primary-color; color: $primary-color;

View File

@ -8,9 +8,14 @@
</section> </section>
</main> </main>
<aside> <aside>
<h2 class="">collections</h2> <h2>collections</h2>
<nav>
<button type="button" class="button hollow">search</button> <!-- https://codepen.io/liamj/pen/vYYLGZj -->
</nav> <form class="search">
<div class="input-group">
<input type="text" placeholder="search" class="input-group-field button hollow" />
<button class="appear button" type="submit">Go</button>
</div>
</form>
</aside> </aside>
</section> </section>