dev/scss/main/pagination.scss

@charset "utf-8";
@use 'sass:math';
@use "../util";
@use "../base/choose";
@use "../base/icons";
@use "../base/lengths";
@use "../base/mixins";

/**
 * The pagination view
 *
 * <div id="pagination">
 *   <a rel="prev"><span><i class="fa fa-caret-left"></i></span></a>
 *   <a rel="self"><span>1</span></a>
 *   <a href="#p=2"><span>2</span></a>
 *   <a href="#3"><span>3</span></a>
 *   <span><i class="fa fa-ellipsis-h"></i></span>
 *   <a href="#67"><span>67</span></a>
 *   <a rel="next" href="#2"><span><i class="fa fa-caret-right"></i></span></a>
 * </div>
 */
#pagination {
  /*
   * Always in fixed position.
   * This may need to be overwritten in case multiple
   * paginations have to be activated.
   */
    position:    fixed;
    font-size:   0;
    right:       math.div(lengths.$standard-margin,4);
    bottom:      math.div(lengths.$standard-margin,2);
    z-index:     35;
    padding:     0;
    height:      auto;
    line-height: 0;
    
    > * {
        font-size: 10pt !important;
        line-height: 2em;
        vertical-align: bottom;

        &:not(:link):not([rel=self]) {
            color: choose.$choose-blind-color;
        }

        &.ellipsis, &[rel=prev], &[rel=next] {
            > span {
	        @include mixins.blind;
            }
        }
    
        &.ellipsis::after {
	    @include mixins.icon-font;
	    content:     icons.$fa-elipsis;
	    line-height: 1em;
        }

        &[rel=self] {
            @include choose.choose-active;
            border: {
	        left-width:  lengths.$border-size;
	        right-width: lengths.$border-size;
	        left-style:  solid;
	        right-style: solid;
            }
        }

        &[rel=prev]::after {
            @include mixins.icon-font;
	    content:     icons.$fa-previous;
	    line-height: 1em;
        }

        &[rel=next]::after {
            @include mixins.icon-font;
	    content:     icons.$fa-next;
	    line-height: 1em;
        }
    }
}