X-Git-Url: https://git.njae.me.uk/?a=blobdiff_plain;ds=inline;f=assets%2Fmain%2Fsass%2Fcomponents%2F_pagination.scss;h=3f1b83d4c177226b7d35ee3a7d2882a7452b7e75;hb=283508bd265ef3430abc21e0599313c250e57942;hp=935a1d9376d5b4def3c7c6591b9806b563e486c9;hpb=8af2079e4b096e77ba2f922d6a18224ce01cb7bd;p=editorial.git

diff --git a/assets/main/sass/components/_pagination.scss b/assets/main/sass/components/_pagination.scss
index 935a1d9..3f1b83d 100644
--- a/assets/main/sass/components/_pagination.scss
+++ b/assets/main/sass/components/_pagination.scss
@@ -1,110 +1,70 @@
-///
-/// Massively by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Pagination */
-
-	.pagination {
-		@include vendor('display', 'inline-flex');
-		@include vendor('user-select', 'none');
-		cursor: default;
-		list-style: none;
-		margin: 0 0 _size(element-margin) 2px;
-		padding: 0;
-
-		a, span {
-			@include vendor('transition', (
-				'background-color #{_duration(transition)} ease-in-out',
-				'border-color #{_duration(transition)} ease-in-out',
-				'box-shadow #{_duration(transition)} ease-in-out',
-				'color #{_duration(transition)} ease-in-out'
-			));
-			border: solid 2px;
-			display: inline-block;
-			font-family: _font(family-heading);
-			font-size: 0.8rem;
-			font-weight: _font(weight-heading);
-			height: _size(element-height);
-			letter-spacing: 0.075em;
-			letter-spacing: _font(letter-spacing-heading);
-			line-height: calc(#{_size(element-height)} - 4px);
-			margin-left: -2px;
-			min-width: _size(element-height);
-			position: relative;
-			text-align: center;
-			text-decoration: none;
-			text-transform: uppercase;
-		}
-
-		.next, .previous {
-			@include icon;
-			padding: 0 1.75rem;
-
-			&:before {
-				display: inline-block;
-				color: inherit !important;
-			}
-		}
-
-		.previous {
-			&:before {
-				content: '\f104';
-				margin-right: (0.75em / 0.8);
-			}
-		}
-
-		.next {
-			&:before {
-				content: '\f105';
-				float: right;
-				margin-left: (0.75em / 0.8);
-			}
-		}
-
-		@include breakpoint('<=medium') {
-			a, span {
-				font-size: 0.9rem;
-			}
-		}
-
-		@include breakpoint('<=xsmall') {
-			.page, .extra {
-				display: none;
-			}
-		}
-	}
-
-	@mixin color-pagination($p: null) {
-		.pagination {
-			a, span {
-				border-color: _palette($p, border);
-			}
-
-			a {
-				color: _palette($p, fg-bold) !important;
-
-				&:hover {
-					color: _palette($p, accent) !important;
-					border-color: _palette($p, accent);
-					z-index: 1;
-
-					& + a,
-					& + span {
-						border-left-color: _palette($p, accent);
-					}
-				}
-
-				&.active {
-					background-color: _palette($p, border);
-				}
-			}
-
-			span {
-				color: _palette($p, border);
-			}
-		}
-	}
-
-	@include color-pagination;
\ No newline at end of file
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Pagination */
+
+	ul.pagination {
+		cursor: default;
+		list-style: none;
+		padding-left: 0;
+
+		li {
+			display: inline-block;
+			padding-left: 0;
+			vertical-align: middle;
+
+			> .page {
+				@include vendor('transition', (
+					'background-color #{_duration(transition)} ease-in-out',
+					'color #{_duration(transition)} ease-in-out'
+				));
+				border-bottom: 0;
+				border-radius: _size(border-radius);
+				display: inline-block;
+				font-size: 0.8em;
+				font-weight: _font(weight-bold);
+				height: 2em;
+				line-height: 2em;
+				margin: 0 0.125em;
+				min-width: 2em;
+				padding: 0 0.5em;
+				text-align: center;
+
+				&.active {
+					background-color: _palette(accent);
+					color: _palette(bg) !important;
+
+					&:hover {
+						background-color: lighten(_palette(accent), 3);
+					}
+
+					&:active {
+						background-color: darken(_palette(accent), 3);
+					}
+				}
+			}
+
+			&:first-child {
+				padding-right: 0.75em;
+			}
+
+			&:last-child {
+				padding-left: 0.75em;
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			li {
+				&:nth-child(n+2):nth-last-child(n+2) {
+					display: none;
+				}
+
+				&:first-child {
+					padding-right: 0;
+				}
+			}
+		}
+	}
\ No newline at end of file