Skip to content

Commit

Permalink
fix(component): pagination
Browse files Browse the repository at this point in the history 
pseudo-element arrows with svg backgrounds
  • Loading branch information
@ygatesoupe
ygatesoupe committed Jun 23, 2016
1 parent c98532c commit 04eb7ab
Show file tree
Hide file tree
Showing 5 changed files with 98 additions and 94 deletions.
34 changes: 8 additions & 26 deletions docs-orange/_includes/boostwatch/pagination.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,15 @@ <h2 id="pagination">Pagination</h2>
<nav>
<ul class="pagination">
<li class="page-item bordered">
<a class="page-link disabled" href="#" aria-label="Previous">
<span aria-hidden="true" class="icon-arrow-previous"></span>
</a>
<a class="page-link prev disabled" href="#" aria-label="Previous"></a>
</li>
<li class="page-item"><a class="page-link active" href="#" aria-label="Go to page 1">1</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Go to page 2">2</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Go to page 3">3</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Go to page 4">4</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Go to page 5">5</a></li>
<li class="page-item bordered">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true" class="icon-arrow-next"></span>
</a>
<a class="page-link next" href="#" aria-label="Next"></a>
</li>
</ul>
</nav>
Expand All @@ -26,14 +22,10 @@ <h2 id="pagination">Pagination</h2>
<nav>
<ul class="pagination">
<li class="page-item bordered">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true" class="icon-arrow-previous"></span>
</a>
<a class="page-link prev" href="#" aria-label="Previous"></a>
</li>
<li class="page-item bordered">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true" class="icon-arrow-next"></span>
</a>
<a class="page-link next" href="#" aria-label="Next"></a>
</li>
</ul>
</nav>
Expand All @@ -44,14 +36,10 @@ <h2 id="pagination">Pagination</h2>
<ul class="pagination">
<li class="page-item presentation" role="presentation">Page 2 of 10</li>
<li class="page-item bordered">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true" class="icon-arrow-previous"></span>
</a>
<a class="page-link prev" href="#" aria-label="Previous"></a>
</li>
<li class="page-item bordered">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true" class="icon-arrow-next"></span>
</a>
<a class="page-link next" href="#" aria-label="Next"></a>
</li>
</ul>
</nav>
Expand All @@ -61,16 +49,10 @@ <h2 id="pagination">Pagination</h2>
<nav>
<ul class="pagination">
<li class="page-item bordered">
<a class="page-link page-item-labelled prev" href="#" aria-label="Previous">
<span aria-hidden="true" class="icon-arrow-previous"></span>
<span>Back</span>
</a>
<a class="page-link page-item-labelled prev" href="#" aria-label="Previous">Back</a>
</li>
<li class="page-item bordered">
<a class="page-link page-item-labelled next" href="#" aria-label="Next">
<span>Next</span>
<span aria-hidden="true" class="icon-arrow-next"></span>
</a>
<a class="page-link page-item-labelled next" href="#" aria-label="Next">Next</a>
</li>
</ul>
</nav>
Expand Down
3 changes: 2 additions & 1 deletion docs-orange/assets/scss/_boosted-docs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,8 @@
#nav,
#color-schemes,
#containers,
#placement {
#placement,
#sizing {
@include brand-warning;
}

