8000 .pagination>{li => .page} · liuwenye2010/bootstrap@a878c4f · GitHub
[go: up one dir, main page]
Skip to content

Commit a878c4f

Browse files
cvrebertcvrebert
committed
.pagination>{li => .page}
1 parent 7eadfbc commit a878c4f

File tree

3 files changed

+33
-33
lines changed

3 files changed

+33
-33
lines changed

‎docs/components/pagination.md

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,18 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
1818
{% example html %}
1919
<nav>
2020
<ul class="pagination">
21-
<li>
21+
<li class="page">
2222
<a href="#" aria-label="Previous">
2323
<span aria-hidden="true">&laquo;</span>
2424
<span class="sr-only">Previous</span>
2525
</a>
2626
</li>
27-
<li><a href="#">1</a></li>
28-
<li><a href="#">2</a></li>
29-
<li><a href="#">3</a></li>
30-
<li><a href="#">4</a></li>
31-
<li><a href="#">5</a></li>
32-
<li>
27+
<li class="page"><a href="#">1</a></li>
28+
<li class="page"><a href="#">2</a></li>
29+
<li class="page"><a href="#">3</a></li>
30+
<li class="page"><a href="#">4</a></li>
31+
<li class="page"><a href="#">5</a></li>
32+
<li class="page">
3333
<a href="#" aria-label="Next">
3434
<span aria-hidden="true">&raquo;</span>
3535
<span class="sr-only">Next</span>
@@ -46,20 +46,20 @@ Links are customizable for different circumstances. Use `.disabled` for unclicka
4646
{% example html %}
4747
<nav>
4848
<ul class="pagination">
49-
<li class="disabled">
49+
<li class="page disabled">
5050
<a href="#" aria-label="Previous">
5151
<span aria-hidden="true">&laquo;</span>
5252
<span class="sr-only">Previous</span>
5353
</a>
5454
</li>
55-
<li class="active">
55+
<li class="page active">
5656
<a href="#">1 <span class="sr-only">(current)</span></a>
5757
</li>
58-
<li><a href="#">2</a></li>
59-
<li><a href="#">3</a></li>
60-
<li><a href="#">4</a></li>
61-
<li><a href="#">5</a></li>
62-
<li>
58+
<li class="page"><a href="#">2</a></li>
59+
<li class="page"><a href="#">3</a></li>
60+
<li class="page"><a href="#">4</a></li>
61+
<li class="page"><a href="#">5</a></li>
62+
<li class="page">
6363
<a href="#" aria-label="Next">
6464
<span aria-hidden="true">&raquo;</span>
6565
<span class="sr-only">Next</span>
@@ -74,13 +74,13 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
7474
{% example html %}
7575
<nav>
7676
<ul class="pagination">
77-
<li class="disabled">
77+
<li class="page disabled">
7878
<span aria-label="Previous">
7979
<span aria-hidden="true">&laquo;</span>
8080
<span class="sr-only">Previous</span>
8181
</span>
8282
</li>
83-
<li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
83+
<li class="page active"><span>1 <span class="sr-only">(current)</span></span></li>
8484
</ul>
8585
</nav>
8686
{% endexample %}
@@ -93,16 +93,16 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
9393
{% example html %}
9494
<nav>
9595
<ul class="pagination pagination-lg">
96-
<li>
96+
<li class="page">
9797
<a href="#" aria-label="Previous">
9898
<span aria-hidden="true">&laquo;</span>
9999
<span class="sr-only">Previous</span>
100100
</a>
101101
</li>
102-
<li><a href="#">1</a></li>
103-
<li><a href="#">2</a></li>
104-
<li><a href="#">3</a></li>
105-
<li>
102+
<li class="page"><a href="#">1</a></li>
103+
<li class="page"><a href="#">2</a></li>
104+
<li class="page"><a href="#">3</a></li>
105+
<li class="page">
106106
<a href="#" aria-label="Next">
107107
<span aria-hidden="true">&raquo;</span>
108108
<span class="sr-only">Next</span>
@@ -115,16 +115,16 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
115115
{% example html %}
116116
<nav>
117117
<ul class="pagination pagination-sm">
118-
<li>
118+
<li class="page">
119119
<a href="#" aria-label="Previous">
120120
<span aria-hidden="true">&laquo;</span>
121121
<span class="sr-only">Previous</span>
122122
</a>
123123
</li>
124-
<li><a href="#">1</a></li>
125-
<li><a href="#">2</a></li>
126-
<li><a href="#">3</a></li>
127-
<li>
124+
<li class="page"><a href="#">1</a></li>
125+
<li class="page"><a href="#">2</a></li>
126+
<li class="page"><a href="#">3</a></li>
127+
<li class="page">
128128
<a href="#" aria-label="Next">
129129
<span aria-hidden="true">&raquo;</span>
130130
<span class="sr-only">Next</span>

‎scss/_pagination.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
margin-bottom: $spacer-y;
66
@include border-radius();
77

8-
> li {
8+
.page {
99
display: inline; // Remove list-style and block-level defaults
1010

1111
> a,
@@ -35,17 +35,17 @@
3535
}
3636
}
3737

38-
> li > a,
39-
> li > span {
38+
.page > a,
39+
.page > span {
4040
@include hover-focus {
4141
color: $pagination-hover-color;
4242
background-color: $pagination-hover-bg;
4343
border-color: $pagination-hover-border;
4444
}
4545
}
4646

47-
> .active > a,
48-
> .active > span {
47+
.page.active > a,
48+
.page.active > span {
4949
@include plain-hover-focus {
5050
z-index: 2;
5151
color: $pagination-active-color;
@@ -55,7 +55,7 @@
5555
}
5656
}
5757

58-
> .disabled {
58+
.page.disabled {
5959
> span,
6060
> a {
6161
@include plain-hover-focus {

‎scss/mixins/_pagination.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Pagination
22

33
@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
4-
> li {
4+
.page {
55
> a,
66
> span {
77
padding: $padding-vertical $padding-horizontal;

0 commit comments

Comments
 (0)
0