Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-20 12:24:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add utilities documentation

Browse Source
This commit is contained in:
Jeremy Thomas
2021-09-19 23:36:15 +01:00
parent e145c9d680
commit f6c0cfc813
19 changed files with 1227 additions and 444 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
docs/documentation/utilities/control-mixins.html
View File

@@ -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 %}