AFW Pattern Lab

Pager 

<div class="pager">
    <ul>
        <li class="first-page">
            <a data-page="1" href="#">First</a>
        </li>
        <li class="previous-page">
            <a data-page="3" href="#">Previous</a>
        </li>
        <li class="current-page">
            <span>1</span>
        </li>
        <li class="individual-page">
            <a data-page="2" href="#">2</a>
        </li>
        <li class="individual-page">
            <a data-page="3" href="#">3</a>
        </li>
        <li class="individual-page">
            <a data-page="4" href="#">4</a>
        </li>
        <li class="individual-page">
            <a data-page="5" href="#">5</a>
        </li>
        <li class="next-page">
            <a data-page="2" href="#">Next</a>
        </li>
        <li class="last-page">
            <a data-page="32" href="#">Last</a>
        </li>
    </ul>
</div>
 
<div class="pager">
	<ul>
		<li class="first-page">
			<a data-page="1" href="#">First</a>
		</li>
		<li class="previous-page">
			<a data-page="3" href="#">Previous</a>
		</li>
		<li class="current-page">
			<span>1</span>
		</li>
		<li class="individual-page">
			<a data-page="2" href="#">2</a>
		</li>
		<li class="individual-page">
			<a data-page="3" href="#">3</a>
		</li>
		<li class="individual-page">
			<a data-page="4" href="#">4</a>
		</li>
		<li class="individual-page">
			<a data-page="5" href="#">5</a>
		</li>
		<li class="next-page">
			<a data-page="2" href="#">Next</a>
		</li>
		<li class="last-page">
			<a data-page="32" href="#">Last</a>
		</li>
	</ul>
</div>
 
/* No context defined. */
  • Content: 
    .pager {
	text-align: center;
	margin-bottom: rem(32px);
	
	ul {
		display: inline-flex;
		list-style: none;
		margin: 0;
		padding: 0;
		// gap: rem(10px);

		li {
			display: block;
			flex: 0 0 auto;

			a,
			span {
				border: rem(2px) solid $color-sky;
				border-radius: rem(4px);
				background: $color-sky-lighter;
				display: flex;
				align-items: center;
				justify-content: center;
				width: rem(35px);
				height: rem(35px);
				vertical-align: middle;
				line-height: 0.75;
			}

			a {
				color: $color-primary-text;
				font-weight: 500;
				text-decoration: none;
			}

			&.first-page,
			&.previous-page,
			&.next-page,
			&.last-page {
				a,
				span {
					color: transparent;
					font-size: rem(0px);
					&:before {
						content: '';
						color: $color-blue;
						display: inline-block;
						font-size: rem(12px);
						font-family: $font-family-icons;
						font-weight: 700;
					}
				}
			}

			&.first-page {
				a,
				span {
					&:before {
						content: '\f323';
					}
				}
			}

			&.previous-page {
				a,
				span {
					&:before {
						content: '\f053';
					}
				}
			}

			&.next-page {
				a,
				span {
					&:before {
						content: '\f054';
					}
				}
			}

			&.last-page {
				a,
				span {
					&:before {
						content: '\f324';
					}
				}
			}

			&.current-page {
				span {
					background: $color-blue;
					border-color: $color-blue;
					color: $color-white;
					font-weight: 700;
				}
			}
		}
	}
}
  • URL: /components/raw/pager/pager.scss
  • Filesystem Path: source/patterns/atoms/pager/pager.scss
  • Size: 1.5 KB

No notes defined.