Violin.css

Clear Input 

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


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


<button class="inv-clear-input" {{ternary clear-input.disabled "disabled" "" }}>
  <i class="material-icons">clear</i>
</button>
 
/* Default: No context defined */


/* Disabled */
{
  "clear-input": {
    "disabled": true
  }
}
  • Content: 
    .inv-clear-input {
  min-width: 40px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  margin-left: 1px;
  border-radius: 0 4px 4px 0;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: var(--color-system--light);
  transition: 0.2s box-shadow, 0.2s background-color;
}

.inv-clear-input > i {
  color: var(--color-system--regular);
}

.inv-clear-input:hover {
  box-shadow: var(--shadow-8) var(--color-default--shadow);
}

.inv-clear-input:active {
  background-color: var(--color-default--light);
  box-shadow: var(--shadow-3) var(--color-default--shadow);
}

.inv-clear-input:disabled,
.inv-clear-input:disabled:hover,
.inv-clear-input:disabled:active {
  background-color: var(--color-default--white);
  box-shadow: none;
  cursor: not-allowed;
}

.inv-clear-input:disabled > i {
  color: var(--color-default--light);
}
  • URL: /components/raw/clear-input/clear-input.css
  • Filesystem Path: src/components/clear-input/clear-input.css
  • Size: 909 Bytes

Clear Input

Utilizado para facilitar a limpeza dos campos, usado em conjunto com os campos de input, sempre no final do campo.

Tendo a classe base .inv-clear-input, podendo ser adicionado um texto através de um button ou a

Default Clear Input

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

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