library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-28 12:24:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

More mixin docs

Browse Source
This commit is contained in:
Jeremy Thomas 2021-09-19 01:38:25 +01:00
parent 8def6f6afa
commit e3eb763bfb
3 changed files with 109 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
docs/_sass/examples/mixins.scss
View File

@ -9,3 +9,16 @@
.bulma-delete-mixin { .bulma-delete-mixin {
@include delete; @include delete;
} }
.bulma-loader-mixin {
@include loader;
}
.bulma-block-mixin {
@include block(1rem);
}
.bulma-fa-mixin {
@include fa(1rem, 2rem);
background-color: lavender;
}

28
docs/css/bulma-docs.css
View File

@ -22362,3 +22362,31 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
min-width: 32px; min-width: 32px;
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;
}

71
docs/documentation/utilities/mixins.html
View File

@ -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>
@include block($spacing: $block-spacing) {% 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 %}
{% 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) @include overlay($offset: 0)