Violin.css

# Input Map: Search Value

Ready

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

`

    <div class="inv-input-map ">
        <div class="inv-input-map__preview">

            <img src="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/map.png" alt="">

        </div>
        <div class="inv-input-map__search">
            <input id="" name="" type="text" class="inv-input " value="Restaurante Paixão de Frutos do Mar" placeholder="Adicionar localização" />
            <i class="material-icons inv-input-icon ">
          flag
        </i>
            <button class="inv-clear-input">
          <i class="material-icons">clear</i>
        </button>
        </div>
    </div>

`
`

    <div class="inv-input-map {{ input-map.modifier }}">
      <div class="inv-input-map__preview">

        {{#if input-map.selected}}
          <img src="{{ input-map.img }}" alt="">
        {{else}}
          <i class="material-icons">map</i>
        {{/if}}

      </div>
      {{#if input-map.search.visible}}
        <div class="inv-input-map__search">
        {{>@input}}
        {{>@input-icon}}
        {{>@clear-input}}
      </div>
      {{/if}}
    </div>

`
`

    {
      "input-map": {
        "img": "https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/map.png",
        "selected": true,
        "disabled": null,
        "search": {
          "visible": true
        }
      },
      "input": {
        "placeholder": "Adicionar localização",
        "value": "Restaurante Paixão de Frutos do Mar"
      },
      "input-icon": {
        "icon": "flag"
      },
      "clear-input": {
        "disabled": null
      }
    }

`
File:

- Content:
  `

      .inv-input-map {
       display: flex;
       flex-direction: column;
       width: 314px;
      }

      .inv-input-map__preview {
        background-color: var(--color-system--white);
        border: 1px solid var(--color-system--light);
        border-radius: 4px 4px 0 0;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 120px;
        max-height: 120px;
      }

      .inv-input-map__preview > i {
        font-size: 60px;
        color: var(--color-default--regular);
        user-select: none;
      }

      .inv-input-map__preview > img {
        border-radius: 3px 3px 0 0;
        box-sizing: border-box;
        max-height: 118px;
        width: 100%;
        max-width: 100%;
      }

      .inv-input-map__search {
        display: flex;
        position: relative;
        padding-top: 1px;
      }

      .inv-input-map__search > .inv-input-icon {
        position: absolute;
        right: 50px;
        top: 8px;
      }

      .inv-input-map__search > .inv-input {
        border-radius: 0 0 0 4px;
        padding-right: 40px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .inv-input-map__search > .inv-clear-input {
        border-top-right-radius: 0;
      }

      .inv-input-map--disabled > .inv-input-map__preview {
        cursor: not-allowed;
      }

      .inv-input-map--disabled > .inv-input-map__preview > i {
        color: var(--color-default--light);
      }

      .inv-input-map--disabled > .inv-input-map__preview > img {
        opacity: 0.35;
      }

  `
- URL: /components/raw/input-map/input-map.css
- Filesystem Path: src/components/input-map/input-map.css
- Size: 1.3 KB

- Handle: @input-map--search-value
- Variants (8): Default , Selected , Search Empty , Search Value , Search Disabled , Search Value Disabled , Search Empty Error , Search Value Error
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/input-map/input-map.hbs
- References (3): @input, @input-icon, @clear-input

There are no notes for this item.