@primeuix/styles
Version:
105 lines (89 loc) • 2.87 kB
JavaScript
import{css}from"@primeuix/styled";var style=css`
.p-carousel {
display: flex;
flex-direction: column;
}
.p-carousel-content-container {
display: flex;
flex-direction: column;
overflow: auto;
}
.p-carousel-content {
display: flex;
flex-direction: row;
gap: dt('carousel.content.gap');
}
.p-carousel-content:dir(rtl) {
flex-direction: row-reverse;
}
.p-carousel-viewport {
overflow: hidden;
width: 100%;
}
.p-carousel-item-list {
display: flex;
flex-direction: row;
}
.p-carousel-item-list:dir(rtl) {
flex-direction: row-reverse;
}
.p-carousel-prev-button,
.p-carousel-next-button {
align-self: center;
flex-shrink: 0;
}
.p-carousel-indicator-list {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
padding: dt('carousel.indicator.list.padding');
gap: dt('carousel.indicator.list.gap');
margin: 0;
list-style: none;
}
.p-carousel-indicator-button {
display: flex;
align-items: center;
justify-content: center;
background: dt('carousel.indicator.background');
width: dt('carousel.indicator.width');
height: dt('carousel.indicator.height');
border: 0 none;
transition:
background dt('carousel.transition.duration'),
color dt('carousel.transition.duration'),
outline-color dt('carousel.transition.duration'),
box-shadow dt('carousel.transition.duration');
outline-color: transparent;
border-radius: dt('carousel.indicator.border.radius');
padding: 0;
margin: 0;
user-select: none;
cursor: pointer;
}
.p-carousel-indicator-button:focus-visible {
box-shadow: dt('carousel.indicator.focus.ring.shadow');
outline: dt('carousel.indicator.focus.ring.width') dt('carousel.indicator.focus.ring.style') dt('carousel.indicator.focus.ring.color');
outline-offset: dt('carousel.indicator.focus.ring.offset');
}
.p-carousel-indicator-button:hover {
background: dt('carousel.indicator.hover.background');
}
.p-carousel-indicator-active .p-carousel-indicator-button {
background: dt('carousel.indicator.active.background');
}
.p-carousel-vertical .p-carousel-content {
flex-direction: column;
}
.p-carousel-vertical .p-carousel-item-list {
flex-direction: column;
height: 100%;
}
.p-items-hidden .p-carousel-item {
visibility: hidden;
}
.p-items-hidden .p-carousel-item.p-carousel-item-active {
visibility: visible;
}
`;export{style};//# sourceMappingURL=index.mjs.map