assets/main/sass/components/_pagination.scss

   1 ///
   2 /// Massively 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         .pagination {
  10                 @include vendor('display', 'inline-flex');
  11                 @include vendor('user-select', 'none');
  12                 cursor: default;
  13                 list-style: none;
  14                 margin: 0 0 _size(element-margin) 2px;
  15                 padding: 0;
  16
  17                 a, span {
  18                         @include vendor('transition', (
  19                                 'background-color #{_duration(transition)} ease-in-out',
  20                                 'border-color #{_duration(transition)} ease-in-out',
  21                                 'box-shadow #{_duration(transition)} ease-in-out',
  22                                 'color #{_duration(transition)} ease-in-out'
  23                         ));
  24                         border: solid 2px;
  25                         display: inline-block;
  26                         font-family: _font(family-heading);
  27                         font-size: 0.8rem;
  28                         font-weight: _font(weight-heading);
  29                         height: _size(element-height);
  30                         letter-spacing: 0.075em;
  31                         letter-spacing: _font(letter-spacing-heading);
  32                         line-height: calc(#{_size(element-height)} - 4px);
  33                         margin-left: -2px;
  34                         min-width: _size(element-height);
  35                         position: relative;
  36                         text-align: center;
  37                         text-decoration: none;
  38                         text-transform: uppercase;
  39                 }
  40
  41                 .next, .previous {
  42                         @include icon;
  43                         padding: 0 1.75rem;
  44
  45                         &:before {
  46                                 display: inline-block;
  47                                 color: inherit !important;
  48                         }
  49                 }
  50
  51                 .previous {
  52                         &:before {
  53                                 content: '\f104';
  54                                 margin-right: (0.75em / 0.8);
  55                         }
  56                 }
  57
  58                 .next {
  59                         &:before {
  60                                 content: '\f105';
  61                                 float: right;
  62                                 margin-left: (0.75em / 0.8);
  63                         }
  64                 }
  65
  66                 @include breakpoint('<=medium') {
  67                         a, span {
  68                                 font-size: 0.9rem;
  69                         }
  70                 }
  71
  72                 @include breakpoint('<=xsmall') {
  73                         .page, .extra {
  74                                 display: none;
  75                         }
  76                 }
  77         }
  78
  79         @mixin color-pagination($p: null) {
  80                 .pagination {
  81                         a, span {
  82                                 border-color: _palette($p, border);
  83                         }
  84
  85                         a {
  86                                 color: _palette($p, fg-bold) !important;
  87
  88                                 &:hover {
  89                                         color: _palette($p, accent) !important;
  90                                         border-color: _palette($p, accent);
  91                                         z-index: 1;
  92
  93                                         & + a,
  94                                         & + span {
  95                                                 border-left-color: _palette($p, accent);
  96                                         }
  97                                 }
  98
  99                                 &.active {
 100                                         background-color: _palette($p, border);
 101                                 }
 102                         }
 103
 104                         span {
 105                                 color: _palette($p, border);
 106                         }
 107                 }
 108         }
 109
 110         @include color-pagination;