More mixin docs

3 files changed, 109 insertions, 3 deletions

diff --git a/docs/_sass/examples/mixins.scss b/docs/_sass/examples/mixins.scss
index 05fd78e8..a328582e 100644
--- a/docs/_sass/examples/mixins.scss
+++ b/docs/_sass/examples/mixins.scss
@@ -9,3 +9,16 @@
 .bulma-delete-mixin {
   @include delete;
 }
+
+.bulma-loader-mixin {
+  @include loader;
+}
+
+.bulma-block-mixin {
+  @include block(1rem);
+}
+
+.bulma-fa-mixin {
+  @include fa(1rem, 2rem);
+  background-color: lavender;
+}
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 7a50bd31..240a8390 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -22362,3 +22362,31 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   min-width: 32px;
   width: 32px;
 }
+
+.bulma-loader-mixin {
+  animation: spinAround 500ms infinite linear;
+  border: 2px solid #dbdbdb;
+  border-radius: 9999px;
+  border-right-color: transparent;
+  border-top-color: transparent;
+  content: "";
+  display: block;
+  height: 1em;
+  position: relative;
+  width: 1em;
+}
+
+.bulma-block-mixin:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+.bulma-fa-mixin {
+  display: inline-block;
+  font-size: 1rem;
+  height: 2rem;
+  line-height: 2rem;
+  text-align: center;
+  vertical-align: top;
+  width: 2rem;
+  background-color: lavender;
+}
diff --git a/docs/documentation/utilities/mixins.html b/docs/documentation/utilities/mixins.html
index 1829cf0b..cecb47b7 100644
--- a/docs/documentation/utilities/mixins.html
+++ b/docs/documentation/utilities/mixins.html
@@ -85,11 +85,76 @@ breadcrumb:
 
 <!--  -->
 
-@include loader
+<h4 class="title is-5">Loader</h4>
 
-@include fa($size, $dimensions)
+<div class="content">
+  <p>
+    The <code>loader()</code> mixin creates a 1em <strong>spinning circle</strong>.
+  </p>
+</div>
+
+{% highlight sass %}.bulma-loader-mixin {
+  @include loader;
+}{% endhighlight %}
+
+{% capture loader %}
+<span class="bulma-loader-mixin"></span>
+{% endcapture %}
+
+{% include elements/snippet.html content=loader %}
+
+<!--  -->
+
+<h4 class="title is-5">Block</h4>
+
+<div class="content">
+  <p>
+    The <code>block()</code> mixin adds <strong>spacing</strong> below an element, but only if it's <strong>not the last child</strong>.
+    <br>
+    The <code>$spacing</code> parameter defines the value of the <code>margin-bottom</code>.
+  </p>
+</div>
+
+{% highlight sass %}.bulma-block-mixin {
+  @include block(1rem);
+}{% endhighlight %}
+
+{% capture block %}
+<p class="bulma-block-mixin">This element has a margin-bottom.</p>
+<p class="bulma-block-mixin">This element too.</p>
+<p class="bulma-block-mixin">Not this one because it's the last child.</p>
+{% endcapture %}
+
+{% include elements/snippet.html content=block %}
+
+<!--  -->
+
+<h4 class="title is-5">Font Awesome container</h4>
+
+<div class="content">
+  <p>
+    The <code>fa()</code> mixin creates a <strong>square inline-block element</strong>, ideal for containing a Font Awesome icon, or any other type of icon font.
+    <br>
+    The first <code>$size</code> parameter defines the icon font size.
+    <br>
+    The second <code>$dimensions</code> parameter defines the dimensions of the square container.
+  </p>
+</div>
+
+{% highlight sass %}.bulma-fa-mixin {
+  @include fa(1rem, 2rem);
+  background-color: lavender; // For demo purposes
+}{% endhighlight %}
 
-@include block($spacing: $block-spacing)
+{% capture fa %}
+<span class="bulma-fa-mixin">
+  <i class="fas fa-thumbs-up"></i>
+</span>
+{% endcapture %}
+
+{% include elements/snippet.html content=fa %}
+
+<!--  -->
 
 @include overlay($offset: 0)