<div class="actions-group ">
<div class="actions-group__handler">
<button class="button actions-group__button" type="button" aria-label="button">
I am a button
</button>
<button class="button actions-group__button" type="button" aria-label="button">
I am a button
</button>
</div>
<div class="actions-group__handler">
<a class="link actions-group__link" href="#" title="Title">
Link
</a>
<a class="link actions-group__link" href="#" title="Title">
Link
</a>
<a class="link actions-group__link" href="#" title="Title">
Link
</a>
</div>
</div>
<div class="actions-group {{ class }}">
{{#each sides }}
<div class="actions-group__handler">
{{#each action }}
{{#if button }}
{{ render '@button' button merge=true }}
{{else}}
{{ render '@link' link merge=true }}
{{/if}}
{{/each }}
</div>
{{/each}}
</div>
{
"sides": [
{
"action": [
{
"button": {
"class": "actions-group__button"
}
},
{
"button": {
"class": "actions-group__button"
}
}
]
},
{
"action": [
{
"link": {
"class": "actions-group__link"
}
},
{
"link": {
"class": "actions-group__link"
}
},
{
"link": {
"class": "actions-group__link"
}
}
]
}
]
}
$actions-group__spacing : $spacer--medium !default;
$actions-group__width : 100% !default;
$actions-group__handler-margin : 0 0 $actions-group__spacing !default;
$actions-group__handler-margin\@medium: 0 !default;
$actions-group__button-margin : 0 0 $actions-group__spacing !default;
$actions-group__button-margin\@medium : 0 $actions-group__spacing auto 0 !default;
$actions-group__button-width : 100% !default;
$actions-group__button-width\@medium : auto !default;
$actions-group__link-margin : 0 $actions-group__spacing 0 0 !default;
$actions-group__link-padding : $actions-group__spacing 0 !default;
$actions-group__link-text-decoration : underline !default;
$actions-group__link-background-clip : content-box !default;
$actions-group__link-font-size : $font-size-medium !default;
$actions-group__link-font-weight : $font-weight-medium !default;
@import 'actions-group-variables';
.actions-group {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
width: $actions-group__width;
&__handler {
flex-basis: 100%;
margin: $actions-group__handler-margin;
@include mq($screen-m) {
flex-basis: auto;
margin: $actions-group__handler-margin\@medium;
}
}
&__button {
margin: $actions-group__button-margin;
width: $actions-group__button-width;
@include mq($screen-m) {
width: $actions-group__button-width\@medium;
margin: $actions-group__button-margin\@medium;
}
&:last-child {
margin-right: 0;
}
}
&__link {
padding: $actions-group__link-padding;
margin: $actions-group__link-margin;
text-decoration: $actions-group__link-text-decoration;
background-clip: $actions-group__link-background-clip;
font-size: $actions-group__link-font-size;
font-weight: $actions-group__link-font-weight;
&:last-child {
margin-right: 0;
}
}
}
No notes defined.