Violin.css

# Menu Search: Open

WIP

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

`

    <div class="inv-menu-search inv-menu-search--open">
        <input id="my-input-search" name="my-input-search" type="text" class="inv-input " value="" placeholder="Ctrl+k para buscar" />
        <label class="inv-menu-search__label" for="my-input-search">
        <i class="material-icons">search</i>
      </label>
    </div>

`
`

    <div class="inv-menu-search {{ menu-search.modifier }}">
      {{> @input}}
      <label class="inv-menu-search__label" for="{{input.for}}">
        <i class="material-icons">search</i>
      </label>
    </div>

`
`

    {
      "preview": {
        "styles": " background-color: var(--color-system--dark); display: flex; justify-content: center; align-items: center; flex-direction: column; height: 50%; width: 100%; border-radius: 10px; "
      },
      "icon": "search",
      "input": {
        "placeholder": "Ctrl+k para buscar",
        "for": "my-input-search"
      },
      "menu-search": {
        "modifier": "inv-menu-search--open"
      }
    }

`
File:

- Content:
  `

      .inv-menu-search {
        position: relative;
      }

      .inv-menu-search__label {
        position: absolute;
        top: 0;
        display: flex;
        align-items: center;
        left: 16px;
        height: 100%;
      }

      .inv-menu-search__label > i {
        color: var(--color-primary--light);
      }

      .inv-menu-search > .inv-input,
      .inv-menu-search--open > .inv-input {
        padding-left: 54px;
        border-radius: 10px;
        width: 100%;
        box-sizing: border-box;
        color: var(--color-system--light);
        background-color: rgba(255, 255, 255, 0.1);
        font-weight: 600;
      }

      .inv-menu-search > .inv-input::placeholder,
      .inv-menu-search--open > .inv-input::placeholder {
        color: var(--color-system--regular);
      }

      .inv-menu-search > .inv-input:focus {
        color: var(--color-system--dark);
        background-color: var(--color-system--white);
        box-shadow: var(--shadow-border-2) var(--color-primary--regular) inset;
      }

      .inv-menu-search > .inv-input:focus + .inv-menu-search__label > i {
        color: var(--color-primary--regular);
      }

      @media (min-width: 500px) {
        .inv-menu-search > .inv-input {
          width: 56px;
          padding-left: var(--space-16);
        }

        .inv-menu-search > .inv-input::placeholder {
          color: transparent;
        }

        .inv-menu-search--open > .inv-input {
          min-width: 220px;
          padding-left: 54px;
        }

        .inv-menu-search--open > .inv-input::placeholder {
          color: var(--color-system--regular);
        }
      }

  `
- URL: /components/raw/menu-search/menu-search.css
- Filesystem Path: src/components/menu-search/menu-search.css
- Size: 1.3 KB

- Handle: @menu-search--open
- Variants (2): Default , Open
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/menu-search/menu-search.hbs
- References (1): @input

## Menu Search

Componente de busca do Menu. Sua classe principal é `.inv-menu-search`.

`

    <div class="inv-menu-search ">
        <input id="my-input-search" name="my-input-search" type="text" class="inv-input " placeholder="Ctrl+k para buscar" />
        <label class="inv-menu-search__label" for="my-input-search">
        <i class="material-icons">search</i>
      </label>
    </div>

`

Sua versão aberta possui o modificador `.inv-menu-search--open`.

`

    <div class="inv-menu-search inv-menu-search--open">
        <input id="my-input-search" name="my-input-search" type="text" class="inv-input " placeholder="Ctrl+k para buscar" />
        <label class="inv-menu-search__label" for="my-input-search">
        <i class="material-icons">search</i>
      </label>
    </div>

`