From d9dd2dea9a1d8501a972e688dc0a4cbf5c1ad77f Mon Sep 17 00:00:00 2001 From: Yves Gatesoupe Date: Thu, 28 Jan 2016 17:43:02 +0100 Subject: [PATCH] fix(component): pagination updated pagination component to new brand guidelines --- docs-orange/_includes/boostwatch/navs.html | 39 -------- .../_includes/boostwatch/pagination.html | 48 +++++++++ docs-orange/boostwatch/index.html | 1 + docs-orange/examples/orange-news/index.html | 12 ++- scss/_o-pagination.scss | 99 +++++++------------ 5 files changed, 94 insertions(+), 105 deletions(-) create mode 100644 docs-orange/_includes/boostwatch/pagination.html diff --git a/docs-orange/_includes/boostwatch/navs.html b/docs-orange/_includes/boostwatch/navs.html index e6a2a28b50..29703f5e0b 100644 --- a/docs-orange/_includes/boostwatch/navs.html +++ b/docs-orange/_includes/boostwatch/navs.html @@ -127,43 +127,4 @@

Breadcrumbs

-

Pagination

-
- - - - - - -
diff --git a/docs-orange/_includes/boostwatch/pagination.html b/docs-orange/_includes/boostwatch/pagination.html new file mode 100644 index 0000000000..2a15b2c017 --- /dev/null +++ b/docs-orange/_includes/boostwatch/pagination.html @@ -0,0 +1,48 @@ +

Pagination

+
+ +
+ +
+ +
\ No newline at end of file diff --git a/docs-orange/boostwatch/index.html b/docs-orange/boostwatch/index.html index 71ccac1543..39c37443bd 100644 --- a/docs-orange/boostwatch/index.html +++ b/docs-orange/boostwatch/index.html @@ -30,6 +30,7 @@

Orange Icons

{% include boostwatch/typography.html %} {% include boostwatch/forms.html %} {% include boostwatch/navs.html %} +{% include boostwatch/pagination.html %} {% include boostwatch/indicators.html %} {% include boostwatch/progressbar.html %} {% include boostwatch/containers.html %} diff --git a/docs-orange/examples/orange-news/index.html b/docs-orange/examples/orange-news/index.html index bd266941a8..19ba971807 100644 --- a/docs-orange/examples/orange-news/index.html +++ b/docs-orange/examples/orange-news/index.html @@ -328,13 +328,19 @@

comments

diff --git a/scss/_o-pagination.scss b/scss/_o-pagination.scss index e20a1f5e4e..adb46efec7 100644 --- a/scss/_o-pagination.scss +++ b/scss/_o-pagination.scss @@ -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; + } } - } }