mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
96be06e32b
* Dynamic tabs: use buttons rather than links - change docs - add mention that tabs should be <button> elements - tweak styles to neutralise border and background * Update js unit and visual test accordingly - replace links with buttons - make one specific test that uses links instead of buttons, as we still want to support it despite it being non-semantically appropriate - Leaving a couple of tests for now. The test for removed tabs should be redone so that tabs are removed programmatically (as the approach of having that close button inside the link is invalid and broken markup). The test for dropdowns should be removed together we actually ripping out the handling for dropdowns in the tab.js code (arguably a breaking change, though we discouraged this for a few versions and effectively "deprecated" it) * Add isolation:isolate to prevent focus being overlapped https://github.com/twbs/bootstrap/pull/32630#issuecomment-756015766
133 lines
2.5 KiB
SCSS
133 lines
2.5 KiB
SCSS
// Base class
|
|
//
|
|
// Kickstart any navigation component with a set of style resets. Works with
|
|
// `<nav>`s, `<ul>`s or `<ol>`s.
|
|
|
|
.nav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding-left: 0;
|
|
margin-bottom: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-link {
|
|
display: block;
|
|
padding: $nav-link-padding-y $nav-link-padding-x;
|
|
@include font-size($nav-link-font-size);
|
|
font-weight: $nav-link-font-weight;
|
|
color: $nav-link-color;
|
|
text-decoration: if($link-decoration == none, null, none);
|
|
@include transition($nav-link-transition);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $nav-link-hover-color;
|
|
text-decoration: if($link-hover-decoration == underline, none, null);
|
|
}
|
|
|
|
// Disabled state lightens text
|
|
&.disabled {
|
|
color: $nav-link-disabled-color;
|
|
pointer-events: none;
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Tabs
|
|
//
|
|
|
|
.nav-tabs {
|
|
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
|
|
|
|
.nav-link {
|
|
margin-bottom: -$nav-tabs-border-width;
|
|
background: none;
|
|
border: $nav-tabs-border-width solid transparent;
|
|
@include border-top-radius($nav-tabs-border-radius);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
border-color: $nav-tabs-link-hover-border-color;
|
|
// Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
|
|
isolation: isolate;
|
|
}
|
|
|
|
&.disabled {
|
|
color: $nav-link-disabled-color;
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
.nav-link.active,
|
|
.nav-item.show .nav-link {
|
|
color: $nav-tabs-link-active-color;
|
|
background-color: $nav-tabs-link-active-bg;
|
|
border-color: $nav-tabs-link-active-border-color;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
// Make dropdown border overlap tab border
|
|
margin-top: -$nav-tabs-border-width;
|
|
// Remove the top rounded corners here since there is a hard edge above the menu
|
|
@include border-top-radius(0);
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Pills
|
|
//
|
|
|
|
.nav-pills {
|
|
.nav-link {
|
|
background: none;
|
|
border: 0;
|
|
@include border-radius($nav-pills-border-radius);
|
|
}
|
|
|
|
.nav-link.active,
|
|
.show > .nav-link {
|
|
color: $nav-pills-link-active-color;
|
|
@include gradient-bg($nav-pills-link-active-bg);
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Justified variants
|
|
//
|
|
|
|
.nav-fill {
|
|
> .nav-link,
|
|
.nav-item {
|
|
flex: 1 1 auto;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.nav-justified {
|
|
> .nav-link,
|
|
.nav-item {
|
|
flex-basis: 0;
|
|
flex-grow: 1;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
|
|
// Tabbable tabs
|
|
//
|
|
// Hide tabbable panes to start, show them when `.active`
|
|
|
|
.tab-content {
|
|
> .tab-pane {
|
|
display: none;
|
|
}
|
|
> .active {
|
|
display: block;
|
|
}
|
|
}
|