rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Merge pull request #18110 from twbs/pagination-classes

Browse Source 
Refactor pagination classes to avoid tag selectors & child selectors
This commit is contained in:
Mark Otto 2015-12-07 23:41:55 -08:00
commit a9f53f0fc0
3 changed files with 81 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
docs/components/pagination.md
View File

@ -18,19 +18,19 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
{% example html %}
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</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="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
@ -46,21 +46,21 @@ Links are customizable for different circumstances. Use `.disabled` for unclicka
{% example html %}
<nav>
<ul class="pagination">
<li class="disabled">
<a href="#" aria-label="Previous">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="active">
<a href="#">1 <span class="sr-only">(current)</span></a>
<li class="page-item active">
<a class="page-link" href="#">1 <span class="sr-only">(current)</span></a>
</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
@ -74,13 +74,13 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
{% example html %}
<nav>
<ul class="pagination">
<li class="disabled">
<span aria-label="Previous">
<li class="page-item disabled">
<span class="page-link" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</span>
</li>
<li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
<li class="page-item active"><span class="page-link">1 <span class="sr-only">(current)</span></span></li>
</ul>
</nav>
{% endexample %}
@ -93,17 +93,17 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
{% example html %}
<nav>
<ul class="pagination pagination-lg">
<li>
<a href="#" aria-label="Previous">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li>
<a href="#" aria-label="Next">
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
@ -115,17 +115,17 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
{% example html %}
<nav>
<ul class="pagination pagination-sm">
<li>
<a href="#" aria-label="Previous">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li>
<a href="#" aria-label="Next">
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>

81
scss/_pagination.scss
View File

@ -4,48 +4,24 @@
margin-top: $spacer-y;
margin-bottom: $spacer-y;
@include border-radius();
}
> li {
display: inline; // Remove list-style and block-level defaults
.page-item {
display: inline; // Remove list-style and block-level defaults
> a,
> span {
position: relative;
float: left; // Collapse white-space
padding: $pagination-padding-y $pagination-padding-x;
margin-left: -1px;
line-height: $line-height;
color: $pagination-color;
text-decoration: none;
background-color: $pagination-bg;
border: $pagination-border-width solid $pagination-border-color;
&:first-child {
.page-link {
margin-left: 0;
@include border-left-radius($border-radius);
}
&:first-child {
> a,
> span {
margin-left: 0;
@include border-left-radius($border-radius);
}
}
&:last-child {
> a,
> span {
@include border-right-radius($border-radius);
}
}
&:last-child {
.page-link {
@include border-right-radius($border-radius);
}
}
> li > a,
> li > span {
@include hover-focus {
color: $pagination-hover-color;
background-color: $pagination-hover-bg;
border-color: $pagination-hover-border;
}
}
> .active > a,
> .active > span {
&.active .page-link {
@include plain-hover-focus {
z-index: 2;
color: $pagination-active-color;
@ -55,19 +31,34 @@
}
}
> .disabled {
> span,
> a {
@include plain-hover-focus {
color: $pagination-disabled-color;
cursor: $cursor-disabled;
background-color: $pagination-disabled-bg;
border-color: $pagination-disabled-border;
}
&.disabled .page-link {
@include plain-hover-focus {
color: $pagination-disabled-color;
cursor: $cursor-disabled;
background-color: $pagination-disabled-bg;
border-color: $pagination-disabled-border;
}
}
}
.page-link {
position: relative;
float: left; // Collapse white-space
padding: $pagination-padding-y $pagination-padding-x;
margin-left: -1px;
line-height: $line-height;
color: $pagination-color;
text-decoration: none;
background-color: $pagination-bg;
border: 1px solid $pagination-border;
@include hover-focus {
color: $pagination-hover-color;
background-color: $pagination-hover-bg;
border-color: $pagination-hover-border;
}
}
//
// Sizing

20
scss/mixins/_pagination.scss
View File

@ -1,22 +1,20 @@
// Pagination
@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
> li {
> a,
> span {
padding: $padding-vertical $padding-horizontal;
font-size: $font-size;
line-height: $line-height;
}
.page-link {
padding: $padding-vertical $padding-horizontal;
font-size: $font-size;
line-height: $line-height;
}
.page-item {
&:first-child {
> a,
> span {
.page-link {
@include border-left-radius($border-radius);
}
}
&:last-child {
> a,
> span {
.page-link {
@include border-right-radius($border-radius);
}
}