amazeui
Version:
Sleek, intuitive, and powerful front-end framework for faster and easier web development.
102 lines (83 loc) • 1.53 kB
text/less
/**
* Slider Theme: d3
*/
.am-slider-d3 {
@desc-color: #fff;
@desc-bg-color: rgba(0, 0, 0, 0.7);
margin-bottom: 10px;
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 {
position: absolute;
bottom: 0;
color: @desc-color;
width: 100%;
background-color: @desc-bg-color;
padding: 8px 5px;
p {
margin: 0;
font-size: 1.3rem;
.text-overflow(block);
}
}
.am-slider-title {
font-weight: normal;
margin-bottom: 5px;
.text-overflow(block);
}
/* Control Nav */
.am-control-thumbs {
position: static;
overflow: hidden;
// display: flex;
li {
// flex: 1;
padding: 12px 4px 4px;
position: relative;
}
img {
width: 100%;
display: block;
opacity: .85;
cursor: pointer;
&:hover {
opacity: 1;
}
}
.am-active {
opacity: 1;
cursor: default;
& + i {
position: absolute;
top: 0;
left: 50%;
content: "";
.caret-down(8px, @desc-bg-color);
margin-left: -4px;
transition: all 0.2s;
}
}
}
.am-direction-nav,
.am-pauseplay {
display: none;
}
.hook-am-slider-d3;
}
.hook-am-slider-d3() {
// for mother fucker browsers
.am-control-thumbs {
display: table;
li {
display: table-cell;
width: 1%;
}
}
}