157 lines
3.4 KiB
SCSS
157 lines
3.4 KiB
SCSS
/* CAROUSEL - STYLE 1 */
|
|
.carousel--style-1 .carousel-control {
|
|
position: absolute;
|
|
top: 50%;
|
|
bottom: auto;
|
|
left: 0;
|
|
width: 50px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
margin-top: -25px;
|
|
font-size: 20px;
|
|
background: $carousel-control-bg;
|
|
color: $carousel-control-color;
|
|
text-align: center;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
|
|
filter: alpha(opacity=80);
|
|
opacity: 0.8;
|
|
-webkit-transition: all 100ms linear;
|
|
transition: all 100ms linear;
|
|
}
|
|
|
|
.carousel--style-1 .carousel-control.right {
|
|
right: 0;
|
|
left: auto;
|
|
border-top-left-radius: $border-radius;
|
|
border-bottom-left-radius: $border-radius;
|
|
}
|
|
|
|
.carousel--style-1 .carousel-control.left {
|
|
left: 0;
|
|
right: auto;
|
|
border-top-right-radius: $border-radius;
|
|
border-bottom-right-radius: $border-radius;
|
|
}
|
|
|
|
.carousel--style-1 .carousel-control:hover {
|
|
width: 70px;
|
|
background: $carousel-control-bg-hover;
|
|
color: $carousel-control-color-hover;
|
|
filter: alpha(opacity=100);
|
|
opacity: 1;
|
|
}
|
|
|
|
.carousel--style-1 .carousel-inner .carousel-item img {
|
|
//max-width: 100%;
|
|
}
|
|
// Carousel: STYLE 1 (variation 1)
|
|
.carousel--style-1-v1 .carousel-control {
|
|
opacity: 0;
|
|
}
|
|
|
|
.carousel--style-1-v1:hover .carousel-control {
|
|
opacity: 1;
|
|
}
|
|
// Carousel: STYLE 2
|
|
.carousel--style-2 .carousel-control {
|
|
position: absolute;
|
|
top: 50%;
|
|
bottom: auto;
|
|
left: 0;
|
|
width: 50px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
margin-top: -25px;
|
|
font-size: 20px;
|
|
background: rgba(37,37,37,0.8);
|
|
color: #fff;
|
|
text-align: center;
|
|
text-shadow: 0 1px 2px rgba(0,0,0,0.6);
|
|
filter:alpha(opacity=80);
|
|
opacity: 0.8;
|
|
-webkit-transition: all 100ms linear;
|
|
transition: all 100ms linear;
|
|
}
|
|
|
|
.carousel--style-2 .carousel-control.right {
|
|
right: 0;
|
|
left: auto;
|
|
border-top-left-radius: 2px;
|
|
border-bottom-left-radius: 2px;
|
|
}
|
|
|
|
.carousel--style-2 .carousel-control.left {
|
|
left: 0;
|
|
right: auto;
|
|
border-top-right-radius: 2px;
|
|
border-bottom-right-radius: 2px;
|
|
}
|
|
|
|
.carousel--style-2 .carousel-control:hover {
|
|
width: 70px;
|
|
background: #1f3a93;
|
|
color: #fff;
|
|
filter:alpha(opacity=100);
|
|
opacity: 1;
|
|
}
|
|
|
|
.carousel--style-2 .carousel-inner .carousel-item img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.carousel--style-2 .carousel-indicators {
|
|
position: absolute;
|
|
bottom: -5px;
|
|
left: 50%;
|
|
width: 60%;
|
|
padding-left: 0;
|
|
margin-left: -30%;
|
|
text-align: center;
|
|
list-style: none;
|
|
}
|
|
|
|
.carousel--style-2 .carousel-caption {
|
|
text-shadow: 0;
|
|
text-align: left;
|
|
background: rgba(0,0,0,0.5);
|
|
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
|
|
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
|
|
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#00000000', endColorstr='#a6000000',GradientType=0 );
|
|
color: #fff;
|
|
}
|
|
|
|
.carousel--style-2 .carousel-caption {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
padding: 20px 30px;
|
|
}
|
|
|
|
.carousel--style-2 .carousel-caption .caption-title {
|
|
display: block;
|
|
margin: 10px 0 0;
|
|
padding: 0;
|
|
font-size: 22px;
|
|
line-height: 1.1;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.carousel--style-2 .carousel-caption .caption-subtitle {
|
|
display: block;
|
|
margin: 10px 0 0;
|
|
padding: 0;
|
|
font-size: 16px;
|
|
line-height: 1.1;
|
|
color: #ddd;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.carousel--style-2 .carousel-caption .meta-info-cells li,
|
|
.carousel--style-2 .carousel-caption .meta-info-cells li a,
|
|
.carousel--style-2 .carousel-caption .meta-info-cells li i {
|
|
color: #ddd;
|
|
}
|