| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225 |
- /* Pagination
- ******************************************************************************* */
-
- .pagination {
- --#{$prefix}pagination-box-shadow-color: #{$pagination-box-shadow-color};
- padding-inline-start: 0;
- &[class*="pagination-outline-"] {
- .page-item.active .page-link {
- box-shadow: none;
- }
- .page-item:not(.active) .page-link,
- & li > a:not(.page-link) {
- --#{$prefix}pagination-bg: transparent;
- --#{$prefix}pagination-hover-bg: rgba(var(--#{$prefix}base-color-rgb), .06);
- --#{$prefix}pagination-hover-color: var(--#{$prefix}pagination-color);
- --#{$prefix}pagination-hover-border-color: color-mix(in sRGB, #{$black} 22%, var(--#{$prefix}paper-bg));
- --#{$prefix}pagination-focus-bg: rgba(var(--#{$prefix}base-color-rgb), .06);
- --#{$prefix}pagination-focus-color: var(--#{$prefix}pagination-color);
- }
- }
- &.pagination-lg {
- --#{$prefix}pagination-font-size: #{$font-size-lg};
- }
- &.pagination-sm {
- --#{$prefix}pagination-font-size: #{$font-size-sm};
- }
- .page-item .page-link,
- & li > a:not(.page-link) {
- &:focus {
- color: var(--#{$prefix}pagination-focus-color);
- }
- }
- .page-item.active .page-link,
- & li.active > a:not(.page-link) {
- box-shadow: 0 .125rem .25rem 0 rgba(var(--#{$prefix}pagination-box-shadow-color), .4);
- color: var(--#{$prefix}pagination-active-color);
- }
- &:not([class*="pagination-outline-"]) {
- .page-link {
- border-color: transparent;
- }
- }
-
- // Pagination shapes + border less
- &.pagination-square .page-item a {
- @include border-radius(0);
- }
- &.pagination-round .page-item a {
- @include border-radius(50%);
- }
- &.pagination-rounded .page-item a {
- @include border-radius($border-radius);
- }
- &.pagination-sm.pagination-rounded .page-item a {
- @include border-radius($border-radius-sm);
- }
- &.pagination-lg.pagination-rounded .page-item a {
- @include border-radius($border-radius-lg);
- }
- }
-
- /* Pagination next, prev, first & last css padding */
- .page-item {
- &.disabled,
- &[disabled] {
- .page-link {
- opacity: $pagination-disabled-opacity;
- pointer-events: none;
- }
- }
- }
- .page-item:last-child .icon-base {
- transform: translateX(7%);
- }
-
- /* Pagination basic style */
- .page-link,
- .page-link > a {
- @include border-radius($border-radius);
- display: inline-flex !important;
- align-items: center;
- justify-content: center;
- min-block-size:
- calc(
- #{"#{($font-size-base * $pagination-line-height) + ($pagination-padding-y * 2)} + calc(#{$pagination-border-width} * 2)"}
- );
- min-inline-size:
- calc(
- #{"#{($font-size-base * $pagination-line-height) + ($pagination-padding-x * 1.923)} + calc(#{$pagination-border-width} * 2)"}
- );
- }
-
- /* Sizing
- ******************************************************************************* */
-
- /* Pagination Large */
- .pagination-lg .page-link,
- .pagination-lg > li > a:not(.page-link) {
- min-block-size:
- calc(
- #{"#{($font-size-base * $pagination-line-height) + ($pagination-padding-y-lg * 2.33)} + calc(#{$pagination-border-width} * 2)"}
- );
- min-inline-size:
- calc(
- #{"#{($font-size-base * $pagination-line-height) + ($pagination-padding-x-lg * 1.615)} + calc(#{$pagination-border-width} * 2)"}
- );
- }
-
- .pagination-lg > .page-item {
- &.first,
- &.last,
- &.next,
- &.prev,
- &.previous {
- .page-link {
- padding-inline: $pagination-padding-y-lg - .0845rem;
- }
- }
- }
-
- /* Pagination Small */
- .pagination-sm .page-link,
- .pagination-sm > li > a:not(.page-link) {
- min-block-size:
- calc(
- #{"#{($font-size-sm * $pagination-line-height) + ($pagination-padding-y-sm * 2)} + calc(#{$pagination-border-width} * 2)"}
- );
- min-inline-size:
- calc(
- #{"#{($font-size-sm * $pagination-line-height) + ($pagination-padding-x-sm * 2.356)} + calc(#{$pagination-border-width} * 2)"}
- );
- }
-
- .pagination-sm > .page-item {
- &.first,
- &.last,
- &.next,
- &.prev,
- &.previous {
- .page-link {
- padding-block: $pagination-padding-y-sm - .1055rem;
- padding-inline: $pagination-padding-y-sm - .1055rem;
- }
- }
- }
-
- /* Add spacing between pagination items */
- .page-item + .page-item .page-link,
- .pagination li + li > a:not(.page-link) {
- .pagination-sm & {
- margin-inline-start: .25rem;
- }
- .pagination-lg & {
- margin-inline-start: .5rem;
- }
- }
-
- /* RTL pagination
- ******************************************************************************* */
-
- /* Add spacing between pagination items */
- :dir(rtl) {
- .pagination {
- padding-inline-end: 0;
- }
-
- .page-item .page-link,
- .pagination li > a:not(.page-link) {
- margin-inline: 0 $pagination-margin-start;
- }
-
- .page-item {
- &.first,
- &.last,
- &.next,
- &.prev,
- &.previous {
- .page-link {
- .icon-base {
- transform: rotate(180deg);
- }
- }
- }
- }
- }
-
- /* Dark theme
- ******************************************************************************* */
-
- @if $enable-dark-mode {
- @include color-mode(dark) {
- .pagination {
- --#{$prefix}pagination-disabled-color: var(--#{$prefix}pagination-color);
- &[class*="pagination-outline-"] {
- .page-item:not(.active) .page-link,
- & li > a:not(.page-link) {
- --#{$prefix}pagination-border-color: #{rgba($white-dark, .22)};
- --#{$prefix}pagination-hover-border-color: var(--#{$prefix}pagination-border-color);
- --#{$prefix}pagination-disabled-border-color: var(--#{$prefix}pagination-border-color);
- }
- }
- }
- }
- }
-
- // scss-docs-start pagination-modifiers
- @each $state in map-keys($theme-colors) {
- .pagination {
- &.pagination-#{$state} {
- --#{$prefix}pagination-hover-bg: var(--#{$prefix}#{$state}-bg-subtle);
- --#{$prefix}pagination-hover-color: var(--#{$prefix}#{$state});
- --#{$prefix}pagination-focus-bg: var(--#{$prefix}#{$state}-bg-subtle);
- --#{$prefix}pagination-focus-color: var(--#{$prefix}#{$state});
- --#{$prefix}pagination-active-bg: var(--#{$prefix}#{$state});
- --#{$prefix}pagination-box-shadow-color: var(--#{$prefix}#{$state}-rgb);
- }
- &.pagination-outline-#{$state} {
- --#{$prefix}pagination-active-bg: var(--#{$prefix}#{$state}-bg-subtle);
- --#{$prefix}pagination-active-color: var(--#{$prefix}#{$state});
- --#{$prefix}pagination-active-border-color: var(--#{$prefix}#{$state});
- }
- }
- }
-
- // scss-docs-end pagination-modifiers
|