Skip to content

B
bootstrap
Commit b30b8c2c authored by Mark Otto's avatar Mark Otto
Browse files
Options

Restore nav tabs, pills, justified variation, disabled links, and a few more... 

Restore nav tabs, pills, justified variation, disabled links, and a few more things. Still need to add the dropdowns back though.
parent 41ecc2a1
Hide whitespace changes
Inline Side-by-side
Showing with 147 additions and 233 deletions
docs/assets/css/bootstrap.css
View file @ b30b8c2c
......@@ -2688,179 +2688,139 @@ button.close {
background-color: #eeeeee;
}
.nav-list > li > a {
margin-bottom: -1px;
border: 1px solid #e5e5e5;
}
.nav-list > li:first-child > a {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.nav-list > li:last-child > a {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover {
z-index: 2;
color: #fff;
background-color: #428bca;
border-color: #428bca;
}
/*
// Prevent IE8 from misplacing imgs
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
.nav > li > a > img {
max-width: none;
}
// Redeclare pull classes because of specifity
.nav > .pull-right {
float: right;
}
// Nav headers (for dropdowns and lists)
.nav-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: @line-height-base;
color: @grayLight;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-transform: uppercase;
}
// Space them out when they follow another list item (link)
.nav li + .nav-header {
margin-top: 9px;
}
// Dividers (basically an hr) within the dropdown
.nav .divider {
.nav-divider();
}
*/
/*
// Tabs
// -------------------------
// Give the tabs something to sit on
.nav-tabs {
border-bottom: 1px solid #ddd;
}
// Make the list-items overlay the bottom border
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
// Actual tabs (as links)
.nav-tabs > li > a {
margin-right: 2px;
line-height: @line-height-base;
line-height: 20px;
border: 1px solid transparent;
border-radius: @border-radius-base @border-radius-base 0 0;
&:hover {
border-color: @grayLighter @grayLighter #ddd;
}
border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover {
border-color: #eeeeee #eeeeee #dddddd;
}
// Active state, and it's :hover to override normal :hover
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover {
color: @gray;
background-color: @body-background;
color: #555555;
cursor: default;
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
.nav-pills > li {
float: left;
}
// Pills
// -------------------------
// Links rendered as pills
.nav-pills > li > a {
border-radius: 5px;
}
.nav-pills > li + li > a {
margin-left: 2px;
}
// Active state
.nav-pills > .active > a,
.nav-pills > .active > a:hover {
color: #fff;
background-color: @link-color;
background-color: #428bca;
}
// Stacked pills
.nav-stacked > li {
float: none;
}
.nav-stacked > li + li > a {
margin-top: 2px;
margin-left: 0; // no need for the gap between nav items
margin-left: 0;
}
// Justified navs
// -------------------------
.nav-justified {
// Negative margin doesn't work, so we hack it
max-height: 37px;
max-height: 40px;
}
.nav-justified > li {
float: none;
display: table-cell;
float: none;
width: 1%;
text-align: center;
}
// Lists
// -------------------------
.nav-list {
background-color: #fff;
border-radius: 6px;
.box-shadow(0 1px 4px rgba(0,0,0,.065))
}
.nav-list > li {
float: none;
}
.nav-list > li > a {
margin-bottom: -1px; // pull up the following link for a 1px border between
margin-bottom: -1px;
border: 1px solid #e5e5e5;
}
.nav-list > li > a:hover {
background-color: #f5f5f5;
}
.nav-list > li:first-child > a {
border-radius: 6px 6px 0 0;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.nav-list > li:last-child > a {
border-radius: 0 0 6px 6px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover {
position: relative;
z-index: 2;
padding: 9px 15px;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.15);
background-color: @link-color;
border-width: 0;
.box-shadow(~"inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1)")
background-color: #428bca;
border-color: #428bca;
}
.nav > .disabled > a {
color: #999999;
}
.nav > .disabled > a:hover {
text-decoration: none;
cursor: default;
background-color: transparent;
}
.nav-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: 20px;
color: #999999;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-transform: uppercase;
}
.nav li + .nav-header {
margin-top: 9px;
}
.nav .divider {
height: 1px;
margin: 9px 1px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
}
/*
// Prevent IE8 from misplacing imgs
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
.nav > li > a > img {
max-width: none;
}
// Dropdowns
// -------------------------
......@@ -2942,21 +2902,6 @@ button.close {
display: block;
}
// Disabled state
// -------------------------
// Gray out text
.nav > .disabled > a {
color: @grayLight;
}
// Nuke hover effects
.nav > .disabled > a:hover {
text-decoration: none;
background-color: transparent;
cursor: default;
}
*/
.navbar {
......
docs/components.html
View file @ b30b8c2c
......@@ -15,7 +15,7 @@
<!-- Le HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="assets/js/respond/respond.js"></script>
<script src="assets/js/respond/respond.min.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
......
docs/css.html
View file @ b30b8c2c
......@@ -15,7 +15,7 @@
<!-- Le HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="assets/js/respond/respond.js"></script>
<script src="assets/js/respond/respond.min.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
......@@ -567,7 +567,7 @@
Level 1: 9 columns
&lt;div class="row"&gt;
&lt;div class="span6"&gt;Level 2: 6 columns&lt;/div&gt;
&lt;div class="span3"&gt;Level 2: 6 columns&lt;/div&gt;
&lt;div class="span6"&gt;Level 2: 6 columns&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
......
docs/customize.html
View file @ b30b8c2c
......@@ -15,7 +15,7 @@
<!-- Le HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="assets/js/respond/respond.js"></script>
<script src="assets/js/respond/respond.min.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
......
docs/gallery.html
View file @ b30b8c2c
......@@ -15,7 +15,7 @@
<!-- Le HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="assets/js/respond/respond.js"></script>
<script src="assets/js/respond/respond.min.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
......
docs/getting-started.html
View file @ b30b8c2c
......@@ -15,7 +15,7 @@
<!-- Le HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="assets/js/respond/respond.js"></script>
<script src="assets/js/respond/respond.min.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
......
docs/index.html
View file @ b30b8c2c
......@@ -15,7 +15,7 @@
<!-- Le HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="assets/js/respond/respond.js"></script>
<script src="assets/js/respond/respond.min.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
......
docs/javascript.html
View file @ b30b8c2c
......@@ -15,7 +15,7 @@
<!-- Le HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="assets/js/respond/respond.js"></script>
<script src="assets/js/respond/respond.min.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
......
less/navs.less
View file @ b30b8c2c
......@@ -4,7 +4,7 @@
// Base class
// -------------------------
// --------------------------------------------------
.nav {
margin-left: 0;
......@@ -26,68 +26,17 @@
background-color: @grayLighter;
}
// Lists
// -------------------------
.nav-list > li > a {
margin-bottom: -1px; // pull up the following link for a 1px border between
border: 1px solid #e5e5e5;
}
.nav-list > li:first-child > a {
border-top-left-radius: @border-radius-base;
border-top-right-radius: @border-radius-base;
}
.nav-list > li:last-child > a {
border-bottom-left-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
}
.nav-list > .active > a,
.nav-list > .active > a:hover {
z-index: 2; // Bring active item forward so border sits on top of next element
color: #fff;
background-color: @link-color;
border-color: @link-color;
}
/*
// Prevent IE8 from misplacing imgs
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
.nav > li > a > img {
max-width: none;
}
// Redeclare pull classes because of specifity
// Todo: consider making these utilities !important to avoid this bullshit
.nav > .pull-right {
float: right;
}
// Nav headers (for dropdowns and lists)
.nav-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: @line-height-base;
color: @grayLight;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-transform: uppercase;
}
// Space them out when they follow another list item (link)
.nav li + .nav-header {
margin-top: 9px;
}
// Dividers (basically an hr) within the dropdown
.nav .divider {
.nav-divider();
}
*/
// Nav variations
// --------------------------------------------------
/*
// Tabs
// -------------------------
......@@ -95,8 +44,9 @@
.nav-tabs {
border-bottom: 1px solid #ddd;
}
// Make the list-items overlay the bottom border
.nav-tabs > li {
float: left;
// Make the list-items overlay the bottom border
margin-bottom: -1px;
}
// Actual tabs (as links)
......@@ -119,11 +69,13 @@
cursor: default;
}
// Pills
// -------------------------
.nav-pills > li {
float: left;
}
// Links rendered as pills
.nav-pills > li > a {
border-radius: 5px;
......@@ -145,17 +97,15 @@
}
.nav-stacked > li + li > a {
margin-top: 2px;
margin-left: 0; // no need for the gap between nav items
margin-left: 0; // no need for this gap between nav items
}
// Justified navs
// Justified nav links
// -------------------------
.nav-justified {
// Negative margin doesn't work, so we hack it
max-height: 37px;
max-height: 40px;
}
.nav-justified > li {
float: none;
......@@ -164,46 +114,80 @@
text-align: center;
}
// Lists
// -------------------------
.nav-list {
background-color: #fff;
border-radius: 6px;
.box-shadow(0 1px 4px rgba(0,0,0,.065))
}
.nav-list > li {
float: none;
}
.nav-list > li > a {
margin-bottom: -1px; // pull up the following link for a 1px border between
border: 1px solid #e5e5e5;
}
.nav-list > li > a:hover {
background-color: #f5f5f5;
}
.nav-list > li:first-child > a {
border-radius: 6px 6px 0 0;
border-top-left-radius: @border-radius-base;
border-top-right-radius: @border-radius-base;
}
.nav-list > li:last-child > a {
border-radius: 0 0 6px 6px;
border-bottom-left-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
}
.nav-list > .active > a,
.nav-list > .active > a:hover {
position: relative;
z-index: 2;
padding: 9px 15px;
z-index: 2; // Bring active item forward so border sits on top of next element
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.15);
background-color: @link-color;
border-width: 0;
.box-shadow(~"inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1)")
border-color: @link-color;
}
// Nav states and addons
// --------------------------------------------------
// Disabled state
// -------------------------
// Gray out text
.nav > .disabled > a {
color: @grayLight;
}
// Nuke hover effects
.nav > .disabled > a:hover {
text-decoration: none;
background-color: transparent;
cursor: default;
}
// Nav headers (for dropdowns and lists)
// -------------------------
.nav-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: @line-height-base;
color: @grayLight;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-transform: uppercase;
}
// Space them out when they follow another list item (link)
.nav li + .nav-header {
margin-top: 9px;
}
// Dividers (basically an hr) within the dropdown
.nav .divider {
.nav-divider();
}
/*
// Prevent IE8 from misplacing imgs
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
.nav > li > a > img {
max-width: none;
}
// Dropdowns
// -------------------------
......@@ -284,19 +268,4 @@
display: block;
}
// Disabled state
// -------------------------
// Gray out text
.nav > .disabled > a {
color: @grayLight;
}
// Nuke hover effects
.nav > .disabled > a:hover {
text-decoration: none;
background-color: transparent;
cursor: default;
}
*/
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment