Obelisco V2

Accesibilidad

Se crea la clase .sr-only que extiende de la clase .visually-hidden.

Accesos

En el caso de que el acceso tengo solo texto, la estructura HTML se mantiene como en el caso de acceso con icono o con descripción.
La clase .list-group-item-logout queda deprecada.
La lista de accesos por ancho completo, que utilizaba las clases .access-deck .max-cards-*, queda deprecada.
Respecto a la lista de accesos con ancho por accesos, que utilizaba las clases .access-deck .access-column .max-cards-* queda deprecada y se reemplazan por las clases:

.access-items-1: para accesos en 1 sola columna.
.access-items-3: para accesos en 3 columnas en desktop, 2 columnas en tablet, y 1 columna en mobile.
.access-items-3 row-cols-md-1: para accesos en 3 columnas en desktop, 1 columna en tablet, y 1 columna en mobile.
.access-items-4: para accesos en 4 columnas en desktop, 2 columnas en tablet, y 1 columna en mobile.
.access-items-4: para accesos en 4 columnas en desktop, 1 columna en tablet, y 1 columna en mobile.
Se debe tener en cuenta que, para la disposición de accesos, cada acceso se debe encontrar dentro de una etiqueta div con clase .col, los cuales estarán dentro de etiqueta div con las clases mencionadas.

Alerta

La clase .alert-primary queda deprecada y es remplazada por .alert-warning.
En el caso de alerta con cierre, en la etiqueta button se reemplaza el atributo data-dismiss="alert" por data-bs-dismiss="alert", y la clase .close se reemplaza por .btn-close.

Versión 1.8.4 ⬇️

Para Alertas de Sistema; Se crea la clase .system, que debe usarse junto a .alert-{color}
Donde color puede ser: primary, secondary,tertiary, light, dark.

Barra de progreso

La clase .bg-info se reemplaza por .bg-primary.

Bloque de trámite

Se elimina la clase .card.

Botones

Se elimina la clase .btn-icon, no es necesaria colocarla al utilizar iconos o spinner en botón.
Se agrega la clase .o-icon a los iconos de Boxicons y Material Symbols Rounded.
Se crea la clase .btn-xs para los botones que son utilizados dentro de tablas.
Se crea la clase .btn-tertiary y .btn-light.
A los botones con spinner se les agrega el atributo disabled y se modifica la variante de spinner.

Banner

Se agrega la clase .o-icon al ícono del componente banner con ícono.

Cabecera de página

Versión 1.7.0 ⬇️

Se crea el componente.

Versión 1.8.1 ⬇️

Se corrige comportamiento en las variantes con multimedia, ahora está centrado el contenido.
Se agregó un alto minimo en .content, para evitar conflictos con estilos externos.

Versión 1.8.4 ⬇️

El elemento <div class="aside">, puede usar .hero-{positions-vertical}, .hero-{positions-horizontal} o .hero-{positions-horizontal}-{positions-vertical} para alinear la multimedia: Los elementos <img> y <video>
Donde {positions-vertical} puede ser: bottom, top,center.
Donde {positions-horizontal} puede ser: center, right,left.

Calendario

Se modifica la estructura HTML del colapsable en la variante 'Con colapsable' acorde a actualización del componente Colapsable.
La variante con referencias cromáticas queda deprecada.

Colapsables

Se modifica estructura HTML del componente, acorde a Bootstrap 5. Se reemplazan las clases .card, .card-header, y .block-body por .accordion-item, .accordion-button y.accordion-body, respectivamente.
Se reemplazan los atributos 'data-toggle' y 'data-target' por 'data-bs-toggle' y 'data-bs-target', respectivamente. Se agregan los atributos 'aria-expanded' y 'aria-controls'.
La variante de colapsable con encabezado con fondo blanco utiliza la clase .item-white acompañando a la clase .accordion-item.
Se reemplaza la estructura HTML de la lista e información dentro de colapsable

Colores

Clase	Nuevo valor	Antiguo valor
bg-primary	#336ACC	#FFA82E
bg-secondary	#101E37	#5C6A7A
bg-tertiary	#005E7A	-
bg-danger	#CC3333	#C93B3B
bg-success	#26874A	#26874A
bg-warning	#FF9500	#FFA82E
bg-info	#0086AD	#007BC7
bg-light	#F3F6F9	#F3F6F9
bg-dark	#002733	#38485C

Desplegables de navegación y selección

