Violin.css

Menu Search Modal 

<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>&nbsp;ou&nbsp;
                <i class="material-icons">swap_vert</i> para navegar
            </div>
            <div>
                <i class="material-icons inv-menu-search-modal-icon--rotate">call_missed</i>&nbsp;para selecionar
            </div>
            <div>
                <b>esc</b>&nbsp;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>&nbsp;ou&nbsp;
        <i class="material-icons">swap_vert</i> para navegar
      </div>
      <div>
        <i class="material-icons inv-menu-search-modal-icon--rotate">call_missed</i>&nbsp;para selecionar
      </div>
      <div>
        <b>esc</b>&nbsp;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"
  }
}
  • Content: 
    .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;
  }
}
  • URL: /components/raw/menu-search-modal/menu-search-modal.css
  • Filesystem Path: src/components/menu-search-modal/menu-search-modal.css
  • Size: 6.5 KB

There are no notes for this item.