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

.page>{a,span => .page-link}

Browse Source
This commit is contained in:
Chris Rebert 2015-10-29 22:03:06 -07:00
parent a878c4f0c6
commit 5f35ce2095
3 changed files with 35 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
docs/components/pagination.md
View File

@ -19,18 +19,18 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
<nav> <nav>
<ul class="pagination"> <ul class="pagination">
<li class="page"> <li class="page">
<a href="#" aria-label="Previous"> <a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
</li> </li>
<li class="page"><a href="#">1</a></li> <li class="page"><a class="page-link" href="#">1</a></li>
<li class="page"><a href="#">2</a></li> <li class="page"><a class="page-link" href="#">2</a></li>
<li class="page"><a href="#">3</a></li> <li class="page"><a class="page-link" href="#">3</a></li>
<li class="page"><a href="#">4</a></li> <li class="page"><a class="page-link" href="#">4</a></li>
<li class="page"><a href="#">5</a></li> <li class="page"><a class="page-link" href="#">5</a></li>
<li class="page"> <li class="page">
<a href="#" aria-label="Next"> <a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span> <span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </a>
@ -47,20 +47,20 @@ Links are customizable for different circumstances. Use `.disabled` for unclicka
<nav> <nav>
<ul class="pagination"> <ul class="pagination">
<li class="page disabled"> <li class="page disabled">
<a href="#" aria-label="Previous"> <a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
</li> </li>
<li class="page active"> <li class="page active">
<a href="#">1 <span class="sr-only">(current)</span></a> <a class="page-link" href="#">1 <span class="sr-only">(current)</span></a>
</li> </li>
<li class="page"><a href="#">2</a></li> <li class="page"><a class="page-link" href="#">2</a></li>
<li class="page"><a href="#">3</a></li> <li class="page"><a class="page-link" href="#">3</a></li>
<li class="page"><a href="#">4</a></li> <li class="page"><a class="page-link" href="#">4</a></li>
<li class="page"><a href="#">5</a></li> <li class="page"><a class="page-link" href="#">5</a></li>
<li class="page"> <li class="page">
<a href="#" aria-label="Next"> <a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span> <span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </a>
@ -75,12 +75,12 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
<nav> <nav>
<ul class="pagination"> <ul class="pagination">
<li class="page disabled"> <li class="page disabled">
<span aria-label="Previous"> <span class="page-link" aria-label="Previous">
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</span> </span>
</li> </li>
<li class="page active"><span>1 <span class="sr-only">(current)</span></span></li> <li class="page active"><span class="page-link">1 <span class="sr-only">(current)</span></span></li>
</ul> </ul>
</nav> </nav>
{% endexample %} {% endexample %}
@ -94,16 +94,16 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
<nav> <nav>
<ul class="pagination pagination-lg"> <ul class="pagination pagination-lg">
<li class="page"> <li class="page">
<a href="#" aria-label="Previous"> <a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
</li> </li>
<li class="page"><a href="#">1</a></li> <li class="page"><a class="page-link" href="#">1</a></li>
<li class="page"><a href="#">2</a></li> <li class="page"><a class="page-link" href="#">2</a></li>
<li class="page"><a href="#">3</a></li> <li class="page"><a class="page-link" href="#">3</a></li>
<li class="page"> <li class="page">
<a href="#" aria-label="Next"> <a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span> <span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </a>
@ -116,16 +116,16 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
<nav> <nav>
<ul class="pagination pagination-sm"> <ul class="pagination pagination-sm">
<li class="page"> <li class="page">
<a href="#" aria-label="Previous"> <a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
</li> </li>
<li class="page"><a href="#">1</a></li> <li class="page"><a class="page-link" href="#">1</a></li>
<li class="page"><a href="#">2</a></li> <li class="page"><a class="page-link" href="#">2</a></li>
<li class="page"><a href="#">3</a></li> <li class="page"><a class="page-link" href="#">3</a></li>
<li class="page"> <li class="page">
<a href="#" aria-label="Next"> <a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span> <span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </a>

18
scss/_pagination.scss
View File

@ -8,8 +8,7 @@
.page { .page {
display: inline; // Remove list-style and block-level defaults display: inline; // Remove list-style and block-level defaults
> a, .page-link {
> span {
position: relative; position: relative;
float: left; // Collapse white-space float: left; // Collapse white-space
padding: $pagination-padding-y $pagination-padding-x; padding: $pagination-padding-y $pagination-padding-x;
@ -21,22 +20,19 @@
border: $pagination-border-width solid $pagination-border-color; border: $pagination-border-width solid $pagination-border-color;
} }
&:first-child { &:first-child {
> a, .page-link {
> span {
margin-left: 0; margin-left: 0;
@include border-left-radius($border-radius); @include border-left-radius($border-radius);
} }
} }
&:last-child { &:last-child {
> a, .page-link {
> span {
@include border-right-radius($border-radius); @include border-right-radius($border-radius);
} }
} }
} }
.page > a, .page .page-link {
.page > span {
@include hover-focus { @include hover-focus {
color: $pagination-hover-color; color: $pagination-hover-color;
background-color: $pagination-hover-bg; background-color: $pagination-hover-bg;
@ -44,8 +40,7 @@
} }
} }
.page.active > a, .page.active .page-link {
.page.active > span {
@include plain-hover-focus { @include plain-hover-focus {
z-index: 2; z-index: 2;
color: $pagination-active-color; color: $pagination-active-color;
@ -56,8 +51,7 @@
} }
.page.disabled { .page.disabled {
> span, .page-link {
> a {
@include plain-hover-focus { @include plain-hover-focus {
color: $pagination-disabled-color; color: $pagination-disabled-color;
cursor: $cursor-disabled; cursor: $cursor-disabled;

9
scss/mixins/_pagination.scss
View File

@ -2,21 +2,18 @@
@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { @mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
.page { .page {
> a, .page-link {
> span {
padding: $padding-vertical $padding-horizontal; padding: $padding-vertical $padding-horizontal;
font-size: $font-size; font-size: $font-size;
line-height: $line-height; line-height: $line-height;
} }
&:first-child { &:first-child {
> a, .page-link {
> span {
@include border-left-radius($border-radius); @include border-left-radius($border-radius);
} }
} }
&:last-child { &:last-child {
> a, .page-link {
> span {
@include border-right-radius($border-radius); @include border-right-radius($border-radius);
} }
} }