Tokens · Familias de tokens
Maquetación y puntos de ruptura
El ancho del contenido y dónde cambia la maquetación. Los anchos se incluyen en @luz-ds/core y los puntos de ruptura en @luz-ds/tokens.
Archivos: settings/_settings.css, tokens.json → breakpoint
Esta traducción la ha escrito una IA y todavía no la ha revisado ninguna persona. Leer esta página en inglés
Anchos
--luz-sidebar-width256pxBarra lateral y columna del contenedor de la aplicación--luz-content-max1100pxAncho máximo del contenido--luz-bar-h53pxBarra de una fila con controles de 44px (control, dos rellenos de 4px y divisor de 1px): el relleno de desplazamiento fijo y el panel de navegación usan este valor--luz-scrollbar-size4pxGrosor de la barra de desplazamiento
Puntos de ruptura
--luz-mq-sm640pxMóvil--luz-mq-md768pxTableta, se contrae la barra lateral--luz-mq-lg1024pxEscritorio estrecho--luz-mq-xl1280pxEscritorio estándar--luz-mq-xxl1536pxPantalla ancha--luz-mq-xxxl1920pxFull HD
Los anchos se incluyen en core; los puntos de ruptura, en tokens.
- Los puntos de ruptura son valores de referencia: las consultas de medios no pueden leer propiedades personalizadas, así que escribe el número, por ejemplo,
@media (max-width: 768px). - Safari en un Mac con barras de desplazamiento siempre visibles no cuenta la barra en las consultas de medios basadas en el ancho (error 52653 de WebKit), así que se alcanza un punto de ruptura cuando la ventana mide hasta unos 15 px más que su valor.