Fractal Starter
Project version : 0.1.2
<nav class="nav-pagination" aria-label="pagination">
    <ul>
        <li class="lnk-prev arrow-pagination">
            <a href="#">
        		   <span>Page précédente</span>
               <i class="icon icon--chevron-left"></i>
			   </a>
        </li>

        <li>
            <a class="" data-page="1" href="#">
				<span class="screen-reader-text">page </span> 1
			</a>
        </li>

        <li class="active">
            <span class="" data-page="2" aria-current="page">
				<span class="screen-reader-text">page </span>2
            </span>
        </li>

        <li>
            <a class="" data-page="3" href="#">
				<span class="screen-reader-text">page </span> 3
			</a>
        </li>

        <li class="lnk-next arrow-pagination">
            <a href="#">
               <span>Page suivante</span>
               <i class="icon icon--chevron-right"></i>
            </a>
        </li>
    </ul>
</nav>
<nav class="nav-pagination" aria-label="pagination">
    <ul>
        <li class="lnk-prev arrow-pagination">
            <a href="#">
        		   <span>Page précédente</span>
               <i class="icon icon--chevron-left"></i>
			   </a>
        </li>

        <li>
            <a class="" data-page="1" href="#">
				<span class="screen-reader-text">page </span> 1
			</a>
        </li>

        <li class="active">
            <span class="" data-page="2" aria-current="page">
				<span class="screen-reader-text">page </span>2
            </span>
        </li>

        <li>
            <a class="" data-page="3" href="#">
				<span class="screen-reader-text">page </span> 3
			</a>
        </li>

        <li class="lnk-next arrow-pagination">
            <a href="#">
               <span>Page suivante</span>
               <i class="icon icon--chevron-right"></i>
            </a>
        </li>
    </ul>
</nav>
/* No context defined for this component. */
  • Content:
    .nav-pagination {
    	text-align: center;
    	max-width: none;
    	margin-bottom: 2rem!important;
    	margin-top: 3rem!important;
    	padding: .7rem 0;
    
    	li {
    		display: inline-block;
    		vertical-align: middle;
    		margin: 0 .4rem;
    
    		> a, > span {
             height: 45px;
    			text-align: center;
             text-decoration: none;
    			font-family: $font-secondary;
    			font-weight: 700;
    		}
    
    		&:not(.active) {
    			display: none;
             
             @include mediaWQuery($media-query-m) {
                display: inline-block;
             }
    		}
    
    		&:not(.arrow-pagination) {
    			> a, > span { width: 45px }
    			font-size: rem(18);
    		}
    	}
    
    	li.arrow-pagination {
    		font-size: 0;
    		display: inline-block;
    
    		> a {
    			display: flex;
    			align-items: center;
    			padding: 0 .4rem!important;
             font-size: 0;
             
             span {
                display: none;
             }
    
             @include mediaWQuery($media-query-m) {
                color: $c-font-color;
                
                span {
                   font-size: $font-size-m;
    					font-weight: 700;
                   display: inline-block;
                }
    
                i { display: none }
    
                &:hover, &:focus {
                   text-decoration: underline;
                }
             }
    		}
    	}
    
    	li:not(.arrow-pagination) {
    
    		> a, > span {
    			display: flex;
    			justify-content: center;
    			align-items: center;
    			padding: 0 1rem!important;
    			border-radius: $border-radius-s;
    			background: $c-white;
             color: $c-black;
    			border: 1px solid $c-black;
    
    			&:hover, &:focus {
    				background: $c-black;
    				color: $c-white;
    				outline: 0;
    			}
    		}
    
    		&.active {
    			> span {
    				background: $c-black;
    				color: $c-white;
    				outline: 0;
    			}
    		}
    	}
    }
    
    // Algolia
    .ais-Pagination-list {
    	.ais-Pagination-item--page {
    		display: none;
    		@include mediaWQuery($media-query-m) { display: block }
    
    		a {
    			width: 45px;
    			display: flex;
    			justify-content: center;
    			align-items: center;
    			padding: 0 1rem !important;
    			border-radius: 8px;
    			background: #fff;
    			color: #222;
    			border: 1px solid #222;
    			height: 45px;
    			text-align: center;
    			text-decoration: none;
    			font-family: $font-secondary;
    			font-weight: 700;
    
    			&:hover, &:focus {
    				background: $c-black;
    				color: $c-white;
    			}
    		}
    
    		&.ais-Pagination-item--selected {
    			display: block;
    			a {
    				background: $c-black;
    				color: $c-white;
    			}
    		}
    	}
    
    	.ais-Pagination-item--firstPage,
    	.ais-Pagination-item--previousPage,
    	.ais-Pagination-item--nextPage,
    	.ais-Pagination-item--lastPage {
    		
    
    		a, span {
    			display: flex;
    			justify-content: center;
    			align-items: center;
    			width: 25px;
    			height: 45px;
    			margin-top: -2px;
    			font-size: 1.6em;
    			text-decoration: none;
    		}
    
    		&.ais-Pagination-item--disabled { opacity: 0 }
    	}
    }
  • URL: /components/raw/nav-pagination/nav-pagination.scss
  • Filesystem Path: components/06-components/01-navs/04-nav-pagination/nav-pagination.scss
  • Size: 2.7 KB

There are no notes for this item.