Violin.css

Input Map 

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

        <i class="material-icons">map</i>

    </div>
</div>


<!-- Selected -->
<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>


<!-- Search Empty -->
<div class="inv-input-map ">
    <div class="inv-input-map__preview">

        <i class="material-icons">map</i>

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


<!-- Search Value -->
<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>


<!-- Search Disabled -->
<div class="inv-input-map inv-input-map--disabled">
    <div class="inv-input-map__preview">

        <i class="material-icons">map</i>

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


<!-- Search Value Disabled -->
<div class="inv-input-map inv-input-map--disabled">
    <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" disabled />
        <i class="material-icons inv-input-icon inv-input-icon--disabled">
            flag
        </i>
        <button class="inv-clear-input" disabled>
            <i class="material-icons">clear</i>
        </button>
    </div>
</div>


<!-- Search Empty Error -->
<div class="inv-input-map ">
    <div class="inv-input-map__preview">

        <i class="material-icons">map</i>

    </div>
    <div class="inv-input-map__search">
        <input id="" name="" type="text" class="inv-input inv-input--error" value="" placeholder="Adicionar localização" />
        <i class="material-icons inv-input-icon ">
            flag
        </i>
        <button class="inv-clear-input" disabled>
            <i class="material-icons">clear</i>
        </button>
    </div>
</div>


<!-- Search Value Error -->
<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 inv-input--error" 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>
 
/* Default */
{
  "input-map": {
    "img": "https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/map.png",
    "selected": false,
    "disabled": false,
    "search": {
      "visible": false
    }
  },
  "input": {
    "placeholder": "Adicionar localização"
  },
  "input-icon": {
    "icon": "flag"
  },
  "clear-input": {
    "disabled": true
  }
}


/* Selected */
{
  "input-map": {
    "img": "https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/map.png",
    "selected": true,
    "disabled": false,
    "search": {
      "visible": false
    }
  },
  "input": {
    "placeholder": "Adicionar localização"
  },
  "input-icon": {
    "icon": "flag"
  },
  "clear-input": {
    "disabled": true
  }
}


/* Search Empty */
{
  "input-map": {
    "img": "https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/map.png",
    "selected": false,
    "disabled": false,
    "search": {
      "visible": true
    }
  },
  "input": {
    "placeholder": "Adicionar localização"
  },
  "input-icon": {
    "icon": "flag"
  },
  "clear-input": {
    "disabled": true
  }
}


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


/* Search Disabled */
{
  "input-map": {
    "img": "https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/map.png",
    "selected": false,
    "disabled": false,
    "search": {
      "visible": true
    },
    "modifier": "inv-input-map--disabled"
  },
  "input": {
    "placeholder": "Adicionar localização"
  },
  "input-icon": {
    "icon": "flag",
    "modifier": "inv-input-icon--disabled"
  },
  "clear-input": {
    "disabled": true
  },
  "disabled": true
}


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


/* Search Empty Error */
{
  "input-map": {
    "img": "https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/map.png",
    "selected": false,
    "disabled": false,
    "search": {
      "visible": true
    }
  },
  "input": {
    "placeholder": "Adicionar localização",
    "modifier": "inv-input--error"
  },
  "input-icon": {
    "icon": "flag"
  },
  "clear-input": {
    "disabled": true
  }
}


/* Search Value Error */
{
  "input-map": {
    "img": "https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/map.png",
    "selected": true,
    "disabled": false,
    "search": {
      "visible": true
    }
  },
  "input": {
    "placeholder": "Adicionar localização",
    "modifier": "inv-input--error",
    "value": "Restaurante Paixão de Frutos do Mar"
  },
  "input-icon": {
    "icon": "flag"
  },
  "clear-input": {
    "disabled": false
  }
}
  • 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

There are no notes for this item.