Expand Down
45 changes: 9 additions & 36 deletions docs-orange/components/pagination.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,15 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link disabled" href="#" aria-label="Go to previous page">
<span aria-hidden="true" class="icon-arrow-previous"></span>
<span class="sr-only">Previous</span>
</a>
<a class="page-link prev disabled" href="#" aria-label="Go to previous page"></a>
</li>
<li class="page-item"><a class="page-link" href="#" aria-label="Go to page 1">1</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Go to page 2">2</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Go to page 3">3</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Go to page 4">4</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Go to page 5">5</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Go to next page">
<span aria-hidden="true" class="icon-arrow-next"></span>
<span class="sr-only">Next</span>
</a>
<a class="page-link next" href="#" aria-label="Go to next page"></a>
</li>
</ul>
</nav>
Expand All @@ -53,10 +47,7 @@ The `.disabled` class uses `pointer-events: none` to try to disable the link fun
<nav>
<ul class="pagination">
<li class="page-item ">
<a class="page-link disabled" href="#" aria-label="Go to previous page">
<span aria-hidden="true" class="icon-arrow-previous"></span>
<span class="sr-only">Previous</span>
</a>
<a class="page-link prev disabled" href="#" aria-label="Go to previous page"></a>
</li>
<li class="page-item ">
<a class="page-link active" href="#" aria-label="Go to page 1">1 <span class="sr-only">(current)</span></a>
Expand All @@ -66,10 +57,7 @@ The `.disabled` class uses `pointer-events: none` to try to disable the link fun
<li class="page-item"><a class="page-link" href="#" aria-label="Go to page 4">4</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Go to page 5">5</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Go to next page">
<span aria-hidden="true" class="icon-arrow-next"></span>
<span class="sr-only">Next</span>
</a>
<a class="page-link next" href="#" aria-label="Go to next page"></a>
</li>
</ul>
</nav>
Expand All @@ -81,10 +69,7 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
<nav>
<ul class="pagination">
<li class="page-item ">
<span class="page-link disabled" aria-label="Go to previous page">
<span aria-hidden="true" class="icon-arrow-previous"></span>
<span class="sr-only">Previous</span>
</span>
<span class="page-link prev disabled" aria-label="Go to previous page"></span>
</li>
<li class="page-item "><span class="page-link active">1 <span class="sr-only">(current)</span></span></li>
</ul>
Expand All @@ -100,19 +85,13 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
<nav>
<ul class="pagination pagination-lg">
<li class="page-item">
<a class="page-link disabled" href="#" aria-label="Go to previous page">
<span aria-hidden="true" class="icon-arrow-previous"></span>
<span class="sr-only">Previous</span>
</a>
<a class="page-link prev disabled" href="#" aria-label="Go to previous page"></a>
</li>
<li class="page-item"><a class="page-link" href="#" aria-label="Go to page 1">1</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Go to page 2">2</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Go to page 3">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Go to next page">
<span aria-hidden="true" class="icon-arrow-next"></span>
<span class="sr-only">Next</span>
</a>
<a class="page-link next" href="#" aria-label="Go to next page"></a>
</li>
</ul>
</nav>
Expand All @@ -122,19 +101,13 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
<nav>
<ul class="pagination pagination-sm">
<li class="page-item">
<a class="page-link disabled" href="#" aria-label="Go to previous page">
<span aria-hidden="true" class="icon-arrow-previous"></span>
<span class="sr-only">Previous</span>
</a>
<a class="page-link prev disabled" href="#" aria-label="Go to previous page"></a>
</li>
<li class="page-item"><a class="page-link" href="#" aria-label="Go to page 1">1</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Go to page 2">2</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Go to page 3">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Go to next page">
<span aria-hidden="true" class="icon-arrow-next"></span>
<span class="sr-only">Next</span>
</a>
<a class="page-link next" href="#" aria-label="Go to next page"></a>
</li>
</ul>
</nav>
Expand Down
5 changes: 5 additions & 0 deletions scss/_custom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -566,6 +566,11 @@ $pagination-disabled-color: $gray;
$pagination-disabled-bg: #fff;
$pagination-disabled-border: #000;

$pagination-icon-prev: url("data:image/svg+xml;charset=utf8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%209%2014%22%3E%3Cpath%20d%3D%22M9%202L7%200%200%207l7%207%202-2-5-5%205-5z%22%2F%3E%3C%2Fsvg%3E") !default;
$pagination-icon-prev-disabled: url("data:image/svg+xml;charset=utf8, %3Csvg%20viewBox%3D%220%200%209%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9%202L7%200%200%207l7%207%202-2-5-5%205-5z%22%20fill%3D%22%23DDD%22%2F%3E%3C%2Fsvg%3E") !default;
$pagination-icon-next: url("data:image/svg+xml;charset=utf8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%209%2014%22%3E%3Cpath%20d%3D%22M0%202l2-2%207%207-7%207-2-2%205-5-5-5z%22%2F%3E%3C%2Fsvg%3E") !default;
$pagination-icon-next-disabled: url("data:image/svg+xml;charset=utf8, %3Csvg%20viewBox%3D%220%200%209%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%202l2-2%207%207-7%207-2-2%205-5-5-5z%22%20fill%3D%22%23DDD%22%2F%3E%3C%2Fsvg%3E") !default;


