Obelisco V2

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

• 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 Icons Rounded.
• Se crea la clase .btn-xs para los botones que son utilizados dentro de tablas.
• Los botones primary y secondary han cambiado de color.

• 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 Icons Rounded.
• 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.
• Respecto a los tamaños de desplegables, se crean las clases .dropdown-lg y .dropdown-sm, las cuales se utilizan en la etiqueta div con clase .dropdown, y se eliminan las clases .btn-dropdown-lg y .btn-dropdown-sm de la etiqueta button del desplegable.
• 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 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.

• 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 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 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 crearon las clases .underline-1 y .underline-2 las cuales dan un subrayado al elemento. En el primer caso, el grosor del subrayado es 1px y en el segundo caso 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 .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 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: