public/scss/pagination.scss

@charset "utf-8";
@import "colors";

/**
 * 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="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=2"><span>2</span></a>
  <a href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=3"><span>3</span></a>
  <span><i class="fa fa-ellipsis-h"></i></span>
  <a href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=67"><span>67</span></a>
  <a rel="next" href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=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;
  right: 20px;

  bottom: 10px;
  z-index: 400;

  span {
    display: inline-block;
    background-color: $pagination-bg;
    height: 1.5em;
    line-height: 1.5em;
    @include standard-text-padding;
    text-align: center;
    border: {
      top-width: 2px;
      top-style: solid;
      bottom-width:  2px;
      bottom-style: solid;
      color: $pagination-border;
    }
    box-shadow: $pagination-box-shadow;
  }
  a {
    text-shadow: $light-shadow;
    &[rel=self] span {
      border: {
	color: $dark-orange;
	left-style: solid;
	right-style: solid;
	left-width: 2px;
	right-width: 2px;
      }
      background-color: $light-orange;
      color: $darkest-orange;
    }
    &[rel=next] span {
      border: {
	right-width: 2px;
	right-style: solid;
	top-right-radius: 12px;
	bottom-right-radius: 12px;
      }
    }
    &[rel=prev] span {
      border: {
	left-width: 2px;
	left-style: solid;
	top-left-radius: 12px;
	bottom-left-radius: 12px;
      }      
    }
    &[href] {
      color: $light-green;
      span:hover {
        background-color: $light-green;
        border-color: $dark-green;
        color: $dark-green;
        text-shadow: none;
      }
    }
  }
}