Actions toolbar is a set of actions on a page, form and so on that includes primary and/or secondary actions.
To customize action toolbar .lib-actions-toolbar()
mixin is used.
To implement the Actions toolbar use the following markup
Sample of using a button + link
Sample of using a button + button
.actions-toolbar {
.lib-actions-toolbar();
}
.example-actions-toolbar-1 {
.lib-actions-toolbar();
}
Mixin variable
Global variable
Default value
Allowed values
Comment
@_actions-toolbar-actions-position
@actions-toolbar-actions__position
justify
justify | left | right | center
Position for actions in Actions toolbar
@_actions-toolbar-actions-reverse
@actions-toolbar-actions__reverse
false
true | false
Reverse primary and secondary blocks position in Actions toolbar
@_actions-toolbar-margin
@actions-toolbar__margin
false
'' | false | value
Margins of the Actions toolbar
@_actions-toolbar-padding
@actions-toolbar__padding
false
'' | false | value
Paddings of the Actions toolbar
@_actions-toolbar-actions-margin
@actions-toolbar-actions__margin
false
'' | false | value
Margins of all .actions in the Actions toolbar
@_actions-toolbar-primary-actions-margin
@actions-toolbar-actions-primary__margin
0 @indent__xs 0 0
'' | false | value
Margins of primary .actions in the Actions toolbar
@_actions-toolbar-secondary-actions-margin
@actions-toolbar-actions-secondary__margin
false
'' | false | value
Margins of secondary .actions in the Actions toolbar
@_actions-toolbar-actions-links-margin-top
@actions-toolbar-actions-links__margin-top
false
'' | false | value
Margin-top for links with class .action in the Actions toolbar
@_actions-toolbar-primary-actions-links-margin-top
@actions-toolbar-actions-links-primary__margin-top
false
'' | false | value
Margin-top for primary links with class .action in the Actions toolbar
@_actions-toolbar-secondary-actions-links-margin-top
@actions-toolbar-actions-secondary__margin
6px
'' | false | value
Margin-top for secondary links with class .action in the Actions toolbar
@_actions-toolbar-actions-position
variable controls aligning actions toolbar elements. It can be set to:
justify | left | right | center
Justify:
@_actions-toolbar-actions-position: justify
Align toolbar elements left:
@_actions-toolbar-actions-position: left
Align toolbar elements right:
@_actions-toolbar-actions-position: right
Center:
@_actions-toolbar-actions-position: center
.example-actions-toolbar-2 {
.lib-actions-toolbar(
@_actions-toolbar-actions-position: justify
);
}
.example-actions-toolbar-3 {
.lib-actions-toolbar(
@_actions-toolbar-actions-position: left
);
}
.example-actions-toolbar-4 {
.lib-actions-toolbar(
@_actions-toolbar-actions-position: right
);
}
.example-actions-toolbar-5 {
.lib-actions-toolbar(
@_actions-toolbar-actions-position: center
);
}
Reverse primary and secondary blocks
@_actions-toolbar-actions-reverse
variable controls reversing of primary and secondary blocks.
If it is set to false
, the order of blocks in action toolbar is default .
If it is set to true
, the order of blocks in action toolbar is reversed .
Justify toolbar elements and reverse them:
@_actions-toolbar-actions-position: justify,
@_actions-toolbar-actions-reverse: true
Align toolbar elements to the left and reverse them:
@_actions-toolbar-actions-position: left,
@_actions-toolbar-actions-reverse: true
Align toolbar elements to the right and reverse them:
@_actions-toolbar-actions-position: right,
@_actions-toolbar-actions-reverse: true
.example-actions-toolbar-6 {
.lib-actions-toolbar(
@_actions-toolbar-actions-position: justify,
@_actions-toolbar-actions-reverse: true
);
}
.example-actions-toolbar-7 {
.lib-actions-toolbar(
@_actions-toolbar-actions-position: left,
@_actions-toolbar-actions-reverse: true
);
}
.example-actions-toolbar-8 {
.lib-actions-toolbar(
@_actions-toolbar-actions-position: right,
@_actions-toolbar-actions-reverse: true
);
}
@_actions-toolbar-margin
variable controls margins of the actions toolbar wrapper.
@_actions-toolbar-padding
variable controls paddings of the actions toolbar wrapper.
@_actions-toolbar-primary-actions-margin
variable controls margins of the primary action elements.
@_actions-toolbar-secondary-actions-margin
variable controls margins of the secondary action elements.
.example-actions-toolbar-9 {
.lib-actions-toolbar(
@_actions-toolbar-margin: 10px,
@_actions-toolbar-padding: 10px
);
}
.example-actions-toolbar-10 {
.lib-actions-toolbar(
@_actions-toolbar-actions-position: left,
@_actions-toolbar-primary-actions-margin: 0 50px 0 0
);
}
.example-actions-toolbar-11 {
.lib-actions-toolbar(
@_actions-toolbar-actions-position: left,
@_actions-toolbar-secondary-actions-margin: 0 50px 0 0
);
}
To set up responsive action toolbar, all floats of its elements should be cleared. To do this .lib-actions-toolbar-clear-floats()
mixin is used.
.example-actions-toolbar-12 {
.lib-actions-toolbar();
}
@media only screen and (max-width: @screen__m) {
.example-actions-toolbar-12 {
.lib-actions-toolbar-clear-floats();
}
}
<div class="actions-toolbar">
<div class="primary">
<button type="submit" class="action submit" title="Submit"><span>Submit</span></button>
</div>
<div class="secondary">
<a class="action back" href="#"><span>Back</span></a>
</div>
</div>
<div class="example-actions-toolbar-1">
<div class="primary">
<button type="submit" class="action submit" title="Submit"><span>Redeem Gift Card</span></button>
</div>
<div class="secondary">
<button class="action check" type="button" value="Check status and balance">
<span>Check status and balance</span>
</button>
</div>
</div>
<div class="example-actions-toolbar-2">
<div class="primary">
<button type="submit" class="action submit" title="Submit"><span>Submit</span></button>
</div>
<div class="secondary">
<a class="action back" href="#"><span>Back</span></a>
</div>
</div>
<div class="example-actions-toolbar-3">
<div class="primary">
<button type="submit" class="action submit" title="Submit"><span>Submit</span></button>
</div>
<div class="secondary">
<a class="action back" href="#"><span>Back</span></a>
</div>
</div>
<div class="example-actions-toolbar-4">
<div class="primary">
<button type="submit" class="action submit" title="Submit"><span>Submit</span></button>
</div>
<div class="secondary">
<a class="action back" href="#"><span>Back</span></a>
</div>
</div>
<div class="example-actions-toolbar-5">
<div class="primary">
<button type="submit" class="action submit" title="Submit"><span>Submit</span></button>
</div>
<div class="secondary">
<a class="action back" href="#"><span>Back</span></a>
</div>
</div>
<div class="example-actions-toolbar-6">
<div class="primary">
<button type="submit" class="action submit" title="Submit"><span>Submit</span></button>
</div>
<div class="secondary">
<a class="action back" href="#"><span>Back</span></a>
</div>
</div>
<div class="example-actions-toolbar-7">
<div class="primary">
<button type="submit" class="action submit" title="Submit"><span>Submit</span></button>
</div>
<div class="secondary">
<a class="action back" href="#"><span>Back</span></a>
</div>
</div>
<div class="example-actions-toolbar-8">
<div class="primary">
<button type="submit" class="action submit" title="Submit"><span>Submit</span></button>
</div>
<div class="secondary">
<a class="action back" href="#"><span>Back</span></a>
</div>
</div>
<div class="example-actions-toolbar-9">
<div class="primary">
<button type="submit" class="action submit" title="Submit"><span>Submit</span></button>
</div>
<div class="secondary">
<a class="action back" href="#"><span>Back</span></a>
</div>
</div>
<div class=" example-actions-toolbar-10">
<div class="primary">
<button type="submit" class="action submit" title="Submit"><span>Submit</span></button>
<button type="submit" class="action submit2" title="Submit2"><span>Submit2</span></button>
</div>
<div class="secondary">
<a href="#" class="action towishlist"><span>Add to Wish List</span></a>
<a href="#" class="action tocompare"><span>Add to Compare</span></a>
</div>
</div>
<div class="example-actions-toolbar-11">
<div class="primary">
<button type="submit" class="action submit" title="Submit"><span>Submit</span></button>
<button type="submit" class="action submit2" title="Submit2"><span>Submit2</span></button>
</div>
<div class="secondary">
<a href="#" class="action towishlist"><span>Add to Wish List</span></a>
<a href="#" class="action tocompare"><span>Add to Compare</span></a>
</div>
</div>
<div class="example-actions-toolbar-12">
<div class="primary">
<button type="submit" class="action submit" title="Submit"><span>Submit</span></button>
</div>
<div class="secondary">
<a href="#" class="action towishlist"><span>Add to Wish List</span></a>
</div>
</div>