// // Pager // —————————————-
.pager {
border-radius: 3em; @include transition(all $transition-time-out $transition-function); background: $pager-background-color; background-image: none; border: 1px solid $pager-border-color; color: $pager-text-color; cursor: pointer; display: inline-block; font-weight: normal; font-size: $font-size-regular; // prevent font-size inherit in other modules / scopes line-height: $line-height-regular; // prevent line-height inherit in other modules / scopes padding: $button-padding; text-align: center; vertical-align: bottom; white-space: nowrap; text-decoration: none; &.right { float: right; } &.left { float: left; } > .icon { padding-right: $button-icon-indent; margin-left: -$button-icon-indent / 2; &.right { padding-left: $button-icon-indent; padding-right: 0; margin-left: 0; margin-right: -$button-icon-indent / 2; } } &.focus, &:focus { text-decoration: none; @include tab-focus(); } &.hover, &:hover { text-decoration: none; background-color: hsv-darken($pager-background-color, 7%, true); border-color: hsv-darken($pager-border-color, 7%, true); @include transition($transition-time-in, '-duration'); } &.active, &:active { text-decoration: none; background-color: hsv-darken($pager-background-color, 15%, true); border-color: hsv-darken($pager-border-color, 15%, true); } &.disabled, &[disabled] { cursor: not-allowed; background: $pager-disabled-bgr-color; border-color: $pager-disabled-border-color; color: $pager-disabled-text-color; }
}
.pager-small {
font-size: $pager-small-font-size; padding: $pager-small-padding;
}
.pager-large {
font-size: $pager-large-font-size; padding: $pager-large-padding;
}
.pager-icon {
padding: $pager-padding-minimal; padding-left: 0; padding-right: 0; width: 36px; &.pager-small { width: 32px; } &.pager-large { width: 48px; height: 48px; .icon { font-size: 36px; padding: 1px 0 0 2px; } } .icon { padding: 0; margin-left: 0; margin-right: 0; }
}
.pager + .pager {
margin-left: building-units(2);
}
.pager-minimal {
padding: $pager-padding-minimal;
}
.pager-block {
width: 100%;
}
.pager-clean {
border-color: transparent; &.hover, &:hover { text-decoration: none; border-color: transparent; } &.active, &:active { text-decoration: none; border-color: transparent; }
}