Changed form search in the navigation bar for better interaction.
This commit is contained in:
Fabiano
parent
d4268703b8
commit
296d766a76
|
|
@ -76,6 +76,38 @@ nav{
|
|||
}
|
||||
}
|
||||
}
|
||||
.tainacan-search-form {
|
||||
.form-control {
|
||||
height: 27px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #898d8f;
|
||||
}
|
||||
}
|
||||
.tainacan-form-dropdown {
|
||||
#dropdownMenuLink {
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
> .dropdown-menu {
|
||||
top: calc(100% + 2px);
|
||||
right: 0;
|
||||
width: 204px;
|
||||
height: 27px;
|
||||
padding: 0;
|
||||
left: inherit;
|
||||
.input-group {
|
||||
border: 0;
|
||||
}
|
||||
.form-control {
|
||||
border-radius: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #898d8f;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-menu{
|
||||
.dropdown-item{
|
||||
&:hover{
|
||||
|
|
@ -163,42 +195,60 @@ nav{
|
|||
}
|
||||
}
|
||||
|
||||
form{
|
||||
&.tainacan-form-search{
|
||||
flex-flow: nowrap;
|
||||
opacity: 0;
|
||||
@media only screen and (max-width: 576px) {
|
||||
.tainacan-search-form {
|
||||
.input-group {
|
||||
float: right !important;
|
||||
transition: all 0.35s, border-radius 0s;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: #fff;
|
||||
//box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
|
||||
//border-radius: 25px;
|
||||
//border: 1px solid #ccc;
|
||||
.form-control {
|
||||
//margin-left: -25px;
|
||||
border:none;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
display:block;
|
||||
padding: 1rem 2rem;
|
||||
padding-left: 1rem;
|
||||
&::-webkit-input-placeholder {
|
||||
display: none;
|
||||
}
|
||||
&:-moz-placeholder {
|
||||
/* Firefox 18- */
|
||||
display: none;
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&:hover, &.hover {
|
||||
width: 100%;
|
||||
//border-radius: 25px 25px 25px 25px;
|
||||
border: 1px solid #ccc;
|
||||
position: static;
|
||||
}
|
||||
.form-control-feedback {
|
||||
position: absolute;
|
||||
top: 46px;
|
||||
right: 86px;
|
||||
z-index: 2;
|
||||
}
|
||||
@media only screen and (min-width: 600px) and (max-width: 768px) {
|
||||
position: absolute;
|
||||
top: 46px;
|
||||
right: 120px;
|
||||
z-index: 2;
|
||||
}
|
||||
.tainacan-input-search{
|
||||
transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
|
||||
@media only screen and (max-width: 768px) {
|
||||
width: 250px;
|
||||
height: 27px;
|
||||
}
|
||||
border-color: #cbcbcb !important;
|
||||
&:focus{
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.tainacan-button-search{
|
||||
border-color: #cbcbcb !important;
|
||||
&:focus{
|
||||
box-shadow: none;
|
||||
}
|
||||
//top: -5px;
|
||||
bottom: 0px;
|
||||
right: -2px;
|
||||
left: 5px;
|
||||
display: block;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
color: #3596e0;
|
||||
left: initial;
|
||||
font-size: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.page-header {
|
||||
height: 200px;
|
||||
background-position: 50%;
|
||||
|
|
|
|||
|
|
@ -17,10 +17,23 @@
|
|||
<div class="container-fluid max-large px-0 margin-one-column" id="topNavbar">
|
||||
<?php echo tainacan_get_logo(); ?>
|
||||
<div class="btn-group ml-auto">
|
||||
<?php
|
||||
echo tainacan_get_form_search();
|
||||
?>
|
||||
<button class="btn btn-link text-heavy-metal px-1 showInput"><i class="mdi mdi-magnify"></i></button>
|
||||
<form class="form-horizontal my-2 my-md-0 tainacan-search-form d-none d-md-block" [formGroup]="searchForm" role="form" (keyup.enter)="onSubmit()">
|
||||
<div class="input-group">
|
||||
<input type="text" name="s" placeholder="<?php _e('Search'); ?>" class="form-control" formControlName="searchText" size="50">
|
||||
<span class="text-heavy-metal input-group-btn mdi mdi-magnify form-control-feedback"></span>
|
||||
</div>
|
||||
</form>
|
||||
<div class="dropdown tainacan-form-dropdown d-md-none">
|
||||
<a class="btn btn-link text-heavy-metal px-1 dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="mdi mdi-magnify"></i></a>
|
||||
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
||||
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
|
||||
<div class="input-group border">
|
||||
<input class="form-control py-2 border-0" type="search" name="s" placeholder="<?php _e('Search'); ?>" id="tainacan-search">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <button type="button" class="btn btn-link text-heavy-metal dropdown-toggle dropdown-toggle-split px-1 d-flex align-items-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="mdi mdi-account-outline"></i><div class="d-none d-md-inline-flex px-1">User</div><span class="sr-only text-jelly-bean">Toggle Dropdown</span>
|
||||
</button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue