# Actions toolbar

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

<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>

Sample of using a button + button

<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>

    .actions-toolbar {
        .lib-actions-toolbar();
    }

    .example-actions-toolbar-1 {
        .lib-actions-toolbar();
    }

# Actions toolbar mixin variables

            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 alignment

`@_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

<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>

Align toolbar elements left:

      @_actions-toolbar-actions-position: left

<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>

Align toolbar elements right:

      @_actions-toolbar-actions-position: right

<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>

Center:

      @_actions-toolbar-actions-position: center

<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>

    .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

<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>

Align toolbar elements to the left and reverse them:

      @_actions-toolbar-actions-position: left,
      @_actions-toolbar-actions-reverse: true

<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>

Align toolbar elements to the right and reverse them:

      @_actions-toolbar-actions-position: right,
      @_actions-toolbar-actions-reverse: true

<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>

    .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 indents customizations

`@_actions-toolbar-margin` variable controls margins of the actions toolbar wrapper.

`@_actions-toolbar-padding` variable controls paddings of the actions toolbar wrapper.

<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>

`@_actions-toolbar-primary-actions-margin` variable controls margins of the primary action elements.

<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>

`@_actions-toolbar-secondary-actions-margin` variable controls margins of the secondary action elements.

<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>

    .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
        );
    }

# Responsive actions toolbar

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.

<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>

    .example-actions-toolbar-12 {
        .lib-actions-toolbar();
    }

    @media only screen and (max-width: @screen__m) {
        .example-actions-toolbar-12 {
           .lib-actions-toolbar-clear-floats();
        }
    }