amazeui
Version:
Sleek, intuitive, and powerful front-end framework for faster and easier web development.
133 lines (112 loc) • 2.31 kB
text/less
/**
* Slider Theme: c3
*/
.am-slider-c3 {
@desc-color: #fff;
@desc-bg-color: rgba(0,0,0,0.6);
@counter-color: #eee;
@counter-bg-color: @global-primary;
@counter-active-color: #fff;
@direction-nav-color: #fff;
@direction-nav-bg-color: rgba(0,0,0,0.5);
box-shadow: 0 1px 4px rgba(0,0,0,.2);
.am-viewport {
max-height: 2000px;
transition: all 1s ease;
.loading & {
max-height: 300px;
}
}
// desc
.am-slider-desc {
background-color: @desc-bg-color;
position: absolute;
bottom: 10px;
right: 60px;
height: 30px;
left: 0;
padding-right: 5px;
color: @desc-color;
.text-overflow(block);
}
.am-slider-counter {
margin-right: 5px;
display: inline-block;
height: 30px;
background-color: @counter-bg-color;
width: 40px;
text-align: center;
line-height: 30px;
color: @counter-color;
font-size: 1rem;
.am-active {
font-size: 1.8rem;
font-weight: bold;
color: @counter-active-color;
}
}
/* Direction Nav */
.am-direction-nav {
a {
box-sizing: content-box;
display: block;
width: 24px;
height: 24px;
padding: 4px 0;
margin: -16px 0 0;
position: absolute;
top: 50%;
z-index: 10;
overflow: hidden;
opacity: 0.45;
cursor: pointer;
color: @direction-nav-color;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
background-color: @direction-nav-bg-color;
font-size: 0;
text-align: center;
transition: all .3s ease;
&:before {
.am-icon-font;
content: @fa-var-chevron-left;
font-size: 16px;
line-height: 24px;
}
&.am-prev {
left: 0;
padding-right: 5px;
}
&.am-next {
right: 0;
padding-left: 5px;
&:before {
content: @fa-var-chevron-right;
}
}
}
.am-disabled {
opacity: 0;
cursor: default;
}
}
&:hover {
.am-prev {
opacity: 0.7;
&:hover {
opacity: 1;
}
}
.am-next {
opacity: 0.7;
&:hover {
opacity: 1;
}
}
}
.am-control-nav,
.am-pauseplay {
display: none;
}
.hook-am-slider-c3;
}
.hook-am-slider-c3(){}