<div class="action ">
<div class="action__handler">
<button class="button action__button " type="button">
Example button
</button>
</div>
<div class="action__handler">
<a href="#" class="link action__link " title="Link this title">
Link this title
</a>
</div>
</div>
<div class="action {{ class }}">
{{#each sides }}
<div class="action__handler">
{{#each action }}
{{#if button }}
<button class="button action__button {{ this.class }}"
type="button"
>
{{ title }}
</button>
{{else}}
<a href="#"
class="link action__link {{ this.class }}"
title="{{title}}"
>
{{ title }}
</a>
{{/if}}
{{/each }}
</div>
{{/each}}
</div>
{
"sides": [
{
"action": [
{
"button": true,
"title": "Example button"
}
]
},
{
"action": [
{
"title": "Link this title"
}
]
}
]
}
$action-margin : 15px !default;
$action-padding: 15px !default;
.action {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
width: 100%;
&__handler {
flex-basis: 100%;
margin-bottom: $action-margin;
@include mq($screen-m) {
flex-basis: auto;
margin-bottom: 0;
}
}
&__button {
margin-right: $action-margin;
height: 30px;
padding: 0 20px;
font-size: 14px;
width: 100%;
margin-bottom: $action-margin;
@include mq($screen-m) {
width: auto;
margin-bottom: auto;
}
&:last-child {
margin-right: 0;
}
}
&__link {
padding: $action-padding 0;
margin-right: 15px;
background-clip: content-box;
&:focus {
@include focus-inline();
}
&:last-child {
margin-right: 0;
}
}
}
There are no notes for this item.