init commit

assets/sass/components/_pagination.scss

@@ -0,0 +1,75 @@
+///
+/// Solid State 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;
+				height: 1.5em;
+				line-height: 1.5em;
+				margin: 0 0.125em;
+				min-width: 1.5em;
+				padding: 0 0.5em;
+				text-align: center;
+
+				&:hover {
+					background-color: _palette(border-bg);
+				}
+
+				&.active {
+					background-color: _palette(accent);
+				}
+			}
+
+			&: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;
+				}
+
+				.button {
+					width: 100%;
+				}
+
+				&:first-child {
+					width: calc(50% - 2px);
+					text-align: left;
+					padding-right: 0.325em;
+				}
+
+				&:last-child {
+					width: calc(50% - 2px);
+					text-align: right;
+					padding-left: 0.325em;
+				}
+			}
+		}
+	}