Refactor #5592 - For Media section components
tugcekucukoglu
parent
527bae0beb
commit
2c45303235
|
|
@ -76,31 +76,31 @@ export interface CarouselPassThroughOptions {
|
|||
* Used to pass attributes to the header's DOM element.
|
||||
*/
|
||||
header?: CarouselPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the content container's DOM element.
|
||||
*/
|
||||
contentContainer?: CarouselPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the content's DOM element.
|
||||
*/
|
||||
content?: CarouselPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the container's DOM element.
|
||||
*/
|
||||
container?: CarouselPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the previous button's DOM element.
|
||||
* @see {@link ButtonPassThroughOptions}
|
||||
*/
|
||||
previousButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>;
|
||||
/**
|
||||
* Used to pass attributes to the items content's DOM element.
|
||||
* Used to pass attributes to the viewport's DOM element.
|
||||
*/
|
||||
itemsContent?: CarouselPassThroughOptionType;
|
||||
viewport?: CarouselPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the items container's DOM element.
|
||||
* Used to pass attributes to the items list's DOM element.
|
||||
*/
|
||||
itemsContainer?: CarouselPassThroughOptionType;
|
||||
itemList?: CarouselPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the item cloned's DOM element.
|
||||
* Used to pass attributes to the item clone's DOM element.
|
||||
*/
|
||||
itemCloned?: CarouselPassThroughOptionType;
|
||||
itemClone?: CarouselPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the item's DOM element.
|
||||
*/
|
||||
|
|
@ -111,9 +111,9 @@ export interface CarouselPassThroughOptions {
|
|||
*/
|
||||
nextButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>;
|
||||
/**
|
||||
* Used to pass attributes to the indicators's DOM element.
|
||||
* Used to pass attributes to the indicator list's DOM element.
|
||||
*/
|
||||
indicators?: CarouselPassThroughOptionType;
|
||||
indicatorList?: CarouselPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the indicator's DOM element.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
<div v-if="$slots.header" :class="cx('header')" v-bind="ptm('header')">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
<div v-if="!empty" :class="[cx('content'), contentClass]" v-bind="ptm('content')">
|
||||
<div :class="[cx('container'), containerClass]" :aria-live="allowAutoplay ? 'polite' : 'off'" v-bind="ptm('container')">
|
||||
<div v-if="!empty" :class="[cx('contentContainer'), containerClass]" v-bind="ptm('contentContainer')">
|
||||
<div :class="[cx('content'), contentClass]" :aria-live="allowAutoplay ? 'polite' : 'off'" v-bind="ptm('content')">
|
||||
<Button
|
||||
v-if="showNavigators"
|
||||
:class="cx('previousButton')"
|
||||
|
|
@ -22,15 +22,14 @@
|
|||
</slot>
|
||||
</template>
|
||||
</Button>
|
||||
|
||||
<div :class="cx('itemsContent')" :style="[{ height: isVertical() ? verticalViewPortHeight : 'auto' }]" @touchend="onTouchEnd" @touchstart="onTouchStart" @touchmove="onTouchMove" v-bind="ptm('itemsContent')">
|
||||
<div ref="itemsContainer" :class="cx('itemsContainer')" @transitionend="onTransitionEnd" v-bind="ptm('itemsContainer')">
|
||||
<div :class="cx('viewport')" :style="[{ height: isVertical() ? verticalViewPortHeight : 'auto' }]" @touchend="onTouchEnd" @touchstart="onTouchStart" @touchmove="onTouchMove" v-bind="ptm('viewport')">
|
||||
<div ref="itemsContainer" :class="cx('itemList')" @transitionend="onTransitionEnd" v-bind="ptm('itemList')">
|
||||
<template v-if="isCircular()">
|
||||
<div
|
||||
v-for="(item, index) of value.slice(-1 * d_numVisible)"
|
||||
:key="index + '_scloned'"
|
||||
:class="cx('itemCloned', { index, value, totalShiftedItems, d_numVisible })"
|
||||
v-bind="ptm('itemCloned')"
|
||||
:class="cx('itemClone', { index, value, totalShiftedItems, d_numVisible })"
|
||||
v-bind="ptm('itemClone')"
|
||||
:data-p-carousel-item-active="totalShiftedItems * -1 === value.length + d_numVisible"
|
||||
:data-p-carousel-item-start="index === 0"
|
||||
:data-p-carousel-item-end="value.slice(-1 * d_numVisible).length - 1 === index"
|
||||
|
|
@ -54,7 +53,7 @@
|
|||
<slot name="item" :data="item" :index="index"></slot>
|
||||
</div>
|
||||
<template v-if="isCircular()">
|
||||
<div v-for="(item, index) of value.slice(0, d_numVisible)" :key="index + '_fcloned'" :class="cx('itemCloned', { index, value, totalShiftedItems, d_numVisible })" v-bind="ptm('itemCloned')">
|
||||
<div v-for="(item, index) of value.slice(0, d_numVisible)" :key="index + '_fcloned'" :class="cx('itemClone', { index, value, totalShiftedItems, d_numVisible })" v-bind="ptm('itemClone')">
|
||||
<slot name="item" :data="item" :index="index"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -78,7 +77,7 @@
|
|||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
<ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="[cx('indicators'), indicatorsContentClass]" @keydown="onIndicatorKeydown" v-bind="ptm('indicators')">
|
||||
<ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="[cx('indicatorList'), indicatorsContentClass]" @keydown="onIndicatorKeydown" v-bind="ptm('indicatorList')">
|
||||
<li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="cx('indicator', { index: i })" v-bind="ptm('indicator', getIndicatorPTOptions(i))" :data-p-highlight="d_page === i">
|
||||
<button
|
||||
:class="cx('indicatorButton')"
|
||||
|
|
|
|||
|
|
@ -9,17 +9,17 @@ const classes = {
|
|||
}
|
||||
],
|
||||
header: 'p-carousel-header',
|
||||
content: 'p-carousel-content-container',
|
||||
container: 'p-carousel-content',
|
||||
contentContainer: 'p-carousel-content-container',
|
||||
content: 'p-carousel-content',
|
||||
previousButton: ({ instance }) => [
|
||||
'p-carousel-prev-button',
|
||||
{
|
||||
'p-disabled': instance.backwardIsDisabled
|
||||
}
|
||||
],
|
||||
itemsContent: 'p-carousel-viewport',
|
||||
itemsContainer: 'p-carousel-items',
|
||||
itemCloned: ({ index, value, totalShiftedItems, d_numVisible }) => [
|
||||
viewport: 'p-carousel-viewport',
|
||||
itemList: 'p-carousel-item-list',
|
||||
itemClone: ({ index, value, totalShiftedItems, d_numVisible }) => [
|
||||
'p-carousel-item p-carousel-item-clone',
|
||||
{
|
||||
'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible,
|
||||
|
|
@ -41,7 +41,7 @@ const classes = {
|
|||
'p-disabled': instance.forwardIsDisabled
|
||||
}
|
||||
],
|
||||
indicators: 'p-carousel-indicators',
|
||||
indicatorList: 'p-carousel-indicator-list',
|
||||
indicator: ({ instance, index }) => [
|
||||
'p-carousel-indicator',
|
||||
{
|
||||
|
|
|
|||
|
|
@ -90,14 +90,14 @@ export interface GalleriaPassThroughOptions {
|
|||
* Used to pass attributes to the footer's DOM element.
|
||||
*/
|
||||
footer?: GalleriaPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the item wrapper's DOM element.
|
||||
*/
|
||||
itemWrapper?: GalleriaPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the item container's DOM element.
|
||||
*/
|
||||
itemContainer?: GalleriaPassThroughOptionType;
|
||||
itemsContainer?: GalleriaPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the items' DOM element.
|
||||
*/
|
||||
items?: GalleriaPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the previous item button's DOM element.
|
||||
*/
|
||||
|
|
@ -123,9 +123,9 @@ export interface GalleriaPassThroughOptions {
|
|||
*/
|
||||
caption?: GalleriaPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the indicators's DOM element.
|
||||
* Used to pass attributes to the indicator list's DOM element.
|
||||
*/
|
||||
indicators?: GalleriaPassThroughOptionType;
|
||||
indicatorList?: GalleriaPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the indicator's DOM element.
|
||||
*/
|
||||
|
|
@ -135,13 +135,13 @@ export interface GalleriaPassThroughOptions {
|
|||
*/
|
||||
indicatorButton?: GalleriaPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the thumbnail wrapper's DOM element.
|
||||
* Used to pass attributes to the thumbnails' DOM element.
|
||||
*/
|
||||
thumbnailWrapper?: GalleriaPassThroughOptionType;
|
||||
thumbnails?: GalleriaPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the thumbnail container's DOM element.
|
||||
* Used to pass attributes to the thumbnail content's DOM element.
|
||||
*/
|
||||
thumbnailContainer?: GalleriaPassThroughOptionType;
|
||||
thumbnailContent?: GalleriaPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the previous thumbnail button's DOM element.
|
||||
*/
|
||||
|
|
@ -163,9 +163,9 @@ export interface GalleriaPassThroughOptions {
|
|||
*/
|
||||
thumbnailItem?: GalleriaPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the thumbnail item content's DOM element.
|
||||
* Used to pass attributes to the thumbnail's DOM element.
|
||||
*/
|
||||
thumbnailItemContent?: GalleriaPassThroughOptionType;
|
||||
thumbnail?: GalleriaPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the next thumbnail button's DOM element.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div :class="cx('itemWrapper')" v-bind="ptm('itemWrapper')">
|
||||
<div :class="cx('itemContainer')" v-bind="ptm('itemContainer')">
|
||||
<div :class="cx('itemsContainer')" v-bind="ptm('itemsContainer')">
|
||||
<div :class="cx('items')" v-bind="ptm('items')">
|
||||
<button v-if="showItemNavigators" v-ripple type="button" :class="cx('previousItemButton')" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-bind="ptm('previousItemButton')" data-pc-group-section="itemnavigator">
|
||||
<component :is="templates.previousitemicon || 'ChevronLeftIcon'" :class="cx('previousItemIcon')" v-bind="ptm('previousItemIcon')" />
|
||||
</button>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
<component v-if="templates.caption" :is="templates.caption" :item="activeItem" />
|
||||
</div>
|
||||
</div>
|
||||
<ul v-if="showIndicators" ref="indicatorContent" :class="cx('indicators')" v-bind="ptm('indicators')">
|
||||
<ul v-if="showIndicators" ref="indicatorContent" :class="cx('indicatorList')" v-bind="ptm('indicatorList')">
|
||||
<li
|
||||
v-for="(item, index) of value"
|
||||
:key="`p-galleria-indicator-${index}`"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div :class="cx('thumbnailWrapper')" v-bind="ptm('thumbnailWrapper')">
|
||||
<div :class="cx('thumbnailContainer')" v-bind="ptm('thumbnailContainer')">
|
||||
<div :class="cx('thumbnails')" v-bind="ptm('thumbnails')">
|
||||
<div :class="cx('thumbnailContent')" v-bind="ptm('thumbnailContent')">
|
||||
<button
|
||||
v-if="showThumbnailNavigators"
|
||||
v-ripple
|
||||
|
|
@ -41,12 +41,12 @@
|
|||
:data-p-galleria-thumbnail-item-end="lastItemActiveIndex() === index"
|
||||
>
|
||||
<div
|
||||
:class="cx('thumbnailItemContent')"
|
||||
:class="cx('thumbnail')"
|
||||
:tabindex="activeIndex === index ? '0' : '-1'"
|
||||
:aria-label="ariaPageLabel(index + 1)"
|
||||
:aria-current="activeIndex === index ? 'page' : undefined"
|
||||
@click="onItemClick(index)"
|
||||
v-bind="ptm('thumbnailItemContent')"
|
||||
v-bind="ptm('thumbnail')"
|
||||
>
|
||||
<component v-if="templates.thumbnail" :is="templates.thumbnail" :item="item" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -27,8 +27,8 @@ const classes = {
|
|||
header: 'p-galleria-header',
|
||||
content: 'p-galleria-content',
|
||||
footer: 'p-galleria-footer',
|
||||
itemWrapper: 'p-galleria-items-container',
|
||||
itemContainer: 'p-galleria-items',
|
||||
itemsContainer: 'p-galleria-items-container',
|
||||
items: 'p-galleria-items',
|
||||
previousItemButton: ({ instance }) => [
|
||||
'p-galleria-prev-button p-galleria-navigate-button',
|
||||
{
|
||||
|
|
@ -45,7 +45,7 @@ const classes = {
|
|||
],
|
||||
nextItemIcon: 'p-galleria-next-icon',
|
||||
caption: 'p-galleria-caption',
|
||||
indicators: 'p-galleria-indicators',
|
||||
indicatorList: 'p-galleria-indicator-list',
|
||||
indicator: ({ instance, index }) => [
|
||||
'p-galleria-indicator',
|
||||
{
|
||||
|
|
@ -53,8 +53,8 @@ const classes = {
|
|||
}
|
||||
],
|
||||
indicatorButton: 'p-galleria-indicator-button',
|
||||
thumbnailWrapper: 'p-galleria-thumbnails',
|
||||
thumbnailContainer: 'p-galleria-thumbnails-content',
|
||||
thumbnails: 'p-galleria-thumbnails',
|
||||
thumbnailContent: 'p-galleria-thumbnails-content',
|
||||
previousThumbnailButton: ({ instance }) => [
|
||||
'p-galleria-thumbnail-prev-button',
|
||||
{
|
||||
|
|
@ -73,7 +73,7 @@ const classes = {
|
|||
'p-galleria-thumbnail-item-end': instance.lastItemActiveIndex() === index
|
||||
}
|
||||
],
|
||||
thumbnailItemContent: 'p-galleria-thumbnail',
|
||||
thumbnail: 'p-galleria-thumbnail',
|
||||
nextThumbnailButton: ({ instance }) => [
|
||||
'p-galleria-thumbnail-next-button',
|
||||
{
|
||||
|
|
|
|||
|
|
@ -60,13 +60,13 @@ export interface ImagePassThroughOptions {
|
|||
*/
|
||||
image?: ImagePassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the button's DOM element.
|
||||
* Used to pass attributes to the preview mask's DOM element.
|
||||
*/
|
||||
button?: ImagePassThroughOptionType;
|
||||
previewMask?: ImagePassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the icon's DOM element.
|
||||
* Used to pass attributes to the preview icon's DOM element.
|
||||
*/
|
||||
icon?: ImagePassThroughOptionType;
|
||||
previewIcon?: ImagePassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the mask's DOM element.
|
||||
*/
|
||||
|
|
@ -116,13 +116,13 @@ export interface ImagePassThroughOptions {
|
|||
*/
|
||||
closeIcon?: ImagePassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the preview container's DOM element.
|
||||
* Used to pass attributes to the original container's DOM element.
|
||||
*/
|
||||
previewContainer?: ImagePassThroughOptionType;
|
||||
originalContainer?: ImagePassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the preview's DOM element.
|
||||
* Used to pass attributes to the original's DOM element.
|
||||
*/
|
||||
preview?: ImagePassThroughOptionType;
|
||||
original?: ImagePassThroughOptionType;
|
||||
/**
|
||||
* Used to manage all lifecycle hooks.
|
||||
* @see {@link BaseComponent.ComponentHooks}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<span :class="containerClass" :style="style" v-bind="ptmi('root')">
|
||||
<slot name="image" :onError="onError" :errorCallback="onError">
|
||||
<img :style="imageStyle" :class="[cx('image'), imageClass]" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
|
||||
<img :style="imageStyle" :class="imageClass" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
|
||||
</slot>
|
||||
<button v-if="preview" ref="previewButton" :aria-label="zoomImageAriaLabel" type="button" :class="cx('button')" @click="onImageClick" v-bind="{ ...previewButtonProps, ...ptm('button') }">
|
||||
<button v-if="preview" ref="previewButton" :aria-label="zoomImageAriaLabel" type="button" :class="cx('previewMask')" @click="onImageClick" v-bind="{ ...previewButtonProps, ...ptm('previewMask') }">
|
||||
<slot name="indicatoricon">
|
||||
<component :is="indicatorIcon ? 'i' : 'EyeIcon'" :class="cx('icon')" v-bind="ptm('icon')" />
|
||||
<component :is="indicatorIcon ? 'i' : 'EyeIcon'" :class="cx('previewIcon')" v-bind="ptm('previewIcon')" />
|
||||
</slot>
|
||||
</button>
|
||||
<Portal>
|
||||
|
|
@ -42,9 +42,9 @@
|
|||
</button>
|
||||
</div>
|
||||
<transition name="p-image-original" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
|
||||
<div v-if="previewVisible" v-bind="ptm('previewContainer')">
|
||||
<slot name="preview" :class="cx('preview')" :style="imagePreviewStyle" :onClick="onPreviewImageClick" :previewCallback="onPreviewImageClick">
|
||||
<img :src="$attrs.src" :class="cx('preview')" :style="imagePreviewStyle" @click="onPreviewImageClick" v-bind="ptm('preview')" />
|
||||
<div v-if="previewVisible" v-bind="ptm('originalContainer')">
|
||||
<slot name="preview" :class="cx('original')" :style="imagePreviewStyle" :onClick="onPreviewImageClick" :previewCallback="onPreviewImageClick">
|
||||
<img :src="$attrs.src" :class="cx('original')" :style="imagePreviewStyle" @click="onPreviewImageClick" v-bind="ptm('original')" />
|
||||
</slot>
|
||||
</div>
|
||||
</transition>
|
||||
|
|
|
|||
|
|
@ -7,9 +7,8 @@ const classes = {
|
|||
'p-image-preview': props.preview
|
||||
}
|
||||
],
|
||||
image: ({ props }) => props.image,
|
||||
button: 'p-image-preview-mask',
|
||||
icon: 'p-image-preview-icon',
|
||||
previewMask: 'p-image-preview-mask',
|
||||
previewIcon: 'p-image-preview-icon',
|
||||
mask: 'p-image-mask p-component-overlay p-component-overlay-enter',
|
||||
toolbar: 'p-image-toolbar',
|
||||
rotateRightButton: 'p-image-action p-image-rotate-right-button',
|
||||
|
|
@ -27,7 +26,7 @@ const classes = {
|
|||
}
|
||||
],
|
||||
closeButton: 'p-image-action p-image-close-button',
|
||||
preview: 'p-image-original'
|
||||
original: 'p-image-original'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export default {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.p-carousel-items {
|
||||
.p-carousel-item-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
|
@ -31,7 +31,7 @@ export default {
|
|||
align-self: center;
|
||||
}
|
||||
|
||||
.p-carousel-indicators {
|
||||
.p-carousel-indicator-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
|
@ -76,7 +76,7 @@ export default {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-carousel-vertical .p-carousel-items {
|
||||
.p-carousel-vertical .p-carousel-item-list {
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -214,7 +214,7 @@ export default {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.p-galleria-indicators {
|
||||
.p-galleria-indicator-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -264,17 +264,17 @@ export default {
|
|||
order: 2;
|
||||
}
|
||||
|
||||
.p-galleria-indicators-left .p-galleria-indicators,
|
||||
.p-galleria-indicators-top .p-galleria-indicators {
|
||||
.p-galleria-indicators-left .p-galleria-indicator-list,
|
||||
.p-galleria-indicators-top .p-galleria-indicator-list {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.p-galleria-indicators-left .p-galleria-indicators,
|
||||
.p-galleria-indicators-right .p-galleria-indicators {
|
||||
.p-galleria-indicators-left .p-galleria-indicator-list,
|
||||
.p-galleria-indicators-right .p-galleria-indicator-list {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-galleria-inset-indicators .p-galleria-indicators {
|
||||
.p-galleria-inset-indicators .p-galleria-indicator-list {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
|
|
@ -293,28 +293,28 @@ export default {
|
|||
background: ${dt('galleria.inset.indicator.active.background')};
|
||||
}
|
||||
|
||||
.p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicators {
|
||||
.p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicator-list {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.p-galleria-inset-indicators.p-galleria-indicators-right .p-galleria-indicators {
|
||||
.p-galleria-inset-indicators.p-galleria-indicators-right .p-galleria-indicator-list {
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.p-galleria-inset-indicators.p-galleria-indicators-bottom .p-galleria-indicators {
|
||||
.p-galleria-inset-indicators.p-galleria-indicators-bottom .p-galleria-indicator-list {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.p-galleria-inset-indicators.p-galleria-indicators-left .p-galleria-indicators {
|
||||
.p-galleria-inset-indicators.p-galleria-indicators-left .p-galleria-indicator-list {
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue