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