Paging

<a href="#" class="a-paging">
    <span class="u-visuallyhidden">Paging</span>
    <svg class="icon a-paging__icon">
        <use xlink:href="#icon-arrow-down"></use>
    </svg>
</a>
<{{getelement el "a"}}
	{{#if button_type}}type="{{button_type}}"{{/if}}
	{{#if url}}href="{{ url }}"{{/if}}
	class="a-paging{{#if additional_classes}} {{ additional_classes}}{{/if}}">
	<span class="u-visuallyhidden">{{text}}</span>
	{{> @icon id=icon additional_classes="a-paging__icon"}}
</{{getelement el "a"}}>
{
  "text": "Paging",
  "modifiers": [
    "icon"
  ],
  "icon": "arrow-down",
  "additional_classes": false,
  "button_type": false,
  "url": "#"
}
  • Content:
    @charset 'UTF-8';
    
    // Forwards / backwards
    /// @group Paging
    @include atom(paging-wrapper) {
    	display: flex;
    	position: relative;
    	width: 100%;
    	align-items: center;
    
    	@include e(text) {
    		flex: 1;
    		font-family: $font-family-mono;
    		font-size: rem($size-medium-plus);
    		text-align: center;
    		text-transform: uppercase;
    	}
    }
    
    @include atom(paging) {
    	display: inline-flex;
    	position: relative;
    	flex-grow: 0;
    	flex-shrink: 0;
    	align-items: center;
    	justify-content: center;
    	width: rhythm(4);
    	height: rhythm(4);
    	border: 1px solid $color-ash;
    	border-radius: 50%;
    	background-color: $color-snow;
    	box-shadow: 0 3px 5px lighten($color-granit, 15%);
    
    	@include bp-up(sm) {
    		width: rhythm(6);
    		height: rhythm(6);
    	}
    
    	&:focus,
    	&:hover {
    		background-color: $color-ash;
    	}
    
    	@include e(icon) {
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		width: $icon-size-small;
    		height: $icon-size-small;
    
    		@include bp-up(sm) {
    			width: $icon-size-medium;
    			height: $icon-size-medium;
    		}
    	}
    }
    
  • URL: /components/raw/paging/_paging.scss
  • Filesystem Path: src/atoms/paging/_paging.scss
  • Size: 1 KB

No notes defined.