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(fg-bold);
  37                                         color: _palette(bg);
  38
  39                                         &:hover {
  40                                                 background-color: _palette(highlight);
  41                                                 color: _palette(bg) !important;
  42                                         }
  43
  44                                         &:active {
  45                                                 background-color: desaturate(darken(_palette(highlight), 15), 5);
  46                                         }
  47                                 }
  48                         }
  49
  50                         &:first-child {
  51                                 padding-right: 0.75em;
  52                         }
  53
  54                         &:last-child {
  55                                 padding-left: 0.75em;
  56                         }
  57                 }
  58
  59                 @include breakpoint('<=xsmall') {
  60                         li {
  61                                 &:nth-child(n+2):nth-last-child(n+2) {
  62                                         display: none;
  63                                 }
  64
  65                                 &:first-child {
  66                                         padding-right: 0;
  67                                 }
  68                         }
  69                 }
  70         }
  71
  72
  73         ul.prev-next {
  74                 cursor: default;
  75                 list-style: none;
  76                 padding-left: 0;
  77
  78                 li {
  79                         display: inline-block;
  80                         padding-left: 0;
  81                         vertical-align: middle;
  82
  83                         &:first-child {
  84                                 padding-right: 0.75em;
  85                         }
  86
  87                         &:last-child {
  88                                 padding-left: 0.75em;
  89                         }
  90                 }
  91
  92                 @include breakpoint('<=xsmall') {
  93                         li {
  94                                 &:nth-child(n+2):nth-last-child(n+2) {
  95                                         display: none;
  96                                 }
  97
  98                                 &:first-child {
  99                                         padding-right: 0;
 100                                 }
 101                         }
 102                 }
 103         }