mirror of
https://github.com/twbs/bootstrap.git
synced 2024-09-22 19:17:16 +00:00
86caa76f54
Fixes #18733 in IE9-11 Also adds comments to the code explaining this and #18740.
40 lines
1.7 KiB
SCSS
40 lines
1.7 KiB
SCSS
.breadcrumb {
|
|
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
|
|
margin-bottom: $spacer-y;
|
|
list-style: none;
|
|
background-color: $breadcrumb-bg;
|
|
@include border-radius($border-radius);
|
|
@include clearfix;
|
|
}
|
|
|
|
.breadcrumb-item {
|
|
float: left;
|
|
|
|
// The separator between breadcrumbs (by default, a forward-slash: "/")
|
|
+ .breadcrumb-item::before {
|
|
display: inline-block; // Suppress underlining of the separator in modern browsers
|
|
padding-right: $breadcrumb-item-padding;
|
|
padding-left: $breadcrumb-item-padding;
|
|
color: $breadcrumb-divider-color;
|
|
content: "#{$breadcrumb-divider}";
|
|
}
|
|
|
|
// When not using <ul> markup, browsers normally underline the ::before pseudo-element
|
|
// (the separator between the breadcrumbs) when the user hovers over its originating breadcrumb <a> element.
|
|
// In modern browsers, this underline can be suppressed by setting `display:inline-block` on the pseudo-element.
|
|
// (Why doesn't simply setting `text-decoration:none` on the pseudo-element work? Because that's how text-decoration propagation has been spec'd in CSS.)
|
|
// IE9-11 suffer from a bug which prevents that solution from working.
|
|
// For them, we apply a hack where we first set `text-decoration:underline` and then later set `text-decoration:none`, both on the pseudo-element.
|
|
// This tricks IE into suppressing the underline.
|
|
+ .breadcrumb-item:hover::before {
|
|
text-decoration: underline; // Part 1 of IE9-11 hack to suppress the underline
|
|
}
|
|
+ .breadcrumb-item:hover::before {
|
|
text-decoration: none; // Suppress underlining of the separator in IE9-11 (requires an earlier setting of `text-decoration:underline`)
|
|
}
|
|
|
|
&.active {
|
|
color: $breadcrumb-active-color;
|
|
}
|
|
}
|