@bee-design/ui/lib/Carousel/style/index.css

Bee Design React UI Library.

@keyframes bee-carousel-slide-x-in{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes bee-carousel-slide-x-out{from{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes bee-carousel-slide-x-in-reverse{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes bee-carousel-slide-x-out-reverse{from{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes bee-carousel-slide-y-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes bee-carousel-slide-y-out{from{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes bee-carousel-slide-y-in-reverse{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes bee-carousel-slide-y-out-reverse{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes bee-carousel-card-bottom-to-middle{from{opacity:0;transform:translateX(0) translateZ(-400px)}to{opacity:.4;transform:translateX(0) translateZ(-200px)}}@keyframes bee-carousel-card-middle-to-bottom{from{opacity:.4;transform:translateX(-100%) translateZ(-200px)}to{opacity:0;transform:translateX(-100%) translateZ(-400px)}}@keyframes bee-carousel-card-top-to-middle{from{opacity:1;transform:translateX(-50%) translateZ(0)}to{opacity:.4;transform:translateX(-100%) translateZ(-200px)}}@keyframes bee-carousel-card-middle-to-top{from{opacity:.4;transform:translateX(0) translateZ(-200px)}to{opacity:1;transform:translateX(-50%) translateZ(0)}}@keyframes bee-carousel-card-bottom-to-middle-reverse{from{opacity:0;transform:translateX(-100%) translateZ(-400px)}to{opacity:.4;transform:translateX(-100%) translateZ(-200px)}}@keyframes bee-carousel-card-middle-to-bottom-reverse{from{opacity:.4;transform:translateX(0) translateZ(-200px)}to{opacity:0;transform:translateX(0) translateZ(-400px)}}@keyframes bee-carousel-card-top-to-middle-reverse{from{opacity:1;transform:translateX(-50%) translateZ(0)}to{opacity:.4;transform:translateX(0) translateZ(-200px)}}@keyframes bee-carousel-card-middle-to-top-reverse{from{opacity:.4;transform:translateX(-100%) translateZ(-200px)}to{opacity:1;transform:translateX(-50%) translateZ(0)}}.bee-carousel{position:relative}.bee-carousel-indicator-position-outer{margin-bottom:30px}.bee-carousel-card,.bee-carousel-fade,.bee-carousel-slide{width:100%;height:100%;overflow:hidden;position:relative}.bee-carousel-card>*,.bee-carousel-fade>*,.bee-carousel-slide>*{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden}.bee-carousel-item-current{z-index:1;position:relative}.bee-carousel-slide>:not(.bee-carousel-item-current){visibility:hidden}.bee-carousel-slide.bee-carousel-horizontal .bee-carousel-item-slide-out{display:block;animation:bee-carousel-slide-x-out}.bee-carousel-slide.bee-carousel-horizontal .bee-carousel-item-slide-in{display:block;animation:bee-carousel-slide-x-in}.bee-carousel-slide.bee-carousel-horizontal.bee-carousel-negative .bee-carousel-item-slide-out{animation:bee-carousel-slide-x-out-reverse}.bee-carousel-slide.bee-carousel-horizontal.bee-carousel-negative .bee-carousel-item-slide-in{animation:bee-carousel-slide-x-in-reverse}.bee-carousel-slide.bee-carousel-vertical .bee-carousel-item-slide-out{display:block;animation:bee-carousel-slide-y-out}.bee-carousel-slide.bee-carousel-vertical .bee-carousel-item-slide-in{display:block;animation:bee-carousel-slide-y-in}.bee-carousel-slide.bee-carousel-vertical.bee-carousel-negative .bee-carousel-item-slide-out{animation:bee-carousel-slide-y-out-reverse}.bee-carousel-slide.bee-carousel-vertical.bee-carousel-negative .bee-carousel-item-slide-in{animation:bee-carousel-slide-y-in-reverse}.bee-carousel-card{perspective:800px}.bee-carousel-card>*{left:50%;opacity:0;transform:translateX(-50%) translateZ(-400px);animation:bee-carousel-card-middle-to-bottom}.bee-carousel-card .bee-carousel-item-prev{opacity:.4;transform:translateX(-100%) translateZ(-200px);animation:bee-carousel-card-top-to-middle}.bee-carousel-card .bee-carousel-item-next{opacity:.4;transform:translateX(0) translateZ(-200px);animation:bee-carousel-card-bottom-to-middle}.bee-carousel-card .bee-carousel-item-current{opacity:1;transform:translateX(-50%) translateZ(0);animation:bee-carousel-card-middle-to-top}.bee-carousel-card.bee-carousel-negative>*{animation:bee-carousel-card-middle-to-bottom-reverse}.bee-carousel-card.bee-carousel-negative .bee-carousel-item-prev{animation:bee-carousel-card-bottom-to-middle-reverse}.bee-carousel-card.bee-carousel-negative .bee-carousel-item-next{animation:bee-carousel-card-top-to-middle-reverse}.bee-carousel-card.bee-carousel-negative .bee-carousel-item-current{animation:bee-carousel-card-middle-to-top-reverse}.bee-carousel-fade>*{left:50%;transform:translateX(-50%);opacity:0}.bee-carousel-fade .bee-carousel-item-current{opacity:1}.bee-carousel-indicator{display:flex;position:absolute;margin:0;padding:0}.bee-carousel-indicator-wrapper{position:absolute;z-index:2}.bee-carousel-indicator-wrapper-top{left:0;right:0;top:0;height:48px;background:linear-gradient(180deg,rgba(0,0,0,.15) 0,rgba(0,0,0,0) 87%)}.bee-carousel-indicator-wrapper-bottom{left:0;right:0;bottom:0;height:48px;background:linear-gradient(180deg,rgba(0,0,0,0) 13%,rgba(0,0,0,.15) 100%)}.bee-carousel-indicator-wrapper-left{left:0;top:0;width:48px;height:100%;background:linear-gradient(90deg,rgba(0,0,0,.15) 0,rgba(0,0,0,0) 87%)}.bee-carousel-indicator-wrapper-right{right:0;top:0;width:48px;height:100%;background:linear-gradient(90deg,rgba(0,0,0,0) 13%,rgba(0,0,0,.15) 100%)}.bee-carousel-indicator-wrapper-outer{left:0;right:0;background:0 0}.bee-carousel-indicator-bottom{bottom:12px;left:50%;transform:translateX(-50%)}.bee-carousel-indicator-top{top:12px;left:50%;transform:translateX(-50%)}.bee-carousel-indicator-left{left:12px;top:50%;transform:translate(-50%,-50%) rotate(90deg)}.bee-carousel-indicator-right{right:12px;top:50%;transform:translate(50%,-50%) rotate(90deg)}.bee-carousel-indicator-outer{left:50%;transform:translateX(-50%);padding:4px;border-radius:20px;background-color:transparent}.bee-carousel-indicator-outer.bee-carousel-indicator-dot{bottom:-22px}.bee-carousel-indicator-outer.bee-carousel-indicator-line{bottom:-20px}.bee-carousel-indicator-outer.bee-carousel-indicator-slider{padding:0;bottom:-16px;background-color:rgba(var(--bee-gray-4),.5)}.bee-carousel-indicator-outer .bee-carousel-indicator-item{background-color:rgba(var(--bee-gray-4),.5)}.bee-carousel-indicator-outer .bee-carousel-indicator-item-active,.bee-carousel-indicator-outer .bee-carousel-indicator-item:hover{background-color:var(--bee-color-fill-4)}.bee-carousel-indicator-item{display:inline-block;border-radius:var(--bee-border-radius-medium);background-color:rgba(255,255,255,.3);cursor:pointer}.bee-carousel-indicator-item-active,.bee-carousel-indicator-item:hover{background-color:var(--bee-color-white)}.bee-carousel-indicator-dot .bee-carousel-indicator-item{width:6px;height:6px;border-radius:50%}.bee-carousel-indicator-dot .bee-carousel-indicator-item:not(:last-child){margin-right:8px}.bee-carousel-indicator-line .bee-carousel-indicator-item{width:12px;height:4px}.bee-carousel-indicator-line .bee-carousel-indicator-item:not(:last-child){margin-right:8px}.bee-carousel-indicator-slider{width:48px;height:4px;border-radius:var(--bee-border-radius-medium);background-color:rgba(255,255,255,.3);cursor:pointer}.bee-carousel-indicator-slider .bee-carousel-indicator-item{position:absolute;top:0;height:100%;transition:left .3s}.bee-carousel-arrow>div{display:flex;align-items:center;justify-content:center;position:absolute;width:24px;height:24px;border-radius:50%;color:var(--bee-color-white);background-color:rgba(255,255,255,.3);cursor:pointer;z-index:2}.bee-carousel-arrow>div:focus-visible{box-shadow:0 0 0 2px var(--bee-color-primary-light-3)}.bee-carousel-arrow>div>svg{color:var(--bee-color-white);font-size:14px}.bee-carousel-arrow>div:hover{background-color:rgba(255,255,255,.5)}.bee-carousel-arrow-left{left:12px;top:50%;transform:translateY(-50%)}.bee-carousel-arrow-right{top:50%;transform:translateY(-50%);right:12px}.bee-carousel-arrow-top{left:50%;transform:translateX(-50%);top:12px}.bee-carousel-arrow-bottom{left:50%;transform:translateX(-50%);bottom:12px}.bee-carousel-arrow-hover div{opacity:0;transition:all .3s}.bee-carousel:hover .bee-carousel-arrow-hover div{opacity:1}.bee-carousel-rtl .bee-carousel-indicator-dot .bee-carousel-indicator-item:not(:last-child){margin-left:8px;margin-right:0}.bee-carousel-rtl .bee-carousel-indicator-line .bee-carousel-indicator-item:not(:last-child){margin-left:8px;margin-right:0}body[bee-theme=dark] .bee-carousel-arrow>div{background-color:rgba(var(--bee-gray-1),.3)}body[bee-theme=dark] .bee-carousel-arrow>div:hover{background-color:rgba(var(--bee-gray-1),.5)}body[bee-theme=dark] .bee-carousel-indicator-item,body[bee-theme=dark] .bee-carousel-indicator-slider{background-color:rgba(var(--bee-gray-1),.3)}body[bee-theme=dark] .bee-carousel-indicator-item-active,body[bee-theme=dark] .bee-carousel-indicator-item:hover{background-color:var(--bee-color-white)}body[bee-theme=dark] .bee-carousel-indicator-outer.bee-carousel-indicator-slider{background-color:rgba(var(--bee-gray-4),.5)}body[bee-theme=dark] .bee-carousel-indicator-outer .bee-carousel-indicator-item-active,body[bee-theme=dark] .bee-carousel-indicator-outer .bee-carousel-indicator-item:hover{background-color:var(--bee-color-fill-4)}