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
This commit is contained in:
GeoSot 2019-08-03 17:11:57 +03:00 committed by Mark Otto
parent 81af1bf9cc
commit 4ae6a29b12
3 changed files with 19 additions and 19 deletions

View File

@ -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);

View File

@ -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;

View File

@ -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);
}
}
}