66 lines
1.4 KiB
Plaintext
66 lines
1.4 KiB
Plaintext
// Pill nav
|
|
//
|
|
// Horizontal navigation with large top-aligned tab visuals.
|
|
|
|
.nav-tab {
|
|
.list-unstyled();
|
|
margin-bottom: @line-height-computed;
|
|
border-bottom: 1px solid @nav-tabs-border-color;
|
|
&:extend(.clearfix all);
|
|
}
|
|
|
|
.nav-tab-item {
|
|
position: relative;
|
|
display: block;
|
|
float: left;
|
|
// Make the list-items overlay the bottom border
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.nav-tab-link {
|
|
display: block;
|
|
padding: @nav-link-padding;
|
|
margin-right: .2rem;
|
|
line-height: @line-height-base;
|
|
border: 1px solid transparent;
|
|
.border-radius(@border-radius-base @border-radius-base 0 0);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
background-color: @nav-link-hover-bg;
|
|
border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
|
|
}
|
|
}
|
|
|
|
// Open dropdown and active states
|
|
.open,
|
|
.active {
|
|
> .nav-tab-link {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
color: @nav-tabs-active-link-hover-color;
|
|
background-color: @nav-tabs-active-link-hover-bg;
|
|
border: 1px solid @nav-tabs-active-link-hover-border-color;
|
|
border-bottom-color: transparent;
|
|
cursor: default;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Disabled state sets text to gray and nukes hover/tab effects
|
|
.disabled {
|
|
> .nav-tab-link {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
color: @nav-disabled-link-color;
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
}
|
|
|