assets/sass/components/_pagination.scss

   1 ///
   2 /// Forty by HTML5 UP
   3 /// html5up.net | @ajlkn
   4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
   5 ///
   6
   7 /* Pagination */
   8
   9         ul.pagination {
  10                 cursor: default;
  11                 list-style: none;
  12                 padding-left: 0;
  13
  14                 li {
  15                         display: inline-block;
  16                         padding-left: 0;
  17                         vertical-align: middle;
  18
  19                         > .page {
  20                                 @include vendor('transition', (
  21                                         'background-color #{_duration(transition)} ease-in-out',
  22                                         'color #{_duration(transition)} ease-in-out'
  23                                 ));
  24                                 border-bottom: 0;
  25                                 display: inline-block;
  26                                 font-size: 0.8em;
  27                                 font-weight: _font(weight-bold);
  28                                 height: 1.5em;
  29                                 line-height: 1.5em;
  30                                 margin: 0 0.125em;
  31                                 min-width: 1.5em;
  32                                 padding: 0 0.5em;
  33                                 text-align: center;
  34
  35                                 &.active {
  36                                         background-color: _palette_light(fg-bold);
  37                                         color: _palette_light(bg);
  38                                         @media screen and (prefers-color-scheme: dark) {
  39                                                 background-color: _palette_dark(fg-bold);
  40                                                 color: _palette_dark(bg);
  41                                         }
  42
  43                                         &:hover {
  44                                                 background-color: _palette_light(highlight);
  45                                                 color: _palette_light(bg) !important;
  46                                                 @media screen and (prefers-color-scheme: dark) {
  47                                                         background-color: _palette_dark(highlight);
  48                                                         color: _palette_dark(bg) !important;
  49                                                 }
  50                                         }
  51
  52                                         &:active {
  53                                                 background-color: desaturate(darken(_palette_light(highlight), 15), 5);
  54                                                 @media screen and (prefers-color-scheme: dark) {
  55                                                         background-color: desaturate(darken(_palette_dark(highlight), 15), 5);
  56                                                 }
  57                                         }
  58                                 }
  59                         }
  60
  61                         &:first-child {
  62                                 padding-right: 0.75em;
  63                         }
  64
  65                         &:last-child {
  66                                 padding-left: 0.75em;
  67                         }
  68                 }
  69
  70                 @include breakpoint('<=xsmall') {
  71                         li {
  72                                 &:nth-child(n+2):nth-last-child(n+2) {
  73                                         display: none;
  74                                 }
  75
  76                                 &:first-child {
  77                                         padding-right: 0;
  78                                 }
  79                         }
  80                 }
  81         }
  82
  83
  84         ul.prev-next {
  85                 cursor: default;
  86                 list-style: none;
  87                 padding-left: 0;
  88
  89                 li {
  90                         display: inline-block;
  91                         padding-left: 0;
  92                         vertical-align: middle;
  93
  94                         &:first-child {
  95                                 padding-right: 0.75em;
  96                         }
  97
  98                         &:last-child {
  99                                 padding-left: 0.75em;
 100                         }
 101                 }
 102
 103                 @include breakpoint('<=xsmall') {
 104                         li {
 105                                 &:nth-child(n+2):nth-last-child(n+2) {
 106                                         display: none;
 107                                 }
 108
 109                                 &:first-child {
 110                                         padding-right: 0;
 111                                 }
 112                         }
 113                 }
 114         }