UNPKG

foundation

Version:

You may also want to checkout:

105 lines (83 loc) 2.74 kB
// // Pagination Variables // $include-html-nav-classes ?= $include-html-classes; // We use these to control the pagination container $pagination-height ?= emCalc(24px); $pagination-margin ?= emCalc(-5px); // We use these to set the list-item properties $pagination-li-float = $default-float; $pagination-li-height ?= emCalc(24px); $pagination-li-font-color ?= #222; $pagination-li-font-size ?= emCalc(14px); $pagination-li-margin ?= emCalc(5px); // We use these for the pagination anchor links $pagination-link-pad ?= emCalc(1px) emCalc(7px) emCalc(1px); $pagination-link-font-color ?= #999; $pagination-link-active-bg ?= darken(#fff, 10%); // We use these for disabled anchor links $pagination-link-unavailable-cursor ?= default; $pagination-link-unavailable-font-color ?= #999; $pagination-link-unavailable-bg-active ?= transparent; // We use these for currently selected anchor links $pagination-link-current-background ?= $primary-color; $pagination-link-current-font-color ?= #fff; $pagination-link-current-font-weight ?= bold; $pagination-link-current-cursor ?= default; $pagination-link-current-active-bg ?= $primary-color; // // Pagination Mixin // // We use this mixin to set the properties for the creating Foundation pagination pagination($center=false, $base-style=true) { if $base-style { display: block; height: $pagination-height; margin-{$default-float}: $pagination-margin; li { display: block; float: $pagination-li-float; height: $pagination-li-height; color: $pagination-li-font-color; font-size: $pagination-li-font-size; margin-{$default-float}: $pagination-li-margin; a { display: block; padding: $pagination-link-pad; color: $pagination-link-font-color; } &:hover a, a:focus { background: $pagination-link-active-bg; } &.unavailable a { cursor: $pagination-link-unavailable-cursor; color: $pagination-link-unavailable-font-color; } &.unavailable:hover a, &.unavailable a:focus { background: $pagination-link-unavailable-bg-active; } &.current a { 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; } } } } if $center { & { text-align: center; ul > li { float: none; display: inline-block; } } } } if $include-html-nav-classes != false { /* Pagination */ .pagination { pagination(); } .pagination-centered { pagination(true,false); } }