-
Notifications
You must be signed in to change notification settings - Fork 54
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
updated pagination component to new brand guidelines
- Loading branch information
1 parent
f90a0b8
commit d9dd2de
Showing
5 changed files
with
94 additions
and
105 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| <h2 id="pagination">Pagination</h2> | ||
| <div class="row"> | ||
| <nav> | ||
| <ul class="pagination"> | ||
| <li class="page-item"> | ||
| <a class="page-link disabled" href="#" aria-label="Previous"> | ||
| <span aria-hidden="true" class="fa fa-chevron-left"></span> | ||
| <span class="sr-only">Previous</span> | ||
| </a> | ||
| </li> | ||
| <li class="page-item"><a class="page-link active" 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="#">...</a></li> | ||
| <li class="page-item"><a class="page-link" href="#">11</a></li> | ||
| <li class="page-item"><a class="page-link" href="#">12</a></li> | ||
| <li class="page-item"> | ||
| <a class="page-link" href="#" aria-label="Next"> | ||
| <span aria-hidden="true" class="fa fa-chevron-right"></span> | ||
| <span class="sr-only">Next</span> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
|
|
||
| <div class="row"> | ||
| <nav> | ||
| <ul class="pagination"> | ||
| <li class="page-item"> | ||
| <a class="page-link page-item-labelled" href="#" aria-label="Previous"> | ||
| <span aria-hidden="true" class="fa fa-chevron-left"></span> | ||
| <span>Back</span> | ||
| </a> | ||
| </li> | ||
| <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="#">...</a></li> | ||
| <li class="page-item"><a class="page-link" href="#">11</a></li> | ||
| <li class="page-item"><a class="page-link active" href="#">12</a></li> | ||
| <li class="page-item"> | ||
| <a class="page-link page-item-labelled disabled" href="#" aria-label="Next"> | ||
| <span>Next</span> | ||
| <span aria-hidden="true" class="fa fa-chevron-right"></span> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,75 +1,48 @@ | ||
| // | ||
| // Orange pagination | ||
| // | ||
| .o-pagination .page-link { | ||
| border: 0; | ||
| } | ||
| .pagination { | ||
|
|
||
| .o-pagination { | ||
| display: inline-block; | ||
| padding-left: 0; | ||
| margin: $line-height-computed 0; | ||
| border-radius: $border-radius-base; | ||
| .page-link { | ||
| @include hover-focus { | ||
| border-color: $brand-orange-black; | ||
| color: $brand-orange-black; | ||
| background-color: $brand-orange-white; | ||
| } | ||
|
|
||
| > .page-item { | ||
| display: inline; // Remove list-style and block-level defaults | ||
| > .page-link { | ||
| position: relative; | ||
| float: left; // Collapse white-space | ||
| padding: $padding-base-vertical $padding-base-horizontal; | ||
| margin-left: 0; | ||
| line-height: $line-height; | ||
| color: $pagination-color; | ||
| text-decoration: none; | ||
| background-color: $pagination-bg; | ||
| border-right: 1px solid $pagination-border-color; | ||
| } | ||
| &:first-child { | ||
| > .page-link { | ||
| margin-right: -1px; | ||
| border: solid 2px transparent; | ||
| margin-left: 0; | ||
| @include border-left-radius($border-radius-base); | ||
| } | ||
| } | ||
| &:last-child { | ||
| > .page-link { | ||
| margin-left: -1px; | ||
| border-right: 0; | ||
| @include border-right-radius($border-radius-base); | ||
| } | ||
| } | ||
| } | ||
| width: 4rem; | ||
| line-height: $font-size-lg; | ||
| text-align: center; | ||
| padding: 1rem 0; | ||
| font-size: $font-size-lg; | ||
| font-weight: $brand-font-weight-bold; | ||
|
|
||
| > .page-item > .page-link { | ||
| &:hover, | ||
| &:focus { | ||
| color: $pagination-active-color; | ||
| text-decoration: underline; | ||
| background-color: $pagination-bg; | ||
| border-color: $pagination-border-color; | ||
| &.active { | ||
| color: $brand-orange-white; | ||
| background-color: $brand-orange-black; | ||
| border-color: $brand-orange-black; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| > .active .page-link { | ||
| &, | ||
| &:hover, | ||
| &:focus { | ||
| z-index: 2; | ||
| color: $pagination-active-color; | ||
| cursor: default; | ||
| background-color: $pagination-bg; | ||
| border-color: $pagination-border-color; | ||
| } | ||
| } | ||
| .page-item:first-child .page-link, | ||
| .page-item:last-child .page-link { | ||
| border: solid 2px $brand-orange-black; | ||
| height: 4rem; | ||
| width: auto; | ||
| min-width: 4rem; | ||
|
|
||
| &.disabled { | ||
| border-color: $gray-light-plus; | ||
| color: $gray-light-plus; | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| > .disabled { | ||
| > .page-link:hover, | ||
| > .page-link:focus, | ||
| > .page-link { | ||
| color: $pagination-disabled-color; | ||
| cursor: $cursor-disabled; | ||
| background-color: $pagination-disabled-bg; | ||
| border-color: $pagination-disabled-border; | ||
| &.page-item-labelled { | ||
| padding: 1rem 1.6rem; | ||
| width: auto; | ||
| min-width: 4rem; | ||
| } | ||
| } | ||
| } | ||
| } |