redo control icons to use open iconic svgs inlined

This commit is contained in:
Mark Otto 2016-12-04 21:54:45 -08:00
parent d157fcebba
commit 1abe4c83a8
2 changed files with 12 additions and 16 deletions

View File

@ -83,9 +83,9 @@
right: 0;
}
// Toggles
.carousel-control-icon-prev,
.carousel-control-icon-next {
// Icons for within
.carousel-control-prev-icon,
.carousel-control-next-icon {
position: absolute;
top: 50%;
z-index: 5;
@ -95,25 +95,18 @@
margin-top: -($carousel-icon-width / 2);
font-family: serif;
line-height: 1;
background: transparent no-repeat center center;
background-size: 100% 100%;
}
.carousel-control-icon-prev {
.carousel-control-prev-icon {
left: 50%;
margin-left: -($carousel-icon-width / 2);
background-image: $carousel-control-prev-icon-bg;
}
.carousel-control-icon-next {
.carousel-control-next-icon {
right: 50%;
margin-right: -($carousel-icon-width / 2);
}
.carousel-control-icon-prev {
&::before {
content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
}
}
.carousel-control-icon-next {
&::before {
content: "\203a";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
}
background-image: $carousel-control-next-icon-bg;
}

View File

@ -900,6 +900,9 @@ $carousel-caption-color: #fff !default;
$carousel-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' width='8' height='8' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 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' width='8' height='8' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 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;
// 34. Close