public/vendors/bulma/sass/components/pagination.sass

   1 $pagination-color: $text-strong !default
   2 $pagination-border-color: $border !default
   3 $pagination-margin: -0.25rem !default
   4 $pagination-min-width: $control-height !default
   5
   6 $pagination-item-font-size: 1em !default
   7 $pagination-item-margin: 0.25rem !default
   8 $pagination-item-padding-left: 0.5em !default
   9 $pagination-item-padding-right: 0.5em !default
  10
  11 $pagination-hover-color: $link-hover !default
  12 $pagination-hover-border-color: $link-hover-border !default
  13
  14 $pagination-focus-color: $link-focus !default
  15 $pagination-focus-border-color: $link-focus-border !default
  16
  17 $pagination-active-color: $link-active !default
  18 $pagination-active-border-color: $link-active-border !default
  19
  20 $pagination-disabled-color: $text-light !default
  21 $pagination-disabled-background-color: $border !default
  22 $pagination-disabled-border-color: $border !default
  23
  24 $pagination-current-color: $link-invert !default
  25 $pagination-current-background-color: $link !default
  26 $pagination-current-border-color: $link !default
  27
  28 $pagination-ellipsis-color: $grey-light !default
  29
  30 $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
  31
  32 .pagination
  33   @extend %block
  34   font-size: $size-normal
  35   margin: $pagination-margin
  36   // Sizes
  37   &.is-small
  38     font-size: $size-small
  39   &.is-medium
  40     font-size: $size-medium
  41   &.is-large
  42     font-size: $size-large
  43   &.is-rounded
  44     .pagination-previous,
  45     .pagination-next
  46       padding-left: 1em
  47       padding-right: 1em
  48       border-radius: $radius-rounded
  49     .pagination-link
  50       border-radius: $radius-rounded
  51
  52 .pagination,
  53 .pagination-list
  54   align-items: center
  55   display: flex
  56   justify-content: center
  57   text-align: center
  58
  59 .pagination-previous,
  60 .pagination-next,
  61 .pagination-link,
  62 .pagination-ellipsis
  63   @extend %control
  64   @extend %unselectable
  65   font-size: $pagination-item-font-size
  66   justify-content: center
  67   margin: $pagination-item-margin
  68   padding-left: $pagination-item-padding-left
  69   padding-right: $pagination-item-padding-right
  70   text-align: center
  71
  72 .pagination-previous,
  73 .pagination-next,
  74 .pagination-link
  75   border-color: $pagination-border-color
  76   color: $pagination-color
  77   min-width: $pagination-min-width
  78   &:hover
  79     border-color: $pagination-hover-border-color
  80     color: $pagination-hover-color
  81   &:focus
  82     border-color: $pagination-focus-border-color
  83   &:active
  84     box-shadow: $pagination-shadow-inset
  85   &[disabled]
  86     background-color: $pagination-disabled-background-color
  87     border-color: $pagination-disabled-border-color
  88     box-shadow: none
  89     color: $pagination-disabled-color
  90     opacity: 0.5
  91
  92 .pagination-previous,
  93 .pagination-next
  94   padding-left: 0.75em
  95   padding-right: 0.75em
  96   white-space: nowrap
  97
  98 .pagination-link
  99   &.is-current
 100     background-color: $pagination-current-background-color
 101     border-color: $pagination-current-border-color
 102     color: $pagination-current-color
 103
 104 .pagination-ellipsis
 105   color: $pagination-ellipsis-color
 106   pointer-events: none
 107
 108 .pagination-list
 109   flex-wrap: wrap
 110
 111 +mobile
 112   .pagination
 113     flex-wrap: wrap
 114   .pagination-previous,
 115   .pagination-next
 116     flex-grow: 1
 117     flex-shrink: 1
 118   .pagination-list
 119     li
 120       flex-grow: 1
 121       flex-shrink: 1
 122
 123 +tablet
 124   .pagination-list
 125     flex-grow: 1
 126     flex-shrink: 1
 127     justify-content: flex-start
 128     order: 1
 129   .pagination-previous
 130     order: 2
 131   .pagination-next
 132     order: 3
 133   .pagination
 134     justify-content: space-between
 135     &.is-centered
 136       .pagination-previous
 137         order: 1
 138       .pagination-list
 139         justify-content: center
 140         order: 2
 141       .pagination-next
 142         order: 3
 143     &.is-right
 144       .pagination-previous
 145         order: 1
 146       .pagination-next
 147         order: 2
 148       .pagination-list
 149         justify-content: flex-end
 150         order: 3