<div class="inv-menu-search-modal inv-menu-search-modal--open">
<div class="inv-menu-search-modal__overlay"></div>
<div class="inv-menu-search-modal__content">
<div class="inv-menu-search-modal-content__container">
<div class="inv-menu-search-modal__search">
<a href="#" class="inv-menu-search-modal-close-btn"></a>
<div class="inv-form-field ">
<label for="" class="inv-label ">
Pesquisar
<small></small>
</label>
<i class="material-icons inv-input-icon ">
search
</i>
<input id="" name="" type="text" class="inv-input " value="" placeholder="Ex: 000-00-000" />
<div class="inv-form-text ">
</div>
</div>
</div>
<div class="inv-menu-search-modal__message">
<span>Use o campo acima para pesquisar, os resultados aparecerão aqui.</span>
</div>
<div class="inv-menu-search-modal__list ">
</div>
</div>
<div class="inv-menu-search-modal__footer">
<div>
<b>tab</b> ou
<i class="material-icons">swap_vert</i> para navegar
</div>
<div>
<i class="material-icons inv-menu-search-modal-icon--rotate">call_missed</i> para selecionar
</div>
<div>
<b>esc</b> para sair
</div>
</div>
</div>
</div>
<div class="inv-menu-search-modal inv-menu-search-modal--open">
<div class="inv-menu-search-modal__overlay"></div>
<div class="inv-menu-search-modal__content">
<div class="inv-menu-search-modal-content__container">
<div class="inv-menu-search-modal__search">
<a href="#" class="inv-menu-search-modal-close-btn"></a>
{{> @form-field}}
</div>
{{#if menu-search-modal.message}}
<div class="inv-menu-search-modal__message">
<span>{{menu-search-modal.message}}</span>
</div>
{{/if}}
<div class="inv-menu-search-modal__list {{ menu-search-modal.list-modifier }}">
{{#each menu-search-modal.list}}
<a class="inv-menu-search-modal-list__item {{ this.item.modifier }} " href="#">
{{#each this.item.text}}
<span>{{this}}</span>
{{/each}}
</a>
{{/each}}
</div>
</div>
<div class="inv-menu-search-modal__footer">
<div>
<b>tab</b> ou
<i class="material-icons">swap_vert</i> para navegar
</div>
<div>
<i class="material-icons inv-menu-search-modal-icon--rotate">call_missed</i> para selecionar
</div>
<div>
<b>esc</b> para sair
</div>
</div>
</div>
</div>
{
"menu-search-modal": {
"message": "Use o campo acima para pesquisar, os resultados aparecerão aqui."
},
"label": {
"show": true,
"value": "Pesquisar"
},
"input-icon": {
"icon": "search"
}
}
.inv-menu-search-modal {
align-items: center;
display: none;
flex-direction: column;
justify-content: center;
overflow: hidden;
position: fixed;
z-index: var(--z-index-1);
width: 100%;
height: 100%;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
.inv-menu-search-modal__content {
display: flex;
flex-direction: column;
background-color: var(--color-system--white);
height: 100vh;
width: 100vw;
}
.inv-menu-search-modal--open {
display: flex;
}
.inv-menu-search-modal-content__container {
display: flex;
flex-direction: column;
padding-right: var(--space-24);
padding-left: var(--space-16);
}
.inv-menu-search-modal__search {
padding-top: var(--space-16);
padding-left: var(--space-32);
position: relative;
}
.inv-form-field > .inv-input-icon {
cursor: default;
user-select: none;
}
.inv-menu-search-modal__message {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-top: 80px;
visibility: visible;
opacity: 1;
transition: opacity 0.1s, height 0.1s;
}
.inv-menu-search-modal__message--hidden {
visibility: hidden;
opacity: 0;
height: 0;
}
.inv-menu-search-modal__message > span {
max-width: 208px;
text-align: center;
color: var(--color-system--regular);
font-size: var(--font-content--size);
}
.inv-menu-search-modal-close-btn {
position: absolute;
top: 46px;
left: 0;
text-decoration: none;
user-select: none;
}
.inv-menu-search-modal-close-btn::before {
content: 'keyboard_arrow_left';
font-family: 'Material Icons';
font-size: 24px;
color: var(--color-default--regular);
}
.inv-menu-search-modal-close-btn:active {
color: var(--color-default--dark);
}
.inv-menu-search-modal-close-btn:hover {
color: var(--color-default--regular);
text-shadow: 0 0 1px var(--color-system--shadow);
}
.inv-menu-search-modal__list {
display: flex;
flex-direction: column;
overflow-y: auto;
margin-top: var(--space-24);
outline: none;
visibility: hidden;
opacity: 0;
height: 0;
transition: opacity 0.1s, height 0.1s;
}
.inv-menu-search-modal__list--visible {
visibility: visible;
opacity: 1;
height: 100%;
}
.inv-menu-search-modal-list__item {
transition: background-color 0.1s;
padding: var(--space-8) 0 var(--space-8) var(--space-8);
text-decoration: none;
outline: none;
font-size: var(--font-content--size);
color: var(--color-system--regular);
height: 39px;
line-height: 19px;
}
.inv-menu-search-modal-list__item:hover {
background-color: var(--color-default--white);
}
.inv-menu-search-modal-list__item:active {
background-color: var(--color-system--light);
}
.inv-menu-search-modal-list__item > span:last-child {
color: var(--color-system--dark);
}
.inv-menu-search-modal-list__item--selected {
background-color: var(--color-default--white);
}
.inv-menu-search-modal__footer {
height: 32px;
left: 0;
}
.inv-menu-search-modal__footer > div {
display: none;
}
.inv-menu-search-modal__search > .inv-form-field > .inv-input-icon {
position: absolute;
top: var(--space-32);
right: var(--space-8);
}
.inv-menu-search-modal__search > .inv-form-field > .inv-input {
padding-right: var(--space-40);
}
.inv-menu-search-modal__search > .inv-form-field > .inv-label {
user-select: none;
}
@media (min-width: 600px) {
.inv-menu-search-modal {
align-items: center;
display: none;
flex-direction: column;
justify-content: center;
overflow: hidden;
position: fixed;
z-index: var(--z-index-1);
width: 100%;
height: 100%;
bottom: 0;
left: 0;
right: 0;
top: 0;
transition: opacity 500ms ease-in;
}
.inv-menu-search-modal:target {
display: flex;
}
.inv-menu-search-modal--open {
display: flex;
}
.inv-menu-search-modal__overlay {
height: 100%;
width: 100%;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
transition: background-color 1s, opacity 0.5s linear;
}
.inv-menu-search-modal__content {
display: flex;
flex-direction: column;
background-color: var(--color-system--white);
width: 508px;
height: 301px;
box-shadow: var(--shadow-16) var(--color-system--shadow);
border-radius: 8px;
position: fixed;
}
.inv-menu-search-modal-content__container {
display: flex;
flex-direction: column;
height: 100%;
padding: 0 var(--space-16) var(--space-8);
}
.inv-menu-search-modal__search {
padding-top: var(--space-8);
padding-left: 0;
padding-bottom: 0;
}
.inv-menu-search-modal__search > a {
display: none;
}
.inv-menu-search-modal__message {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0;
padding-top: unset;
padding-bottom: var(--space-8);
}
.inv-menu-search-modal__message--hidden {
visibility: hidden;
opacity: 0;
height: 0;
}
.inv-menu-search-modal__message > span {
max-width: 252px;
text-align: center;
color: var(--color-system--regular);
font-size: var(--font-content--size);
}
.inv-menu-search-modal__list {
margin-top: var(--space-8);
max-height: 160px;
}
.inv-menu-search-modal-list__item {
height: unset;
line-height: unset;
}
.inv-menu-search-modal-list__item:hover {
background-color: var(--color-default--white);
}
.inv-menu-search-modal-list__item:active {
background-color: var(--color-system--light);
}
.inv-menu-search-modal__footer {
border-top: 1px solid var(--color-system--light);
display: flex;
align-items: center;
flex-direction: row;
min-height: 48px;
bottom: 0;
}
.inv-menu-search-modal__footer > div {
color: var(--color-system--regular);
border-right: 1px solid var(--color-system--light);
font-size: 10px;
padding-top: var(--space-4);
padding-bottom: var(--space-4);
width: 100%;
height: 40px;
max-height: 30px;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
.inv-menu-search-modal-icon--rotate {
transform: rotate(-45deg);
}
.inv-menu-search-modal__footer > div:last-child {
border-right: unset;
}
.inv-menu-search-modal__list::-webkit-scrollbar {
width: 1em;
}
.inv-menu-search-modal__list::-webkit-scrollbar-track {
background-color: #f0f0f0;
}
.inv-menu-search-modal__list::-webkit-scrollbar-thumb {
background-color: #cdcdcd;
height: 122px;
}
}
There are no notes for this item.