PHP Classes

File: engine/modules/contrib/foundation/source/scss/components/_pagination.scss

Recommend this page to a friend!
  Classes of Aldo Tripiciano   Quanta CMS   engine/modules/contrib/foundation/source/scss/components/_pagination.scss   Download  
File: engine/modules/contrib/foundation/source/scss/components/_pagination.scss
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Quanta CMS
Manage content that works without a database
Author: By
Last change:
Date: 5 years ago
Size: 4,822 bytes
 

Contents

Class file image Download
// 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'; } } }