mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-11 18:02:28 +03:00
Restore nav tabs, pills, justified variation, disabled links, and a few more things. Still need to add the dropdowns back though.
This commit is contained in:
Mark Otto
+109
-140
@@ -4,7 +4,7 @@
|
||||
|
||||
|
||||
// Base class
|
||||
// -------------------------
|
||||
// --------------------------------------------------
|
||||
|
||||
.nav {
|
||||
margin-left: 0;
|
||||
@@ -26,6 +26,94 @@
|
||||
background-color: @grayLighter;
|
||||
}
|
||||
|
||||
// Redeclare pull classes because of specifity
|
||||
// Todo: consider making these utilities !important to avoid this bullshit
|
||||
.nav > .pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Nav variations
|
||||
// --------------------------------------------------
|
||||
|
||||
// Tabs
|
||||
// -------------------------
|
||||
|
||||
// Give the tabs something to sit on
|
||||
.nav-tabs {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.nav-tabs > li {
|
||||
float: left;
|
||||
// Make the list-items overlay the bottom border
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
// Actual tabs (as links)
|
||||
.nav-tabs > li > a {
|
||||
margin-right: 2px;
|
||||
line-height: @line-height-base;
|
||||
border: 1px solid transparent;
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
&:hover {
|
||||
border-color: @grayLighter @grayLighter #ddd;
|
||||
}
|
||||
}
|
||||
// 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;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
// Pills
|
||||
// -------------------------
|
||||
|
||||
.nav-pills > li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Stacked pills
|
||||
.nav-stacked > li {
|
||||
float: none;
|
||||
}
|
||||
.nav-stacked > li + li > a {
|
||||
margin-top: 2px;
|
||||
margin-left: 0; // no need for this gap between nav items
|
||||
}
|
||||
|
||||
// Justified nav links
|
||||
// -------------------------
|
||||
|
||||
.nav-justified {
|
||||
// Negative margin doesn't work, so we hack it
|
||||
max-height: 40px;
|
||||
}
|
||||
.nav-justified > li {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
width: 1%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Lists
|
||||
// -------------------------
|
||||
|
||||
@@ -51,20 +139,26 @@
|
||||
|
||||
|
||||
|
||||
// Nav states and addons
|
||||
// --------------------------------------------------
|
||||
|
||||
/*
|
||||
// Prevent IE8 from misplacing imgs
|
||||
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
|
||||
.nav > li > a > img {
|
||||
max-width: none;
|
||||
// Disabled state
|
||||
// -------------------------
|
||||
|
||||
// Gray out text
|
||||
.nav > .disabled > a {
|
||||
color: @grayLight;
|
||||
}
|
||||
|
||||
// Redeclare pull classes because of specifity
|
||||
.nav > .pull-right {
|
||||
float: right;
|
||||
// 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;
|
||||
@@ -84,125 +178,15 @@
|
||||
.nav .divider {
|
||||
.nav-divider();
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/*
|
||||
// Tabs
|
||||
// -------------------------
|
||||
|
||||
// Give the tabs something to sit on
|
||||
.nav-tabs {
|
||||
border-bottom: 1px solid #ddd;
|
||||
// Prevent IE8 from misplacing imgs
|
||||
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
|
||||
.nav > li > a > img {
|
||||
max-width: none;
|
||||
}
|
||||
// Make the list-items overlay the bottom border
|
||||
.nav-tabs > li {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
// Actual tabs (as links)
|
||||
.nav-tabs > li > a {
|
||||
margin-right: 2px;
|
||||
line-height: @line-height-base;
|
||||
border: 1px solid transparent;
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
&:hover {
|
||||
border-color: @grayLighter @grayLighter #ddd;
|
||||
}
|
||||
}
|
||||
// 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;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// 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
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Justified navs
|
||||
// -------------------------
|
||||
|
||||
.nav-justified {
|
||||
// Negative margin doesn't work, so we hack it
|
||||
max-height: 37px;
|
||||
}
|
||||
.nav-justified > li {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
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
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
.nav-list > li > a:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.nav-list > li:first-child > a {
|
||||
border-radius: 6px 6px 0 0;
|
||||
}
|
||||
.nav-list > li:last-child > a {
|
||||
border-radius: 0 0 6px 6px;
|
||||
}
|
||||
.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)")
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 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;
|
||||
}
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user