various-ui
Version:
This is a test version of the Vue 3 component library
1 lines • 2.62 kB
CSS
.ui-mv-carousel{--uioption-mv-carousel-indicator-color:var(--uicolor-font-2);--uioption-mv-carousel-control-icon-color:var(--uicolor-font-6);--uioption-mv-carousel-control-border-color:var(--uicolor-font-6);--uioption-mv-carousel-control-background-color:var(--uicolor-font-6-03);--uioption-mv-carousel-indicator-active-color:var(--uicolor-main-color);--uioption-mv-carousel-control-active-icon-color:var(--uicolor-main-color);--uioption-mv-carousel-control-active-border-color:var(--uicolor-font-6);--uioption-mv-carousel-control-active-background-color:var(--uicolor-font-6)}.ui-mv-carousel{position:relative}.ui-mv-carousel>.ui-mv-carousel-main{width:100%;height:100%;overflow:hidden}.ui-mv-carousel>.ui-mv-carousel-main>.ui-mv-carousel-container{height:100%;display:inline-flex;position:relative}.ui-mv-carousel>.ui-mv-carousel-main>.ui-mv-carousel-container>*{transition:none}.ui-mv-carousel>.ui-mv-carousel-control{justify-content:center;border-radius:50%;align-items:center;background:var(--uioption-mv-carousel-control-background-color);transition:all .3s ease-in-out;transform:translate(0,-50%);font-size:20px;position:absolute;display:flex;opacity:0;border:1px solid var(--uioption-mv-carousel-control-border-color);cursor:pointer;height:48px;color:var(--uioption-mv-carousel-control-icon-color);width:48px}.ui-mv-carousel>.ui-mv-carousel-control.ui-mv-carousel-left-control{top:50%;left:0}.ui-mv-carousel>.ui-mv-carousel-control.ui-mv-carousel-left-control .ui-icon{transform:rotate(90deg)}.ui-mv-carousel>.ui-mv-carousel-control.ui-mv-carousel-right-control{top:50%;right:0}.ui-mv-carousel>.ui-mv-carousel-control.ui-mv-carousel-right-control .ui-icon{transform:rotate(-90deg)}.ui-mv-carousel.ui-mv-carousel-always>.ui-mv-carousel-control,.ui-mv-carousel.ui-mv-carousel-hover:hover>.ui-mv-carousel-control{opacity:1}.ui-mv-carousel.ui-mv-carousel-always>.ui-mv-carousel-control.ui-mv-carousel-left-control,.ui-mv-carousel.ui-mv-carousel-hover:hover>.ui-mv-carousel-control.ui-mv-carousel-left-control{transform:translate(100%,-50%)}.ui-mv-carousel.ui-mv-carousel-always>.ui-mv-carousel-control.ui-mv-carousel-right-control,.ui-mv-carousel.ui-mv-carousel-hover:hover>.ui-mv-carousel-control.ui-mv-carousel-right-control{transform:translate(-100%,-50%)}.ui-mv-carousel.ui-mv-carousel-always>.ui-mv-carousel-control:hover,.ui-mv-carousel.ui-mv-carousel-hover:hover>.ui-mv-carousel-control:hover{color:var(--uioption-mv-carousel-control-active-icon-color);border-color:var(--uioption-mv-carousel-control-active-border-color);background-color:var(--uioption-mv-carousel-control-active-background-color)}