Internetstiftelsen Styleguide

Paging: Forwards 

<a href="#" class="a-paging">
    <span class="u-visuallyhidden">Framåt</span>
    <svg class="icon a-paging__icon">
        <use xlink:href="#icon-arrow-forwards"></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": "Framåt",
  "modifiers": [
    "icon"
  ],
  "icon": "arrow-forwards",
  "additional_classes": false,
  "button_type": false,
  "url": "#"
}
  • Content: 
    @charset "UTF-8";
@use "sass:color";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../vendor/grid/breakpoints' as breakpoint;

// Forwards / backwards
/// @group Paging
@include mixin.atom(paging-wrapper) {
	display: flex;
	position: relative;
	width: 100%;
	align-items: center;

	@include bem.e(text) {
		flex: 1;
		font-family: var.$font-family-mono;
		font-size: func.to_rem(var.$size-medium-plus);
		text-align: center;
		text-transform: uppercase;
	}
}

@include mixin.atom(paging) {
	display: inline-flex;
	position: relative;
	flex-grow: 0;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: func.rhythm(4);
	height: func.rhythm(4);
	border: 1px solid colors.$color-ash;
	border-radius: 50%;
	background-color: colors.$color-snow;
	box-shadow: 0 3px 5px color.adjust(colors.$color-granit, $lightness: 15%);

	@include breakpoint.bp-up(sm) {
		width: func.rhythm(6);
		height: func.rhythm(6);
	}

	&:focus,
	&:hover {
		background-color: colors.$color-ash;
	}

	@include bem.e(icon) {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var.$icon-size-small;
		height: var.$icon-size-small;

		@include breakpoint.bp-up(sm) {
			width: var.$icon-size-medium;
			height: var.$icon-size-medium;
		}
	}
}
  • URL: /components/raw/paging/_paging.scss
  • Filesystem Path: src/atoms/paging/_paging.scss
  • Size: 1.4 KB

No notes defined.