Add transition to Pagination buttons just like other Bootstrap buttons

diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index 40b100b1897f232c597d2d62ac7ea2f66869a7f8..819f6d1eb0411827955067fe55c7e591b5abd14c 100644 (file)
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -10,6 +10,7 @@
   text-decoration: if($link-decoration == none, null, none);
   background-color: $pagination-bg;
   border: $pagination-border-width solid $pagination-border-color;
+  @include transition($pagination-transition);
 
   &:hover {
     z-index: 2;
@@ -21,6 +22,8 @@
 
   &:focus {
     z-index: 3;
+    color: $pagination-focus-color;
+    background-color: $pagination-focus-bg;
     outline: $pagination-focus-outline;
     box-shadow: $pagination-focus-box-shadow;
   }

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 9e2af089fdbfaf17c74e94dfbbb2ae9940ac1007..8ac8b143bf050c5b56f0c5f3f15c3ab1939285bc 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -954,6 +954,8 @@ $pagination-border-radius:          $border-radius !default;
 $pagination-margin-left:            -$pagination-border-width !default;
 $pagination-border-color:           $gray-300 !default;
 
+$pagination-focus-color:            $link-hover-color !default;
+$pagination-focus-bg:               $gray-200 !default;
 $pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
 $pagination-focus-outline:          0 !default;
 
@@ -969,6 +971,7 @@ $pagination-disabled-color:         $gray-600 !default;
 $pagination-disabled-bg:            $white !default;
 $pagination-disabled-border-color:  $gray-300 !default;
 
+$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
 // Cards