Visibilidad

Controle la visibilidad, sin modificar la visualización, de elementos con utilidades de visibilidad.

Configure los visibility elementos con nuestras utilidades de visibilidad. Estas clases de utilidad no modifican el display valor en absoluto y no afectan el diseño; los .invisible elementos aún ocupan espacio en la página. El contenido se ocultará tanto visualmente como para los usuarios de tecnología de asistencia / lectores de pantalla.

Aplicar .visible o .invisible según sea necesario.

<div class="visible">...</div>
<div class="invisible">...</div>

// Class
.visible {
  visibility: visible !important;
}
.invisible {
  visibility: hidden !important;
}

// Usage as a mixin
// Warning: The `invisible()` mixin has been deprecated as of v4.3.0. It will be removed entirely in v5.
.element {
  @include invisible(visible);
}
.element {
  @include invisible(hidden);
}

Desactive el estilo del cursor de los botones de incremento y decremento en Chrome, Safari.

Si desea ocultar los botones de flecha del elemento input con el tipo "número", debe utilizar esta clase .disable-arrows-input-number

Aplicar .disable-arrows-input-number según sea necesario.

<input type="number" class="disable-arrows-input-number">...</input>

// Class
.disable-arrows-input-number {
  &::-webkit-inner-spin-button,
  &::-webkit-inner-spin-button, {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
  }
}