-
Componentes
-
Módulos
-
Tipos de visualización
- Clases auxiliares
-
Componentes
- Nativos de Liferay
- Interacciones
- Campos de formulario
- Botones
- Interruptores
- Filtros
- Desplegables
- Filtro aplicado
- Pestañas
- Filtro pestaña
- Vista cuadrícula o listado
- Línea divisoria
- Navegación
- Contenido
- Composiciones de texto
- Encabezado
- Elementos tarjetas
- Tablas
- Etiqueta
- Etiqueta
- Cifras
- Ficha Bloque Descriptivo
- Indicador de nivel
- Bloque persona
- Enlaces
- Descarga de ficheros
- Indicador fecha
- Logotipos
- Bloque ficha técnica
- Tarjetas
- Basica
- Pictograma
- Apertura - Tarjetas Flexibles
- Recurso Gráfico Compacta
- Básica Mosaico
- Calendarizada
- Datos de contacto
- Logotipo o pictograma
- Compra
- Accesos
- Contenedor Tarjetas
- Datos publicación
- Alertas
- Fondo imagen
- Multimedia
- Agenda
- Mover elemento responsivo
-
Módulos
- Funcionales
- Tarjetas
- Actualidad
- Contenido relacionado
- Apertura - Tres Destacados
- Carrusel
- Mosaico
- Mapa
- Filtrado
- Localizaciones
- Entradas destacadas
- Distributiva old
- Calendarizada
- Distributiva
- Publicación
- Accion
- Banner - Accesos directos
- Suscripcion
- Banner AccesoDirecto Ilustración
- Banner acceso directo textura
- Banner-Encuesta
- Banner - Etiquetas
- Acción-Compra
- Contenido
- Contenido + imagen
- Ficha-ilustracion
- Ficha-desplegables
- Tablas
- Contacto
- Descargas
- Ficha pestañas
- Citas destacadas
- Tarjetas
- Tarjetas-Pictograma
- Contenido Cifras+Imagen
- Listado
- Contenido-Entidades
- Cifras
- Selector alfabético
- Apertura
- Tipos de visualización
Imágenes
.stroke-#{$theme-color}
La función de esta colección de clases será poder cambiar el color de los iconos de las etiquetas HTML <svg> mediante los temas de color de Bootstrap.
Los SVG deberán estar dentro de un contenedor con la clase en concreto.
Si el SVG esta como recurso de una etiqueta HTML <img> la clase no tendrá efecto.
- .stroke-dark
- .stroke-info
- .stroke-light
- .stroke-lighter
- .stroke-primary
- .stroke-secondary
- .stroke-success
- .stroke-warning
- .stroke-danger
- .stroke-gray-dark
.link-imgs
Clase para envolver enlaces que sean imágenes, para que su foco sea visible por teclado.
.bg-image-none-md
Esta clase hará que no sea visible la imajen de fondo del elemento en las resoluciones que no sean de escritorio.
.img-cover
Aplica esta clase en un contenedor para que la imagen se expanda en él manteniendo su formato sin aplastamientos ni extiramientos, hay que tener en cuenta que la imagen se desbordará por ciertos formatos que no compatibles de su contenedor (ejemplo: una imagen panorámica le sobrarán los laterales en un contendor cuadrado).
.aspect-ratio-#{$sizeA}-#{$sizeB}
Aplica esta clase en un contenedor o en la misma imagen para que tenga bordes redondeados y se expanda manteniendo un formato especifico sin aplastamientos ni extiramientos. Se ha de tener en cuenta que la imagen se desbordará por ciertos formatos que no compatibles de su contenedor (ejemplo: una imagen panorámica le sobrarán los laterales en un contendor cuadrado).
.aspect-ratio-4-3
.aspect-ratio-3-4
.aspect-ratio-3-1
.aspect-ratio-16-9
.aspect-ratio-2-1
.aspect-ratio-6-1
Listado de iconos
En muchas ocasiones necesitaremos hacer referencia al identificador de los iconos para mostrar el que necesitamos, puedes consultar este listado para elegirlo.
Nota: Estos iconos serán remplazados por nuevos y sus identificadores serán en español, no se volverán a usar para desarrollos nuevos
En muchas ocasiones necesitaremos hacer referencia al identificador de los iconos para mostrar el que necesitamos, puedes consultar este listado para elegirlo.