@sms-frontend/components/lib/Carousel/style/index.css

SMS Design React UI Library.

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