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: 
    @use "sass:math";
@use "../../../scss/variables" as v;
@use "../../../scss/mixins" as m;

.a-pagination {
	&__list {
		@include m.clean-ul;
		& {
			display: inline-block;
			margin: 0 0.75em;
		}
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

			@include m.hover {
				color: v.$color-text;
			}

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

No notes defined.