mirror of
https://github.com/jgthms/bulma
synced 2026-03-21 04:34:30 -07:00
Add utilities documentation
This commit is contained in:
Jeremy Thomas
@@ -1,68 +1,130 @@
|
||||
---
|
||||
title: Mixins
|
||||
title: Form Control Mixins
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: mixins
|
||||
doc-tab: utilities
|
||||
doc-subtab: control-mixins
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-mixins
|
||||
- utilities
|
||||
- utilities-control-mixins
|
||||
---
|
||||
|
||||
<div class="table-container">
|
||||
<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>
|
||||
In Bulma, the <strong>form controls</strong> are an essential part of the framework. They comprise the following elements:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<code>.button</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.input</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.select</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.file-cta</code>
|
||||
<code>.file-name</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.pagination-previous</code>
|
||||
<code>.pagination-next</code>
|
||||
<code>.pagination-link</code>
|
||||
<code>.pagination-ellipsis</code>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
The <code>control()</code> mixin ensures <strong>consistency</strong> by providing a set of styles that are shared between all these form controls. You can use it to create additional controls:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight sass %}.bulma-control-mixin {
|
||||
@include control;
|
||||
background: deeppink;
|
||||
color: white;
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture control-mixin %}
|
||||
<button class="bulma-control-mixin">
|
||||
My control
|
||||
</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=control-mixin %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
|
||||
<p>
|
||||
Controls have a default font size of <code>$size-normal</code> also come in <strong>3 additional sizes</strong>, which can be accessed via 3 additional mixins:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
{% include elements/snippet-inline.html content="@include control-small;" %} with a font size <code>$size-small</code>
|
||||
</li>
|
||||
<li>
|
||||
{% include elements/snippet-inline.html content="@include control-medium;" %} with a font size <code>$size-medium</code>
|
||||
</li>
|
||||
<li>
|
||||
{% include elements/snippet-inline.html content="@include control-large;" %} with a font size <code>$size-large</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% highlight sass %}.bulma-control-mixin {
|
||||
&.is-small {
|
||||
@include control-small;
|
||||
}
|
||||
|
||||
&.is-medium {
|
||||
@include control-medium;
|
||||
}
|
||||
|
||||
&.is-large {
|
||||
@include control-large;
|
||||
}
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture control-mixin-sizes %}
|
||||
<button class="bulma-control-mixin is-small">
|
||||
Small
|
||||
</button>
|
||||
<button class="bulma-control-mixin">
|
||||
Normal
|
||||
</button>
|
||||
<button class="bulma-control-mixin is-medium">
|
||||
Medium
|
||||
</button>
|
||||
<button class="bulma-control-mixin is-large">
|
||||
Large
|
||||
</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=control-mixin-sizes %}
|
||||
|
||||
{% include elements/anchor.html name="Control placeholder" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>control()</code> mixin also exists as <a href="https://sass-lang.com/documentation/at-rules/extend#placeholder-selectors" target="_blank">Sass placeholder</a> <code>%control</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight sass %}.bulma-control-extend {
|
||||
@extend %control;
|
||||
background: mediumblue;
|
||||
color: white;
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture control-extend %}
|
||||
<button class="bulma-control-extend">
|
||||
My control
|
||||
</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=control-extend %}
|
||||
|
||||
Reference in New Issue
Block a user