From: Mark Otto Date: Fri, 18 Jan 2013 01:02:35 +0000 (-0800) Subject: Restore nav tabs, pills, justified variation, disabled links, and a few more things... X-Git-Tag: v3.0.0-rc1~755 X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=b30b8c2c1234686b330e86fe24d11894b5d08539;p=thirdparty%2Fbootstrap.git Restore nav tabs, pills, justified variation, disabled links, and a few more things. Still need to add the dropdowns back though. --- diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 8ede6dabbc..9477775f63 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -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 { diff --git a/docs/components.html b/docs/components.html index 1d4db2f8f3..76590a1ca7 100644 --- a/docs/components.html +++ b/docs/components.html @@ -15,7 +15,7 @@ diff --git a/docs/css.html b/docs/css.html index 9d215b5bd8..84e85c3718 100644 --- a/docs/css.html +++ b/docs/css.html @@ -15,7 +15,7 @@ @@ -567,7 +567,7 @@ Level 1: 9 columns <div class="row"> <div class="span6">Level 2: 6 columns</div> - <div class="span3">Level 2: 6 columns</div> + <div class="span6">Level 2: 6 columns</div> </div> </div> </div> diff --git a/docs/customize.html b/docs/customize.html index 75ade27e9e..011fb807f3 100644 --- a/docs/customize.html +++ b/docs/customize.html @@ -15,7 +15,7 @@ diff --git a/docs/gallery.html b/docs/gallery.html index d34ac8357c..a905274b2a 100644 --- a/docs/gallery.html +++ b/docs/gallery.html @@ -15,7 +15,7 @@ diff --git a/docs/getting-started.html b/docs/getting-started.html index 02843482f6..7599877f93 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -15,7 +15,7 @@ diff --git a/docs/index.html b/docs/index.html index 708229c43a..b6a58f5d1e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -15,7 +15,7 @@ diff --git a/docs/javascript.html b/docs/javascript.html index ca1c8ac4ed..c73cd9f29a 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -15,7 +15,7 @@ diff --git a/less/navs.less b/less/navs.less index b1803b3b6d..9348cbbfae 100644 --- a/less/navs.less +++ b/less/navs.less @@ -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; -} */