From 7a3f078fb487323246ccf64460b7efaf7d478afc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 12 Jan 2013 13:15:19 -0800 Subject: [PATCH] Remove parent div from pagination component * No more div.pagination; it's now just ul.pagination * No more .pagination-right or .pagination-centered * Sizes remain * Any further customization, such as alignment, should be done on the individual application or site level. --- docs/assets/css/bootstrap.css | 81 +++++----- docs/components.html | 183 ++++++++--------------- docs/templates/pages/components.mustache | 183 ++++++++--------------- less/pagination.less | 81 ++++------ 4 files changed, 190 insertions(+), 338 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 9442927195..b707ef3093 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3746,24 +3746,19 @@ fieldset[disabled] .navbar-inverse .btn-navbar { } .pagination { - margin: 20px 0; -} - -.pagination ul { display: inline-block; - margin-bottom: 0; - margin-left: 0; + margin: 20px 0; border-radius: 4px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } -.pagination ul > li { +.pagination > li { display: inline; } -.pagination ul > li > a, -.pagination ul > li > span { +.pagination > li > a, +.pagination > li > span { float: left; padding: 4px 12px; line-height: 20px; @@ -3773,89 +3768,81 @@ fieldset[disabled] .navbar-inverse .btn-navbar { border-left-width: 0; } -.pagination ul > li > a:hover, -.pagination ul > .active > a, -.pagination ul > .active > span { +.pagination > li > a:hover, +.pagination > .active > a, +.pagination > .active > span { background-color: #f5f5f5; } -.pagination ul > .active > a, -.pagination ul > .active > span { +.pagination > .active > a, +.pagination > .active > span { color: #999999; cursor: default; } -.pagination ul > .disabled > span, -.pagination ul > .disabled > a, -.pagination ul > .disabled > a:hover { +.pagination > .disabled > span, +.pagination > .disabled > a, +.pagination > .disabled > a:hover { color: #999999; cursor: default; background-color: transparent; } -.pagination ul > li:first-child > a, -.pagination ul > li:first-child > span { +.pagination > li:first-child > a, +.pagination > li:first-child > span { border-left-width: 1px; border-bottom-left-radius: 4px; border-top-left-radius: 4px; } -.pagination ul > li:last-child > a, -.pagination ul > li:last-child > span { +.pagination > li:last-child > a, +.pagination > li:last-child > span { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } -.pagination-centered { - text-align: center; -} - -.pagination-right { - text-align: right; -} - -.pagination-large ul > li > a, -.pagination-large ul > li > span { +.pagination-large > li > a, +.pagination-large > li > span { padding: 11px 19px; font-size: 17.5px; } -.pagination-large ul > li:first-child > a, -.pagination-large ul > li:first-child > span { +.pagination-large > li:first-child > a, +.pagination-large > li:first-child > span { border-bottom-left-radius: 6px; border-top-left-radius: 6px; } -.pagination-large ul > li:last-child > a, -.pagination-large ul > li:last-child > span { +.pagination-large > li:last-child > a, +.pagination-large > li:last-child > span { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } -.pagination-mini ul > li:first-child > a, -.pagination-small ul > li:first-child > a, -.pagination-mini ul > li:first-child > span, -.pagination-small ul > li:first-child > span { +.pagination-mini > li:first-child > a, +.pagination-small > li:first-child > a, +.pagination-mini > li:first-child > span, +.pagination-small > li:first-child > span { border-bottom-left-radius: 3px; border-top-left-radius: 3px; } -.pagination-mini ul > li:last-child > a, -.pagination-small ul > li:last-child > a, -.pagination-mini ul > li:last-child > span, -.pagination-small ul > li:last-child > span { +.pagination-mini > li:last-child > a, +.pagination-small > li:last-child > a, +.pagination-mini > li:last-child > span, +.pagination-small > li:last-child > span { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } -.pagination-small ul > li > a, -.pagination-small ul > li > span { +.pagination-small > li > a, +.pagination-small > li > span { padding: 2px 10px; font-size: 11.9px; } -.pagination-mini ul > li > a, -.pagination-mini ul > li > span { +.pagination-mini > li > a, +.pagination-mini > li > span { padding: 0 6px; font-size: 10.5px; } diff --git a/docs/components.html b/docs/components.html index a8a71842f8..8811a7e5e2 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1189,29 +1189,25 @@

Standard pagination

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

- + 
-<div class="pagination">
-  <ul>
-    <li><a href="#">Prev</a></li>
-    <li><a href="#">1</a></li>
-    <li><a href="#">2</a></li>
-    <li><a href="#">3</a></li>
-    <li><a href="#">4</a></li>
-    <li><a href="#">Next</a></li>
-  </ul>
-</div>
+<ul class="pagination">
+  <li><a href="#">Prev</a></li>
+  <li><a href="#">1</a></li>
+  <li><a href="#">2</a></li>
+  <li><a href="#">3</a></li>
+  <li><a href="#">4</a></li>
+  <li><a href="#">Next</a></li>
+</ul>
@@ -1223,43 +1219,37 @@

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

- + 
-<div class="pagination">
-  <ul>
-    <li class="disabled"><a href="#">Prev</a></li>
-    <li class="active"><a href="#">1</a></li>
-    ...
-  </ul>
-</div>
+<ul class="pagination">
+  <li class="disabled"><a href="#">Prev</a></li>
+  <li class="active"><a href="#">1</a></li>
+  ...
+</ul>

You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.

-<div class="pagination">
-  <ul>
-    <li class="disabled"><span>Prev</span></li>
-    <li class="active"><span>1</span></li>
-    ...
-  </ul>
-</div>
+<ul class="pagination">
+  <li class="disabled"><span>Prev</span></li>
+  <li class="active"><span>1</span></li>
+  ...
+</ul>

Sizes

Fancy larger or smaller pagination? Add .pagination-large, .pagination-small, or .pagination-mini for additional sizes.

-