import BaseStyle from 'primevue/base/style'; const css = ` @layer primevue { .p-galleria-content { display: flex; flex-direction: column; } .p-galleria-item-wrapper { display: flex; flex-direction: column; position: relative; } .p-galleria-item-container { position: relative; display: flex; height: 100%; } .p-galleria-item-nav { position: absolute; top: 50%; margin-top: -0.5rem; display: inline-flex; justify-content: center; align-items: center; overflow: hidden; } .p-galleria-item-prev { left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } .p-galleria-item-next { right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .p-galleria-item { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; } .p-galleria-item-nav-onhover .p-galleria-item-nav { pointer-events: none; opacity: 0; transition: opacity 0.2s ease-in-out; } .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { pointer-events: all; opacity: 1; } .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { pointer-events: none; } .p-galleria-caption { position: absolute; bottom: 0; left: 0; width: 100%; } /* Thumbnails */ .p-galleria-thumbnail-wrapper { display: flex; flex-direction: column; overflow: auto; flex-shrink: 0; } .p-galleria-thumbnail-prev, .p-galleria-thumbnail-next { align-self: center; flex: 0 0 auto; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; } .p-galleria-thumbnail-prev span, .p-galleria-thumbnail-next span { display: flex; justify-content: center; align-items: center; } .p-galleria-thumbnail-container { display: flex; flex-direction: row; } .p-galleria-thumbnail-items-container { overflow: hidden; width: 100%; } .p-galleria-thumbnail-items { display: flex; } .p-galleria-thumbnail-item { overflow: auto; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.5; } .p-galleria-thumbnail-item:hover { opacity: 1; transition: opacity 0.3s; } .p-galleria-thumbnail-item-current { opacity: 1; } /* Positions */ /* Thumbnails */ .p-galleria-thumbnails-left .p-galleria-content, .p-galleria-thumbnails-right .p-galleria-content { flex-direction: row; } .p-galleria-thumbnails-left .p-galleria-item-wrapper, .p-galleria-thumbnails-right .p-galleria-item-wrapper { flex-direction: row; } .p-galleria-thumbnails-left .p-galleria-item-wrapper, .p-galleria-thumbnails-top .p-galleria-item-wrapper { order: 2; } .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, .p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { order: 1; } .p-galleria-thumbnails-left .p-galleria-thumbnail-container, .p-galleria-thumbnails-right .p-galleria-thumbnail-container { flex-direction: column; flex-grow: 1; } .p-galleria-thumbnails-left .p-galleria-thumbnail-items, .p-galleria-thumbnails-right .p-galleria-thumbnail-items { flex-direction: column; height: 100%; } /* Indicators */ .p-galleria-indicators { display: flex; align-items: center; justify-content: center; } .p-galleria-indicator > button { display: inline-flex; align-items: center; } .p-galleria-indicators-left .p-galleria-item-wrapper, .p-galleria-indicators-right .p-galleria-item-wrapper { flex-direction: row; align-items: center; } .p-galleria-indicators-left .p-galleria-item-container, .p-galleria-indicators-top .p-galleria-item-container { order: 2; } .p-galleria-indicators-left .p-galleria-indicators, .p-galleria-indicators-top .p-galleria-indicators { order: 1; } .p-galleria-indicators-left .p-galleria-indicators, .p-galleria-indicators-right .p-galleria-indicators { flex-direction: column; } .p-galleria-indicator-onitem .p-galleria-indicators { position: absolute; display: flex; z-index: 1; } .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { top: 0; left: 0; width: 100%; align-items: flex-start; } .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { right: 0; top: 0; height: 100%; align-items: flex-end; } .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { bottom: 0; left: 0; width: 100%; align-items: flex-end; } .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { left: 0; top: 0; height: 100%; align-items: flex-start; } /* FullScreen */ .p-galleria-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .p-galleria-close { position: absolute; top: 0; right: 0; display: flex; justify-content: center; align-items: center; overflow: hidden; } .p-galleria-mask .p-galleria-item-nav { position: fixed; top: 50%; margin-top: -0.5rem; } /* Animation */ .p-galleria-enter-active { transition: all 150ms cubic-bezier(0, 0, 0.2, 1); } .p-galleria-leave-active { transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } .p-galleria-enter-from, .p-galleria-leave-to { opacity: 0; transform: scale(0.7); } .p-galleria-enter-active .p-galleria-item-nav { opacity: 0; } /* Keyboard Support */ .p-items-hidden .p-galleria-thumbnail-item { visibility: hidden; } .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { visibility: visible; } } `; const classes = { mask: ({ instance }) => [ 'p-galleria-mask p-component-overlay p-component-overlay-enter', { 'p-input-filled': instance.$primevue.config.inputStyle === 'filled', 'p-ripple-disabled': instance.$primevue.config.ripple === false } ], root: ({ instance }) => { const thumbnailsPosClass = instance.$attrs.showThumbnails && instance.getPositionClass('p-galleria-thumbnails', instance.$attrs.thumbnailsPosition); const indicatorPosClass = instance.$attrs.showIndicators && instance.getPositionClass('p-galleria-indicators', instance.$attrs.indicatorsPosition); return [ 'p-galleria p-component', { 'p-galleria-fullscreen': instance.$attrs.fullScreen, 'p-galleria-indicator-onitem': instance.$attrs.showIndicatorsOnItem, 'p-galleria-item-nav-onhover': instance.$attrs.showItemNavigatorsOnHover && !instance.$attrs.fullScreen }, thumbnailsPosClass, indicatorPosClass ]; }, closeButton: 'p-galleria-close p-link', closeIcon: 'p-galleria-close-icon', header: 'p-galleria-header', content: 'p-galleria-content', footer: 'p-galleria-footer', itemWrapper: 'p-galleria-item-wrapper', itemContainer: 'p-galleria-item-container', previousItemButton: ({ instance }) => [ 'p-galleria-item-prev p-galleria-item-nav p-link', { 'p-disabled': instance.isNavBackwardDisabled() } ], previousItemIcon: 'p-galleria-item-prev-icon', item: 'p-galleria-item', nextItemButton: ({ instance }) => [ 'p-galleria-item-next p-galleria-item-nav p-link', { 'p-disabled': instance.isNavForwardDisabled() } ], nextItemIcon: 'p-galleria-item-next-icon', caption: 'p-galleria-caption', indicators: 'p-galleria-indicators p-reset', indicator: ({ instance, index }) => [ 'p-galleria-indicator', { 'p-highlight': instance.isIndicatorItemActive(index) } ], indicatorButton: 'p-link', thumbnailWrapper: 'p-galleria-thumbnail-wrapper', thumbnailContainer: 'p-galleria-thumbnail-container', previousThumbnailButton: ({ instance }) => [ 'p-galleria-thumbnail-prev p-link', { 'p-disabled': instance.isNavBackwardDisabled() } ], previousThumbnailIcon: 'p-galleria-thumbnail-prev-icon', thumbnailItemsContainer: 'p-galleria-thumbnail-items-container', thumbnailItems: 'p-galleria-thumbnail-items', thumbnailItem: ({ instance, index, activeIndex }) => [ 'p-galleria-thumbnail-item', { 'p-galleria-thumbnail-item-current': activeIndex === index, 'p-galleria-thumbnail-item-active': instance.isItemActive(index), 'p-galleria-thumbnail-item-start': instance.firstItemAciveIndex() === index, 'p-galleria-thumbnail-item-end': instance.lastItemActiveIndex() === index } ], thumbnailItemContent: 'p-galleria-thumbnail-item-content', nextThumbnailButton: ({ instance }) => [ 'p-galleria-thumbnail-next p-link', { 'p-disabled': instance.isNavForwardDisabled() } ], nextThumbnailIcon: 'p-galleria-thumbnail-next-icon' }; export default BaseStyle.extend({ name: 'galleria', css, classes });