<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": "#"
}
@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;
}
}
}
No notes defined.