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;
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;
</div>
</div>
<pre class="prettyprint linenums">
-<div class="pagination ">
+<div class="pagination">
<ul>
<li class="disabled"><a href="#">Prev</a></li>
<li class="active"><a href="#">1</a></li>
...
</ul>
</div>
+</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">
+<div class="pagination">
+ <ul>
+ <li class="disabled"><span>Prev</span></li>
+ <li class="active"><span>1</span></li>
+ ...
+ </ul>
+</div>
</pre>
<h3>Alignment</h3>
</div>
</div>
<pre class="prettyprint linenums">
-<div class="pagination ">
+<div class="pagination">
<ul>
<li class="disabled"><a href="#">Prev</a></li>
<li class="active"><a href="#">1</a></li>
...
</ul>
</div>
+</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">
+<div class="pagination">
+ <ul>
+ <li class="disabled"><span>Prev</span></li>
+ <li class="active"><span>1</span></li>
+ ...
+ </ul>
+</div>
</pre>
<h3>{{_i}}Alignment{{/i}}</h3>
.border-radius(3px);
.box-shadow(0 1px 2px rgba(0,0,0,.05));
}
-.pagination li {
- display: inline;
- }
-.pagination a,
-.pagination span {
+.pagination ul > li {
+ display: inline;
+}
+.pagination ul > li > a,
+.pagination ul > li > span {
float: left;
padding: 0 14px;
line-height: (@baseLineHeight * 2) - 2;
border: 1px solid @paginationBorder;
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: @grayLight;
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: @grayLight;
background-color: transparent;
cursor: default;
}
-.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;
.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 {
.border-radius(0 3px 3px 0);
}