kui-vue
Version:
A high quality UI Toolkit built on Vue.js 2.0
134 lines (133 loc) • 2.14 kB
text/less
@import '../../styles/var.less';
.k-carousel {
position: relative;
display: block;
overflow: hidden;
width: 100%;
&:hover {
[class*='k-carousel-arrow'] {
opacity: .2;
}
}
.k-carousel-warpper {
transition: transform .5s ease-in-out;
width: 100%;
height: 100%;
}
.k-carousel-item {
float: left;
height: 100%;
min-height: 1px;
display: block;
}
.k-carousel-dots {
width: 100%;
text-align: center;
list-style: none;
z-index: 10;
position: absolute;
line-height: 1;
bottom: 10px;
left: 0;
padding: 0;
li {
display: inline-block;
background: #fff;
width: 16px;
height: 3px;
margin: 0 3px;
opacity: .3;
border-radius: 1px;
transition: all .5s ease-in-out;
cursor: pointer;
&:hover {
opacity: .8;
}
}
.k-carousel-dots-active {
width: 25px;
opacity: 1;
}
}
.k-carousel-dots-radius {
li {
width: 8px;
height: 8px;
border-radius: 50%;
}
.k-carousel-dots-active {
width: 8px;
opacity: 1;
}
}
[class*='k-carousel-arrow'] {
position: absolute;
top: 50%;
z-index: 100;
left: 10px;
background: #000;
border-radius: 50%;
height: 36px;
width: 36px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 36px;
opacity: 0;
margin-top: -18px;
cursor: pointer;
color: #fff;
transition: opacity .3s ease-in-out;
&:hover {
opacity: .5;
}
}
.k-carousel-arrow-left {
transform: rotate(-90deg);
}
.k-carousel-arrow-right {
transform: rotate(90deg);
left: auto;
right: 10px;
}
}
.k-carousel-vertical {
.k-carousel-item {
float: auto;
width: 100%;
height: auto;
}
.k-carousel-dots {
bottom: auto;
top: 50%;
transform: translateY(-50%);
right: 0;
height: auto;
width: 17px;
left: auto;
li {
width: 3px;
height: 16px;
margin: 5px 0;
display: block;
}
.k-carousel-dots-active {
height: 25px;
width: 3px;
opacity: 1;
}
}
.k-carousel-dots-radius {
li {
width: 8px;
height: 8px;
border-radius: 50%;
}
.k-carousel-dots-active {
height: 8px;
width: 8px;
opacity: 1;
}
}
}