diff --git a/docs-orange/components/pagination.md b/docs-orange/components/pagination.md
deleted file mode 100644
index 66652ee41d..0000000000
--- a/docs-orange/components/pagination.md
+++ /dev/null
@@ -1,120 +0,0 @@
----
-layout: docs
-title: Pagination
-group: components
----
-
-Provide pagination links for your site or app with the multi-page pagination component.
-
-## Contents
-
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
-
-## Overview
-
-Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
-
-{% example html %}
-
-
-
-{% endexample %}
-
-{% callout info %}
-### Labelling the pagination component
-
-The pagination component should be wrapped in a `` element to identify it as a navigation section to screen readers and other assistive technologies. In addition, as a page is likely to have more than one such navigation section already (such as the primary navigation in the header, or a sidebar navigation), it is advisable to provide a descriptive `aria-label` for the `` which reflects its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be `aria-label="Search results pages"`.
-{% endcallout %}
-
-## Disabled and active states
-
-Links are customizable for different circumstances. Use `.disabled` for unclickable links and `.active` to indicate the current page.
-
-{% callout warning %}
-#### Link functionality caveat
-
-The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of ``s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a `tabindex="-1"` attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
-{% endcallout %}
-
-{% example html %}
-
-
-
-{% endexample %}
-
-You can optionally swap out active or disabled anchors for ``, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.
-
-{% example html %}
-
-
-
-{% endexample %}
-
-
-## Sizing
-
-Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for additional sizes.
-
-{% example html %}
-
-
-
-{% endexample %}
-
-{% example html %}
-
-
-
-{% endexample %}
diff --git a/docs/components/pagination.md b/docs/components/pagination.md
index 7a454a51f9..5a62854028 100644
--- a/docs/components/pagination.md
+++ b/docs/components/pagination.md
@@ -94,6 +94,7 @@ You can optionally swap out active or disabled anchors for ``, or omit the
1 (current)
{% endexample %}
diff --git a/scss/_o-pagination.scss b/scss/_o-pagination.scss
index b19201fe57..88743f7ce5 100644
--- a/scss/_o-pagination.scss
+++ b/scss/_o-pagination.scss
@@ -5,169 +5,215 @@
display: inline-block;
list-style: none;
- .page-link {
- @include hover-focus {
- color: #000;
- background-color: #fff;
- border-color: #000;
- }
+ //current bootstrap implementation, active class subject to move to page-link level
+ .page-item {
- &:active {
- color: #fff;
- background-color: $brand-primary;
- border-color: $brand-primary;
- }
+ .page-link {
+ @include hover-focus {
+ color: #000;
+ background-color: #fff;
+ border-color: #000;
+ }
- position: relative;
- width: $pagination-width;
- padding: .625rem 0;
- margin-left: 0;
- font-size: $font-size-base;
- font-weight: bold;
- line-height: $font-size-base;
- text-align: center;
- border: solid 2px transparent;
-
- &.active {
- color: #fff;
- background-color: #000;
- border-color: #000;
+ position: relative;
+ width: $pagination-width;
+ padding: .625rem 0;
+ margin-left: 0;
+ font-size: $font-size-base;
+ font-weight: bold;
+ line-height: $font-size-base;
+ text-align: center;
+ border: solid 2px transparent;
}
- &.prev::before {
- position: absolute;
- top: .6875rem;
- left: .8125rem;
- width: .5625rem;
- height: .875rem;
- content: "";
- background-image: #{$pagination-icon-prev};
- }
+ &:first-child,
+ &:last-child {
+ .page-link {
+ width: auto;
+ min-width: $pagination-width;
+ height: $pagination-width;
+ padding: 0;
+ border: solid 2px #000;
+ color: #fff;
- &.prev:active::before {
- background-image: #{$pagination-icon-prev-active};
- }
+ &::before {
+ position: absolute;
+ top: .6875rem;
+ left: .8125rem;
+ width: .5625rem;
+ height: .875rem;
+ content: "";
+ }
- &.next::before {
- position: absolute;
- top: .6875rem;
- right: .8125rem;
- width: .5625rem;
- height: .875rem;
- content: "";
- background-image: #{$pagination-icon-next};
- }
+ &.has-label {
+ padding: .5625rem 1.125rem .5625rem 2rem;
+ color: #000;
- &.next:active::before {
- background-image: #{$pagination-icon-next-active};
- }
+ @include hover-focus {
+ color: #fff;
+ }
- .label {
- display: inline-block;
- margin: .5625rem 1.125rem .5625rem 2rem;
- }
+ &:active {
+ color: #fff;
+ }
+ }
+ }
+
+ &:last-child .page-link.has-label {
+ padding: .5625rem 2rem .5625rem 1.125rem;
+ }
- &.next .label {
- margin: .5625rem 2rem .5625rem 1.125rem;
+ @include hover-focus {
+ .page-link {
+ color: #000;
+ background-color: #000;
+ }
+
+ &:first-child .page-link::before {
+ background-image: #{$pagination-icon-prev-active};
+ }
+
+ &:last-child .page-link::before {
+ background-image: #{$pagination-icon-next-active};
+ }
+ }
+
+ &:active {
+ .page-link {
+ color: $brand-primary;
+ background-color: $brand-primary;
+ border-color: $brand-primary;
+ }
+
+ &:first-child .page-link::before {
+ background-image: #{$pagination-icon-prev-active};
+ }
+
+ &:last-child .page-link::before {
+ background-image: #{$pagination-icon-next-active};
+ }
+ }
}
- }
- .page-item {
- float: left;
- margin: 0;
- + .page-item {
- margin-left: .625rem;
+ &:first-child .page-link::before {
+ background-image: #{$pagination-icon-prev};
}
- &.presentation {
- padding: .625rem 0;
- font-weight: bold;
+
+ &:last-child .page-link::before {
+ left: auto;
+ right: .8125rem;
+ background-image: #{$pagination-icon-next};
}
- &.bordered > .page-link {
- width: auto;
- min-width: $pagination-width;
- border: 2px solid #000;
+ &:active {
+ .page-link {
+ color: #fff;
+ background-color: $brand-primary;
+ border-color: $brand-primary;
+ }
+ }
- &:focus {
+ &.active,
+ &.active:active {
+ .page-link {
color: #fff;
background-color: #000;
border-color: #000;
}
+ }
- &:active {
+ &.disabled,
+ &.disabled:active {
+ @include hover-focus {
+ .page-link{
+ color: #fff;
+ border-color: $gray-light-o;
+ background-color: #fff;
+ }
+
+ &:first-child .page-link::before {
+ background-image: #{$pagination-icon-prev-disabled};
+ }
+
+ &:last-child .page-link::before {
+ background-image: #{$pagination-icon-next-disabled};
+ }
+ }
+
+ .page-link{
color: #fff;
- background-color: $brand-primary;
- border-color: $brand-primary;
+ border-color: $gray-light-o;
+ background-color: #fff;
}
- &.prev:focus::before {
- background-image: #{$pagination-icon-prev-active};
+ &:first-child .page-link::before {
+ background-image: #{$pagination-icon-prev-disabled};
}
- &.next:focus::before {
- background-image: #{$pagination-icon-next-active};
+ &:last-child .page-link::before {
+ background-image: #{$pagination-icon-next-disabled};
}
}
}
- .page-item .page-link.prev,
- .page-item .page-link.next {
- width: auto;
- min-width: $pagination-width;
- height: $pagination-width;
- padding: 0;
- border: solid 2px #000;
+ .page-item {
+ float: left;
+ margin: 0;
+ + .page-item {
+ margin-left: .625rem;
+ }
- @include hover {
- color: #fff;
- background-color: #000;
+ &.presentation {
+ padding: .625rem 0;
+ font-weight: bold;
+ }
+ }
- &:active {
- background-color: $brand-primary;
- }
+ .page-item.presentation + .page-item {
+ .page-link {
+ width: auto;
+ min-width: $pagination-width;
+ height: $pagination-width;
+ padding: 0;
+ border: solid 2px #000;
+ color: #fff;
- &.prev::before {
- background-image: #{$pagination-icon-prev-active};
+ &::before {
+ position: absolute;
+ top: .6875rem;
+ left: .8125rem;
+ width: .5625rem;
+ height: .875rem;
+ content: "";
+ }
}
- &.next::before {
- background-image: #{$pagination-icon-next-active};
+ .page-link::before {
+ background-image: #{$pagination-icon-prev};
}
- }
- &.disabled {
- @include hover {
- color: $gray-lighter-o;
- cursor: $cursor-disabled;
- background-color: #fff;
- border-color: $gray-lighter-o;
+ @include hover-focus {
+ .page-link {
+ color: #000;
+ background-color: #000;
+ }
- &:active {
- color: $gray-lighter-o;
- background-color: #fff;
- border-color: $gray-lighter-o;
+ .page-link::before {
+ background-image: #{$pagination-icon-prev-active};
}
}
&:active {
- color: $gray-lighter-o;
- background-color: #fff;
- border-color: $gray-lighter-o;
- }
-
- color: $gray-lighter-o;
- border-color: $gray-lighter-o;
- }
-
- &.prev.disabled::before,
- &.prev.disabled:active::before {
- background-image: #{$pagination-icon-prev-disabled};
- }
+ .page-link {
+ color: #fff;
+ background-color: $brand-primary;
+ border-color: $brand-primary;
+ }
- &.next.disabled::before,
- &.next.disabled:active::before {
- background-image: #{$pagination-icon-next-disabled};
- }
+ .page-link::before {
+ background-image: #{$pagination-icon-prev-active};
+ }
+ }
}
&.pagination-lg {
@@ -178,8 +224,8 @@
line-height: $font-size-lg;
}
- .page-item .page-link.prev,
- .page-item .page-link.next {
+ .page-item:first-child .page-link,
+ .page-item:last-child .page-link {
min-width: $pagination-width-lg;
height: $pagination-width-lg;
padding: 0;
@@ -188,11 +234,11 @@
top: 1.3125rem;
left: 1.4375rem;
}
+ }
- &.next::before {
- right: 1.4375rem;
- left: auto;
- }
+ .page-item:last-child .page-link::before {
+ right: 1.4375rem;
+ left: auto;
}
}
@@ -204,8 +250,8 @@
line-height: $font-size-sm;
}
- .page-item .page-link.prev,
- .page-item .page-link.next {
+ .page-item:first-child .page-link,
+ .page-item:last-child .page-link {
min-width: $pagination-width-sm;
height: $pagination-width-sm;
padding: 0;
@@ -214,11 +260,11 @@
top: .375rem;
left: .5rem;
}
+ }
- &.next::before {
- right: .5rem;
- left: auto;
- }
+ .page-item:last-child .page-link::before {
+ right: .5rem;
+ left: auto;
}
}
}