fix: update pagination

techfromsage · Apr 21, 2021 · fc73410 · fc73410
1 parent ed29da4
commit fc73410
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 4 deletions.
diff --git a/docs/assets/css/talis.css b/docs/assets/css/talis.css
diff --git a/docs/assets/css/talis.css.map b/docs/assets/css/talis.css.map
diff --git a/docs/index.html b/docs/index.html
@@ -679,8 +679,8 @@ <h2 id="badges">Badges</h2>
         <div class="col-xs-12">
           <h2>Pagination</h2>
           <h3>Pagination Block</h3>
-          <nav class="text-center">
-            <ul class="pagination">
+          <nav>
+            <ul class="pagination justify-content-center">
               <li class="page-item">
                 <a class="page-link" href="#">Prev</a>
               </li>

diff --git a/scss/_pagination.scss b/scss/_pagination.scss
@@ -0,0 +1,14 @@
+.pagination {
+  .page-link:focus {
+    border-color: $primary;
+    box-shadow: 0 0 0 1px inset $primary;
+  }
+
+  > .active > .page-link {
+    color: $primary;
+    background-image: linear-gradient(0deg, $primary 4px, transparent 4px);
+    background-color: #fff;
+    border-color: $primary;
+    font-weight: 600;
+  }
+}
diff --git a/scss/talis.scss b/scss/talis.scss
@@ -40,6 +40,7 @@ $gray-700: #495057 !default;
 $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
 $black:    #000 !default;
+$white: #fff !default;
 
 $turquoise: #017d87;
 $accent: #005d64;
@@ -103,6 +104,14 @@ $btn-link-color: $primary !default;
 $btn-link-hover-color: $accent !default;
 $btn-link-disabled-color: $gray-500 !default;
 
+$pagination-border-color: $primary;
+$pagination-transition: none !default;
+$pagination-hover-border-color: $primary !default;
+
+$pagination-disabled-color:         $gray-500;
+$pagination-disabled-bg:            $white;
+$pagination-disabled-border-color:  $primary;
+
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
@@ -148,3 +157,4 @@ $btn-link-disabled-color: $gray-500 !default;
 @import 'alerts';
 @import 'buttons';
 @import 'pager';
+@import 'pagination';