Se elimina de la etiqueta button de dropdown el atributo aria-haspopup="true" y se reemplaza data-toggle="dropdown" por data-bs-toggle="dropdown".
Se elimina la clase .dropdown-toggle de la etiqueta button de dropdown.
Al span con clase .btn-dropdown-text (que se encuentra dentro de la etiqueta button del dropdown), se agrega la clase .ellipsis-1.
En el caso de los items del desplegable con texto alineado hacia la derecha, se reemplazan las clases .text-right por .text-end.
En el caso de desplegable con disposición a la derecha, se reemplaza la clase .dropdown-menu-right por .dropdown-menu-end.
Se agrega la clase .o-icon a los iconos de Boxicons y Material Symbols Rounded.
Respecto a los tamaños de desplegables, se reemplazan las clases .btn-dropdown-lg y .btn-dropdown-sm por .btn-lg y .btn-sm, respectivamente.
Se modifica la estructura HTML de 'Desplegable con cascada', se utiliza la variante "Click outside" de Bootstrap 5. Se agrega a la etiqueta button del desplegable el atributo data-bs-auto-close="outside". El dropdown en cascada (el que se encuentra dentro de dropdown) tiene la misma estructura HTML que dropdown, con la diferencia de que al div con clase .dropdown se le agrega la clase .sub-dropdown.
Se modifica la estructura HTML de 'Desplegable de selección', se utiliza la variante "Click outside" de Bootstrap 5. Se eliminan de la etiqueta button del desplegable los atributos data-toggle="collapse", data-target y aria-controls, y se reemplazan por data-bs-toggle="dropdown" y data-bs-auto-close="outside". Se elimina la clase .dropdown-form. Se modifica la estructura HTML de los inputs de selección.

Destacado

Se eliminan las clases .card y .card-simple.
Las clases .card-img, .block-body, .card-title y .card-text se reemplazan por .panel-img, .panel-body, .panel-title y .panel-text, respectivamente.
Para la disposición de Destacado conjunto, las clases .card-deck y .max-cards-2 quedan deprecadas, se reemplazan por .highlighted-items-2.

Versión 1.8.1 ⬇️

Común a todas las variantes:

Se agrega la clase ellipsis-2 a panel-title
Se agrega la clase ellipsis-3 a panel-text
Se agrega la clase panel-body-dark para todas las variantes de Destacado conjunto
El título semánticamente es un <h2>, pero extiende los estilos de <h5>.

Destacado conjunto sin multimedia:

Se crea la clase: panel-sin-multimedia-v y se utiliza en el mismo div donde va: panel-body-dark / panel-body

Enlace

Se agrega en los enlaces el atributo rel="noopener noreferrer".

Formulario - Casillas de selección (Radio y Checkbox)

En el caso de checkbox:

Las clases .custom-control, .custom-checkbox se reemplazan por .form-checkbox.
La clase .custom-control-input se reemplaza por form-checkbox-input.
La clase .custom-control-label se reemplaza por form-checkbox-label.

En el caso de radio:

Las clases .custom-control .custom-radio se reemplazan por .form-radio.
La clase .custom-control-input se reemplaza por .form-radio-input.
La clase .custom-control-label se reemplaza por .form-radio-label.

Formularios de texto

Se elimina la clase .form-group.
Se crea la clase .form-label, la cual se asigna al label del campo.
Se elimina la clase .form-search que se le asignaba anteriormente al form.
Se crea la clase .search-container, que se asigna a un div contenedor del input de búsqueda y su botón.
Se crea la clase .input-search-with-button, asignada al input de búsqueda, permitiendo que el botón con el icono funcione como botón de búsqueda.
Para los inputs con fondo light, se reemplaza la clase .bg-light de la etiqueta div padre de los inputs, por .form-bg-light.

Galeria

El atributo data-toggle se reemplazó por data-bs-toggle.
El atributo data-target se reemplazó por data-bs-target.
El atributo data-backdrop se reemplazó por data-bs-backdrop.
El atributo data-dismiss se reemplazó por data-bs-dismiss.
El atributo data-ride se reemplazó por data-bs-ride.
El atributo data-interval se reemplazó por data-bs-interval.
Donde sólo hay: class="carousel" ahora va: class="carousel slide".
Es posible usar hoy el atributo: data-bs-interval="3000", el cúal indica cada cuantos segundos rotan las imagenes, expresado en milisegundos. Para que no roten las imagenes, indicar el atributo en false: data-bs-interval="false", o no escribirlo.
El atributo data-slide se reemplazó por data-bs-slide.

Grilla

Breakpoint	Viewport	Ancho máximo	Espaciado	Área diseñable
Extra small `(xs)`	<576px	100%	16px	100%
Small `(sm)`	≥576px	540px	16px	508px
Medium `(md)`	≥768px	720px	24px	696px
Large `(lg)`	≥992px	720px	24px	696px
Extra large `(xl)`	≥1200px	1140px	32px	1108px
Extra extra large `(xxl)`	≥1400px	1140px	32px	1108px

Header (encabezado)

