mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-05 16:42:29 +03:00
Code Activity

move tabs and pills to separate files with unique classes

Browse Source
This commit is contained in:
Mark Otto
2014-07-08 19:00:48 -07:00
parent 6c7a6b4691
commit 0e47ce959c
10 changed files with 374 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
less/bootstrap.less
Vendored
+2
View File
@@ -21,6 +21,8 @@
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "nav-tab.less";
@import "nav-pill.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
less/nav-pill.less
+60
View File
@@ -0,0 +1,60 @@
// Pill nav
//
// Horizontal navigation with large (rounded) rectangle hit areas for links.
.nav-pill {
.list-unstyled();
margin-bottom: @line-height-computed;
&:extend(.clearfix all);
}
.nav-pill-item {
position: relative;
display: block;
float: left;
& + & {
margin-left: .2rem;
}
}
.nav-pill-link {
position: relative;
display: block;
padding: @nav-link-padding;
.border-radius(@nav-pills-border-radius);
&:hover,
&:focus {
text-decoration: none;
background-color: @nav-link-hover-bg;
}
}
// Open dropdown and active states
.open,
.active {
> .nav-pill-link {
&,
&:hover,
&:focus {
color: @nav-pills-active-link-hover-color;
background-color: @nav-pills-active-link-hover-bg;
}
}
}
// Disabled state sets text to gray and nukes hover/tab effects
.disabled {
> .nav-pill-link {
color: @nav-disabled-link-color;
&,
&:hover,
&:focus {
color: @nav-disabled-link-hover-color;
background-color: transparent;
cursor: not-allowed;
}
}
}
less/nav-tab.less
+65
View File
@@ -0,0 +1,65 @@
// 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;
}
}
}