mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-05 16:42:29 +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
+182
-124
@@ -6,7 +6,7 @@
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
* Date: Sat Jan 7 15:52:40 PST 2012
|
||||
* Date: Sat Jan 7 20:25:41 PST 2012
|
||||
*/
|
||||
html, body {
|
||||
margin: 0;
|
||||
@@ -516,9 +516,9 @@ pre {
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
@@ -541,6 +541,7 @@ legend {
|
||||
line-height: 36px;
|
||||
color: #333333;
|
||||
border-bottom: 1px solid #eee;
|
||||
-webkit-margin-collapse: separate;
|
||||
}
|
||||
label,
|
||||
input,
|
||||
@@ -1502,6 +1503,16 @@ i {
|
||||
background-image: linear-gradient(top, #049cdb, #0064cd);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
|
||||
background-color: #0077b3;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#0088cc), to(#0077b3));
|
||||
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
|
||||
background-image: -ms-linear-gradient(top, #0088cc, #0077b3);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0088cc), color-stop(100%, #0077b3));
|
||||
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
|
||||
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
|
||||
background-image: linear-gradient(top, #0088cc, #0077b3);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0077b3', GradientType=0);
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075);
|
||||
@@ -1692,19 +1703,51 @@ i {
|
||||
left: 0;
|
||||
z-index: 1010;
|
||||
}
|
||||
.nav {
|
||||
.navbar .nav {
|
||||
position: relative;
|
||||
left: 0;
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0 10px 0 0;
|
||||
/* // Dropdowns within the .nav
|
||||
.dropdown-toggle:hover,
|
||||
.dropdown.open .dropdown-toggle {
|
||||
background: #444;
|
||||
background: rgba(255,255,255,.05);
|
||||
}
|
||||
.dropdown-menu {
|
||||
background-color: #333;
|
||||
.dropdown-toggle {
|
||||
color: @white;
|
||||
&.open {
|
||||
background: #444;
|
||||
background: rgba(255,255,255,.05);
|
||||
}
|
||||
}
|
||||
li a {
|
||||
padding: 4px 15px;
|
||||
color: #999;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,.5);
|
||||
&:hover {
|
||||
#gradient > .vertical(#292929,#191919);
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
.active a {
|
||||
color: @white;
|
||||
}
|
||||
.divider {
|
||||
background-color: #222;
|
||||
border-color: #444;
|
||||
}
|
||||
}*/
|
||||
|
||||
}
|
||||
.nav > li {
|
||||
.navbar .nav > li {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
.nav a {
|
||||
display: block;
|
||||
.navbar .nav a {
|
||||
float: none;
|
||||
padding: 10px 10px 11px;
|
||||
line-height: 19px;
|
||||
@@ -1712,15 +1755,15 @@ i {
|
||||
text-decoration: none;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.nav a:hover {
|
||||
.navbar .nav a:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav .active > a {
|
||||
.navbar .nav .active > a {
|
||||
background-color: #222;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.nav .vertical-divider {
|
||||
.navbar .nav .vertical-divider {
|
||||
height: 40px;
|
||||
width: 1px;
|
||||
margin: 0 5px;
|
||||
@@ -1728,58 +1771,55 @@ i {
|
||||
background-color: #222;
|
||||
border-right: 1px solid #444;
|
||||
}
|
||||
.nav.secondary-nav {
|
||||
.navbar .nav.secondary-nav {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
.nav.secondary-nav .dropdown-menu {
|
||||
.navbar .nav.secondary-nav .dropdown-menu {
|
||||
right: 0;
|
||||
border: 0;
|
||||
}
|
||||
.nav .dropdown-toggle:hover, .nav .dropdown.open .dropdown-toggle {
|
||||
background: #444;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
.nav {
|
||||
margin-left: 0;
|
||||
margin-bottom: 18px;
|
||||
list-style: none;
|
||||
}
|
||||
.nav .dropdown-menu {
|
||||
background-color: #333;
|
||||
.nav > li > a {
|
||||
display: block;
|
||||
}
|
||||
.nav .dropdown-menu .dropdown-toggle {
|
||||
.nav > li > a:hover {
|
||||
text-decoration: none;
|
||||
background-color: #eee;
|
||||
}
|
||||
.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, 0.5);
|
||||
}
|
||||
.nav.list .nav-header {
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
line-height: 18px;
|
||||
color: #999999;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.nav.list > li + .nav-header {
|
||||
margin-top: 9px;
|
||||
}
|
||||
.nav.list .active > a {
|
||||
color: #ffffff;
|
||||
}
|
||||
.nav .dropdown-menu .dropdown-toggle.open {
|
||||
background: #444;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
.nav .dropdown-menu li a {
|
||||
padding: 4px 15px;
|
||||
color: #999;
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.nav .dropdown-menu li a:hover {
|
||||
background-color: #191919;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));
|
||||
background-image: -moz-linear-gradient(top, #292929, #191919);
|
||||
background-image: -ms-linear-gradient(top, #292929, #191919);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));
|
||||
background-image: -webkit-linear-gradient(top, #292929, #191919);
|
||||
background-image: -o-linear-gradient(top, #292929, #191919);
|
||||
background-image: linear-gradient(top, #292929, #191919);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);
|
||||
color: #ffffff;
|
||||
}
|
||||
.nav .dropdown-menu .active a {
|
||||
color: #ffffff;
|
||||
}
|
||||
.nav .dropdown-menu .divider {
|
||||
background-color: #222;
|
||||
border-color: #444;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
|
||||
background-color: #0088cc;
|
||||
}
|
||||
.tabs, .pills {
|
||||
padding: 0;
|
||||
margin: 0 0 20px;
|
||||
list-style: none;
|
||||
zoom: 1;
|
||||
}
|
||||
.tabs:before,
|
||||
@@ -1798,29 +1838,26 @@ i {
|
||||
float: left;
|
||||
}
|
||||
.tabs > li > a, .pills > li > a {
|
||||
display: block;
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
margin-right: 2px;
|
||||
line-height: 14px;
|
||||
}
|
||||
.tabs {
|
||||
border-color: #ddd;
|
||||
border-style: solid;
|
||||
border-width: 0 0 1px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.tabs > li {
|
||||
position: relative;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.tabs > li > a {
|
||||
padding: 0 15px;
|
||||
margin-right: 2px;
|
||||
line-height: 36px;
|
||||
padding-top: 9px;
|
||||
padding-bottom: 9px;
|
||||
border: 1px solid transparent;
|
||||
-webkit-border-radius: 4px 4px 0 0;
|
||||
-moz-border-radius: 4px 4px 0 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.tabs > li > a:hover {
|
||||
text-decoration: none;
|
||||
background-color: #eee;
|
||||
border-color: #eee #eee #ddd;
|
||||
}
|
||||
.tabs .active > a, .tabs .active > a:hover {
|
||||
@@ -1830,6 +1867,76 @@ i {
|
||||
border-bottom-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
.pills > li > a {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.pills .active > a, .pills .active > a:hover {
|
||||
color: #ffffff;
|
||||
background-color: #0088cc;
|
||||
}
|
||||
.nav.stacked > li {
|
||||
float: none;
|
||||
}
|
||||
.nav.stacked > li > a {
|
||||
margin-right: 0;
|
||||
}
|
||||
.tabs.stacked {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.tabs.stacked > li > a {
|
||||
border: 1px solid #ddd;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.tabs.stacked > li:first-child > a {
|
||||
-webkit-border-radius: 4px 4px 0 0;
|
||||
-moz-border-radius: 4px 4px 0 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.tabs.stacked > li:last-child > a {
|
||||
-webkit-border-radius: 0 0 4px 4px;
|
||||
-moz-border-radius: 0 0 4px 4px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
.tabs.stacked > li > a:hover {
|
||||
border-color: #ddd;
|
||||
z-index: 2;
|
||||
}
|
||||
.pills.stacked > li > a {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.pills.stacked > li:last-child > a {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.tabs .dropdown-menu, .pills .dropdown-menu {
|
||||
top: 33px;
|
||||
border-width: 1px;
|
||||
}
|
||||
.pills .dropdown-menu {
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
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;
|
||||
filter: alpha(opacity=100);
|
||||
-moz-opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
.tabbable {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
@@ -1929,46 +2036,6 @@ i {
|
||||
border-color: #ddd;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
.tabs .dropdown-menu {
|
||||
top: 37px;
|
||||
border-width: 1px;
|
||||
}
|
||||
.tabs .dropdown-toggle .caret {
|
||||
margin-top: 15px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.tabs .open .dropdown-toggle {
|
||||
border-color: #999;
|
||||
}
|
||||
.tabs .open .dropdown-toggle .caret {
|
||||
border-top-color: #fff;
|
||||
filter: alpha(opacity=100);
|
||||
-moz-opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
.pills > li > a {
|
||||
padding: 0 15px;
|
||||
margin: 5px 3px 5px 0;
|
||||
line-height: 30px;
|
||||
text-shadow: 0 1px 1px #ffffff;
|
||||
-webkit-border-radius: 15px;
|
||||
-moz-border-radius: 15px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.pills > li > a:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
|
||||
background-color: #005580;
|
||||
}
|
||||
.pills .active > a {
|
||||
color: #ffffff;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
|
||||
background-color: #0088cc;
|
||||
}
|
||||
.pills-vertical > li {
|
||||
float: none;
|
||||
}
|
||||
.tab-content > .tab-pane, .pill-content > .pill-pane {
|
||||
display: none;
|
||||
}
|
||||
@@ -2060,27 +2127,29 @@ i {
|
||||
color: #333333;
|
||||
background-color: #eee;
|
||||
}
|
||||
.side-nav {
|
||||
padding: 9px 0;
|
||||
/*.side-nav {
|
||||
padding: @baseLineHeight / 2 0;
|
||||
}
|
||||
.side-nav .nav-label, .side-nav .nav-item {
|
||||
.side-nav .nav-label,
|
||||
.side-nav .nav-item {
|
||||
display: block;
|
||||
padding: 3px 15px;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
||||
}
|
||||
.side-nav .nav-label {
|
||||
font-size: 11px;
|
||||
line-height: 18px;
|
||||
color: #999999;
|
||||
line-height: @baseLineHeight;
|
||||
color: @grayLight;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.side-nav .nav-group {
|
||||
margin: 0;
|
||||
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;
|
||||
}
|
||||
@@ -2092,22 +2161,11 @@ i {
|
||||
}
|
||||
.side-nav .active .nav-item {
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: #999999;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#999999));
|
||||
background-image: -moz-linear-gradient(top, #cccccc, #999999);
|
||||
background-image: -ms-linear-gradient(top, #cccccc, #999999);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #999999));
|
||||
background-image: -webkit-linear-gradient(top, #cccccc, #999999);
|
||||
background-image: -o-linear-gradient(top, #cccccc, #999999);
|
||||
background-image: linear-gradient(top, #cccccc, #999999);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#999999', GradientType=0);
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.breadcrumb {
|
||||
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);
|
||||
}*/.breadcrumb {
|
||||
padding: 7px 14px;
|
||||
margin: 0 0 18px;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
Reference in New Issue
Block a user