123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 |
- .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;
- &:hover {
- z-index: 2;
- color: $pagination-hover-color;
- text-decoration: none;
- background-color: $pagination-hover-bg;
- border-color: $pagination-hover-border-color;
- }
- &:focus {
- z-index: 2;
- outline: $pagination-focus-outline;
- box-shadow: $pagination-focus-box-shadow;
- }
- // Opinionated: add "hand" cursor to non-disabled .page-link elements
- &:not(:disabled):not(.disabled) {
- cursor: pointer;
- }
- }
- .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;
- // Opinionated: remove the "hand" cursor set previously for .page-link
- cursor: auto;
- 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);
- }
|