mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-20 12:21:35 +02:00
Code Issues Releases Wiki Activity

Simpler carousel indicators css (#26996)

Browse Source
This commit is contained in:
Martijn Cuppens
2018-08-26 13:53:36 +02:00
committed by XhmikosR
parent b652932f0c
commit 0e8831505a
2 changed files with 21 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
scss/_carousel.scss
View File

@@ -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 {

1
scss/_variables.scss
View File

@@ -930,6 +930,7 @@ $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-hit-area-height: 10px !default;
$carousel-indicator-spacer: 3px !default; $carousel-indicator-spacer: 3px !default;
$carousel-indicator-active-bg: $white !default; $carousel-indicator-active-bg: $white !default;
$carousel-indicator-transition: opacity .6s ease !default; $carousel-indicator-transition: opacity .6s ease !default;