diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html index fa20d9e985..c10bea4d3e 100644 --- a/docs/_includes/docs-nav.html +++ b/docs/_includes/docs-nav.html @@ -42,7 +42,7 @@
  • Basic example
  • Zebra striping
  • Bordered tables
  • -
  • Hover rows
  • +
  • Hover rows
  • Condensed tables
  • Contextual row classes
  • diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 616661fa48..b9809980c3 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1013,8 +1013,6 @@ pre code { table { max-width: 100%; background-color: transparent; - border-collapse: collapse; - border-spacing: 0; } th { @@ -3262,10 +3260,34 @@ button.close { background-color: #eeeeee; } +.nav > li.disabled > a { + color: #999999; +} + +.nav > li.disabled > a:hover, +.nav > li.disabled > a:focus { + color: #999999; + text-decoration: none; + cursor: default; + background-color: transparent; +} + +.nav > li + .nav-header { + margin-top: 9px; +} + .nav > .pull-right { float: right; } +.nav .divider { + height: 2px; + margin: 9px 0; + overflow: hidden; + background-color: #e5e5e5; + border-bottom: 1px solid #ffffff; +} + .nav-tabs { border-bottom: 1px solid #ddd; } @@ -3286,9 +3308,9 @@ button.close { border-color: #eeeeee #eeeeee #dddddd; } -.nav-tabs > .active > a, -.nav-tabs > .active > a:hover, -.nav-tabs > .active > a:focus { +.nav-tabs > li.active > a, +.nav-tabs > li.active > a:hover, +.nav-tabs > li.active > a:focus { color: #555555; cursor: default; background-color: #ffffff; @@ -3296,6 +3318,27 @@ button.close { border-bottom-color: transparent; } +.nav-tabs.nav-justified { + width: 100%; + border-bottom: 0; +} + +.nav-tabs.nav-justified > li { + display: table-cell; + float: none; + width: 1%; + text-align: center; +} + +.nav-tabs.nav-justified > li > a { + margin-right: 0; + border-bottom: 1px solid #ddd; +} + +.nav-tabs.nav-justified > .active > a { + border-bottom-color: #ffffff; +} + .nav-pills > li { float: left; } @@ -3308,9 +3351,9 @@ button.close { margin-left: 2px; } -.nav-pills > .active > a, -.nav-pills > .active > a:hover, -.nav-pills > .active > a:focus { +.nav-pills > li.active > a, +.nav-pills > li.active > a:hover, +.nav-pills > li.active > a:focus { color: #fff; background-color: #428bca; } @@ -3335,34 +3378,6 @@ button.close { text-align: center; } -.nav-justified.nav-tabs { - border-bottom: 0; -} - -.nav-justified.nav-tabs > li > a { - border-bottom: 1px solid #ddd; -} - -.nav-justified.nav-tabs > .active > a { - border-bottom-color: #ffffff; -} - -.nav-justified > li > a { - margin-right: 0; -} - -.nav > .disabled > a { - color: #999999; -} - -.nav > .disabled > a:hover, -.nav > .disabled > a:focus { - color: #999999; - text-decoration: none; - cursor: default; - background-color: transparent; -} - .nav-header { display: block; padding: 3px 15px; @@ -3374,18 +3389,6 @@ button.close { text-transform: uppercase; } -.nav li + .nav-header { - margin-top: 9px; -} - -.nav .divider { - height: 2px; - margin: 9px 0; - overflow: hidden; - background-color: #e5e5e5; - border-bottom: 1px solid #ffffff; -} - .tabbable:before, .tabbable:after { display: table; @@ -4237,7 +4240,7 @@ button.close { .pager .disabled > span { color: #999999; cursor: default; - background-color: #fff; + background-color: #ffffff; } .modal-open { diff --git a/less/navs.less b/less/navs.less index ff65f85337..5455f510f3 100644 --- a/less/navs.less +++ b/less/navs.less @@ -12,25 +12,53 @@ padding-left: 0; // Override default ul/ol list-style: none; .clearfix(); -} -.nav > li { - display: block; -} -.nav > li > a { - position: relative; - display: block; - padding: 10px 15px; -} -.nav > li > a:hover, -.nav > li > a:focus { - text-decoration: none; - background-color: @grayLighter; -} + > li { + display: block; + > a { + position: relative; + display: block; + padding: 10px 15px; + &:hover, + &:focus { + text-decoration: none; + 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 states and addons + // -------------------------------------------------- + + // Disabled state + // ------------------------- + + // Gray out text + &.disabled > a { + color: @grayLight; + } + // Nuke hover effects + &.disabled > a:hover, + &.disabled > a:focus { + color: @grayLight; + text-decoration: none; + background-color: transparent; + cursor: default; + } + // Space the headers out when they follow another list item (link) + &+ .nav-header { + margin-top: 9px; + } + } + + // Redeclare pull classes because of specifity + // Todo: consider making these utilities !important to avoid this bullshit + > .pull-right { + float: right; + } + + // Dividers (basically an hr) within the dropdown + .divider { + .nav-divider(); + } } @@ -44,63 +72,79 @@ // 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; + > li { + float: left; + // Make the list-items overlay the bottom border + margin-bottom: -1px; + + // Actual tabs (as links) + > 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 + &.active > a, + &.active > a:hover, + &.active > a:focus { + color: @gray; + background-color: @body-bg; + border: 1px solid #ddd; + border-bottom-color: transparent; + cursor: default; + } + } + // pulling this in mainly for less shorthand + &.nav-justified { + .nav-justified; + .nav-tabs-justified; } } -// Active state, and it's :hover to override normal :hover -.nav-tabs > .active > a, -.nav-tabs > .active > a:hover, -.nav-tabs > .active > a:focus { - color: @gray; - background-color: @body-bg; - border: 1px solid #ddd; - border-bottom-color: transparent; - cursor: default; -} + // Pills // ------------------------- +.nav-pills { + > li { + float: left; -.nav-pills > li { - float: left; + // Links rendered as pills + > a { + border-radius: 5px; + } + + li { + > a { + margin-left: 2px; + } + } + + // Active state + &.active > a, + &.active > a:hover, + &.active > a:focus { + color: #fff; + background-color: @component-active-bg; + } + } } -// 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, -.nav-pills > .active > a:focus { - color: #fff; - background-color: @component-active-bg; -} // 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 +.nav-stacked { + > li { + float: none; + + li { + > a { + margin-top: 2px; + margin-left: 0; // no need for this gap between nav items + } + } + } } // Justified nav links @@ -108,49 +152,31 @@ .nav-justified { width: 100%; + > li { + float: none; + display: table-cell; + width: 1%; + text-align: center; + } } -.nav-justified > li { - float: none; - display: table-cell; - width: 1%; - text-align: center; -} + // Move borders to anchors instead of bottom of list -.nav-justified.nav-tabs { +.nav-tabs-justified () { border-bottom: 0; > li > a { border-bottom: 1px solid #ddd; + + // Override margin from .nav-tabs + margin-right: 0; } > .active > a { border-bottom-color: @body-bg; } -} -// Override margin from .nav-tabs -.nav-justified > li > a { - margin-right: 0; + } -// Nav states and addons -// -------------------------------------------------- - -// Disabled state -// ------------------------- - -// Gray out text -.nav > .disabled > a { - color: @grayLight; -} -// Nuke hover effects -.nav > .disabled > a:hover, -.nav > .disabled > a:focus { - color: @grayLight; - text-decoration: none; - background-color: transparent; - cursor: default; -} - // Nav headers (for dropdowns and lists) // ------------------------- @@ -164,15 +190,6 @@ 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(); -} diff --git a/less/pager.less b/less/pager.less index e00a31bd00..105880086a 100644 --- a/less/pager.less +++ b/less/pager.less @@ -8,36 +8,47 @@ list-style: none; text-align: center; .clearfix(); + li { + display: inline; + > a, + > span { + display: inline-block; + padding: 5px 14px; + background-color: @pagination-bg; + border: 1px solid @pagination-border; + border-radius: 15px; + } + + > a:hover, + > a:focus { + text-decoration: none; + background-color: @pagination-active-bg; + } + } + + .next { + > a, + > span { + float: right; + } + } + + .previous { + > a, + > span { + float: left; + } + } + + .disabled { + > a, + > a:hover, + > a:focus, + > span { + color: @grayLight; + background-color: @pagination-bg; + cursor: default; + } + } + } -.pager li { - display: inline; -} -.pager li > a, -.pager li > span { - display: inline-block; - padding: 5px 14px; - background-color: @pagination-bg; - border: 1px solid @pagination-border; - border-radius: 15px; -} -.pager li > a:hover, -.pager li > a:focus { - text-decoration: none; - background-color: @pagination-active-bg; -} -.pager .next > a, -.pager .next > span { - float: right; -} -.pager .previous > a, -.pager .previous > span { - float: left; -} -.pager .disabled > a, -.pager .disabled > a:hover, -.pager .disabled > a:focus, -.pager .disabled > span { - color: @grayLight; - background-color: #fff; - cursor: default; -} \ No newline at end of file diff --git a/less/tables.less b/less/tables.less index b62f22fb62..15db5a68a3 100644 --- a/less/tables.less +++ b/less/tables.less @@ -6,8 +6,6 @@ table { max-width: 100%; background-color: @table-bg; - border-collapse: collapse; - border-spacing: 0; } th { text-align: left;