mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
137 lines
3.3 KiB
HTML
137 lines
3.3 KiB
HTML
---
|
|
title: Bulma Sass Form Control Mixins
|
|
layout: docs
|
|
theme: sass
|
|
doc-tab: sass
|
|
doc-subtab: form-control-mixins
|
|
breadcrumb:
|
|
- home
|
|
- documentation
|
|
- sass
|
|
- sass-form-control-mixins
|
|
---
|
|
|
|
|
|
<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 %}@use "bulma/sass/utilities/controls";
|
|
|
|
.bulma-control-mixin {
|
|
@include controls.control;
|
|
background: deeppink;
|
|
color: white;
|
|
}{% endhighlight %}
|
|
|
|
{% capture control-mixin %}
|
|
<button class="bulma-control-mixin">
|
|
My control
|
|
</button>
|
|
{% endcapture %}
|
|
|
|
{% include docs/elements/snippet.html content=control-mixin %}
|
|
|
|
{% include docs/elements/anchor.html name="Sizes" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
Controls have a default font size of <code>$size-normal</code> and also come in <strong>3 additional sizes</strong>, which can be accessed via 3 additional mixins:
|
|
</p>
|
|
|
|
<ul>
|
|
<li>
|
|
{% include docs/elements/snippet-inline.html content="@include controls.control-small;" %} with a font size <code>$size-small</code>
|
|
</li>
|
|
<li>
|
|
{% include docs/elements/snippet-inline.html content="@include controls.control-medium;" %} with a font size <code>$size-medium</code>
|
|
</li>
|
|
<li>
|
|
{% include docs/elements/snippet-inline.html content="@include controls.control-large;" %} with a font size <code>$size-large</code>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{% highlight sass %}.bulma-control-mixin {
|
|
&.is-small {
|
|
@include controls.control-small;
|
|
}
|
|
|
|
&.is-medium {
|
|
@include controls.control-medium;
|
|
}
|
|
|
|
&.is-large {
|
|
@include controls.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 docs/elements/snippet.html content=control-mixin-sizes %}
|
|
|
|
{% include docs/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 %}@use "bulma/sass/utilities/extends";
|
|
|
|
.bulma-control-extend {
|
|
@extend %control;
|
|
background: mediumblue;
|
|
color: white;
|
|
}{% endhighlight %}
|
|
|
|
{% capture control-extend %}
|
|
<button class="bulma-control-extend">
|
|
My control
|
|
</button>
|
|
{% endcapture %}
|
|
|
|
{% include docs/elements/snippet.html content=control-extend %}
|