<div class="prev-next-navigation">
</div>
<div class="prev-next-navigation">
{{#each items}}
<div class="prev-next-navigation__item {{getmodifiers modifiers "prev-next-navigation__item"}}">
<button class="prev-next-navigation__button" {{{getattributes attributes}}}>
{{#if @first}}
<div class="prev-next-navigation__icon">
{{> @icon id="slider-arrow"}}
</div>
{{/if}}
<div class="prev-next-navigation__content">
<span class="prev-next-navigation__label">{{label}}</span>
<span class="prev-next-navigation__title">{{title}}</span>
</div>
{{#if @last}}
<div class="prev-next-navigation__icon">
{{> @icon id="slider-arrow"}}
</div>
{{/if}}
</button>
</div>
{{/each}}
</div>
/* No context defined. */
module.exports = {
context: {
items: [
{
label: 'View previous',
title: 'Web demo IQlogic',
modifiers: 'prev'
},
{
label: 'View next',
title: 'Discover the L-concept',
modifiers: 'next'
}
]
}
}
.prev-next-navigation {
display: flex;
flex-direction: column;
@include breakpoint($xs) {
flex-direction: row;
justify-content: space-between;
}
}
.prev-next-navigation__item {
display: flex;
flex: 50% 1 0;
&--next {
justify-content: flex-end;
}
&--hidden {
visibility: hidden;
@include breakpoint-down($xs) {
position: absolute;
}
}
}
.prev-next-navigation__label {
color: $color-gray-4;
}
.prev-next-navigation__title {
font-weight: $font-weight-bold;
}
.prev-next-navigation__icon {
width: size(4);
height: size(4);
color: $color-gray-4;
flex-shrink: 0;
margin-left: size(2.25);
svg {
width: 100%;
height: 100%;
}
}
.prev-next-navigation__button {
display: flex;
align-items: center;
text-align: left;
line-height: size(2.75);
span {
display: block;
}
.prev-next-navigation__item--prev & {
@include breakpoint-down($xs) {
margin-bottom: size(2);
}
.prev-next-navigation__icon {
margin: 0 size(2.25) 0 0;
}
svg {
transform: rotate(180deg);
}
}
.prev-next-navigation__item--next & {
justify-content: flex-end;
text-align: right;
}
}
No notes defined.