Se remplazan clases .navbar-light y .navbar-expand-lg por .o-header.
La estructura de los componentes desplegables y buscador, se ha modificado por lo que deben ser modificados en el header también.
La clase .header-logo queda deprecada.
La clase .btn-outline-link del botón "Ingresar" se reemplaza por .btn-outline-tertiary.

Iconos

Se crea la clase .o-icon. Todo componente de Obelisco que lleve un ícono de Boxicons o Material Symbols requiere que se le añada la clase .o-icon para que aplique los estilos correspondientes a su componente.

Lista de pasos

Se agrega la clase .list-steps-item-title a los títulos de los ítems de la lista de pasos.

Mapa

Se reemplazan las clases .card y .card-map por .map.
Las clases .card-iframe, .block-body, .card-title y .card-text se reemplazan por .map-iframe, .map-body, .map-title y .map-text, respectivamente.

Mensaje de estados

La clase .status-primary queda deprecada y es remplazada por .status-warning.
Se reemplaza el atributo 'data-target' por 'data-bs-target'.

Migas de pan

Se cambia el aria-label de "Navegación secundaria" por "Ruta de navegación".

Modal

Se reemplaza el atributo 'data-toggle' por 'data-bs-toggle'
Se reemplaza el atributo 'data-target' por 'data-bs-target'
Se reemplaza el atributo 'data-dismiss' por 'data-bs-dismiss'
Se agrega el atributo 'aria-labelledby' en el div con clase .modal y el atributo 'id' en el título del modal.
Eliminación del 'role="dialog"' y 'role="document"' ya que Bootstrap 5 lo maneja automáticamente

Pasos de un formulario

Se modifica la estructura HTML del componente.
Las clases .step-next, .step-text, .steps, .step se reemplazan por .step-subtitle, .steps-detail, .steps-items, .step-item, respectivamente.
Se agrega etiqueta div con clase .steps, el cual envuelve el div con clase .steps-items y el span con clase .steps-detail.

Pestaña

Se modifica la clase '.tabs-slider' por '.tabs-box'.
Se modifica la clase '.fixedwith' por '.fixed-width'.
Se modifica la clase '.icons-container' por '.tabs-controls'.
Se modifica la clase '.right-left' por '.prev-next'.
El atributo data-toggle se reemplaza por data-bs-toggle en los botones dentro de las pestañas.
El atributo data-target se reemplaza por data-bs-target en los botones dentro de las pestañas.

Pie de Página (Footer)

Se modifica la clase d-lg-inline por d-md-inline, para que realice el cambio de imagen en 768px.

Spinner

Se agrega la variante tertiary en spinner (.text-tertiary).
La variante info no forma parte de las variantes de spinner de Obelisco.

Tarjetas

Quedan deprecadas las clases .card-simple y .card-lg.
En el caso de tarjeta Temática, las clases .card-horizonal, .card-simple y .card-lg se reemplazan por la clase .thematic. Se agrega al enlace de la tarjeta la clase .card-title-link.
Las clases .card-img-left y .card-img-top se reemplazan por la clase .card-img.
La clase .card-icon-left se reemplazan por .card-icon.
Las clases .card-deck, .max-cards-3 y .card-column quedan deprecadas y se reemplazan por .card-items-3.
Las clases .card-deck, .max-cards-2 y .card-column quedan deprecadas y se reemplazan por .card-items-2.

Versión 1.6.1 ⬇️

Se crean las clases .card-border-{direction}-{color}
Donde direction, es el posicionamiento: left o bottom
Donde color, es la miscelánea de color: purple, red, sky, yellow, cyan o blue

Versión 1.8.0 ⬇️

Se crea la clase .card-eventos, para contener los estilos necesarios para la nueva Tarjeta de Eventos.
La Tarjeta de Eventos, ahora admite cómo máximo 2 Etiquetas.
También, se agregó un ítem de información del evento: Ubicación

Tipografía

Se crean las siguientes clases para el Cuerpo: .text-xl, .text-lg, .text-md y .text-sm, las cuales corresponden a los tamaños Cuerpo XL, Cuerpo L, Cuerpo M, y Cuerpo SM, respectivamente. La clase .text-xs se utiliza para Cuerpo XS.
Respecto a la categoría Titulares, se crearon las clases .headline-lg, .headline-md y .headline-sm, que corresponden a Titulares L, Titulares M y Titulares S.
Las clases .font-weight-*, se renombraron a .fw-*. Las clases .fw-bold, .fw-semibold y .fw-normal, se utilizan para los valores de font-weight de 700, 600 y 400 respectivamente.
La clase .font-italic se renombro a .fst-italic.
Se creó la clase .underline-2 la cuál da un subrayado al elemento. El grosor del subrayado es 2px.
Respecto a las citas, se reemplaza la etiqueta small (utilizada para la información del autor) por etiqueta p con clase .author.

Cambios en componentes