<nav class="m-pagination">
    <ul class="m-pagination__list">
        <li class="m-pagination__button first"><a href="#"><svg class="a-icon" role="img" title="">
	<use xlink:href="#first" />
</svg>
<span class="m-pagination__button-title">Premier</span></a></li>
        <li class="m-pagination__button previous"><a href="#"><svg class="a-icon" role="img" title="">
	<use xlink:href="#previous" />
</svg>
<span class="m-pagination__button-title">Précédent</span></a></li>
        <li class="m-pagination__button ellipsis">...</li>
        <li class="m-pagination__button"><a href="#">11</a></li>
        <li class="m-pagination__button"><a href="#">12</a></li>
        <li class="m-pagination__button"><a href="#">13</a></li>
        <li class="m-pagination__button"><a href="#">14</a></li>
        <li class="m-pagination__button current"><a href="#">15</a></li>
    </ul>
</nav>
<nav class="m-pagination">
	<ul class="m-pagination__list">
		<li class="m-pagination__button first"><a href="#">{{> @a-icon name="first"}}<span class="m-pagination__button-title">{{button.first}}</span></a></li>
		<li class="m-pagination__button previous"><a href="#">{{> @a-icon name="previous"}}<span class="m-pagination__button-title">{{button.previous}}</span></a></li>
		<li class="m-pagination__button ellipsis">...</li>
		<li class="m-pagination__button"><a href="#">11</a></li>
		<li class="m-pagination__button"><a href="#">12</a></li>
		<li class="m-pagination__button"><a href="#">13</a></li>
		<li class="m-pagination__button"><a href="#">14</a></li>
		<li class="m-pagination__button current"><a href="#">15</a></li>
	</ul>
</nav>
  • Content:
    .m-pagination {
    	&__list {
    		display: flex;
    		justify-content: center;
    	}
    	&__button {
    		@include fluid-props(font-size, $fluid-min, $fluid-max, 14px, 18px);
    		@include fluid-props(height, $fluid-min, $fluid-max, 32px, 44px);
    		min-width: 32px;
    		color: $color-primary;
    		border: 1px solid $color-text-lighten;
    		border-right: none;
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		text-transform: lowercase;
    		transition: border-color 75ms ease-in;
    		&:last-child {
    			border-right: 1px solid $color-text-lighten;
    		}
    		a {
    			display: flex;
    			align-items: center;
    			justify-content: center;
    			text-decoration: none;
    			color: inherit;
    			height: 100%;
    			padding: 0 1.2vw;
    			position: relative;
    			top: -1px; // tweak visual vertical alignement (compensating lower parts of the characters)
    		}
    		@include hover-behaviour {
    			&:not(.ellipsis) {
    				border-color: $color-primary;
    			}
    		}
    		&:not(.current):not(.ellipsis):hover + .m-pagination__button {
    			/** because we hide the right-border to avoid double borders,
    			 *  this is a litte trick to have the hover effect
    			 *  looks like it really applies to all 4 borders
    			 */
    			border-left: solid 1px $color-primary;
    		}
    		&.next, &.last, &.first, &.previous {
    			color: $color-text;
    		}
    		&.ellipsis {
    			padding: 0 1.2vw;
    			@include hover-behaviour {
    				background-color: initial;
    				user-select: none;
    			}
    			// cursor: default;
    		}
    		&.first, &.previous {
    			.a-icon {
    				margin: 0 8% 0 0;
    			}
    		}
    		&.next, &.last {
    			.a-icon {
    				margin: 0 0 0 8%;
    			}
    		}
    		&.current {
    			background-color: $color-primary;
    			border-color: $color-primary;
    			color: $color-text-negative;
    			a {
    				cursor: default;
    			}
    		}
    	}
    	&__button-title {
    		display: none;
    		@include media($sm-breakpoint) {
    			display: initial;
    		}
    	}
    	.a-icon {
    		fill: $color-primary;
    		@include fluid-props(width, $fluid-min, $fluid-max, 10px, 22px);
    		position: relative;
    		top: 1px; // to fix vertical alignment with text
    		height: 100%;
    	}
    
    }
    
  • URL: /components/raw/m-pagination/_m-pagination.scss
  • Filesystem Path: src/components/molecules/m-pagination/_m-pagination.scss
  • Size: 2 KB
{
  "button": {
    "first": "Premier",
    "next": "Suivante",
    "previous": "Précédent",
    "last": "Dernière"
  }
}

There are no notes for this item.