vue-devui/carousel/style.css

DevUI components based on Vite and Vue3

.devui-icon__container{display:inline-block;color:var(--devui-icon-fill, #71757f)}.devui-icon__container>*:not(:last-child){vertical-align:middle;margin-right:8px}.devui-icon__container i{vertical-align:middle;transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--no-slots i,.devui-icon--no-slots img{display:block}.devui-icon--disabled{color:var(--devui-disabled-text, #cfd0d3);cursor:not-allowed}.devui-icon--disabled i{color:var(--devui-disabled-text, #cfd0d3)}.devui-icon--operable:not(.devui-icon--disabled){cursor:pointer;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--operable:not(.devui-icon--disabled) i{cursor:pointer}.devui-icon--operable:hover:not(.devui-icon--disabled){color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:hover:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-hover, var(--devui-list-item-hover-bg, #f2f2f3))}.devui-icon--operable:hover:not(.devui-icon--disabled) i{color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:active:not(.devui-icon--disabled){color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable:active:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-active, var(--devui-list-item-active-bg, #f2f5fc))}.devui-icon--operable:active:not(.devui-icon--disabled) i{color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable.devui-icon__container{height:32px;line-height:32px;padding:0 8px;margin-left:-8px;border-radius:var(--devui-border-radius, 2px);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--spin{animation:iconSpin 2.5s linear infinite}.devui-svg-icon{vertical-align:middle}@keyframes iconSpin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.devui-icon-group{display:inline-flex;align-items:center}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable){padding:8px;margin-left:0}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable):first-child{margin-left:-8px}.devui-icon-group>*:not(:first-child){margin-left:0}.devui-carousel{display:block;position:relative}.devui-carousel .devui-carousel__arrow{position:absolute;width:100%;top:50%}.devui-carousel .devui-carousel__arrow .arrow-left{position:absolute;top:-18px;z-index:2;cursor:pointer;width:36px;height:36px;border-radius:18px;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-hover, 0 8px 16px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));display:inline-flex;align-items:center;justify-content:center;border:0;left:10px}.devui-carousel .devui-carousel__arrow .arrow-left:hover{background:var(--devui-area, #f5f5f5)}.devui-carousel .devui-carousel__arrow .arrow-left svg polygon{fill:var(--devui-text, #252b3a)}.devui-carousel .devui-carousel__arrow .arrow-right{position:absolute;top:-18px;z-index:2;cursor:pointer;width:36px;height:36px;border-radius:18px;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-hover, 0 8px 16px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));display:inline-flex;align-items:center;justify-content:center;border:0;right:10px}.devui-carousel .devui-carousel__arrow .arrow-right:hover{background:var(--devui-area, #f5f5f5)}.devui-carousel .devui-carousel__arrow .arrow-right svg polygon{fill:var(--devui-text, #252b3a)}.devui-carousel .devui-carousel__item-wrapper{position:relative;overflow:hidden;height:100%}.devui-carousel .devui-carousel__item-wrapper .devui-carousel__item-container{display:flex;height:100%;position:relative}.devui-carousel .devui-carousel__item-wrapper .devui-carousel__item-container .devui-carousel__item{flex:1;position:relative;height:100%}.devui-carousel .devui-carousel__dots{position:absolute;display:flex;justify-content:center;width:100%;list-style:none}.devui-carousel .devui-carousel__dots.bottom{bottom:8px}.devui-carousel .devui-carousel__dots.top{top:8px}.devui-carousel .devui-carousel__dots .dot-item{width:6px;height:6px;border-radius:3px;margin-right:8px;background:var(--devui-icon-fill, #71757f)}.devui-carousel .devui-carousel__dots .dot-item:hover{cursor:pointer;background:var(--devui-icon-fill-hover, #252b3a)}.devui-carousel .devui-carousel__dots .dot-item.active{width:24px;background:var(--devui-icon-fill-active, #252b3a);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-carousel .devui-carousel__arrow .arrow-left,.devui-carousel .devui-carousel__arrow .arrow-right{transition:background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))}