mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-11 18:02:28 +03:00
overhaul the entire tabs component structure and docs; remove side nav and make it a nav list to build on new .nav base class
This commit is contained in:
Mark Otto
Vendored
+1
-2
@@ -33,8 +33,7 @@
|
||||
|
||||
// Components: Nav
|
||||
@import "navbar.less";
|
||||
@import "tabs-pills.less";
|
||||
@import "sidenav.less";
|
||||
@import "navs.less";
|
||||
@import "breadcrumbs.less";
|
||||
@import "pagination.less";
|
||||
|
||||
|
||||
+4
-1
@@ -1,4 +1,6 @@
|
||||
// Dropdown Menus
|
||||
// DROPDOWN MENUS
|
||||
// --------------
|
||||
|
||||
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
|
||||
.dropdown {
|
||||
position: relative;
|
||||
@@ -71,6 +73,7 @@
|
||||
text-decoration: none;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
#gradient > .vertical(@blue, @blueDark);
|
||||
#gradient > .vertical(@linkColor, darken(@linkColor, 5%));
|
||||
@shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
|
||||
@@ -20,6 +20,7 @@ legend {
|
||||
line-height: @baseLineHeight * 2;
|
||||
color: @grayDark;
|
||||
border-bottom: 1px solid #eee;
|
||||
-webkit-margin-collapse: separate;
|
||||
}
|
||||
|
||||
// Set font for forms
|
||||
|
||||
+3
-4
@@ -135,7 +135,7 @@
|
||||
|
||||
// Nav for navbar and topbar
|
||||
// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
|
||||
.nav {
|
||||
.navbar .nav {
|
||||
position: relative;
|
||||
left: 0;
|
||||
display: block;
|
||||
@@ -146,7 +146,6 @@
|
||||
float: left;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
float: none;
|
||||
padding: 10px 10px 11px;
|
||||
line-height: 19px;
|
||||
@@ -182,7 +181,7 @@
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
// Dropdowns within the .nav
|
||||
/* // Dropdowns within the .nav
|
||||
.dropdown-toggle:hover,
|
||||
.dropdown.open .dropdown-toggle {
|
||||
background: #444;
|
||||
@@ -213,5 +212,5 @@
|
||||
background-color: #222;
|
||||
border-color: #444;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
+327
@@ -0,0 +1,327 @@
|
||||
// NAVIGATIONS
|
||||
// -----------
|
||||
|
||||
|
||||
|
||||
// BASE CLASS
|
||||
// ----------
|
||||
|
||||
.nav {
|
||||
margin-left: 0;
|
||||
margin-bottom: @baseLineHeight;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// Make links block level
|
||||
.nav > li > a {
|
||||
display: block;
|
||||
}
|
||||
.nav > li > a:hover {
|
||||
text-decoration: none;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// NAV LIST
|
||||
// --------
|
||||
|
||||
.nav.list {
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.nav.list > li > a,
|
||||
.nav.list .nav-header {
|
||||
display: block;
|
||||
padding: 3px 15px;
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
||||
}
|
||||
.nav.list .nav-header {
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
line-height: @baseLineHeight;
|
||||
color: @grayLight;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.nav.list > li + .nav-header {
|
||||
margin-top: 9px;
|
||||
}
|
||||
.nav.list .active > a {
|
||||
color: @white;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
|
||||
background-color: @linkColor;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// TABS AND PILLS
|
||||
// -------------
|
||||
|
||||
// Common styles
|
||||
.tabs,
|
||||
.pills {
|
||||
.clearfix();
|
||||
}
|
||||
.tabs > li,
|
||||
.pills > li {
|
||||
float: left;
|
||||
}
|
||||
.tabs > li > a,
|
||||
.pills > li > a {
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
margin-right: 2px;
|
||||
line-height: 14px; // keeps the overall height an even number
|
||||
}
|
||||
|
||||
// TABS
|
||||
// ----
|
||||
|
||||
// Give the tabs something to sit on
|
||||
.tabs {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
// Make the list-items overlay the bottom border
|
||||
.tabs > li {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
// Actual tabs (as links)
|
||||
.tabs > li > a {
|
||||
padding-top: 9px;
|
||||
padding-bottom: 9px;
|
||||
border: 1px solid transparent;
|
||||
.border-radius(4px 4px 0 0);
|
||||
&:hover {
|
||||
border-color: #eee #eee #ddd;
|
||||
}
|
||||
}
|
||||
// Active state, and it's :hover to override normal :hover
|
||||
.tabs .active > a,
|
||||
.tabs .active > a:hover {
|
||||
color: @gray;
|
||||
background-color: @white;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
// PILLS
|
||||
// -----
|
||||
|
||||
// Links rendered as pills
|
||||
.pills > li > a {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
.border-radius(5px);
|
||||
}
|
||||
|
||||
// Active state
|
||||
.pills .active > a,
|
||||
.pills .active > a:hover {
|
||||
color: @white;
|
||||
background-color: @linkColor;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// STACKED NAV
|
||||
// -----------
|
||||
|
||||
// Stacked tabs and pills
|
||||
.nav.stacked > li {
|
||||
float: none;
|
||||
}
|
||||
.nav.stacked > li > a {
|
||||
margin-right: 0; // no need for the gap between nav items
|
||||
}
|
||||
|
||||
// Tabs
|
||||
.tabs.stacked {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.tabs.stacked > li > a {
|
||||
border: 1px solid #ddd;
|
||||
.border-radius(0);
|
||||
}
|
||||
.tabs.stacked > li:first-child > a {
|
||||
.border-radius(4px 4px 0 0);
|
||||
}
|
||||
.tabs.stacked > li:last-child > a {
|
||||
.border-radius(0 0 4px 4px);
|
||||
}
|
||||
.tabs.stacked > li > a:hover {
|
||||
border-color: #ddd;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
// Pills
|
||||
.pills.stacked > li > a {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.pills.stacked > li:last-child > a {
|
||||
margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
|
||||
}
|
||||
|
||||
|
||||
|
||||
// DROPDOWNS
|
||||
// ---------
|
||||
|
||||
// Position the menu
|
||||
.tabs .dropdown-menu,
|
||||
.pills .dropdown-menu {
|
||||
top: 33px;
|
||||
border-width: 1px;
|
||||
}
|
||||
.pills .dropdown-menu {
|
||||
.border-radius(4px);
|
||||
}
|
||||
.tabs .dropdown-toggle .caret,
|
||||
.pills .dropdown-toggle .caret {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.tabs .open .dropdown-toggle,
|
||||
.pills .open .dropdown-toggle {
|
||||
background-color: #999;
|
||||
border-color: #999;
|
||||
}
|
||||
.tabs .open .caret,
|
||||
.pills .open .caret {
|
||||
border-top-color: #fff;
|
||||
.opacity(100);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// TABBABLE
|
||||
// --------
|
||||
|
||||
.tabbable {
|
||||
margin-bottom: @baseLineHeight;
|
||||
|
||||
// Tabs on top
|
||||
.tabs {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.tab-content {
|
||||
padding: 19px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
// Tabs on bottom
|
||||
&.tabs-bottom .tabs > li {
|
||||
margin-top: -1px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&.tabs-bottom .tabs > li > a {
|
||||
.border-radius(0 0 4px 4px);
|
||||
&:hover {
|
||||
border-bottom-color: transparent;
|
||||
border-top-color: #ddd;
|
||||
}
|
||||
}
|
||||
&.tabs-bottom .tabs > .active > a,
|
||||
&.tabs-bottom .tabs > .active > a:hover {
|
||||
border-color: transparent #ddd #ddd #ddd;
|
||||
}
|
||||
|
||||
// Tabs on left and right
|
||||
&.tabs-left,
|
||||
&.tabs-right {
|
||||
.clearfix();
|
||||
.tabs {
|
||||
// Give a fixed width to avoid floating .tab-con
|
||||
width: 100px;
|
||||
// Unfloat them so they stack
|
||||
> li {
|
||||
float: none;
|
||||
margin-bottom: -1px;
|
||||
> a {
|
||||
margin-bottom: 2px;
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs on left
|
||||
&.tabs-left {
|
||||
.tab-content {
|
||||
margin-left: 100px;
|
||||
}
|
||||
.tabs {
|
||||
float: left;
|
||||
> li {
|
||||
margin-right: -1px;
|
||||
> a {
|
||||
margin-right: 0;
|
||||
.border-radius(4px 0 0 4px);
|
||||
|
||||
&:hover {
|
||||
border-right-color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Active state
|
||||
.active > a,
|
||||
.active > a:hover {
|
||||
border-color: #ddd;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs on right
|
||||
&.tabs-right {
|
||||
.tab-content {
|
||||
margin-right: 100px;
|
||||
}
|
||||
.tabs {
|
||||
float: right;
|
||||
> li {
|
||||
margin-left: -1px;
|
||||
> a {
|
||||
margin-left: 0;
|
||||
.border-radius(0 4px 4px 0);
|
||||
|
||||
&:hover {
|
||||
border-left-color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Active state
|
||||
.active > a,
|
||||
.active > a:hover {
|
||||
border-color: #ddd;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Tabbable areas
|
||||
.tab-content > .tab-pane,
|
||||
.pill-content > .pill-pane {
|
||||
display: none;
|
||||
}
|
||||
.tab-content > .active,
|
||||
.pill-content > .active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -1,43 +0,0 @@
|
||||
// SIDE NAV
|
||||
// --------
|
||||
|
||||
|
||||
.side-nav {
|
||||
padding: @baseLineHeight / 2 0;
|
||||
}
|
||||
.side-nav .nav-label,
|
||||
.side-nav .nav-item {
|
||||
display: block;
|
||||
padding: 3px 15px;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
||||
}
|
||||
.side-nav .nav-label {
|
||||
font-size: 11px;
|
||||
line-height: @baseLineHeight;
|
||||
color: @grayLight;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.side-nav .nav-group {
|
||||
margin: 0; // clear default ul margins
|
||||
list-style: none;
|
||||
}
|
||||
.side-nav .nav-group + .nav-label {
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
.side-nav .nav-item {
|
||||
font-weight: bold;
|
||||
}
|
||||
.side-nav .nav-item i {
|
||||
vertical-align: -2px;
|
||||
}
|
||||
.side-nav .nav-item:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.side-nav .active .nav-item {
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
|
||||
#gradient > .vertical(#ccc, #999);
|
||||
@shadow: inset 0 1px 0 rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.05);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
@@ -1,285 +0,0 @@
|
||||
// Tabs and Pills
|
||||
.tabs,
|
||||
.pills {
|
||||
padding: 0;
|
||||
margin: 0 0 20px;
|
||||
list-style: none;
|
||||
.clearfix();
|
||||
> li {
|
||||
float: left;
|
||||
> a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs
|
||||
.tabs {
|
||||
border-color: #ddd;
|
||||
border-style: solid;
|
||||
border-width: 0 0 1px;
|
||||
> li {
|
||||
position: relative; // For the dropdowns mostly
|
||||
margin-bottom: -1px;
|
||||
> a {
|
||||
padding: 0 15px;
|
||||
margin-right: 2px;
|
||||
line-height: @baseLineHeight * 2;
|
||||
border: 1px solid transparent;
|
||||
.border-radius(4px 4px 0 0);
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: #eee;
|
||||
border-color: #eee #eee #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Active state, and it's :hover to override normal :hover
|
||||
.active > a,
|
||||
.active > a:hover {
|
||||
color: @gray;
|
||||
background-color: @white;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.tabbable {
|
||||
margin-bottom: @baseLineHeight;
|
||||
|
||||
// Tabs on top
|
||||
.tabs {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.tab-content {
|
||||
padding: 19px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
// Tabs on bottom
|
||||
&.tabs-bottom .tabs > li {
|
||||
margin-top: -1px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&.tabs-bottom .tabs > li > a {
|
||||
.border-radius(0 0 4px 4px);
|
||||
&:hover {
|
||||
border-bottom-color: transparent;
|
||||
border-top-color: #ddd;
|
||||
}
|
||||
}
|
||||
&.tabs-bottom .tabs > .active > a,
|
||||
&.tabs-bottom .tabs > .active > a:hover {
|
||||
border-color: transparent #ddd #ddd #ddd;
|
||||
}
|
||||
|
||||
// Tabs on left and right
|
||||
&.tabs-left,
|
||||
&.tabs-right {
|
||||
.clearfix();
|
||||
.tabs {
|
||||
// Give a fixed width to avoid floating .tab-con
|
||||
width: 100px;
|
||||
// Unfloat them so they stack
|
||||
> li {
|
||||
float: none;
|
||||
margin-bottom: -1px;
|
||||
> a {
|
||||
margin-bottom: 2px;
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs on left
|
||||
&.tabs-left {
|
||||
.tab-content {
|
||||
margin-left: 100px;
|
||||
}
|
||||
.tabs {
|
||||
float: left;
|
||||
> li {
|
||||
margin-right: -1px;
|
||||
> a {
|
||||
margin-right: 0;
|
||||
.border-radius(4px 0 0 4px);
|
||||
|
||||
&:hover {
|
||||
border-right-color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Active state
|
||||
.active > a,
|
||||
.active > a:hover {
|
||||
border-color: #ddd;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs on right
|
||||
&.tabs-right {
|
||||
.tab-content {
|
||||
margin-right: 100px;
|
||||
}
|
||||
.tabs {
|
||||
float: right;
|
||||
> li {
|
||||
margin-left: -1px;
|
||||
> a {
|
||||
margin-left: 0;
|
||||
.border-radius(0 4px 4px 0);
|
||||
|
||||
&:hover {
|
||||
border-left-color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Active state
|
||||
.active > a,
|
||||
.active > a:hover {
|
||||
border-color: #ddd;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dropdowns in tabs
|
||||
.tabs {
|
||||
.dropdown-menu {
|
||||
top: 37px;
|
||||
border-width: 1px;
|
||||
}
|
||||
.dropdown-toggle .caret {
|
||||
margin-top: 15px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.open .dropdown-toggle {
|
||||
border-color: #999;
|
||||
}
|
||||
.open .dropdown-toggle .caret {
|
||||
border-top-color: #fff;
|
||||
.opacity(100);
|
||||
}
|
||||
}
|
||||
|
||||
// Pills
|
||||
.pills {
|
||||
> li > a {
|
||||
padding: 0 15px;
|
||||
margin: 5px 3px 5px 0;
|
||||
line-height: 30px;
|
||||
text-shadow: 0 1px 1px @white;
|
||||
.border-radius(15px);
|
||||
&:hover {
|
||||
color: @white;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
||||
background-color: @linkColorHover;
|
||||
}
|
||||
}
|
||||
.active > a {
|
||||
color: @white;
|
||||
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
||||
background-color: @linkColor;
|
||||
}
|
||||
}
|
||||
|
||||
// Stacked pills
|
||||
.pills-vertical > li {
|
||||
float: none;
|
||||
}
|
||||
|
||||
// Tabbable areas
|
||||
.tab-content > .tab-pane,
|
||||
.pill-content > .pill-pane {
|
||||
display: none;
|
||||
}
|
||||
.tab-content > .active,
|
||||
.pill-content > .active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
// Step nav
|
||||
.step-nav {
|
||||
position: relative; // for prev/next links
|
||||
margin: 0 0 @baseLineHeight;
|
||||
list-style: none;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background-color: #f5f5f5;
|
||||
.border-radius(15px);
|
||||
li {
|
||||
display: inline;
|
||||
color: @grayLight;
|
||||
}
|
||||
// prev/next links
|
||||
.prev,
|
||||
.next {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
}
|
||||
.prev {
|
||||
left: 15px;
|
||||
}
|
||||
.next {
|
||||
right: 15px;
|
||||
}
|
||||
// indicators for each step/page/item/etc
|
||||
.dot {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 0 3px;
|
||||
text-indent: -999em;
|
||||
background-color: @grayLight;
|
||||
.border-radius(5px);
|
||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.25));
|
||||
}
|
||||
.dot:hover,
|
||||
.active .dot {
|
||||
background-color: @grayDark;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Subnav
|
||||
// STILL A WIP
|
||||
.subnav {
|
||||
#gradient > .vertical(#f5f5f5, #eeeeee);
|
||||
@shadow: inset 0 1px 0 #fff, 0 0 5px rgba(0,0,0,.5);
|
||||
.box-shadow(@shadow);
|
||||
a {
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
color: @linkColor;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
border-left: 1px solid #f9f9f9;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
&:hover {
|
||||
color: @linkColorHover;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
li:first-child a {
|
||||
border-left: 0;
|
||||
.border-radius(6px 0 0 6px);
|
||||
}
|
||||
li:last-child a {
|
||||
border-right: 0;
|
||||
.border-radius(0 6px 6px 0);
|
||||
}
|
||||
ul .active > a {
|
||||
color: @grayDark;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
+1
-1
@@ -201,7 +201,7 @@ pre {
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0,0,0,.15);
|
||||
.border-radius(3px);
|
||||
.border-radius(4px);
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
|
||||
Reference in New Issue
Block a user