Pruebas de estilos

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

---

Paleta de colores

---

Colores para decoración de contenedores

Los siguientes colores son personalizables a excepción del Color 1 (azul gub.uy). Ver formulario de personalización de paleta de colores

---

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

• 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!
• Vitae libero, quae doloribus dignissimos?

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!
5. Vitae libero, quae doloribus dignissimos?

.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!
• Vitae libero, quae doloribus dignissimos?

---

Alert

---

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

---

Íconos

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

---

Tablas