Fix pagination arrow settings not working

diff --git a/docs/pages/pagination.md b/docs/pages/pagination.md
index 1f2e8853f3909c83c0c1eb5f2802dff6bf55ddf5..8d7f62e3593df1f08e05f510ed1430531a20a70e 100644 (file)
--- a/docs/pages/pagination.md
+++ b/docs/pages/pagination.md
@@ -14,7 +14,7 @@ Extra screen reader-only text should also be added to a pagination element. In t
 
 ```html_example
 <ul class="pagination" role="navigation" aria-label="Pagination">
-  <li class="disabled">Previous <span class="show-for-sr">page</span></li>
+  <li class="pagination-previous disabled">Previous <span class="show-for-sr">page</span></li>
   <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
   <li><a href="#" aria-label="Page 2">2</a></li>
   <li><a href="#" aria-label="Page 3">3</a></li>
@@ -22,7 +22,7 @@ Extra screen reader-only text should also be added to a pagination element. In t
   <li class="ellipsis" aria-hidden="true"></li>
   <li><a href="#" aria-label="Page 12">12</a></li>
   <li><a href="#" aria-label="Page 13">13</a></li>
-  <li><a href="#" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>
+  <li class="pagination-next"><a href="#" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>
 </ul>
 ```
 
@@ -34,7 +34,7 @@ The items in a pagination list are `display: inline-block`, which makes centerin
 
 ```html_example
 <ul class="pagination text-center" role="navigation" aria-label="Pagination">
-  <li class="disabled">Previous</li>
+  <li class="pagination-previous disabled">Previous</li>
   <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
   <li><a href="#" aria-label="Page 2">2</a></li>
   <li><a href="#" aria-label="Page 3">3</a></li>
@@ -42,6 +42,6 @@ The items in a pagination list are `display: inline-block`, which makes centerin
   <li class="ellipsis"></li>
   <li><a href="#" aria-label="Page 12">12</a></li>
   <li><a href="#" aria-label="Page 13">13</a></li>
-  <li><a href="#" aria-label="Next page">Next</a></li>
+  <li class="pagination-next"><a href="#" aria-label="Next page">Next</a></li>
 </ul>
 ```

diff --git a/scss/components/_pagination.scss b/scss/components/_pagination.scss
index 72aba4e57ff9db7cd900228d7469145710b638cc..4d4557779a363489a66545cb042e1e7bf7baa479 100644 (file)
--- a/scss/components/_pagination.scss
+++ b/scss/components/_pagination.scss
@@ -95,25 +95,6 @@ $pagination-arrows: true !default;
       background: $pagination-item-background-hover;
     }
   }
-
-  // Symbols
-  @if $pagination-arrows {
-    [aria-label='previous'] {
-      &::before {
-        content: '«';
-        display: inline-block;
-        margin-#{$global-right}: 0.75rem;
-      }
-    }
-
-    [aria-label='next'] {
-      &::after {
-        content: '»';
-        display: inline-block;
-        margin-#{$global-left}: 0.75rem;
-      }
-    }
-  }
 }
 
 /// Adds styles for the current pagination item. Apply this to an `<a>`.
@@ -158,4 +139,20 @@ $pagination-arrows: true !default;
       @include pagination-ellipsis;
     }
   }
+
+  @if $pagination-arrows {
+    .pagination-previous a::before,
+    .pagination-previous.disabled::before {
+      content: '«';
+      display: inline-block;
+      margin-#{$global-right}: 0.5rem;
+    }
+
+    .pagination-next a::after,
+    .pagination-next.disabled::after {
+      content: '»';
+      display: inline-block;
+      margin-#{$global-left}: 0.5rem;
+    }
+  }
 }