diff options
author | Jeremy Thomas <bbxdesign@gmail.com> | 2021-09-19 03:38:25 +0300 |
---|---|---|
committer | Jeremy Thomas <bbxdesign@gmail.com> | 2021-09-20 02:36:58 +0300 |
commit | e3eb763bfb79ee418dac924492a6b747d638ddda (patch) | |
tree | 0e5a96fd017826c8c3f7220461c14bc39e7e143e | |
parent | 8def6f6afa115fba080c9f824f16bfaed9309190 (diff) |
More mixin docs
-rw-r--r-- | docs/_sass/examples/mixins.scss | 13 | ||||
-rw-r--r-- | docs/css/bulma-docs.css | 28 | ||||
-rw-r--r-- | docs/documentation/utilities/mixins.html | 71 |
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) |