@ohu-mobile/core
Version:
72 lines • 1.5 kB
CSS
.ohu-carousel {
position: relative;
}
.ohu-carousel-stage-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.ohu-carousel-stage {
display: flex;
will-change: transform;
}
.ohu-carousel-stage.is-horizontal {
flex-flow: row nowrap;
}
.ohu-carousel-stage.is-vertical {
flex-flow: column wrap;
}
.ohu-carousel-stage.is-overlay {
position: relative;
flex-flow: row nowrap;
}
.ohu-carousel__indicator {
position: absolute;
font-size: 0;
}
.ohu-carousel__indicator.is-horizontal {
width: 100%;
text-align: center;
bottom: 12px;
left: 0;
}
.ohu-carousel__indicator.is-horizontal .ohu-carousel__indicator__dot {
margin-left: 3Px;
margin-right: 3Px;
}
.ohu-carousel__indicator.is-vertical {
height: 100%;
display: flex;
flex-flow: column wrap;
justify-content: center;
right: 12px;
top: 0;
}
.ohu-carousel__indicator.is-vertical .ohu-carousel__indicator__dot {
margin-top: 3Px;
margin-bottom: 3Px;
}
.ohu-carousel__indicator__dot {
display: inline-block;
transition: all 500ms ease;
width: 6Px;
height: 6Px;
border-radius: 6Px;
font-size: 0;
background: rgba(255, 255, 255, 0.4);
}
.ohu-carousel__indicator__dot.is-active {
background: rgb(255, 255, 255);
}
.ohu-carousel__indicator__dot.is-dark {
background: rgba(179, 190, 209, 0.2);
}
.ohu-carousel__indicator__dot.is-active.is-dark {
background: rgba(179, 190, 209, 0.7);
}
.ohu-carousel-item {
flex-shrink: 0;
flex-grow: 0;
box-sizing: border-box;
}