diff --git a/scss/_pagination.scss b/scss/_pagination.scss index 27e7bb8057..c51272dd79 100644 --- 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 95067724a4..d082079408 100644 --- 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 af8e16d6a9..2c31a8cc51 100644 --- 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); } } }