css: Use SCSS nesting for `.carousel-indicators`.

This commit is contained in:
SiddharthVarshney 2020-07-19 16:07:01 +05:30 committed by Tim Abbott
parent 7f2c5a7015
commit 5d6df3dc01
1 changed files with 33 additions and 33 deletions

View File

@ -1564,43 +1564,43 @@ nav {
justify-content: center; justify-content: center;
padding-left: 0; padding-left: 0;
list-style: none; list-style: none;
}
.carousel-indicators li { li {
position: relative; position: relative;
flex: 0 1 auto; flex: 0 1 auto;
width: 10px; width: 10px;
height: 10px;
border-radius: 10px;
margin-right: 10px;
margin-left: 10px;
text-indent: -999px;
cursor: pointer;
background-color: hsl(222, 12%, 66%);
transition: background .1s ease;
&::before {
position: absolute;
top: -10px;
left: 0;
display: inline-block;
width: 100%;
height: 10px; height: 10px;
content: ""; border-radius: 10px;
} margin-right: 10px;
margin-left: 10px;
text-indent: -999px;
cursor: pointer;
background-color: hsl(222, 12%, 66%);
transition: background .1s ease;
&::after { &::before {
position: absolute; position: absolute;
bottom: -10px; top: -10px;
left: 0; left: 0;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
height: 10px; height: 10px;
content: ""; content: "";
} }
&.active { &::after {
background-color: hsl(220, 23%, 33%); position: absolute;
bottom: -10px;
left: 0;
display: inline-block;
width: 100%;
height: 10px;
content: "";
}
&.active {
background-color: hsl(220, 23%, 33%);
}
} }
} }