Internetstiftelsen Styleguide

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.