_pagination.scss 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. // Pagination
  2. .pagination {
  3. // default look for page item, firsy and last item
  4. .page-item {
  5. border-radius: 5rem;
  6. &.prev-item,
  7. &.next-item,
  8. &.first,
  9. &.last{
  10. .page-link {
  11. color: $primary;
  12. }
  13. &.disabled {
  14. .page-link {
  15. color: $secondary;
  16. }
  17. }
  18. }
  19. &:not(.prev-item),
  20. &:not(.next-item),
  21. &:not(.first),
  22. &:not(.last),
  23. &:not(.active){
  24. .page-link{
  25. line-height: 1.3;
  26. }
  27. }
  28. // prev and last item saperated styles
  29. &.prev-item {
  30. margin-right: .3571rem;
  31. .page-link {
  32. background-color: $pagination-bg-color;
  33. padding: $pagination-action-padding-y $pagination-action-padding-x;
  34. border-radius: 50%;
  35. &:before {
  36. content: "\e843";
  37. font-family: 'feather';
  38. }
  39. &:hover {
  40. background: $primary;
  41. color: $white;
  42. }
  43. }
  44. &~.page-item:nth-child(2){
  45. border-top-left-radius: 5rem;
  46. border-bottom-left-radius: 5rem;
  47. .page-link {
  48. border-top-left-radius: 5rem !important;
  49. border-bottom-left-radius: 5rem !important;
  50. }
  51. }
  52. &~.page-item:nth-last-child(2){
  53. border-top-right-radius: 5rem;
  54. border-bottom-right-radius: 5rem;
  55. .page-link {
  56. border-top-right-radius: 5rem !important;
  57. border-bottom-right-radius: 5rem !important;
  58. }
  59. }
  60. }
  61. &.next-item {
  62. margin-left: .3571rem;
  63. .page-link {
  64. background-color: $pagination-bg-color;
  65. padding: $pagination-action-padding-y $pagination-action-padding-x;
  66. border-radius: 50%;
  67. &:after {
  68. content: "\e844";
  69. font-family: 'feather';
  70. }
  71. &:hover {
  72. background: $primary;
  73. color: $white;
  74. }
  75. }
  76. }
  77. // prev and next style
  78. &.prev, &.previous{
  79. .page-link{
  80. &:before {
  81. content: "\e843";
  82. font-family: 'feather';
  83. }
  84. }
  85. }
  86. &.next{
  87. .page-link{
  88. &:after {
  89. content: "\e844";
  90. font-family: 'feather';
  91. }
  92. }
  93. }
  94. // page link customization
  95. .page-link {
  96. border: none;
  97. margin: 0;
  98. color: rgba($pure-black, .9);
  99. background-color: $pagination-bg-color;
  100. margin-left: 0;
  101. font-size: 1rem;
  102. font-weight: 700;
  103. i {
  104. position: relative;
  105. top: 1px;
  106. }
  107. &:focus {
  108. box-shadow: none;
  109. }
  110. &:hover {
  111. color: $primary;
  112. }
  113. }
  114. // for active page item
  115. &.active {
  116. background-color: $pagination-bg-color;
  117. border-radius: 0;
  118. .page-link {
  119. z-index: 3;
  120. border-radius: 5rem;
  121. background-color: $primary;
  122. color: $white;
  123. transform: scale(1.05);
  124. }
  125. }
  126. // if you dont want seprated look
  127. &:first-child:not(.prev-item){
  128. &.active{
  129. border-top-left-radius: 1.428rem;
  130. border-bottom-left-radius: 1.428rem;
  131. .page-link{
  132. border-radius: 5rem;
  133. }
  134. }
  135. .page-link {
  136. border-top-left-radius: 1.428rem;
  137. border-bottom-left-radius: 1.428rem;
  138. }
  139. }
  140. &:last-child:not(.next-item) {
  141. &.active{
  142. border-top-right-radius: 1.428rem;
  143. border-bottom-right-radius: 1.428rem;
  144. .page-link{
  145. border-radius: 5rem;
  146. }
  147. }
  148. .page-link {
  149. border-top-right-radius: 1.428rem;
  150. border-bottom-right-radius: 1.428rem;
  151. }
  152. }
  153. }
  154. // For Pagination lg
  155. &.pagination-lg {
  156. .page-item {
  157. .page-link {
  158. font-size: $pagination-font-size-lg;
  159. transform: scale(1);
  160. }
  161. }
  162. }
  163. }