Styleguide

Pagination 

<div class="a-pagination">
    <a href="#" class="a-pagination__link a-pagination__link--icon a-pagination__link--first a-pagination__link--disabled" title="First Page">
        <svg role="img">
            <title>First Page</title>
            <use xlink:href="#last"></use>
        </svg>
    </a>
    <a href="#" class="a-pagination__link a-pagination__link--icon a-pagination__link--prev a-pagination__link--disabled" title="Previous Page">
        <svg role="img">
            <title>Previous Page</title>
            <use xlink:href="#next"></use>
        </svg>
    </a>
    <ul class="a-pagination__list">
        <li class="a-pagination__item"><span class="a-pagination__link a-pagination__link--current">1</span></li>
        <li class="a-pagination__item"><a href="#" class="a-pagination__link">2</a></li>
        <li class="a-pagination__item"><a href="#" class="a-pagination__link">3</a></li>
        <li class="a-pagination__item"><a href="#" class="a-pagination__link">4</a></li>
        <li class="a-pagination__item"><a href="#" class="a-pagination__link">5</a></li>
        <li class="a-pagination__item"><a href="#" class="a-pagination__link">6</a></li>
    </ul>
    <a href="#" class="a-pagination__link a-pagination__link--icon a-pagination__link--next" title="Next Page">
        <svg role="img">
            <title>Next Page</title>
            <use xlink:href="#next"></use>
        </svg>
    </a>
    <a href="#" class="a-pagination__link a-pagination__link--icon a-pagination__link--last" title="Last Page">
        <svg role="img">
            <title>Last Page</title>
            <use xlink:href="#last"></use>
        </svg>
    </a>
</div>
 
<div class="a-pagination">
	<a href="#" class="a-pagination__link a-pagination__link--icon a-pagination__link--first a-pagination__link--disabled" title="First Page">
		<svg role="img">
			<title>First Page</title>
			<use xlink:href="#last"></use>
		</svg>
	</a>
	<a href="#" class="a-pagination__link a-pagination__link--icon a-pagination__link--prev a-pagination__link--disabled" title="Previous Page">
		<svg role="img">
			<title>Previous Page</title>
			<use xlink:href="#next"></use>
		</svg>
	</a>
	<ul class="a-pagination__list">
		<li class="a-pagination__item"><span class="a-pagination__link a-pagination__link--current">1</span></li>
		<li class="a-pagination__item"><a href="#" class="a-pagination__link">2</a></li>
		<li class="a-pagination__item"><a href="#" class="a-pagination__link">3</a></li>
		<li class="a-pagination__item"><a href="#" class="a-pagination__link">4</a></li>
		<li class="a-pagination__item"><a href="#" class="a-pagination__link">5</a></li>
		<li class="a-pagination__item"><a href="#" class="a-pagination__link">6</a></li>
	</ul>
	<a href="#" class="a-pagination__link a-pagination__link--icon a-pagination__link--next" title="Next Page">
		<svg role="img">
			<title>Next Page</title>
			<use xlink:href="#next"></use>
		</svg>
	</a>
	<a href="#" class="a-pagination__link a-pagination__link--icon a-pagination__link--last" title="Last Page">
		<svg role="img">
			<title>Last Page</title>
			<use xlink:href="#last"></use>
		</svg>
	</a>
</div>
  • Content: 
    .a-pagination {
	&__list {
		@include clean-ul;
		display: inline-block;
		margin: 0 0.75em;
	}

	&__item {
		@include clean-li;
		display: inline-block;
	}

	&__link {
		@include clean-link;
		display: inline-block;
		transition: color $transition-fast $transition-ease;
		@include fluid-props(margin-left margin-right, $fluid-min, $size-medium, 5px, 16px);
		color: $color-primary;

		@include high-contrast {
			color: $color-primary-dark;
		}

		@include hover {
			color: $color-primary-dark;
		}

		&--icon {
			stroke: $color-primary;
			transition: stroke $transition-fast $transition-ease;

			@include hover {
				stroke: $color-primary-dark;
			}

			@include high-contrast {
				stroke: $color-primary-dark;
			}

			svg {
				height: 0.7rem;
				max-width: 1rem;
			}
		}

		&--disabled {
			stroke: $color-grey-2;

			@include hover {
				stroke: $color-grey-2;
			}

			@include high-contrast {
				stroke: $color-grey-3;
			}
		}

		&--first,
		&--prev {
			transform: rotate(180deg);
		}

		&--first,
		&--last {
			margin: 0;
		}

		&--prev,
		&--next {
			margin: 0 0.5em;
		}

		&--current {
			color: $color-text;

			@include hover {
				color: $color-text;
			}

			@include high-contrast {
				text-decoration: underline $color-primary-dark;
			}
		}
	}
}
  • URL: /components/raw/a-pagination/_a-pagination.scss
  • Filesystem Path: styleguide/src/components/atoms/a-pagination/_a-pagination.scss
  • Size: 1.3 KB 
/* No context defined. */

No notes defined.