// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group pagination
////
/// Font size of pagination items.
/// @type Number
$pagination-font-size: rem-calc(14) !default;
/// Default bottom margin of the pagination object.
/// @type Number
$pagination-margin-bottom: $global-margin !default;
/// Text color of pagination items.
/// @type Color
$pagination-item-color: $black !default;
/// Padding inside of pagination items.
/// @type Number
$pagination-item-padding: rem-calc(3 10) !default;
/// Right margin to separate pagination items.
/// @type Number
$pagination-item-spacing: rem-calc(1) !default;
/// Default radius for pagination items.
/// @type Number
$pagination-radius: $global-radius !default;
/// Background color of pagination items on hover.
/// @type Color
$pagination-item-background-hover: $light-gray !default;
/// Background color of pagination item for the current page.
/// @type Color
$pagination-item-background-current: $primary-color !default;
/// Text color of the pagination item for the current page.
/// @type Color
$pagination-item-color-current: $white !default;
/// Text color of a disabled pagination item.
/// @type Color
$pagination-item-color-disabled: $medium-gray !default;
/// Color of the ellipsis in a pagination menu.
/// @type Color
$pagination-ellipsis-color: $black !default;
/// If `false`, don't display page number links on mobile, only next/previous links
/// and optionally current page number.
/// @type Boolean
$pagination-mobile-items: false !default;
/// If `true`, display the current page number on mobile even if `$pagination-mobile-items` is set to `false`.
/// This parameter will only override the visibility setting of the current item for `$pagination-mobile-items: false;`,
/// it will not affect the current page number visibility when `$pagination-mobile-items` is set to `true`.
/// @type Boolean
$pagination-mobile-current-item: false !default;
/// If `true`, arrows are added to the next and previous links of pagination.
/// @type Boolean
$pagination-arrows: true !default;
/// Adds styles for a pagination container. Apply this to a `<ul>`.
@mixin pagination-container (
$margin-bottom: $pagination-margin-bottom,
$font-size: $pagination-font-size,
$spacing: $pagination-item-spacing,
$radius: $pagination-radius,
$color: $pagination-item-color,
$padding: $pagination-item-padding,
$background-hover: $pagination-item-background-hover
) {
@include clearfix;
margin-#{$global-left}: 0;
margin-bottom: $margin-bottom;
// List item
li {
margin-#{$global-right}: $spacing;
border-radius: $radius;
font-size: $font-size;
@if $pagination-mobile-items {
display: inline-block;
}
@else {
display: none;
&:last-child,
&:first-child {
display: inline-block;
}
@if $pagination-mobile-current-item {
&.current {
display: inline-block;
}
}
@include breakpoint(medium) {
display: inline-block;
}
}
}
// Page links
a,
button {
display: block;
padding: $padding;
border-radius: $global-radius;
color: $color;
&:hover {
background: $background-hover;
}
}
}
/// Adds styles for the current pagination item. Apply this to an `<a>`.
@mixin pagination-item-current (
$padding: $pagination-item-padding,
$background-current: $pagination-item-background-current,
$color-current: $pagination-item-color-current
) {
padding: $padding;
background: $background-current;
color: $color-current;
cursor: default;
}
/// Adds styles for a disabled pagination item. Apply this to an `<a>`.
@mixin pagination-item-disabled (
$padding: $pagination-item-padding,
$color: $pagination-item-color-disabled
) {
padding: $padding;
color: $color;
cursor: not-allowed;
&:hover {
background: transparent;
}
}
/// Adds styles for an ellipsis for use in a pagination list.
@mixin pagination-ellipsis (
$padding: $pagination-item-padding,
$color: $pagination-ellipsis-color
) {
padding: $padding;
content: '\2026';
color: $color;
}
@mixin foundation-pagination {
.pagination {
@include pagination-container;
.current {
@include pagination-item-current;
}
.disabled {
@include pagination-item-disabled;
}
.ellipsis::after {
@include pagination-ellipsis;
}
}
@if $pagination-arrows {
.pagination-previous a::before,
.pagination-previous.disabled::before {
display: inline-block;
margin-#{$global-right}: 0.5rem;
content: '\00ab';
}
.pagination-next a::after,
.pagination-next.disabled::after {
display: inline-block;
margin-#{$global-left}: 0.5rem;
content: '\00bb';
}
}
}
|