Allow .page-links to get left margin. (#28948)

* Allow .page-links to get left margin.

* Add border-radius to page-links in case they have left margin

* Apply MartijnCuppens suggestion to _pagination.scss

Co-Authored-By: Martijn Cuppens <martijn.cuppens@gmail.com>
* Plus if/else Rules

* Formatting fixes

* Fix border-radius for pagination-size

* Use mixin for default pagination sizing

diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index 27e7bb80573fc7f40dc957ac43226bee03588f92..c51272dd79889449e948effd912072089126d928 100644 (file)
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -6,9 +6,6 @@
 .page-link {
   position: relative;
   display: block;
-  padding: $pagination-padding-y $pagination-padding-x;
-  margin-left: -$pagination-border-width;
-  line-height: $pagination-line-height;
   color: $pagination-color;
   background-color: $pagination-bg;
   border: $pagination-border-width solid $pagination-border-color;
@@ -29,16 +26,8 @@
 }
 
 .page-item {
-  &:first-child {
-    .page-link {
-      margin-left: 0;
-      @include border-left-radius($border-radius);
-    }
-  }
-  &:last-child {
-    .page-link {
-      @include border-right-radius($border-radius);
-    }
+  &:not(:first-child) .page-link {
+    margin-left: $pagination-margin-left;
   }
 
   &.active .page-link {
@@ -62,6 +51,7 @@
 //
 // Sizing
 //
+@include pagination-size($pagination-padding-y, $pagination-padding-x, null, $pagination-line-height, $pagination-border-radius);
 
 .pagination-lg {
   @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 95067724a4cb876074095280709179bef0b91041..d0820794084f4b62b28a90825adc6b33cb853392 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -809,6 +809,8 @@ $pagination-line-height:            1.25 !default;
 $pagination-color:                  $link-color !default;
 $pagination-bg:                     $white !default;
 $pagination-border-width:           $border-width !default;
+$pagination-border-radius:          $border-radius !default;
+$pagination-margin-left:            -$pagination-border-width !default;
 $pagination-border-color:           $gray-300 !default;
 
 $pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;

diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss
index af8e16d6a911c097666e54a7abcb091187b07f0c..2c31a8cc5109b0ae48f681001af49ff57f6cbe99 100644 (file)
--- a/scss/mixins/_pagination.scss
+++ b/scss/mixins/_pagination.scss
@@ -8,14 +8,22 @@
   }
 
   .page-item {
-    &:first-child {
-      .page-link {
-        @include border-left-radius($border-radius);
+    @if $pagination-margin-left == (-$pagination-border-width) {
+      &:first-child {
+        .page-link {
+          @include border-left-radius($border-radius);
+        }
       }
-    }
-    &:last-child {
+
+      &:last-child {
+        .page-link {
+          @include border-right-radius($border-radius);
+        }
+      }
+    } @else {
+      //Add border-radius to all pageLinks in case they have left margin
       .page-link {
-        @include border-right-radius($border-radius);
+        @include border-radius($border-radius);
       }
     }
   }