Cambios en componentes

• 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.

• 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.

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

• Se elimina la clase .card.

• 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.

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

• 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.

• Se modifica estructura HTML del componente, acorde a Bootstrap 5. Se reemplazan las clases .card, .card-header, y .card-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

• 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.

• Se eliminan las clases .card y .card-simple.
• Las clases .card-img, .card-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.

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

• Se crean las clases .badge-default y .badge-warning.
• Las clases .badge-primary y .badge-secondary quedan deprecadas.

• 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.

• Se elimina la clase .form-group.
• Se crean las clases .form-label, .form-label-container, .form-label-number, y .form-label-description, referidas 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.

• 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.

• 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.

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

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

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

• 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

• 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.

• 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.

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

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

• 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.

• 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.

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

¿Quieres comenzar a utilizar nuestros componentes? Puedes copiar el HTML disponible en la siguiente sección: