fixes #4640: pagination span issues resolved by scoping selectors to appropriate children, not all children; clarify docs on use of spans for disabled and active links

3 files changed, 37 insertions, 17 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index d19d6a4426..7ef011cec6 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4693,12 +4693,12 @@ input[type="submit"].btn.btn-mini {
           box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
-.pagination li {
+.pagination ul > li {
   display: inline;
 }
 
-.pagination a,
-.pagination span {
+.pagination ul > li > a,
+.pagination ul > li > span {
   float: left;
   padding: 0 14px;
   line-height: 38px;
@@ -4708,36 +4708,36 @@ input[type="submit"].btn.btn-mini {
   border-left-width: 0;
 }
 
-.pagination a:hover,
-.pagination .active a,
-.pagination .active span {
+.pagination ul > li > a:hover,
+.pagination ul > .active > a,
+.pagination ul > .active > span {
   background-color: #f5f5f5;
 }
 
-.pagination .active a,
-.pagination .active span {
+.pagination ul > .active > a,
+.pagination ul > .active > span {
   color: #999999;
   cursor: default;
 }
 
-.pagination .disabled span,
-.pagination .disabled a,
-.pagination .disabled a:hover {
+.pagination ul > .disabled > span,
+.pagination ul > .disabled > a,
+.pagination ul > .disabled > a:hover {
   color: #999999;
   cursor: default;
   background-color: transparent;
 }
 
-.pagination li:first-child a,
-.pagination li:first-child span {
+.pagination ul > li:first-child > a,
+.pagination ul > li:first-child > span {
   border-left-width: 1px;
   -webkit-border-radius: 3px 0 0 3px;
      -moz-border-radius: 3px 0 0 3px;
           border-radius: 3px 0 0 3px;
 }
 
-.pagination li:last-child a,
-.pagination li:last-child span {
+.pagination ul > li:last-child > a,
+.pagination ul > li:last-child > span {
   -webkit-border-radius: 0 3px 3px 0;
      -moz-border-radius: 0 3px 3px 0;
           border-radius: 0 3px 3px 0;
diff --git a/docs/components.html b/docs/components.html
index 4eccbbc9ec..f47aecbf19 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1473,7 +1473,7 @@
             </div>
           </div>
 <pre class="prettyprint linenums">
-&lt;div class="pagination "&gt;
+&lt;div class="pagination"&gt;
   &lt;ul&gt;
     &lt;li class="disabled"&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
     &lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
@@ -1481,6 +1481,16 @@
   &lt;/ul&gt;
 &lt;/div&gt;
 </pre>
+          <p>You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.</p>
+<pre class="prettyprint linenums">
+&lt;div class="pagination"&gt;
+  &lt;ul&gt;
+    &lt;li class="disabled"&gt;&lt;span&gt;Prev&lt;/span&gt;&lt;/li&gt;
+    &lt;li class="active"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/li&gt;
+    ...
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
 
           <h3>Alignment</h3>
           <p>Add one of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.</p>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index ef02c464a6..53936e5d0d 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1402,7 +1402,7 @@
             </div>
           </div>
 <pre class="prettyprint linenums">
-&lt;div class="pagination "&gt;
+&lt;div class="pagination"&gt;
   &lt;ul&gt;
     &lt;li class="disabled"&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
     &lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
@@ -1410,6 +1410,16 @@
   &lt;/ul&gt;
 &lt;/div&gt;
 </pre>
+          <p>{{_i}}You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;div class="pagination"&gt;
+  &lt;ul&gt;
+    &lt;li class="disabled"&gt;&lt;span&gt;Prev&lt;/span&gt;&lt;/li&gt;
+    &lt;li class="active"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/li&gt;
+    ...
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
 
           <h3>{{_i}}Alignment{{/i}}</h3>
           <p>{{_i}}Add one of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.{{/i}}</p>