Violin.css

Input Map: Default 

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

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

    </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": false,
    "disabled": false,
    "search": {
      "visible": false
    }
  },
  "input": {
    "placeholder": "Adicionar localização"
  },
  "input-icon": {
    "icon": "flag"
  },
  "clear-input": {
    "disabled": true
  }
}
  • 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.