// Jumbotron

Expand Down
105 changes: 74 additions & 31 deletions scss/_o-pagination.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,9 @@
border-color: #000;
}

position: relative;
width: $pagination-width;
padding: calc((#{$pagination-width} - 4px - #{$font-size-base}) / 2) 0;
padding: .625rem 0;
margin-left: 0;
font-size: $font-size-base;
font-weight: bold;
Expand All @@ -26,24 +27,32 @@
background-color: #000;
border-color: #000;
}
.icon-arrow-next,
.icon-arrow-previous {
font-size: .875rem;
}

.icon-arrow-next::before {
margin-left: 1px;
&.prev::before {
position: absolute;
top: .6875rem;
left: .8125rem;
content: "";
width: .5625rem;
height: .875rem;
background-image: #{$pagination-icon-prev};
}

.icon-arrow-previous::before {
margin-right: 1px;
&.next::before {
position: absolute;
top: .6875rem;
right: .8125rem;
content: "";
width: .5625rem;
height: .875rem;
background-image: #{$pagination-icon-next};
}
}
.page-item {
float: left;
margin: 0;
+ .page-item {
margin-left: 10px;
margin-left: .625rem;
}
&.presentation {
padding: .625rem 0;
Expand All @@ -56,12 +65,12 @@
border: 2px solid #000;
}
}
.page-item:first-child .page-link,
.page-item:last-child .page-link {
.page-item .page-link.prev,
.page-item .page-link.next {
width: auto;
min-width: $pagination-width;
height: $pagination-width;
padding: calc((#{$pagination-width} - 4px - #{$font-size-base}) / 2) 0;
padding: 0;
border: solid 2px #000;

&.disabled {
Expand All @@ -71,67 +80,101 @@

color: $gray-lighter-o;
border-color: $gray-lighter-o;
}

&.prev.disabled::before {
background-image: #{$pagination-icon-prev-disabled};
}

&.next.disabled::before {
background-image: #{$pagination-icon-next-disabled};
}

&.page-item-labelled {
width: auto;
min-width: 2.5rem;
padding: .5625rem 1.125rem .6875rem;

.icon-arrow-previous::before,
.icon-arrow-next::before {
position: absolute;
top: .6875rem;
}
}

&.page-item-labelled.prev {
padding-left: 2.375rem;
.icon-arrow-previous::before {
position: relative;

&::before {
position: absolute;
top: .6875rem;
left: 1.125rem;
margin-right: 0;
content: "";
width: .5625rem;
height: .875rem;
background-image: #{$pagination-icon-prev};
}
}

&.page-item-labelled.next {
padding-right: 2.375rem;
.icon-arrow-next::before {

&::before {
position: absolute;
top: .6875rem;
right: 1.125rem;
margin-left: 0;
content: "";
width: .5625rem;
height: .875rem;
background-image: #{$pagination-icon-next};
}
}
}

&.pagination-lg {
.page-link {
width: $pagination-width-lg;
padding: calc((#{$pagination-width-lg} - 4px - #{$font-size-lg}) / 2) 0;
padding: 1.1875rem 0;
font-size: $font-size-lg;
line-height: $font-size-lg;
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
.page-item .page-link.prev,
.page-item .page-link.next {
min-width: $pagination-width-lg;
height: $pagination-width-lg;
padding: calc((#{$pagination-width-lg} - 4px - #{$font-size-lg}) / 2) 0;
padding: 0;

&::before {
top: 1.3125rem;
left:1.4375rem;
}

&.next::before {
left: auto;
right:1.4375rem;
}
}
}

&.pagination-sm {
.page-link {
width: $pagination-width-sm;
padding: calc((#{$pagination-width-sm} - 4px - #{$font-size-sm}) / 2) 0;
padding: .375rem 0;
font-size: $font-size-sm;
line-height: $font-size-sm;
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
.page-item .page-link.prev,
.page-item .page-link.next {
min-width: $pagination-width-sm;
height: $pagination-width-sm;
padding: calc((#{$pagination-width-sm} - 4px - #{$font-size-sm}) / 2) 0;
padding: 0;

&::before {
top: .375rem;
left: .5rem;
}

&.next::before {
left: auto;
right: .5rem;
}
}
}
}

0 comments on commit 04eb7ab

Please sign in to comment.