summaryrefslogtreecommitdiff
path: root/source/bower_components/foundation/scss/foundation/components/_pagination.scss
diff options
context:
space:
mode:
Diffstat (limited to 'source/bower_components/foundation/scss/foundation/components/_pagination.scss')
-rw-r--r--source/bower_components/foundation/scss/foundation/components/_pagination.scss162
1 files changed, 162 insertions, 0 deletions
diff --git a/source/bower_components/foundation/scss/foundation/components/_pagination.scss b/source/bower_components/foundation/scss/foundation/components/_pagination.scss
new file mode 100644
index 0000000..da6aada
--- /dev/null
+++ b/source/bower_components/foundation/scss/foundation/components/_pagination.scss
@@ -0,0 +1,162 @@
+// 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);
+ }
+ }
+ }
+}