Pregunta de enfoque predeterminado de Mixins

Soporte
1

Hola,

La última actualización del estilo de enfoque uniforme incluye un nuevo mixin que añade un contorno a los campos de entrada, selecciones y otros elementos. Esto es excelente para la accesibilidad, pero nosotros usamos border-radius: 4px en los campos de entrada. ¿Es posible sobrescribir los mixins o agregar un border-radius: 0 en el archivo core mixins.scss para que genere un cambio de border-radius de 4px a 0 al hacer foco?

A la izquierda se ve como está ahora y a la derecha después de aplicar border-radius: 0; :arrow_down:

Screenshot 2021-02-04 at 15.22.25
Screenshot 2021-02-04 at 15.22.25143×131 1.53 KB
Screenshot 2021-02-04 at 15.22.45
Screenshot 2021-02-04 at 15.22.45151×130 1.29 KB

¡Gracias! :slight_smile:

@mixin default-focus() {
  border-color: var(--tertiary);
+ border-radius: 0;
  outline: 1px solid var(--tertiary);
  outline-offset: 0;
}
4

Tenemos un tema interno que tiene esquinas redondeadas para los botones, y no veo un problema similar al tuyo. ¿Podrías proporcionar un poco más de contexto, es decir, una captura de pantalla más grande para que pueda ver de qué botón se trata? Hágamelo saber si está utilizando un tema público; estoy seguro de que esto se puede solucionar.

6

Ah, veo. Creo que tu mejor opción es manejar esto en tu tema, porque el núcleo ya tiene el borde establecido en 0 para todos los elementos de entrada:

Por lo tanto, en tu tema, lo que puedes hacer es anular el border-radius del elemento de entrada enfocado en el mismo lugar donde ahora lo estás estableciendo a un valor.

Si quieres mantener las esquinas redondeadas al enfocar, también podrías hacer algo como esto:

input {
  border-radius: 4px;
  &:focus {
    outline: none;
    box-shadow: 0px 0px 0px 1px var(--tertiary);
  }
}

(La propiedad outline no puede tener esquinas redondeadas, por lo que lo anterior cambia a usar una sombra sólida para reemplazarla.)

7

¡Muchas gracias! :slight_smile: Lo haré. Una pregunta más… ¿No es una mala práctica deshabilitar el contorno? Me refiero al motivo de accesibilidad.

8

Creo que está bien, dado que usarías otra cosa para estilizar el elemento en foco.