Violin.css

Input Addon 

<!-- Default -->
<div class="inv-input-addon ">
    <div class="inv-input-addon__prepend">
        <input type="checkbox" class="inv-checkbox" />
    </div>

    <div class="inv-input-addon__input ">
        <input id="" name="" type="text" class="inv-input " value="" placeholder="Ex: 000-00-000" />

    </div>

    <button class="inv-clear-input">
        <i class="material-icons">clear</i>
    </button>
</div>


<!-- Disabled -->
<div class="inv-input-addon inv-input-addon--disabled">
    <div class="inv-input-addon__prepend">
        <input type="checkbox" class="inv-checkbox" disabled />
    </div>

    <div class="inv-input-addon__input ">
        <input id="" name="" type="text" class="inv-input " value="" placeholder="Ex: 000-00-000" disabled />

    </div>

    <button class="inv-clear-input" disabled>
        <i class="material-icons">clear</i>
    </button>
</div>


<!-- Icon -->
<div class="inv-input-addon ">
    <div class="inv-input-addon__prepend">
        <input type="checkbox" class="inv-checkbox" />
    </div>

    <div class="inv-input-addon__input inv-input-addon__input--icon">
        <input id="" name="" type="text" class="inv-input " value="" placeholder="Ex: 000-00-000" />

        <i class="material-icons inv-input-icon ">
            visibility
        </i>
    </div>

    <button class="inv-clear-input">
        <i class="material-icons">clear</i>
    </button>
</div>


<div class="inv-input-addon {{ternary disabled "inv-input-addon--disabled" "" }}">
  <div class="inv-input-addon__prepend">
    {{> @checkbox}}
  </div>

  <div class="inv-input-addon__input {{ inputAddon.modifier }}">
    {{> @input}}

    {{#if input-icon.icon}}
      {{> @input-icon}}
    {{/if}}
  </div>

  {{> @clear-input}}
</div>
 
/* Default: No context defined */


/* Disabled */
{
  "disabled": true,
  "clear-input": {
    "disabled": true
  }
}


/* Icon */
{
  "input-icon": {
    "icon": "visibility"
  },
  "inputAddon": {
    "modifier": "inv-input-addon__input--icon"
  }
}
  • Content: 
    .inv-input-addon {
  display: flex;
  align-items: stretch;
}

.inv-input-addon__prepend {
  background-color: var(--color-system--white);
  box-shadow: var(--shadow-border-1) var(--color-system--light) inset;
  border-radius: 4px 0 0 4px;
  padding-left: 4px;
  padding-right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  margin-right: 1px;
}

.inv-input-addon--disabled > .inv-input-addon__prepend {
  background-color: var(--color-default--white);
  box-shadow: none;
  cursor: not-allowed;
}

.inv-input-addon__input {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.inv-input-addon__input--icon > .inv-input {
  padding-right: 40px;
}

.inv-input-addon__input:not(:last-child) > .inv-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.inv-input-addon__input:not(:first-child) > .inv-input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.inv-input-addon__input > .inv-input-icon {
  position: absolute;
  top: 8px;
  right: 8px;
}
  • URL: /components/raw/input-addon/input-addon.css
  • Filesystem Path: src/components/input-addon/input-addon.css
  • Size: 1.1 KB

Input Addon

Utilizado para agrupar um campo ao lado de um input

Tendo a classe base .inv-input-addon, podendo ser utilizado apenas com a tag div

Os elementos disponíveis para serem utilizados com o componente são:

  • Elemento alocado a esquerda do input <div class="inv-input-addon__prepend>
  • inv-input
  • inv-clear-input

Ao colocar um campo ao lado esquedo do input, deverá ser criada uma div com a classe inv-input-addon__prepend

Default Input Addon

Input addon padrão, comum para ações regulares dos usuários.

<div class="inv-input-addon">
  <div class="inv-input-addon__prepend">
    <input type="checkbox" class="inv-checkbox" />
  </div>
  <input id="" name="" type="text" class="inv-input " placeholder="Ex: 000-00-000" />
  <button class="inv-clear-input">
  <i class="material-icons">clear</i>
</button>
</div>

<div class="inv-input-addon inv-input-addon--disabled">
  <div class="inv-input-addon__prepend">
    <input type="checkbox" class="inv-checkbox" disabled />
  </div>
  <input id="" name="" type="text" class="inv-input " placeholder="Ex: 000-00-000" disabled />
  <button class="inv-clear-input" disabled>
    <i class="material-icons">clear</i>
  </button>
</div>
Modificadores Uso
.inv-input-addon--disabled Modifica o addon com estilização de desabilitado
.inv-input-addon--icon Modifica o addon para ter suporte a icone de ação
### Addon Disabled
Versão desabilitada. 
<div class="inv-input-addon inv-input-addon--disabled">
  <div class="inv-input-addon__prepend">
    <input type="checkbox" class="inv-checkbox" disabled />
  </div>
  <input id="" name="" type="text" class="inv-input " placeholder="Ex: 000-00-000" disabled />
  <button class="inv-clear-input" disabled>
    <i class="material-icons">clear</i>
  </button>
</div>

Addon Icon

Campo de addon com icone de ação do input.

<div class="inv-input-addon">
  <div class="inv-input-addon__prepend">
    <input type="checkbox" class="inv-checkbox" />
  </div>

  <div class="inv-input-addon__input inv-input-addon__input--icon">
    <input name="icon" type="text" class="inv-input" />
    <i class="material-icons inv-input-icon">visibility</i>
  </div>

  <button class="inv-clear-input">
    <i class="material-icons">clear</i>
  </button>
</div>