Violin.css

# Menu Search Modal: With Selected Item

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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
                  <span></span>
                </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__list">
                    <a class="inv-menu-search-modal-list__item  " href="#">
                <span>PDV / </span>
                <span>Listagem</span>
            </a>
                    <a class="inv-menu-search-modal-list__item  " href="#">
                <span>Colaboradores / </span>
                <span>Afastamentos / </span>
                <span>Novo afastamento</span>
            </a>
                    <a class="inv-menu-search-modal-list__item inv-menu-search-modal-list__item--selected " href="#">
                <span>Colaboradores / </span>
                <span>Afastamentos / </span>
                <span>Novo afastamento</span>
            </a>
                    <a class="inv-menu-search-modal-list__item  " href="#">
                <span>PDV / </span>
                <span>Listagem</span>
            </a>
                </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">
            {{#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": null,
        "list": [
          {
            "item": {
              "modifier": null,
              "text": [
                "PDV / ",
                "Listagem"
              ]
            }
          },
          {
            "item": {
              "modifier": null,
              "text": [
                "Colaboradores / ",
                "Afastamentos / ",
                "Novo afastamento"
              ]
            }
          },
          {
            "item": {
              "modifier": "inv-menu-search-modal-list__item--selected",
              "text": [
                "Colaboradores / ",
                "Afastamentos / ",
                "Novo afastamento"
              ]
            }
          },
          {
            "item": {
              "modifier": null,
              "text": [
                "PDV / ",
                "Listagem"
              ]
            }
          }
        ]
      },
      "label": {
        "show": true,
        "value": "Pesquisar"
      },
      "input-icon": {
        "icon": "search"
      }
    }

`
File:

- 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-menu-search-modal__message {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 80px;
      }

      .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;
      }

      .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 > 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 KB

- Handle: @menu-search-modal--with-selected-item
- Variants (5): Default , With Results , Without Result , With Selected Item , Scroll
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/menu-search-modal/menu-search-modal.hbs
- References (1): @form-field

There are no notes for this item.