39 lines
889 B
SCSS
39 lines
889 B
SCSS
|
// Fix tab selector borders in bs3.
|
||
|
|
.nav-tabs>li,
|
||
|
|
.nav-pills>li {
|
||
|
|
@extend .nav-item;
|
||
|
|
}
|
||
|
|
.nav-tabs>li>a,
|
||
|
|
.nav-pills>li>a {
|
||
|
|
@extend .nav-link;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Active tab/pill.
|
||
|
|
//
|
||
|
|
// bs3 uses .nav>li.active>a, bs4 uses .nav>li>a.active or .nav>li.show>a.
|
||
|
|
//
|
||
|
|
// My original approach to this was making .nav>li.active @extend .show, but
|
||
|
|
// after a lot of trial and error I could not get it to fully work.
|
||
|
|
.nav-tabs>li.active>a {
|
||
|
|
color: $nav-tabs-link-active-color;
|
||
|
|
background-color: $nav-tabs-link-active-bg;
|
||
|
|
border-color: $nav-tabs-link-active-border-color;
|
||
|
|
}
|
||
|
|
.nav-pills>li.active>a {
|
||
|
|
color: $nav-pills-link-active-color;
|
||
|
|
background-color: $nav-pills-link-active-bg;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Support vertical pills
|
||
|
|
.nav-stacked {
|
||
|
|
// Don't extend the .flex-column utility, it uses !important
|
||
|
|
// @extend .flex-column;
|
||
|
|
flex-direction: column;
|
||
|
|
-webkit-flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.in {
|
||
|
|
@extend .show;
|
||
|
|
}
|