Action Icons
Action Icons are used to perform a certain list of actions within a title, list or in any element using icons.
Demo 1 Demo 2 Demo 3 Demo 4 Demo 5Action icons can also contain dropdowns. Below is the example with basic icon links and dropdown.
<div class="actions">
<a href="" class="actions__item zmdi zmdi-trending-up"></a>
<a href="" class="actions__item zmdi zmdi-check-all"></a>
<div class="dropdown actions__item">
<i data-toggle="dropdown" class="zmdi zmdi-more-vert"></i>
<div class="dropdown-menu dropdown-menu-right">
<a href="" class="dropdown-item">Refresh</a>
<a href="" class="dropdown-item">Manage Widgets</a>
<a href="" class="dropdown-item">Settings</a>
</div>
</div>
</div>
To override position of the action-icons, you can simply add a modifier class on .actions
and customize it as per your need.
e.g HTML
<div class="actions actions--list">
...
</div>
e.g CSS
.actions--list {
float: right;
margin-top: 10px;
...
}
Requirements:
/scss/inc/_misc.scss