You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
136 lines
3.7 KiB
136 lines
3.7 KiB
//
|
|
// Slider styles (to be used with galleries.js)
|
|
// --------------------------------------------------
|
|
|
|
// Outer wrapper for slider
|
|
.#{$namespace}slider {
|
|
//-webkit-backface-visibility: hidden;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
position:relative;
|
|
z-index:z("default");
|
|
.#{$namespace}segmented-control.#{$namespace}segmented-control-inverted{
|
|
.#{$namespace}control-item {
|
|
&.#{$namespace}active {
|
|
border-bottom:0;
|
|
}
|
|
}
|
|
~ .#{$namespace}slider-group{
|
|
.#{$namespace}slider-item{
|
|
//@include hairline(double, #c8c7cc, 0); // double grey border.
|
|
border-top: 1px solid #c8c7cc;
|
|
border-bottom: 1px solid #c8c7cc;
|
|
}
|
|
}
|
|
}
|
|
// Inner wrapper for slider (width of all sliders together)
|
|
.#{$namespace}slider-group {
|
|
//加上后好像内嵌轮播时，第一张图片显示有问题
|
|
// -webkit-backface-visibility: hidden;
|
|
position: relative;
|
|
font-size: 0; // Remove spaces from inline-block children
|
|
white-space: nowrap;
|
|
@include transition(all 0s linear);
|
|
|
|
// Individual slider
|
|
.#{$namespace}slider-item {
|
|
// -webkit-backface-visibility: hidden;
|
|
position: relative;
|
|
display: inline-block;
|
|
white-space:normal;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 14px;
|
|
vertical-align: top; // Ensure that li always aligns to top
|
|
>a:not(.#{$namespace}control-item){
|
|
position: relative;
|
|
line-height: 0;
|
|
display: block;
|
|
}
|
|
img{
|
|
width: 100%;
|
|
}
|
|
.#{$namespace}table-view:before,.#{$namespace}table-view:after{
|
|
height:0;
|
|
}
|
|
// .#{$namespace}table-view-cell:last-child:after{
|
|
// height: 0;
|
|
// }
|
|
}
|
|
&.#{$namespace}slider-loop{
|
|
@include transform(translate(-100%, 0px));
|
|
}
|
|
// &.#{$namespace}slider-loop .#{$namespace}slider-item{
|
|
// &:first-child{
|
|
// margin-left: -100%;
|
|
// }
|
|
// &:last-child{
|
|
// margin-right: -100%;
|
|
// }
|
|
// }
|
|
}
|
|
}
|
|
.#{$namespace}slider-title{
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
width: 100%;
|
|
text-align: left;
|
|
text-indent: 12px;
|
|
background-color: #000;
|
|
opacity: 0.8;
|
|
margin: 0;
|
|
}
|
|
.#{$namespace}slider-indicator{
|
|
position: absolute;
|
|
bottom: 8px;
|
|
width: 100%;
|
|
text-align:center;
|
|
background:none;
|
|
&.#{$namespace}segmented-control{
|
|
position:relative;
|
|
bottom:auto;
|
|
// .#{$namespace}control-item{
|
|
// line-height: 40px;
|
|
// }
|
|
}
|
|
.#{$namespace}indicator{
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
background: #aaa;
|
|
width: 6px;
|
|
height: 6px;
|
|
margin: 1px 6px;
|
|
border-radius: 50%;
|
|
@include box-shadow(0 0 1px 1px rgba(130,130,130,.7));
|
|
}
|
|
.#{$namespace}active.#{$namespace}indicator{
|
|
background: #fff;
|
|
}
|
|
.#{$namespace}icon{
|
|
width: 40px;
|
|
height: 30px;
|
|
margin: 3px;
|
|
font-size: 20px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
border: 1px solid #dddddd;
|
|
}
|
|
.#{$namespace}number{
|
|
display: inline-block;
|
|
line-height: 32px;
|
|
width: 58px;
|
|
span{
|
|
color: #ff5053;
|
|
}
|
|
}
|
|
}
|
|
.#{$namespace}slider-progress-bar{
|
|
// -webkit-backface-visibility: hidden;
|
|
@include transform(translateZ(0));
|
|
height:2px;
|
|
z-index:z("default");
|
|
}
|