Init v1

docs/documentation/sass/form-control-mixins.html

@@ -0,0 +1,136 @@
+---
+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 control-small;" %} with a font size <code>$size-small</code>
+    </li>
+    <li>
+      {% include docs/elements/snippet-inline.html content="@include control-medium;" %} with a font size <code>$size-medium</code>
+    </li>
+    <li>
+      {% include docs/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 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 %}