Pruebas de estilos

Este documento contiene todas las implementaciones de los estilos aplicados mediante el archivo portal-unificado.css.

---

Paleta de colores

---

Paletas de colores secundarios

Colores personalizables (a excepción del azul gub.uy) según el formulario de personalización de paleta de colores.

Decoración de contenedores

Colores para fondos

---

Enlaces

---

Botones

button sin clases

Botón simple
Botón simple

---

.Button aplicado a distintos elementos

Button span Button link Button button

---

Modificadores de .Button

Button Primary Button Secondary Button Inverse Button White

---

Párrafos (strong, em, mark, a)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus nihil nesciunt saepe perferendis repellat ratione aliquam expedita aliquid delenitiEnlace externo quasi animi laboriosam, molestias architecto recusandae dolor perspiciatis accusamus earum minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus nihil nesciunt saepe perferendis repellat ratione aliquam expedita aliquid deleniti quasi animi laboriosam, molestias architecto recusandae dolor perspiciatis accusamus earum minima.

---

h1. Encabezado de primer nivel

h2. Encabezado de segundo nivel

h3. Encabezado de tercer nivel

h4. Encabezado de cuarto nivel

h5. Encabezado de quinto nivel

h6. Encabezado de sexto nivel

---

Listas

Lista de viñetas

• Lorem ipsum dolor sit amet.
• Esse necessitatibus, adipisci saepe laboriosam.
  • Lorem ipsum dolor sit.
  • Assumenda cumque tenetur quidem.
  • Corrupti enim rem voluptate.
• Neque tempore est, natus ad!
• Ex labore officiis, tempore nemo!
  1. Lorem ipsum dolor sit.
  2. Assumenda cumque tenetur quidem.
  3. Corrupti enim rem voluptate.
• Vitae libero, quae doloribus dignissimos?

Lista numerada

1. Lorem ipsum dolor sit amet.
2. Esse necessitatibus, adipisci saepe laboriosam.
   1. Lorem ipsum dolor sit.
   2. Assumenda cumque tenetur quidem.
   3. Corrupti enim rem voluptate.
3. Neque tempore est, natus ad!
4. Ex labore officiis, tempore nemo!
   • Lorem ipsum dolor sit.
   • Assumenda cumque tenetur quidem.
   • Corrupti enim rem voluptate.
5. Vitae libero, quae doloribus dignissimos?

Lista modificada .u-bullet

• Lorem ipsum dolor sit amet.
• Esse necessitatibus, adipisci saepe laboriosam.
  • Lorem ipsum dolor sit.
  • Assumenda cumque tenetur quidem.
  • Corrupti enim rem voluptate.
• Neque tempore est, natus ad!
• Ex labore officiis, tempore nemo!
  1. Lorem ipsum dolor sit.
  2. Assumenda cumque tenetur quidem.
  3. Corrupti enim rem voluptate.
• Vitae libero, quae doloribus dignissimos?

---

Alert

Alerta mes de las mujeres

---

Avisos gub.uy

---

Fecha

Para asegurar la correcta lectura del formato fecha por los lectores de pantalla se oculta el div class="Fecha" con aria-hidden="true" y se establece un nombre mediante aria-describedby="[id-unico]". Luego se agrega un span oculto pero referido con el [id-unico] donde se escribe la fecha de la manera que deba ser leída.

Ejemplos:

• Fecha: 24 de noviembre del 2022
• Fecha con doble día: 24 al 29 de noviembre del 2022
• Fecha con doble mes: 24 de noviembre al 12 de diciembre del 2022
• Fecha con doble año: 24 de noviembre del 2022 al 8 de enero del 2023

Fecha única

Molécula: fecha.php

Fecha única pasada

Molécula: fecha-pasada.php

Fecha doble

Molécula: fecha-doble.php

Fecha doble pasada

Molécula: fecha-doble-pasada.php

Componente actual sin año

---

Utilidades de texto

.u-textLeft Lorem ipsum dolor sit.

.u-textCenter Lorem ipsum dolor sit.

.u-textRight Lorem ipsum dolor sit.

.u-textMute Lorem ipsum dolor sit.

.u-textNormal Lorem ipsum dolor sit.

.u-textSemiBold Lorem ipsum dolor sit.

.u-textBold Lorem ipsum dolor sit.

.u-textBlue Lorem ipsum dolor sit.

.u-textBlack Lorem ipsum dolor sit.

.u-textSmall Lorem ipsum dolor sit.

.u-textMedium Lorem ipsum dolor sit.

.u-textLarge Lorem ipsum dolor sit.

.u-textExtraLarge Lorem ipsum dolor sit.

.u-textUppercase Lorem ipsum dolor sit.

---

Paginación

---

Buscador

Básico

---

Más grande

---

Sin borde

---

Etiquetas

---

Descarga

Para asegurar la accesibilidad del contenido, el enlace de la descarga debe utilizar una etiqueta aria-label con el texto "Descargar archivo: Nombre del archivo". Es importante que el nombre del archivo a descargar incluya el tipo de archivo y su peso, ejemplo: (.pdf 354 KB).

Al incluir la molécula (descarga-archivo.php) mediante php se puede modificar la variante y el contenido con las siguientes variables:

• Clase modificadora: $clase_modificadora
  • Variante descarga más chica: $clase_modificadora = "Download--small"
• Nombre del archivo: $archivo_nombre
• Descripción del archivo: $archivo_descripcion

Descarga de archivo

Descarga de archivo externo

---

Íconos

Los íconos se encuentran en la carpeta /assets/icons y en dos formatos: svg y png.

---

Tablas