@use '../helpers/baseMixin.scss'; .vxe-carousel { position: relative; font-size: var(--vxe-ui-font-size-default); color: var(--vxe-ui-font-color); font-family: var(--vxe-ui-font-family); background-color: var(--vxe-ui-layout-background-color); overflow: hidden; &:hover { .vxe-carousel--indicators { opacity: 1; } .vxe-carousel--previous-btn, .vxe-carousel--next-btn { opacity: 1; } &.is--horizontal { .vxe-carousel--previous-btn, .vxe-carousel--next-btn { transform: translate(0, -50%); } } &.is--vertical { .vxe-carousel--previous-btn, .vxe-carousel--next-btn { transform: translate(-50%, 0); } } } &.is--horizontal { .vxe-carousel--list { height: 100%; flex-direction: row; } .vxe-carousel--indicators { flex-direction: row; bottom: 0.3em; left: 50%; padding: 0.15em 0.3em; transform: translateX(-50%); &:hover { transform: translateX(-50%) scale(1.1); } } .vxe-carousel--indicators-item { margin: 0.2em 0.25em; } .vxe-carousel--previous-btn, .vxe-carousel--next-btn { top: 50%; transform: translate(0, -50%); &:hover { transform: translate(0, -50%) scale(1.1); } &:active { transform: translate(0, -50%) scale(0.8); } } .vxe-carousel--previous-btn { left: 0.3em; transform: translate(-0.8em, -50%); } .vxe-carousel--next-btn { right: 0.3em; transform: translate(0.8em, -50%); } } &.is--vertical { .vxe-carousel--list { width: 100%; flex-direction: column; } .vxe-carousel--indicators { display: flex; flex-direction: column; padding: 0.3em 0.15em; top: 50%; right: 0.3em; transform: translateY(-50%); &:hover { transform: translateY(-50%) scale(1.1); } } .vxe-carousel--indicators-item { margin: 0.25em 0.2em; } .vxe-carousel--previous-btn, .vxe-carousel--next-btn { left: 50%; &:hover { transform: translate(-50%, 0) scale(1.1); } &:active { transform: translate(-50%, 0) scale(0.8); } } .vxe-carousel--previous-btn { top: 0.3em; transform: translate(-50%, -0.8em); } .vxe-carousel--next-btn { bottom: 0.3em; transform: translate(-50%, 0.8em); } } } .vxe-carousel--slots { display: none; } .vxe-carousel--item-wrapper { position: relative; width: 100%; overflow: hidden; } .vxe-carousel--list { position: absolute; left: 0; top: 0; display: flex; outline: 0; @include baseMixin.createAnimationTransition(transform, .2s); } .vxe-carousel--item-inner { width: 100%; height: 100%; text-align: center; flex-grow: 1; } .vxe-carousel--item-img { max-width: 100%; max-height: 100%; } .vxe-carousel--indicators { position: absolute; display: inline-flex; background-color: rgba(0, 0, 0, 0.6); border-radius: 0.6em; opacity: 0; @include baseMixin.createAnimationTransition(all, .3s); } .vxe-carousel--indicators-item { width: 0.8em; height: 0.8em; border-radius: 50%; background-color: rgba(255, 255, 255, 0.8); cursor: pointer; @include baseMixin.createAnimationTransition(all, .2s); &.is--active { background-color: rgba(255, 255, 255, 1); } &:hover { background-color: rgba(255, 255, 255, 0.9); } &:active { background-color: var(--vxe-ui-font-primary-color); transform: scale(0.8); } } .vxe-carousel--previous-btn, .vxe-carousel--next-btn { display: flex; flex-direction: row; align-items: center; justify-content: center; position: absolute; width: 1.8em; height: 1.8em; border-radius: 50%; font-size: 1.4em; background-color: rgba(0, 0, 0, 0.8); opacity: 0; color: rgba(255, 255, 255, 0.6); cursor: pointer; @include baseMixin.createAnimationTransition(all, .2s); &:hover { color: rgba(255, 255, 255, 1); } &:active { color: var(--vxe-ui-font-primary-color); background-color: rgba(0, 0, 0, 0.6); } }