fix(pagination): sizes

updated doc nav usage updated previous / next aria-label added sm / lg sizing support
Orange-OpenSource · Feb 17, 2016 · 25b0094 · 25b0094
1 parent 30606be
commit 25b0094
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 25 deletions.
diff --git a/docs-orange/components/pagination.md b/docs-orange/components/pagination.md
@@ -16,15 +16,15 @@ Provide pagination links for your site or app with the multi-page pagination com
 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.
 
 {% callout info %}
-It's good practice to wrap navigation element in a `<nav>` tag with proper role, but keep in mind it should only be used for major/primary navigation.
+It's good practice to wrap navigation element in a `<nav role="navigation">` tag with proper role, but keep in mind it should only be used for major/primary navigation.
 {% endcallout %}
 
 {% example html %}
 <nav role="navigation">
   <ul class="pagination">
     <li class="page-item">
-      <a class="page-link" href="#" aria-label="Previous">
-        <span aria-hidden="true">&laquo;</span>
+      <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>
     </li>
@@ -34,8 +34,8 @@ It's good practice to wrap navigation element in a `<nav>` tag with proper role,
     <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="Next">
-        <span aria-hidden="true">&raquo;</span>
+      <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>
     </li>
@@ -57,8 +57,8 @@ The `.disabled` class uses `pointer-events: none` to try to disable the link fun
 <nav role="navigation">
   <ul class="pagination">
     <li class="page-item ">
-      <a class="page-link disabled" href="#" tabindex="-1" aria-label="Previous">
-        <span aria-hidden="true">&laquo;</span>
+     <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>
     </li>
@@ -70,8 +70,8 @@ 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="Next">
-        <span aria-hidden="true">&raquo;</span>
+      <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>
     </li>
@@ -85,8 +85,8 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
 <nav role="navigation">
   <ul class="pagination">
     <li class="page-item ">
-      <span class="page-link disabled" aria-label="Previous">
-        <span aria-hidden="true">&laquo;</span>
+      <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>
     </li>
@@ -104,17 +104,17 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
 <nav role="navigation">
   <ul class="pagination pagination-lg">
     <li class="page-item">
-      <a class="page-link" href="#" aria-label="Previous">
-        <span aria-hidden="true">&laquo;</span>
+      <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>
     </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="Next">
-        <span aria-hidden="true">&raquo;</span>
+      <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>
     </li>
@@ -126,17 +126,17 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
 <nav role="navigation">
   <ul class="pagination pagination-sm">
     <li class="page-item">
-      <a class="page-link" href="#" aria-label="Previous">
-        <span aria-hidden="true">&laquo;</span>
+      <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>
     </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="Next">
-        <span aria-hidden="true">&raquo;</span>
+      <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>
     </li>

diff --git a/scss/_o-pagination.scss b/scss/_o-pagination.scss
@@ -10,12 +10,12 @@
       border-color: $brand-orange-black;
     }
 
-    width: 4rem;
-    padding: 1rem 0;
+    width: $pagination-width;
+    padding: calc((#{$pagination-width} - 4px - #{$font-size-base}) / 2) 0;
     margin-left: 0;
-    font-size: $font-size-lg;
+    font-size: $font-size-base;
     font-weight: $brand-font-weight-bold;
-    line-height: $font-size-lg;
+    line-height: $font-size-base;
     text-align: center;
     border: solid 2px transparent;
 
@@ -29,10 +29,15 @@
   .page-item:first-child .page-link,
   .page-item:last-child .page-link {
     width: auto;
-    min-width: 4rem;
-    height: 4rem;
+    padding: calc((#{$pagination-width} - 4px - #{$font-size-base}) / 2) 0;
+    min-width: $pagination-width;
+    height: $pagination-width;
     border: solid 2px $brand-orange-black;
 
+    span[class*="icon-"] {
+        font-size: $font-size-base;
+    }
+
     &.disabled {
       @include hover {
         cursor: $cursor-disabled;
@@ -49,4 +54,44 @@
       padding: 1rem 1.6rem;
     }
   }
+
+  &.pagination-lg {
+    .page-link {
+      width: $pagination-width-lg;
+      padding: calc((#{$pagination-width-lg} - 4px - #{$font-size-lg}) / 2) 0;
+      font-size: $font-size-lg;
+      line-height: $font-size-lg;
+    }
+
+    .page-item:first-child .page-link,
+    .page-item:last-child .page-link {
+      padding: calc((#{$pagination-width-lg} - 4px - #{$font-size-lg}) / 2) 0;
+      min-width: $pagination-width-lg;
+      height: $pagination-width-lg;
+
+      span[class*="icon-"] {
+          font-size: $font-size-lg;
+      }
+    }
+  }
+
+  &.pagination-sm {
+    .page-link {
+      width: $pagination-width-sm;
+      padding: calc((#{$pagination-width-sm} - 4px - #{$font-size-sm}) / 2) 0;
+      font-size: $font-size-sm;
+      line-height: $font-size-sm;
+    }
+
+    .page-item:first-child .page-link,
+    .page-item:last-child .page-link {
+      padding: calc((#{$pagination-width-sm} - 4px - #{$font-size-sm}) / 2) 0;
+      min-width: $pagination-width-sm;
+      height: $pagination-width-sm;
+
+      span[class*="icon-"] {
+          font-size: $font-size-sm;
+      }
+    }
+  }
 }