389 lines
13 KiB
Plaintext
Executable File
389 lines
13 KiB
Plaintext
Executable File
// /**
|
|
// * Copyright © Magento, Inc. All rights reserved.
|
|
// * See COPYING.txt for license details.
|
|
// */
|
|
|
|
// # 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 <code>.lib-actions-toolbar()</code> mixin is used.
|
|
// To implement the Actions toolbar use the following markup
|
|
//
|
|
// **Sample of using a button + link**
|
|
// ``` html
|
|
// <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**
|
|
// ``` html
|
|
// <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
|
|
//
|
|
// <pre>
|
|
// <table>
|
|
// <tr>
|
|
// <th class="vars_head">Mixin variable</th>
|
|
// <th class="vars_head">Global variable</th>
|
|
// <th class="vars_head">Default value</th>
|
|
// <th class="vars_head">Allowed values</th>
|
|
// <th class="vars_head">Comment</th>
|
|
// </tr>
|
|
// <tr>
|
|
// <th>@_actions-toolbar-actions-position</th>
|
|
// <td>@actions-toolbar-actions__position</td>
|
|
// <td class="vars_value">justify</td>
|
|
// <td class="vars_value">justify | left | right | center</td>
|
|
// <td>Position for actions in Actions toolbar</td>
|
|
// </tr>
|
|
// <tr>
|
|
// <th>@_actions-toolbar-actions-reverse</th>
|
|
// <td>@actions-toolbar-actions__reverse</td>
|
|
// <td class="vars_value">false</td>
|
|
// <td class="vars_value">true | false</td>
|
|
// <td>Reverse primary and secondary blocks position in Actions toolbar</td>
|
|
// </tr>
|
|
// <tr>
|
|
// <th>@_actions-toolbar-margin</th>
|
|
// <td>@actions-toolbar__margin</td>
|
|
// <td class="vars_value">false</td>
|
|
// <td class="vars_value">'' | false | value</td>
|
|
// <td>Margins of the Actions toolbar</td>
|
|
// </tr>
|
|
// <tr>
|
|
// <th>@_actions-toolbar-padding</th>
|
|
// <td>@actions-toolbar__padding</td>
|
|
// <td class="vars_value">false</td>
|
|
// <td class="vars_value">'' | false | value</td>
|
|
// <td>Padding of the Actions toolbar</td>
|
|
// </tr>
|
|
// <tr>
|
|
// <th>@_actions-toolbar-actions-margin</th>
|
|
// <td>@actions-toolbar-actions__margin</td>
|
|
// <td class="vars_value">false</td>
|
|
// <td class="vars_value">'' | false | value</td>
|
|
// <td>Margins of all .actions in the Actions toolbar</td>
|
|
// </tr>
|
|
// <tr>
|
|
// <th>@_actions-toolbar-primary-actions-margin</th>
|
|
// <td>@actions-toolbar-actions-primary__margin</td>
|
|
// <td class="vars_value">0 @indent__xs 0 0</td>
|
|
// <td class="vars_value">'' | false | value</td>
|
|
// <td>Margins of primary .actions in the Actions toolbar</td>
|
|
// </tr>
|
|
// <tr>
|
|
// <th>@_actions-toolbar-secondary-actions-margin</th>
|
|
// <td>@actions-toolbar-actions-secondary__margin</td>
|
|
// <td class="vars_value">false</td>
|
|
// <td class="vars_value">'' | false | value</td>
|
|
// <td>Margins of secondary .actions in the Actions toolbar</td>
|
|
// </tr>
|
|
// <tr>
|
|
// <th nowrap="nowrap">@_actions-toolbar-actions-links-margin-top</th>
|
|
// <td>@actions-toolbar-actions-links__margin-top</td>
|
|
// <td class="vars_value">false</td>
|
|
// <td class="vars_value">'' | false | value</td>
|
|
// <td>Margin-top for links with class .action in the Actions toolbar</td>
|
|
// </tr>
|
|
// <tr>
|
|
// <th nowrap="nowrap">@_actions-toolbar-primary-actions-links-margin-top</th>
|
|
// <td>@actions-toolbar-actions-links-primary__margin-top</td>
|
|
// <td class="vars_value">false</td>
|
|
// <td class="vars_value">'' | false | value</td>
|
|
// <td>Margin-top for primary links with class .action in the Actions toolbar</td>
|
|
// </tr>
|
|
// <tr>
|
|
// <th nowrap="nowrap">@_actions-toolbar-secondary-actions-links-margin-top</th>
|
|
// <td>@actions-toolbar-actions-secondary__margin</td>
|
|
// <td class="vars_value">6px</td>
|
|
// <td class="vars_value">'' | false | value</td>
|
|
// <td>Margin-top for secondary links with class .action in the Actions toolbar</td>
|
|
// </tr>
|
|
// </table>
|
|
// </pre>
|
|
//
|
|
// # Actions toolbar alignment
|
|
//
|
|
// <code>@_actions-toolbar-actions-position</code> variable controls aligning actions toolbar elements. It can be set to:
|
|
// ```css
|
|
// justify | left | right | center
|
|
// ```
|
|
//
|
|
// **Justify:**
|
|
// ```css
|
|
// @_actions-toolbar-actions-position: justify
|
|
// ```
|
|
// ``` html
|
|
// <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:**
|
|
// ```css
|
|
// @_actions-toolbar-actions-position: left
|
|
// ```
|
|
// ``` html
|
|
// <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:**
|
|
// ```css
|
|
// @_actions-toolbar-actions-position: right
|
|
// ```
|
|
// ``` html
|
|
// <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:**
|
|
// ```css
|
|
// @_actions-toolbar-actions-position: center
|
|
// ```
|
|
// ``` html
|
|
// <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
|
|
//
|
|
// <code>@_actions-toolbar-actions-reverse</code> variable controls reversing of primary and secondary blocks.
|
|
//
|
|
// If it is set to <code>false</code>, the order of blocks in action toolbar is **default**.
|
|
//
|
|
// If it is set to <code>true</code>, the order of blocks in action toolbar is **reversed**.
|
|
//
|
|
// **Justify toolbar elements and reverse them:**
|
|
// ```css
|
|
// @_actions-toolbar-actions-position: justify,
|
|
// @_actions-toolbar-actions-reverse: true
|
|
// ```
|
|
// ``` html
|
|
// <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:**
|
|
// ```css
|
|
// @_actions-toolbar-actions-position: left,
|
|
// @_actions-toolbar-actions-reverse: true
|
|
// ```
|
|
// ``` html
|
|
// <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:**
|
|
// ```css
|
|
// @_actions-toolbar-actions-position: right,
|
|
// @_actions-toolbar-actions-reverse: true
|
|
// ```
|
|
// ``` html
|
|
// <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
|
|
//
|
|
// <code>@_actions-toolbar-margin</code> variable controls margins of the actions toolbar wrapper.
|
|
//
|
|
// <code>@_actions-toolbar-padding</code> variable controls padding of the actions toolbar wrapper.
|
|
//
|
|
// ``` html
|
|
// <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>
|
|
// ```
|
|
//
|
|
// <code>@_actions-toolbar-primary-actions-margin</code> variable controls margins of the primary action elements.
|
|
//
|
|
// ``` html
|
|
// <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>
|
|
// ```
|
|
//
|
|
// <code>@_actions-toolbar-secondary-actions-margin</code> variable controls margins of the secondary action elements.
|
|
//
|
|
// ``` html
|
|
// <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 <code>.lib-actions-toolbar-clear-floats()</code> mixin is used.
|
|
//
|
|
// ``` html
|
|
// <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();
|
|
}
|
|
}
|