Няма описание
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_pagination.scss 6.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. /* Pagination
  2. ******************************************************************************* */
  3. .pagination {
  4. --#{$prefix}pagination-box-shadow-color: #{$pagination-box-shadow-color};
  5. padding-inline-start: 0;
  6. &[class*="pagination-outline-"] {
  7. .page-item.active .page-link {
  8. box-shadow: none;
  9. }
  10. .page-item:not(.active) .page-link,
  11. & li > a:not(.page-link) {
  12. --#{$prefix}pagination-bg: transparent;
  13. --#{$prefix}pagination-hover-bg: rgba(var(--#{$prefix}base-color-rgb), .06);
  14. --#{$prefix}pagination-hover-color: var(--#{$prefix}pagination-color);
  15. --#{$prefix}pagination-hover-border-color: color-mix(in sRGB, #{$black} 22%, var(--#{$prefix}paper-bg));
  16. --#{$prefix}pagination-focus-bg: rgba(var(--#{$prefix}base-color-rgb), .06);
  17. --#{$prefix}pagination-focus-color: var(--#{$prefix}pagination-color);
  18. }
  19. }
  20. &.pagination-lg {
  21. --#{$prefix}pagination-font-size: #{$font-size-lg};
  22. }
  23. &.pagination-sm {
  24. --#{$prefix}pagination-font-size: #{$font-size-sm};
  25. }
  26. .page-item .page-link,
  27. & li > a:not(.page-link) {
  28. &:focus {
  29. color: var(--#{$prefix}pagination-focus-color);
  30. }
  31. }
  32. .page-item.active .page-link,
  33. & li.active > a:not(.page-link) {
  34. box-shadow: 0 .125rem .25rem 0 rgba(var(--#{$prefix}pagination-box-shadow-color), .4);
  35. color: var(--#{$prefix}pagination-active-color);
  36. }
  37. &:not([class*="pagination-outline-"]) {
  38. .page-link {
  39. border-color: transparent;
  40. }
  41. }
  42. // Pagination shapes + border less
  43. &.pagination-square .page-item a {
  44. @include border-radius(0);
  45. }
  46. &.pagination-round .page-item a {
  47. @include border-radius(50%);
  48. }
  49. &.pagination-rounded .page-item a {
  50. @include border-radius($border-radius);
  51. }
  52. &.pagination-sm.pagination-rounded .page-item a {
  53. @include border-radius($border-radius-sm);
  54. }
  55. &.pagination-lg.pagination-rounded .page-item a {
  56. @include border-radius($border-radius-lg);
  57. }
  58. }
  59. /* Pagination next, prev, first & last css padding */
  60. .page-item {
  61. &.disabled,
  62. &[disabled] {
  63. .page-link {
  64. opacity: $pagination-disabled-opacity;
  65. pointer-events: none;
  66. }
  67. }
  68. }
  69. .page-item:last-child .icon-base {
  70. transform: translateX(7%);
  71. }
  72. /* Pagination basic style */
  73. .page-link,
  74. .page-link > a {
  75. @include border-radius($border-radius);
  76. display: inline-flex !important;
  77. align-items: center;
  78. justify-content: center;
  79. min-block-size:
  80. calc(
  81. #{"#{($font-size-base * $pagination-line-height) + ($pagination-padding-y * 2)} + calc(#{$pagination-border-width} * 2)"}
  82. );
  83. min-inline-size:
  84. calc(
  85. #{"#{($font-size-base * $pagination-line-height) + ($pagination-padding-x * 1.923)} + calc(#{$pagination-border-width} * 2)"}
  86. );
  87. }
  88. /* Sizing
  89. ******************************************************************************* */
  90. /* Pagination Large */
  91. .pagination-lg .page-link,
  92. .pagination-lg > li > a:not(.page-link) {
  93. min-block-size:
  94. calc(
  95. #{"#{($font-size-base * $pagination-line-height) + ($pagination-padding-y-lg * 2.33)} + calc(#{$pagination-border-width} * 2)"}
  96. );
  97. min-inline-size:
  98. calc(
  99. #{"#{($font-size-base * $pagination-line-height) + ($pagination-padding-x-lg * 1.615)} + calc(#{$pagination-border-width} * 2)"}
  100. );
  101. }
  102. .pagination-lg > .page-item {
  103. &.first,
  104. &.last,
  105. &.next,
  106. &.prev,
  107. &.previous {
  108. .page-link {
  109. padding-inline: $pagination-padding-y-lg - .0845rem;
  110. }
  111. }
  112. }
  113. /* Pagination Small */
  114. .pagination-sm .page-link,
  115. .pagination-sm > li > a:not(.page-link) {
  116. min-block-size:
  117. calc(
  118. #{"#{($font-size-sm * $pagination-line-height) + ($pagination-padding-y-sm * 2)} + calc(#{$pagination-border-width} * 2)"}
  119. );
  120. min-inline-size:
  121. calc(
  122. #{"#{($font-size-sm * $pagination-line-height) + ($pagination-padding-x-sm * 2.356)} + calc(#{$pagination-border-width} * 2)"}
  123. );
  124. }
  125. .pagination-sm > .page-item {
  126. &.first,
  127. &.last,
  128. &.next,
  129. &.prev,
  130. &.previous {
  131. .page-link {
  132. padding-block: $pagination-padding-y-sm - .1055rem;
  133. padding-inline: $pagination-padding-y-sm - .1055rem;
  134. }
  135. }
  136. }
  137. /* Add spacing between pagination items */
  138. .page-item + .page-item .page-link,
  139. .pagination li + li > a:not(.page-link) {
  140. .pagination-sm & {
  141. margin-inline-start: .25rem;
  142. }
  143. .pagination-lg & {
  144. margin-inline-start: .5rem;
  145. }
  146. }
  147. /* RTL pagination
  148. ******************************************************************************* */
  149. /* Add spacing between pagination items */
  150. :dir(rtl) {
  151. .pagination {
  152. padding-inline-end: 0;
  153. }
  154. .page-item .page-link,
  155. .pagination li > a:not(.page-link) {
  156. margin-inline: 0 $pagination-margin-start;
  157. }
  158. .page-item {
  159. &.first,
  160. &.last,
  161. &.next,
  162. &.prev,
  163. &.previous {
  164. .page-link {
  165. .icon-base {
  166. transform: rotate(180deg);
  167. }
  168. }
  169. }
  170. }
  171. }
  172. /* Dark theme
  173. ******************************************************************************* */
  174. @if $enable-dark-mode {
  175. @include color-mode(dark) {
  176. .pagination {
  177. --#{$prefix}pagination-disabled-color: var(--#{$prefix}pagination-color);
  178. &[class*="pagination-outline-"] {
  179. .page-item:not(.active) .page-link,
  180. & li > a:not(.page-link) {
  181. --#{$prefix}pagination-border-color: #{rgba($white-dark, .22)};
  182. --#{$prefix}pagination-hover-border-color: var(--#{$prefix}pagination-border-color);
  183. --#{$prefix}pagination-disabled-border-color: var(--#{$prefix}pagination-border-color);
  184. }
  185. }
  186. }
  187. }
  188. }
  189. // scss-docs-start pagination-modifiers
  190. @each $state in map-keys($theme-colors) {
  191. .pagination {
  192. &.pagination-#{$state} {
  193. --#{$prefix}pagination-hover-bg: var(--#{$prefix}#{$state}-bg-subtle);
  194. --#{$prefix}pagination-hover-color: var(--#{$prefix}#{$state});
  195. --#{$prefix}pagination-focus-bg: var(--#{$prefix}#{$state}-bg-subtle);
  196. --#{$prefix}pagination-focus-color: var(--#{$prefix}#{$state});
  197. --#{$prefix}pagination-active-bg: var(--#{$prefix}#{$state});
  198. --#{$prefix}pagination-box-shadow-color: var(--#{$prefix}#{$state}-rgb);
  199. }
  200. &.pagination-outline-#{$state} {
  201. --#{$prefix}pagination-active-bg: var(--#{$prefix}#{$state}-bg-subtle);
  202. --#{$prefix}pagination-active-color: var(--#{$prefix}#{$state});
  203. --#{$prefix}pagination-active-border-color: var(--#{$prefix}#{$state});
  204. }
  205. }
  206. }
  207. // scss-docs-end pagination-modifiers