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;
$print-transparent-backgrounds: 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;

View File

@ -26,7 +26,7 @@ button,.button {
color: $button-color-alt;
font-size: $global-font-size*1.3;
border-color: $button-color-alt;
border-radius: 4rem;
border-radius: $global-radius-archive*2;
&:hover{
color: $anchor-color;
border-color: $anchor-color;
@ -34,7 +34,15 @@ button,.button {
}
}
.search {
button,.button {
.button {
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{
border-color: $primary-color;
}
button.appear{
display:none;
}
input:not(:placeholder-shown) {
+ button {
display: block;
z-index: 2;
}
}
.hollow {
border-color: $primary-color;
color: $primary-color;

View File

@ -8,9 +8,14 @@
</section>
</main>
<aside>
<h2 class="">collections</h2>
<nav>
<button type="button" class="button hollow">search</button>
</nav>
<h2>collections</h2>
<!-- https://codepen.io/liamj/pen/vYYLGZj -->
<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>
</section>