Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
60 additions
and
120 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,4 @@ | ||
| include ../icon/icon | ||
|
|
||
| mixin pager(data) | ||
| .pager&attributes(attributes) | ||
| a(href="#").pager__item.pager__item_prev | ||
| +icon('chevron-left').pager__icon | ||
| span.pager__text Previous | ||
| a(href="#").pager__item.pager__item_next | ||
| span.pager__text Next | ||
| +icon('chevron-right').pager__icon | ||
|
|
||
| a(href="#").pager__control.pager__control_backward « Oldest | ||
| a(href="#").pager__control.pager__control_forward Newest » |
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,34 +1,27 @@ | ||
| .pager | ||
| &__item | ||
| padding 12px 22px | ||
| font-size 14px | ||
| line-height 1.4 | ||
| cursor pointer | ||
| user-select none | ||
| transition 125ms background-color ease-in-out | ||
| border 1px solid #cdcdcd | ||
| border-radius 3px | ||
| display inline-block | ||
| &__control | ||
| & | ||
| &:visited | ||
| color #333 | ||
| background-color #fff | ||
| display inline-block | ||
| vertical-align middle | ||
| text-align center | ||
| color currentColor | ||
| text-decoration none | ||
| display inline-block | ||
| height 2.5em | ||
| line-height 2.5em | ||
| border-radius 50em | ||
| background-color #fff | ||
| border 1px solid #cdcdcd | ||
| padding-left 0.8em | ||
| padding-right 0.8em | ||
|
|
||
| &:hover | ||
| color currentColor | ||
| text-decoration none | ||
| background-color #0083ca | ||
| border-color #0083ca | ||
| color #fff | ||
| background-color #2ea9fa | ||
| border-color #2ea9fa | ||
|
|
||
| &__icon | ||
| &__text | ||
| vertical-align middle | ||
| display inline-block | ||
|
|
||
| &__item_prev &__icon | ||
| margin-right 10px | ||
|
|
||
| &__item_next &__icon | ||
| margin-left 10px | ||
|
|
||
|
|
||
|
|
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,35 +1,16 @@ | ||
| include ../icon/icon | ||
|
|
||
| mixin pagination(data) | ||
| // pagination | ||
| nav(aria-label="pagination").pagination&attributes(attributes) | ||
| ul | ||
| each item in data.items | ||
| - var itemClasses = ['pagination__item'] | ||
| if item.type == "spacer" || item.type == "next" || item.type == "prev" | ||
| - itemClasses.push(itemClasses[0] + '_' + item.type) | ||
|
|
||
| if item.type == "item" | ||
| - itemClasses.push(itemClasses[0] + '_page') | ||
|
|
||
| if item.active | ||
| - itemClasses.push(itemClasses[0] + '_active') | ||
|
|
||
| li(class=itemClasses) | ||
| if item.type == "spacer" | ||
| span.pagination__link ... | ||
|
|
||
| if item.type == "prev" | ||
| a(href="#" aria-label="Previous page").pagination__link « prev. | ||
|
|
||
| if item.type == "next" | ||
| a(href="#" aria-label="Next page").pagination__link next. » | ||
|
|
||
| if item.type == "item" | ||
| if item.active | ||
| span.pagination__link= item.text | ||
| span.sr-only (current) | ||
| else | ||
| a(href="#").pagination__link= item.text | ||
|
|
||
| // END pagination | ||
| .pagination&attributes(attributes) | ||
| .pagination__controls.pagination__controls_backward | ||
| a(href="#").pagination__control « | ||
| a(href="#").pagination__control ‹ | ||
| .pagination__controls | ||
| span.pagination__ellipsis … | ||
| a(href="#").pagination__page 4 | ||
| span.pagination__page.pagination__page_current 5 | ||
| a(href="#").pagination__page 6 | ||
| span.pagination__ellipsis … | ||
| .pagination__controls.pagination__controls_forward | ||
| a(href="#").pagination__control › | ||
| a(href="#").pagination__control » |
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,76 +1,49 @@ | ||
| .pagination | ||
| margin 26px 0 | ||
|
|
||
| ul | ||
| margin 0 | ||
| padding 0 | ||
| &__controls | ||
| display inline-block | ||
| font-size 0 | ||
|
|
||
| &__item | ||
| list-style none | ||
| padding 0 | ||
| display inline-block | ||
| vertical-align middle | ||
| font-size 14px | ||
| color #666 | ||
| text-align center | ||
| &__controls_backward | ||
| // | ||
|
|
||
| &__controls_forward | ||
| // | ||
|
|
||
| &__link | ||
| &__control | ||
| &__page | ||
| & | ||
| &:visited | ||
| display inline-block | ||
| vertical-align middle | ||
| text-align center | ||
| color currentColor | ||
| text-decoration none | ||
| display inline-block | ||
| height 30px | ||
| min-width 30px | ||
| line-height 30px | ||
| height 2.5em | ||
| min-width 18px | ||
| line-height 2.5em | ||
| border-radius 50em | ||
| background-color #fff | ||
| border 1px solid #cdcdcd | ||
| padding-left 0.7em | ||
| padding-right 0.7em | ||
|
|
||
| &:hover | ||
| color currentColor | ||
| text-decoration none | ||
|
|
||
| &__item_page | ||
| font-size 12px | ||
| margin 0 5px | ||
|
|
||
| &__item_page &__link | ||
| & | ||
| &:visited | ||
| border-radius 50px | ||
| background-color #fff | ||
| border 1px solid #cdcdcd | ||
| &:hover | ||
| background-color #0083ca | ||
| border-color #0083ca | ||
| color #fff | ||
|
|
||
| &__item_spacer | ||
| margin 0 | ||
|
|
||
| &__item_spacer &__link | ||
| & | ||
| &:visited | ||
| min-width 20px | ||
| width 20px | ||
| &__page | ||
| // | ||
|
|
||
| &__item_active | ||
| &__page_current | ||
| background-color #0083ca | ||
| border-color #0083ca | ||
| color #fff | ||
|
|
||
| &__item_active &__link | ||
| & | ||
| &:visited | ||
| border-color #0083ca | ||
| background-color #0083ca | ||
|
|
||
| &__item_prev | ||
| margin-right 10px | ||
| &__item_next | ||
| margin-left 10px | ||
|
|
||
| &__item_prev | ||
| &__item_next | ||
| & ^[0]__link | ||
| &:hover | ||
| color #111 | ||
|
|
||
| &__ellipsis | ||
| color #666 | ||
| padding 0 1em |