mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00

1. move a couple of them before the more specific ones. 2. change nesting to be under the same parent selector 3. use the ampersand more
64 lines
1.5 KiB
SCSS
64 lines
1.5 KiB
SCSS
.pagination {
|
|
display: flex;
|
|
@include list-unstyled();
|
|
@include border-radius();
|
|
}
|
|
|
|
.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;
|
|
|
|
@include hover-focus {
|
|
color: $pagination-hover-color;
|
|
text-decoration: none;
|
|
background-color: $pagination-hover-bg;
|
|
border-color: $pagination-hover-border-color;
|
|
}
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
|
|
&.active .page-link {
|
|
z-index: 1;
|
|
color: $pagination-active-color;
|
|
background-color: $pagination-active-bg;
|
|
border-color: $pagination-active-border-color;
|
|
}
|
|
|
|
&.disabled .page-link {
|
|
color: $pagination-disabled-color;
|
|
pointer-events: none;
|
|
background-color: $pagination-disabled-bg;
|
|
border-color: $pagination-disabled-border-color;
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Sizing
|
|
//
|
|
|
|
.pagination-lg {
|
|
@include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
|
|
}
|
|
|
|
.pagination-sm {
|
|
@include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
|
|
}
|