rename and un-nest icons

This commit is contained in:
Mark Otto 2016-12-04 21:39:46 -08:00
parent c2c4b5ba76
commit 8f06eebe44
1 changed files with 41 additions and 43 deletions

View File

@ -87,10 +87,11 @@
outline: 0; outline: 0;
opacity: .9; opacity: .9;
} }
}
// Toggles // Toggles
.icon-prev, .carousel-control-icon-prev,
.icon-next { .carousel-control-icon-next {
position: absolute; position: absolute;
top: 50%; top: 50%;
z-index: 5; z-index: 5;
@ -101,26 +102,25 @@
font-family: serif; font-family: serif;
line-height: 1; line-height: 1;
} }
.icon-prev { .carousel-control-icon-prev {
left: 50%; left: 50%;
margin-left: -($carousel-icon-width / 2); margin-left: -($carousel-icon-width / 2);
} }
.icon-next { .carousel-control-icon-next {
right: 50%; right: 50%;
margin-right: -($carousel-icon-width / 2); margin-right: -($carousel-icon-width / 2);
} }
.icon-prev { .carousel-control-icon-prev {
&::before { &::before {
content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
} }
} }
.icon-next { .carousel-control-icon-next {
&::before { &::before {
content: "\203a";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) content: "\203a";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
} }
} }
}
// Optional indicator pips // Optional indicator pips
@ -198,21 +198,19 @@
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
// Scale up the controls a smidge // Scale up the controls a smidge
.carousel-control { .carousel-control-icon-prev,
.icon-prev, .carousel-control-icon-next {
.icon-next {
width: $carousel-control-sm-up-size; width: $carousel-control-sm-up-size;
height: $carousel-control-sm-up-size; height: $carousel-control-sm-up-size;
margin-top: -($carousel-control-sm-up-size / 2); margin-top: -($carousel-control-sm-up-size / 2);
font-size: $carousel-control-sm-up-size; font-size: $carousel-control-sm-up-size;
} }
.icon-prev { .carousel-control-icon-prev {
margin-left: -($carousel-control-sm-up-size / 2); margin-left: -($carousel-control-sm-up-size / 2);
} }
.icon-next { .carousel-control-icon-next {
margin-right: -($carousel-control-sm-up-size / 2); margin-right: -($carousel-control-sm-up-size / 2);
} }
}
// Show and left align the captions // Show and left align the captions
.carousel-caption { .carousel-caption {