162 lines
3.8 KiB
SCSS
162 lines
3.8 KiB
SCSS
// 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 media 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: foreground($pagination-item-background-current) !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.
|
|
/// @type Boolean
|
|
$pagination-mobile-items: 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 {
|
|
@include clearfix;
|
|
margin-#{$global-left}: 0;
|
|
margin-bottom: $pagination-margin-bottom;
|
|
|
|
// List item
|
|
li {
|
|
font-size: $pagination-font-size;
|
|
margin-#{$global-right}: $pagination-item-spacing;
|
|
border-radius: $pagination-radius;
|
|
|
|
@if $pagination-mobile-items {
|
|
display: inline-block;
|
|
}
|
|
@else {
|
|
display: none;
|
|
|
|
&:last-child,
|
|
&:first-child {
|
|
display: inline-block;
|
|
}
|
|
|
|
@include breakpoint(medium) {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Page links
|
|
a,
|
|
button {
|
|
color: $pagination-item-color;
|
|
display: block;
|
|
padding: $pagination-item-padding;
|
|
border-radius: $global-radius;
|
|
|
|
&:hover {
|
|
background: $pagination-item-background-hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Adds styles for the current pagination item. Apply this to an `<a>`.
|
|
@mixin pagination-item-current {
|
|
padding: $pagination-item-padding;
|
|
background: $pagination-item-background-current;
|
|
color: $pagination-item-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;
|
|
cursor: not-allowed;
|
|
|
|
&:hover {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
/// Adds styles for an ellipsis for use in a pagination list.
|
|
@mixin pagination-ellipsis {
|
|
content: '\2026';
|
|
padding: $pagination-item-padding;
|
|
color: $pagination-ellipsis-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 {
|
|
content: '\00ab';
|
|
display: inline-block;
|
|
margin-#{$global-right}: 0.5rem;
|
|
}
|
|
|
|
.pagination-next a::after,
|
|
.pagination-next.disabled::after {
|
|
content: '\00bb';
|
|
display: inline-block;
|
|
margin-#{$global-left}: 0.5rem;
|
|
}
|
|
}
|
|
}
|