mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
73 lines
2.2 KiB
HTML
73 lines
2.2 KiB
HTML
---
|
|
title: Mixins
|
|
layout: documentation
|
|
doc-tab: overview
|
|
doc-subtab: mixins
|
|
---
|
|
|
|
{% include subnav-overview.html %}
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<h1 class="title">Mixins</h1>
|
|
<h2 class="subtitle">Utility mixins for custom elements and responsive helpers</h2>
|
|
|
|
<hr>
|
|
|
|
<table class="table is-bordered">
|
|
<tr>
|
|
<td><code>=arrow($color)</code></td>
|
|
<td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>=block</code></td>
|
|
<td>Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>=clearfix</code></td>
|
|
<td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>=center($size)</code></td>
|
|
<td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>=delete</code></td>
|
|
<td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>=fa($size, $dimensions)</code></td>
|
|
<td>Sets the style of a Font Awesome icon container.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>=hamburger($dimensions)</code></td>
|
|
<td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>=loader</code></td>
|
|
<td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>=overflow-touch</code></td>
|
|
<td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>=overlay($offset: 0)</code></td>
|
|
<td>Makes the element overlay its parent container, like the transparent modal background.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>=placeholder</code></td>
|
|
<td>Sets the styles of an input placeholder.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>=unselectable</code></td>
|
|
<td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div class="content">
|
|
<p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|