SASS: Basic yb_pagination Styles

SASS: Basic yb_pagination Styles

.page-navigation {
	ol {
		position:relative;
		text-align:center;

		@include breakpoint(multiColumn) { margin:0 auto; }
	}

	li {
		display: inline-block;
		margin:0 5px;

		@include breakpoint(multiColumn) { padding:1em 0; }

		&.bpn-current a {
			color:white;
			background-color:lighten($ph-blue,35%);
			background-color:transparentize($ph-blue,.4);
		}

		a {
			@extend %display-font;
			display:block;
			padding:12px;
			text-decoration:none;
			background-color:lighten($ph-blue,35%);
			background-color:transparentize($ph-blue,.85);

			&:hover {
				text-decoration:underline;
				background-color:lighten($ph-blue,35%);
				background-color:transparentize($ph-blue,.6);
			}
		}
	}

	.bpn-next-link, .bpn-prev-link {
		position:absolute;
		top:0;
		margin:0;
		width:140px;
		font-size:1em;

		@include breakpoint(narrowColumn) {
			position:static;
			float:none;
			width:100%;
		}

		@include breakpoint(multiColumn) { padding:1.2em; }
	}

	.bpn-next-link {
		right:0;

		@include breakpoint(narrowColumn) {
			margin-top:1em;
			margin-bottom:1em;
		}
	}

	.bpn-prev-link {
		left:0;

		@include breakpoint(narrowColumn) {
			margin-bottom:1em;
		}
	}
}