123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 |
- // Foundation by ZURB
- // foundation.zurb.com
- // Licensed under MIT Open Source
- @import "global";
- //
- // @variables
- //
- $include-pagination-classes: $include-html-classes !default;
- // We use these to control the pagination container
- $pagination-height: rem-calc(24) !default;
- $pagination-margin: rem-calc(-5) !default;
- // We use these to set the list-item properties
- $pagination-li-float: $default-float !default;
- $pagination-li-height: rem-calc(24) !default;
- $pagination-li-font-color: $jet !default;
- $pagination-li-font-size: rem-calc(14) !default;
- $pagination-li-margin: rem-calc(5) !default;
- // We use these for the pagination anchor links
- $pagination-link-pad: rem-calc(1 10 1) !default;
- $pagination-link-font-color: $aluminum !default;
- $pagination-link-active-bg: scale-color($white, $lightness: -10%) !default;
- // We use these for disabled anchor links
- $pagination-link-unavailable-cursor: default !default;
- $pagination-link-unavailable-font-color: $aluminum !default;
- $pagination-link-unavailable-bg-active: transparent !default;
- // We use these for currently selected anchor links
- $pagination-link-current-background: $primary-color !default;
- $pagination-link-current-font-color: $white !default;
- $pagination-link-current-font-weight: $font-weight-bold !default;
- $pagination-link-current-cursor: default !default;
- $pagination-link-current-active-bg: $primary-color !default;
- // @mixins
- //
- // Style the pagination container. Currently only used when centering elements.
- // $center - Default: false, Options: true
- @mixin pagination-container($center:false) {
- @if $center { text-align: center; }
- }
- // @mixins
- // Style unavailable list items
- @mixin pagination-unavailable-item {
- a, button {
- cursor: $pagination-link-unavailable-cursor;
- color: $pagination-link-unavailable-font-color;
- }
- &:hover a,
- & a:focus,
- &:hover button,
- & button:focus
- { background: $pagination-link-unavailable-bg-active; }
- }
- // @mixins
- // Style the current list item. Do not assume that the current item has
- // an anchor <a> element.
- // $has-anchor - Default: true, Options: false
- @mixin pagination-current-item($has-anchor: true) {
- @if $has-anchor {
- a, button {
- background: $pagination-link-current-background;
- color: $pagination-link-current-font-color;
- font-weight: $pagination-link-current-font-weight;
- cursor: $pagination-link-current-cursor;
- &:hover,
- &:focus { background: $pagination-link-current-active-bg; }
- }
- } @else {
- height: auto;
- padding: $pagination-link-pad;
- background: $pagination-link-current-background;
- color: $pagination-link-current-font-color;
- font-weight: $pagination-link-current-font-weight;
- cursor: $pagination-link-current-cursor;
- @include radius;
- &:hover,
- &:focus { background: $pagination-link-current-active-bg; }
- }
- }
- // @mixins
- //
- // We use this mixin to set the properties for the creating Foundation pagination
- // $center - Left or center align the li elements. Default: false
- // $base-style - Sets base styles for pagination. Default: true, Options: false
- // $use-default-classes - Makes unavailable & current classes available for use. Default: true
- @mixin pagination($center:false, $base-style:true, $use-default-classes:true) {
- @if $base-style {
- display: block;
- min-height: $pagination-height;
- margin-#{$default-float}: $pagination-margin;
- li {
- height: $pagination-li-height;
- color: $pagination-li-font-color;
- font-size: $pagination-li-font-size;
- margin-#{$default-float}: $pagination-li-margin;
- a, button {
- display: block;
- padding: $pagination-link-pad;
- color: $pagination-link-font-color;
- background: none;
- @include radius;
- font-weight: normal;
- font-size: 1em;
- line-height: inherit;
- @include single-transition(background-color);
- }
- &:hover a,
- a:focus,
- &:hover button,
- button:focus
- { background: $pagination-link-active-bg; }
- @if $use-default-classes {
- &.unavailable { @include pagination-unavailable-item(); }
- &.current { @include pagination-current-item(); }
- }
- }
- }
- // Left or center align the li elements
- li {
- @if $center {
- float: none;
- display: inline-block;
- } @else {
- float: $pagination-li-float;
- display: block;
- }
- }
- }
- @include exports("pagination") {
- @if $include-pagination-classes {
- ul.pagination {
- @include pagination;
- }
- /* Pagination centred wrapper */
- .pagination-centered {
- @include pagination-container(true);
- ul.pagination {
- @include pagination(true, false);
- }
- }
- }
- }
|