Simpler carousel indicators css (#26996)
This commit is contained in:
parent
b652932f0c
commit
0e8831505a
|
@ -170,7 +170,7 @@
|
||||||
.carousel-indicators {
|
.carousel-indicators {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 10px;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 15;
|
z-index: 15;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -182,7 +182,7 @@
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
position: relative;
|
box-sizing: content-box;
|
||||||
flex: 0 1 auto;
|
flex: 0 1 auto;
|
||||||
width: $carousel-indicator-width;
|
width: $carousel-indicator-width;
|
||||||
height: $carousel-indicator-height;
|
height: $carousel-indicator-height;
|
||||||
|
@ -191,28 +191,12 @@
|
||||||
text-indent: -999px;
|
text-indent: -999px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: $carousel-indicator-active-bg;
|
background-color: $carousel-indicator-active-bg;
|
||||||
|
background-clip: padding-box;
|
||||||
|
// Use transparent borders to increase the hit area by 10px on top and bottom.
|
||||||
|
border-top: $carousel-indicator-hit-area-height solid transparent;
|
||||||
|
border-bottom: $carousel-indicator-hit-area-height solid transparent;
|
||||||
opacity: .5;
|
opacity: .5;
|
||||||
@include transition($carousel-indicator-transition);
|
@include transition($carousel-indicator-transition);
|
||||||
|
|
||||||
// Use pseudo classes to increase the hit area by 10px on top and bottom.
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
top: -10px;
|
|
||||||
left: 0;
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
height: 10px;
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
bottom: -10px;
|
|
||||||
left: 0;
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
height: 10px;
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
|
|
|
@ -924,25 +924,26 @@ $breadcrumb-border-radius: $border-radius !default;
|
||||||
|
|
||||||
// Carousel
|
// Carousel
|
||||||
|
|
||||||
$carousel-control-color: $white !default;
|
$carousel-control-color: $white !default;
|
||||||
$carousel-control-width: 15% !default;
|
$carousel-control-width: 15% !default;
|
||||||
$carousel-control-opacity: .5 !default;
|
$carousel-control-opacity: .5 !default;
|
||||||
|
|
||||||
$carousel-indicator-width: 30px !default;
|
$carousel-indicator-width: 30px !default;
|
||||||
$carousel-indicator-height: 3px !default;
|
$carousel-indicator-height: 3px !default;
|
||||||
$carousel-indicator-spacer: 3px !default;
|
$carousel-indicator-hit-area-height: 10px !default;
|
||||||
$carousel-indicator-active-bg: $white !default;
|
$carousel-indicator-spacer: 3px !default;
|
||||||
$carousel-indicator-transition: opacity .6s ease !default;
|
$carousel-indicator-active-bg: $white !default;
|
||||||
|
$carousel-indicator-transition: opacity .6s ease !default;
|
||||||
|
|
||||||
$carousel-caption-width: 70% !default;
|
$carousel-caption-width: 70% !default;
|
||||||
$carousel-caption-color: $white !default;
|
$carousel-caption-color: $white !default;
|
||||||
|
|
||||||
$carousel-control-icon-width: 20px !default;
|
$carousel-control-icon-width: 20px !default;
|
||||||
|
|
||||||
$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||||
$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||||
|
|
||||||
$carousel-transition: transform .6s ease !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
|
$carousel-transition: transform .6s ease !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
|
||||||
|
|
||||||
|
|
||||||
// Close
|
// Close
|
||||||
|
|
Loading…
Reference in New Issue