Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-17 10:54:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add bd classes

Browse Source
This commit is contained in:
Jeremy Thomas
2017-08-14 12:44:24 +01:00
parent 88fb510d93
commit cd2f886df2
66 changed files with 1184 additions and 2456 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/documentation/components/breadcrumb.html
View File

@@ -160,7 +160,7 @@ variables:
</div>
<hr>
<div class="example">
<div class="bd-example">
{{breadcrumb_example}}
</div>
@@ -174,14 +174,14 @@ variables:
</div>
<div class="example">
<div class="bd-example">
{{breadcrumb_centered_example}}
</div>
{% highlight html %}{{breadcrumb_centered_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{breadcrumb_right_example}}
</div>
@@ -195,7 +195,7 @@ variables:
<p>You can use any of the <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> <strong>icons</strong>.</p>
</div>
<div class="example">
<div class="bd-example">
{{breadcrumb_icons_example}}
</div>
@@ -208,25 +208,25 @@ variables:
<p>You can choose between <strong>4 additional separators</strong>: <code>has-arrow-separator</code> <code>has-bullet-separator</code> <code>has-dot-separator</code> and <code>has-succeeds-separator</code>.</p>
</div>
<div class="example">
<div class="bd-example">
{{breadcrumb_arrow_example}}
</div>
{% highlight html %}{{breadcrumb_arrow_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{breadcrumb_bullet_example}}
</div>
{% highlight html %}{{breadcrumb_bullet_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{breadcrumb_dot_example}}
</div>
{% highlight html %}{{breadcrumb_dot_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{breadcrumb_succeeds_example}}
</div>
@@ -238,19 +238,19 @@ variables:
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
</div>
<div class="example">
<div class="bd-example">
{{breadcrumb_small_example}}
</div>
{% highlight html %}{{breadcrumb_small_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{breadcrumb_medium_example}}
</div>
{% highlight html %}{{breadcrumb_medium_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{breadcrumb_large_example}}
</div>

16
docs/documentation/components/level.html
View File

@@ -38,9 +38,9 @@ doc-subtab: level
<p>In a <code>level-item</code>, you can then insert almost <em>anything</em> you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma <code>level</code>, they will always be <strong>vertically centered</strong>.</p>
</div>
<div class="structure">
<nav class="level structure-item is-structure-container" title="level">
<div class="level-left structure-item" title="level-left">
<div class="bd-structure">
<nav class="level bd-structure-item bd-is-structure-container" title="level">
<div class="level-left bd-structure-item" title="level-left">
<div class="level-item">
<p class="subtitle is-5">
<strong>123</strong> posts
@@ -59,7 +59,7 @@ doc-subtab: level
</div>
</div>
</div>
<div class="level-right structure-item" title="level-right">
<div class="level-right bd-structure-item" title="level-right">
<p class="level-item">
<strong>All</strong>
</p>
@@ -115,7 +115,7 @@ doc-subtab: level
</div>
</nav>
{% endcapture %}
<div class="example">
<div class="bd-example">
{{nav_example}}
</div>
{% highlight html %}
@@ -175,13 +175,13 @@ doc-subtab: level
</p>
</nav>
{% endcapture %}
<div class="example">
<div class="bd-example">
{{nav_centered_example}}
</div>
{% highlight html %}
{{nav_centered_example}}
{% endhighlight %}
<div class="example">
<div class="bd-example">
{{nav_centered_bis_example}}
</div>
{% highlight html %}
@@ -222,7 +222,7 @@ doc-subtab: level
</div>
</nav>
{% endcapture %}
<div class="example">
<div class="bd-example">
{{nav_mobile_example}}
</div>
{% highlight html %}

14
docs/documentation/components/media-object.html
View File

@@ -23,14 +23,14 @@ doc-subtab: media-object
<p>The <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code">media object</a> is a UI element perfect for repeatable and nestable content.</p>
</div>
<div class="structure">
<div class="bd-structure">
<article class="media">
<figure class="media-left structure-item" title="media-left">
<figure class="media-left bd-structure-item" title="media-left">
<p class="image is-64x64">
<img src="{{site.url}}/images/placeholders/128x128.png">
</p>
</figure>
<div class="media-content structure-item is-structure-right" title="media-content">
<div class="media-content bd-structure-item bd-is-structure-right" title="media-content">
<div class="content">
<p>
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
@@ -52,7 +52,7 @@ doc-subtab: media-object
</div>
</nav>
</div>
<div class="media-right structure-item" title="media-right">
<div class="media-right bd-structure-item" title="media-right">
<button class="delete"></button>
</div>
</article>
@@ -92,7 +92,7 @@ doc-subtab: media-object
</div>
</article>
{% endcapture %}
<div class="example">
<div class="bd-example">
{{media_example}}
</div>
{% highlight html %}
@@ -133,7 +133,7 @@ doc-subtab: media-object
</div>
</article>
{% endcapture %}
<div class="example">
<div class="bd-example">
{{media_bis_example}}
</div>
{% highlight html %}
@@ -231,7 +231,7 @@ doc-subtab: media-object
</div>
</article>
{% endcapture %}
<div class="example">
<div class="bd-example">
{{media_nested_example}}
</div>
{% highlight html %}

4
docs/documentation/components/nav.html
View File

@@ -118,7 +118,7 @@ doc-subtab: nav
</nav>
{% endcapture %}
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{nav_example}}
</div>
@@ -176,7 +176,7 @@ doc-subtab: nav
</nav>
{% endcapture %}
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{nav_tabs_example}}
</div>

26
docs/documentation/components/navbar.html
View File

@@ -62,7 +62,7 @@ variables:
{% include subnav-components.html %}
{% capture navbar_example %}
{% include navbar.html id="Example" %}
{% include navbar.html id="bd-example" %}
{% endcapture %}
{% capture navbar_brand_example %}
@@ -591,7 +591,7 @@ document.addEventListener('DOMContentLoaded', function () {
</ul>
</div>
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{navbar_example}}
</div>
@@ -621,7 +621,7 @@ document.addEventListener('DOMContentLoaded', function () {
</p>
</div>
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{navbar_brand_items_example}}
</div>
@@ -641,7 +641,7 @@ document.addEventListener('DOMContentLoaded', function () {
</p>
</div>
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
<div class="navbar-burger" style="display: flex;">
<span></span>
<span></span>
@@ -657,7 +657,7 @@ document.addEventListener('DOMContentLoaded', function () {
</p>
</div>
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
<div class="navbar-burger is-active" style="display: flex;">
<span></span>
<span></span>
@@ -798,7 +798,7 @@ document.addEventListener('DOMContentLoaded', function () {
</p>
</div>
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{navbar_transparent_example}}
</div>
@@ -825,7 +825,7 @@ document.addEventListener('DOMContentLoaded', function () {
<div class="columns">
<div class="column">
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{ navbar_dropdown_example }}
</div>
</div>
@@ -866,7 +866,7 @@ document.addEventListener('DOMContentLoaded', function () {
<div class="columns">
<div class="column">
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{ navbar_dropdown_hover_example }}
</div>
</div>
@@ -880,7 +880,7 @@ document.addEventListener('DOMContentLoaded', function () {
<div class="columns">
<div class="column">
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{ navbar_dropdown_active_example }}
</div>
</div>
@@ -905,7 +905,7 @@ document.addEventListener('DOMContentLoaded', function () {
<div class="columns">
<div class="column">
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{ navbar_dropdown_right_example }}
</div>
</div>
@@ -935,7 +935,7 @@ document.addEventListener('DOMContentLoaded', function () {
<div class="columns">
<div class="column">
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{ navbar_dropdown_default_example }}
</div>
</div>
@@ -967,7 +967,7 @@ document.addEventListener('DOMContentLoaded', function () {
<div class="columns">
<div class="column">
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{ navbar_dropdown_boxed_example }}
</div>
</div>
@@ -983,7 +983,7 @@ document.addEventListener('DOMContentLoaded', function () {
<div class="columns">
<div class="column">
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{ navbar_dropdown_item_active_example }}
</div>
</div>

14
docs/documentation/components/pagination.html
View File

@@ -209,7 +209,7 @@ variables:
</p>
</div>
<div class="example">
<div class="bd-example">
{{pagination_example}}
</div>
@@ -221,7 +221,7 @@ variables:
</p>
</div>
<div class="example">
<div class="bd-example">
{{pagination_options_example}}
</div>
@@ -233,13 +233,13 @@ variables:
</p>
</div>
<div class="example">
<div class="bd-example">
{{pagination_centered_example}}
</div>
{% highlight html %}{{pagination_centered_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{pagination_right_example}}
</div>
@@ -256,15 +256,15 @@ variables:
You only need to append the <strong>modifier</strong> <code>is-small</code>, <code>is-medium</code>, or <code>is-large</code> to the <code>pagination</code> component.
</p>
<div class="example">
<div class="bd-example">
{{pagination_small_example}}
</div>
<div class="example">
<div class="bd-example">
{{pagination_medium_example}}
</div>
<div class="example">
<div class="bd-example">
{{pagination_large_example}}
</div>

28
docs/documentation/components/tabs.html
View File

@@ -382,7 +382,7 @@ variables:
The <strong>default</strong> tabs style has a single border at the bottom.</p>
</div>
<div class="example">
<div class="bd-example">
{{tabs_example}}
</div>
{% highlight html %}{{tabs_example}}{% endhighlight %}
@@ -396,12 +396,12 @@ variables:
</p>
</div>
<div class="example">
<div class="bd-example">
{{tabs_centered_example}}
</div>
{% highlight html %}{{tabs_centered_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{tabs_right_example}}
</div>
{% highlight html %}{{tabs_right_example}}{% endhighlight %}
@@ -413,7 +413,7 @@ variables:
<p>You can use any of the <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> <strong>icons</strong>.</p>
</div>
<div class="example">
<div class="bd-example">
{{tabs_icons_example}}
</div>
{% highlight html %}{{tabs_icons_example}}{% endhighlight %}
@@ -423,17 +423,17 @@ variables:
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
</div>
<div class="example">
<div class="bd-example">
{{tabs_small_example}}
</div>
{% highlight html %}{{tabs_small_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{tabs_medium_example}}
</div>
{% highlight html %}{{tabs_medium_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{tabs_large_example}}
</div>
{% highlight html %}{{tabs_large_example}}{% endhighlight %}
@@ -445,7 +445,7 @@ variables:
If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
</div>
<div class="example">
<div class="bd-example">
{{tabs_boxed_example}}
</div>
{% highlight html %}{{tabs_boxed_example}}{% endhighlight %}
@@ -454,7 +454,7 @@ variables:
If you want <strong>mutually exclusive</strong> tabs (like radio buttons where clicking one deselects all other ones), use the <code>is-toggle</code> modifier.
</p>
<div class="example">
<div class="bd-example">
{{tabs_toggle_example}}
</div>
{% highlight html %}{{tabs_toggle_example}}{% endhighlight %}
@@ -463,7 +463,7 @@ variables:
If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
</p>
<div class="example">
<div class="bd-example">
{{tabs_fullwidth_example}}
</div>
{% highlight html %}{{tabs_fullwidth_example}}{% endhighlight %}
@@ -475,22 +475,22 @@ variables:
<p>You can <strong>combine</strong> different modifiers. For example, you can have <strong>centered boxed</strong> tabs, or <strong>fullwidth toggle</strong> ones.</p>
</div>
<div class="example">
<div class="bd-example">
{{tabs_centered_boxed_example}}
</div>
{% highlight html %}{{tabs_centered_boxed_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{tabs_toggle_fullwidth_example}}
</div>
{% highlight html %}{{tabs_toggle_fullwidth_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{tabs_centered_boxed_medium_example}}
</div>
{% highlight html %}{{tabs_centered_boxed_medium_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{tabs_toggle_fullwidth_large_example}}
</div>
{% highlight html %}{{tabs_toggle_fullwidth_large_example}}{% endhighlight %}

10
docs/documentation/elements/button.html
View File

@@ -466,7 +466,7 @@ variables:
<div class="columns">
<div class="column">
<div class="callout is-primary">
<div class="bd-callout is-primary">
{{button_inverted_example}}
</div>
</div>
@@ -479,7 +479,7 @@ variables:
<div class="columns">
<div class="column">
<div class="callout is-primary">
<div class="bd-callout is-primary">
{{button_inverted_outlined_example}}
</div>
</div>
@@ -620,7 +620,7 @@ variables:
<div class="content">
<p>If you want to <strong>group</strong> buttons together, use the <code>is-grouped</code> modifier on the <code>field</code> container:</p>
</div>
<div class="example">
<div class="bd-example">
{{button_group_example}}
</div>
{% highlight html %}{{button_group_example}}{% endhighlight %}
@@ -632,7 +632,7 @@ variables:
<p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
</div>
<div class="example">
<div class="bd-example">
{{button_addons_example}}
</div>
{% highlight html %}{{button_addons_example}}{% endhighlight %}
@@ -644,7 +644,7 @@ variables:
<p>You can group together addons as well:</p>
</div>
<div class="example">
<div class="bd-example">
{{button_group_addons_example}}
</div>
{% highlight html %}{{button_group_addons_example}}{% endhighlight %}

8
docs/documentation/elements/content.html
View File

@@ -164,7 +164,7 @@ variables:
<p>This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
</div>
<div class="example">
<div class="bd-example">
{{content_example}}
</div>
@@ -175,7 +175,7 @@ variables:
<div class="content">
<p>You can use the <code>is-small</code>, <code>is-medium</code> and <code>is-large</code> modifiers to change the font size.</p>
</div>
<div class="example">
<div class="bd-example">
<div class="content is-small">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
@@ -189,7 +189,7 @@ variables:
</ul>
</div>
</div>
<div class="example">
<div class="bd-example">
<div class="content is-medium">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
@@ -203,7 +203,7 @@ variables:
</ul>
</div>
</div>
<div class="example">
<div class="bd-example">
<div class="content is-large">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>

18
docs/documentation/elements/form.html
View File

@@ -1096,7 +1096,7 @@ doc-subtab: form
<div class="content">
<p>If you want to <strong>attach</strong> controls together, use the <code>has-addons</code> modifier on the <code>control</code> container:</p>
</div>
<div class="example">
<div class="bd-example">
{{addons_example}}
</div>
{% highlight html %}{{addons_example}}{% endhighlight %}
@@ -1112,7 +1112,7 @@ doc-subtab: form
<p>It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.</p>
</div>
<div class="example">
<div class="bd-example">
{{addons_static_example}}
</div>
{% highlight html %}{{addons_static_example}}{% endhighlight %}
@@ -1120,7 +1120,7 @@ doc-subtab: form
<div class="content">
<p>Use the <code>is-expanded</code> modifier on the element you want to fill up the remaining space (in this case, the input):</p>
</div>
<div class="example">
<div class="bd-example">
{{addons_expanded_example}}
</div>
{% highlight html %}{{addons_expanded_example}}{% endhighlight %}
@@ -1128,7 +1128,7 @@ doc-subtab: form
<div class="content">
<p>If you want a full width select dropdown, pair <code>control is-expanded</code> with <code>select is-fullwidth</code>.</p>
</div>
<div class="example">
<div class="bd-example">
{{addons_expanded_fullwidth_example}}
</div>
{% highlight html %}{{addons_expanded_fullwidth_example}}{% endhighlight %}
@@ -1136,11 +1136,11 @@ doc-subtab: form
<div class="content">
<p>Use the <code>has-addons-centered</code> or the <code>has-addons-right</code> modifers to alter the <strong>alignment</strong>.</p>
</div>
<div class="example">
<div class="bd-example">
{{addons_center_example}}
</div>
{% highlight html %}{{addons_center_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{addons_right_example}}
</div>
{% highlight html %}{{addons_right_example}}{% endhighlight %}
@@ -1158,7 +1158,7 @@ doc-subtab: form
Add the <code>is-expanded</code> modifier on the control element you want to <strong>fill up the remaining space</strong>.
</p>
</div>
<div class="example">
<div class="bd-example">
{{group_example}}
</div>
{% highlight html %}{{group_example}}{% endhighlight %}
@@ -1178,7 +1178,7 @@ doc-subtab: form
</ul>
<p>You can of course use <code>is-grouped</code> or <code>has-addons</code> for the child elements.</p>
</div>
<div class="example">
<div class="bd-example">
{{horizontal_form_example}}
</div>
{% highlight html %}{{horizontal_form_example}}{% endhighlight %}
@@ -1205,7 +1205,7 @@ doc-subtab: form
</li>
</ul>
</div>
<div class="example">
<div class="bd-example">
{{field_label_example}}
</div>
{% highlight html %}{{field_label_example}}{% endhighlight %}

2
docs/documentation/elements/icon.html
View File

@@ -42,7 +42,7 @@ variables:
<p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a container:</p>
</div>
<div class="example">
<div class="bd-example">
{{icon_example}}
</div>

4
docs/documentation/elements/image.html
View File

@@ -49,7 +49,7 @@ variables:
<p>Because images can take a few seconds to load (or not at all), use the <code>.image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
</div>
<div class="example">
<div class="bd-example">
<figure class="image is-128x128">
<img src="{{site.url}}/images/placeholders/128x128.png">
</figure>
@@ -82,7 +82,7 @@ variables:
<p>Because the image is fixed in size, you can use an image that is <strong>twice as big</strong>. So for example, in a <code>128x128</code> container, you can use a <code>256x256</code> image, but resized to <strong>128x128</strong> pixels.</p>
</div>
<div class="example">
<div class="bd-example">
<figure class="image is-128x128">
<img src="{{site.url}}/images/placeholders/256x256.png">
</figure>

6
docs/documentation/elements/progress.html
View File

@@ -46,21 +46,21 @@ variables:
<hr>
<div class="example">
<div class="bd-example">
{{ progress }}
</div>
{% highlight html %}{{ progress }}{% endhighlight %}
{% include heading.html name="Colors" %}
<div class="example">
<div class="bd-example">
{{ progress_colors }}
</div>
{% highlight html %}{{ progress_colors }}{% endhighlight %}
{% include heading.html name="Sizes" %}
<div class="example">
<div class="bd-example">
{{ progress_sizes }}
</div>
{% highlight html %}{{ progress_sizes }}{% endhighlight %}

2
docs/documentation/elements/table.html
View File

@@ -393,7 +393,7 @@ variables:
</p>
</div>
<div class="example">
<div class="bd-example">
{{table_example}}
</div>

12
docs/documentation/elements/tag.html
View File

@@ -364,7 +364,7 @@ variables:
You can now create a <strong>list of tags</strong> with the <code>.tags</code> container.
</p>
</div>
<div class="example">
<div class="bd-example">
{{ tags }}
</div>
</div>
@@ -380,7 +380,7 @@ variables:
If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all tags <strong>evenly spaced</strong>.
</p>
</div>
<div class="example">
<div class="bd-example">
{{ tags_multiple }}
</div>
</div>
@@ -396,7 +396,7 @@ variables:
You can <strong>attach tags together</strong> with the <code>.has-addons</code> modifier.
</p>
</div>
<div class="example">
<div class="bd-example">
{{ tags_addons }}
</div>
</div>
@@ -412,7 +412,7 @@ variables:
You can attach a <strong>text</strong> tag with a <strong>delete</strong> tag together.
</p>
</div>
<div class="example">
<div class="bd-example">
{{ tags_delete_addons }}
</div>
</div>
@@ -428,7 +428,7 @@ variables:
If you want to attach <code>.tags</code> containers <strong>together</strong>, simply use the <code>.field</code> element with the <code>.is-grouped</code> and <code>.is-grouped-multiline</code> modifiers.
</p>
</div>
<div class="example">
<div class="bd-example">
{{ tags_field_addons }}
</div>
</div>
@@ -444,7 +444,7 @@ variables:
This can be useful for a long list of <strong>blog tags</strong>.
</p>
</div>
<div class="example">
<div class="bd-example">
{{ tags_blog_addons }}
</div>
</div>

26
docs/documentation/form/file.html
View File

@@ -593,7 +593,7 @@ variables:
<div class="columns">
<div class="column">
<div class="example">
<div class="bd-example">
{{ file }}
</div>
</div>
@@ -611,7 +611,7 @@ variables:
With the <code>.has-name</code> modifier combined with the <code>.file-name</code> element, you can add a <strong>placeholder</strong> for the selected file name.
</p>
</div>
<div class="example">
<div class="bd-example">
{{ file_name }}
</div>
</div>
@@ -627,7 +627,7 @@ variables:
You can move the CTA to the <strong>right side</strong> with the <code>.is-right</code> modifier.
</p>
</div>
<div class="example">
<div class="bd-example">
{{ file_name_right }}
</div>
</div>
@@ -643,7 +643,7 @@ variables:
You can also <strong>expand</strong> the name to fill up the space with the <code>.is-fullwidth</code> modifier.
</p>
</div>
<div class="example">
<div class="bd-example">
{{ file_name_fullwidth }}
</div>
</div>
@@ -659,7 +659,7 @@ variables:
You can have a <strong>boxed block</strong> with the <code>.is-boxed</code> modifier.
</p>
</div>
<div class="example">
<div class="bd-example">
{{ file_boxed }}
</div>
</div>
@@ -675,7 +675,7 @@ variables:
You can <strong>combine</strong> <code>.has-name</code> and <code>.is-boxed</code>.
</p>
</div>
<div class="example">
<div class="bd-example">
{{ file_boxed_name }}
</div>
</div>
@@ -700,7 +700,7 @@ variables:
{% endfor %}
</ul>
</div>
<div class="example">
<div class="bd-example">
{{ file_colors }}
</div>
</div>
@@ -730,7 +730,7 @@ variables:
<div class="columns">
<div class="column">
<div class="example">
<div class="bd-example">
{{ file_sizes }}
</div>
</div>
@@ -741,7 +741,7 @@ variables:
<div class="columns">
<div class="column">
<div class="example">
<div class="bd-example">
{{ file_sizes_name }}
</div>
</div>
@@ -752,7 +752,7 @@ variables:
<div class="columns">
<div class="column">
<div class="example">
<div class="bd-example">
{{ file_sizes_boxed }}
</div>
</div>
@@ -763,7 +763,7 @@ variables:
<div class="columns">
<div class="column">
<div class="example">
<div class="bd-example">
{{ file_sizes_boxed_name }}
</div>
</div>
@@ -790,7 +790,7 @@ variables:
<div class="columns">
<div class="column">
<div class="example">
<div class="bd-example">
{{ file_centered }}
</div>
</div>
@@ -801,7 +801,7 @@ variables:
<div class="columns">
<div class="column">
<div class="example">
<div class="bd-example">
{{ file_right }}
</div>
</div>

26
docs/documentation/form/general.html
View File

@@ -993,7 +993,7 @@ doc-subtab: general
<div class="content">
<p>If you want to <strong>attach controls</strong> together, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
</div>
<div class="example">
<div class="bd-example">
{{addons_example}}
</div>
{% highlight html %}{{addons_example}}{% endhighlight %}
@@ -1009,7 +1009,7 @@ doc-subtab: general
<p>It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.</p>
</div>
<div class="example">
<div class="bd-example">
{{addons_static_example}}
</div>
{% highlight html %}{{addons_static_example}}{% endhighlight %}
@@ -1017,7 +1017,7 @@ doc-subtab: general
<div class="content">
<p>Use the <code>is-expanded</code> modifier on the element you want to fill up the remaining space (in this case, the input):</p>
</div>
<div class="example">
<div class="bd-example">
{{addons_expanded_example}}
</div>
{% highlight html %}{{addons_expanded_example}}{% endhighlight %}
@@ -1025,7 +1025,7 @@ doc-subtab: general
<div class="content">
<p>If you want a full width select dropdown, pair <code>control is-expanded</code> with <code>select is-fullwidth</code>.</p>
</div>
<div class="example">
<div class="bd-example">
{{addons_expanded_fullwidth_example}}
</div>
{% highlight html %}{{addons_expanded_fullwidth_example}}{% endhighlight %}
@@ -1033,11 +1033,11 @@ doc-subtab: general
<div class="content">
<p>Use the <code>has-addons-centered</code> or the <code>has-addons-right</code> modifers to alter the <strong>alignment</strong>.</p>
</div>
<div class="example">
<div class="bd-example">
{{addons_center_example}}
</div>
{% highlight html %}{{addons_center_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{addons_right_example}}
</div>
{% highlight html %}{{addons_right_example}}{% endhighlight %}
@@ -1051,7 +1051,7 @@ doc-subtab: general
</p>
</div>
<div class="example">
<div class="bd-example">
{{group_example}}
</div>
{% highlight html %}{{group_example}}{% endhighlight %}
@@ -1061,12 +1061,12 @@ doc-subtab: general
</p>
</div>
<div class="example">
<div class="bd-example">
{{group_centered_example}}
</div>
{% highlight html %}{{group_centered_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{group_right_example}}
</div>
{% highlight html %}{{group_right_example}}{% endhighlight %}
@@ -1077,7 +1077,7 @@ doc-subtab: general
</p>
</div>
<div class="example">
<div class="bd-example">
{{group_expanded_example}}
</div>
{% highlight html %}{{group_expanded_example}}{% endhighlight %}
@@ -1094,7 +1094,7 @@ doc-subtab: general
<div class="columns">
<div class="column is-half">
<div class="example">
<div class="bd-example">
{{group_multiline_example}}
</div>
</div>
@@ -1118,7 +1118,7 @@ doc-subtab: general
</ul>
<p>You can use <code>is-grouped</code> or <code>has-addons</code> for the child elements.</p>
</div>
<div class="example">
<div class="bd-example">
{{horizontal_form_example}}
</div>
{% highlight html %}{{horizontal_form_example}}{% endhighlight %}
@@ -1142,7 +1142,7 @@ doc-subtab: general
</li>
</ul>
</div>
<div class="example">
<div class="bd-example">
{{field_label_example}}
</div>
{% highlight html %}{{field_label_example}}{% endhighlight %}

8
docs/documentation/layout/container.html
View File

@@ -73,7 +73,7 @@ doc-subtab: container
</div>
</section>
<div class="example is-fullwidth">
<div class="bd-example is-fullwidth">
{{container_example}}
</div>
@@ -88,7 +88,7 @@ doc-subtab: container
</div>
</section>
<div class="example is-fullwidth">
<div class="bd-example is-fullwidth">
{{container_fluid_example}}
</div>
@@ -109,13 +109,13 @@ doc-subtab: container
</div>
</section>
<div class="example is-fullwidth">
<div class="bd-example is-fullwidth">
{{container_widescreen_example}}
</div>
{% highlight html %}{{container_widescreen_example}}{% endhighlight %}
<div class="example is-fullwidth">
<div class="bd-example is-fullwidth">
{{container_fullhd_example}}
</div>

2
docs/documentation/layout/footer.html
View File

@@ -14,7 +14,7 @@ doc-subtab: footer
A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc.
</h2>
<div class="example">
<div class="bd-example">
<footer class="footer">
<div class="container">
<div class="content has-text-centered">

42
docs/documentation/layout/hero.html
View File

@@ -17,7 +17,7 @@ doc-subtab: hero
</section>
<section class="section is-fullwidth">
<div class="example">
<div class="bd-example">
<section class="hero">
<div class="hero-body">
<div class="container">
@@ -58,7 +58,7 @@ doc-subtab: hero
</section>
<section class="section is-fullwidth">
<div class="example">
<div class="bd-example">
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
@@ -88,7 +88,7 @@ doc-subtab: hero
</section>
{% endhighlight %}
<div class="example">
<div class="bd-example">
<section class="hero is-info">
<div class="hero-body">
<div class="container">
@@ -103,7 +103,7 @@ doc-subtab: hero
</section>
</div>
<div class="example">
<div class="bd-example">
<section class="hero is-success">
<div class="hero-body">
<div class="container">
@@ -118,7 +118,7 @@ doc-subtab: hero
</section>
</div>
<div class="example">
<div class="bd-example">
<section class="hero is-warning">
<div class="hero-body">
<div class="container">
@@ -133,7 +133,7 @@ doc-subtab: hero
</section>
</div>
<div class="example">
<div class="bd-example">
<section class="hero is-danger">
<div class="hero-body">
<div class="container">
@@ -148,7 +148,7 @@ doc-subtab: hero
</section>
</div>
<div class="example">
<div class="bd-example">
<section class="hero is-light">
<div class="hero-body">
<div class="container">
@@ -163,7 +163,7 @@ doc-subtab: hero
</section>
</div>
<div class="example">
<div class="bd-example">
<section class="hero is-dark">
<div class="hero-body">
<div class="container">
@@ -192,7 +192,7 @@ doc-subtab: hero
</section>
<section class="section is-fullwidth">
<div class="example">
<div class="bd-example">
<section class="hero is-medium is-primary is-bold">
<div class="hero-body">
<div class="container">
@@ -220,7 +220,7 @@ doc-subtab: hero
</div>
</section>
{% endhighlight %}
<div class="example">
<div class="bd-example">
<section class="hero is-medium is-info is-bold">
<div class="hero-body">
<div class="container">
@@ -234,7 +234,7 @@ doc-subtab: hero
</div>
</section>
</div>
<div class="example">
<div class="bd-example">
<section class="hero is-medium is-success is-bold">
<div class="hero-body">
<div class="container">
@@ -248,7 +248,7 @@ doc-subtab: hero
</div>
</section>
</div>
<div class="example">
<div class="bd-example">
<section class="hero is-medium is-warning is-bold">
<div class="hero-body">
<div class="container">
@@ -262,7 +262,7 @@ doc-subtab: hero
</div>
</section>
</div>
<div class="example">
<div class="bd-example">
<section class="hero is-medium is-danger is-bold">
<div class="hero-body">
<div class="container">
@@ -276,7 +276,7 @@ doc-subtab: hero
</div>
</section>
</div>
<div class="example">
<div class="bd-example">
<section class="hero is-medium is-light is-bold">
<div class="hero-body">
<div class="container">
@@ -290,7 +290,7 @@ doc-subtab: hero
</div>
</section>
</div>
<div class="example">
<div class="bd-example">
<section class="hero is-medium is-dark is-bold">
<div class="hero-body">
<div class="container">
@@ -316,7 +316,7 @@ doc-subtab: hero
</section>
<section class="section is-fullwidth">
<div class="example">
<div class="bd-example">
<section class="hero is-primary is-medium">
<div class="hero-body">
<div class="container">
@@ -346,7 +346,7 @@ doc-subtab: hero
</section>
{% endhighlight %}
<div class="example">
<div class="bd-example">
<section class="hero is-info is-large">
<div class="hero-body">
<div class="container">
@@ -376,7 +376,7 @@ doc-subtab: hero
</section>
{% endhighlight %}
<div class="example is-fullwidth">
<div class="bd-example is-fullwidth">
<section class="hero is-success is-fullheight">
<div class="hero-body">
<div class="container">
@@ -428,7 +428,7 @@ doc-subtab: hero
</section>
<section class="section is-fullwidth">
<div class="example">
<div class="bd-example">
<section class="hero is-primary is-medium">
<div class="hero-head">
<header class="nav">
@@ -575,7 +575,7 @@ doc-subtab: hero
</section>
{% endhighlight %}
<div class="example">
<div class="bd-example">
<section class="hero is-info is-large">
<div class="hero-head">
<header class="nav">
@@ -722,7 +722,7 @@ doc-subtab: hero
</section>
{% endhighlight %}
<div class="example is-fullwidth">
<div class="bd-example is-fullwidth">
<section class="hero is-success is-fullheight">
<div class="hero-head">
<header class="nav">

6
docs/documentation/overview/colors.html
View File

@@ -166,10 +166,10 @@ shades:
</td>
<td>
{% if color.invert_hex == "black" %}
<span class="color" style="background: rgba(0, 0, 0, 0.7);"></span>
<span class="bd-color" style="background: rgba(0, 0, 0, 0.7);"></span>
<code>rgba(0, 0, 0, 0.7)</code>
{% else %}
<span class="color" style="background: #fff;"></span>
<span class="bd-color" style="background: #fff;"></span>
<code>#fff</code>
{% endif %}
</td>
@@ -178,4 +178,4 @@ shades:
</tbody>
</table>
</div>
</section>
</section>

38
docs/documentation/overview/functions.html
View File

@@ -46,14 +46,14 @@ doc-subtab: functions
<tbody>
<tr>
<td>
<span class="color" style="background: #00d1b2;"></span>
<span class="bd-color" style="background: #00d1b2;"></span>
<code>#00d1b2</code>
</td>
<td>
<code>0.52831</code>
</td>
<td>
<span class="color" style="background: #fff;"></span>
<span class="bd-color" style="background: #fff;"></span>
<code>#fff</code>
</td>
<td>
@@ -64,14 +64,14 @@ doc-subtab: functions
</tr>
<tr>
<td>
<span class="color" style="background: #3273dc;"></span>
<span class="bd-color" style="background: #3273dc;"></span>
<code>#3273dc</code>
</td>
<td>
<code>0.23119</code>
</td>
<td>
<span class="color" style="background: #fff;"></span>
<span class="bd-color" style="background: #fff;"></span>
<code>#fff</code>
</td>
<td>
@@ -82,14 +82,14 @@ doc-subtab: functions
</tr>
<tr>
<td>
<span class="color" style="background: #23d160;"></span>
<span class="bd-color" style="background: #23d160;"></span>
<code>#23d160</code>
</td>
<td>
<code>0.51067</code>
</td>
<td>
<span class="color" style="background: #fff;"></span>
<span class="bd-color" style="background: #fff;"></span>
<code>#fff</code>
</td>
<td>
@@ -100,14 +100,14 @@ doc-subtab: functions
</tr>
<tr>
<td>
<span class="color" style="background: #ffdd57;"></span>
<span class="bd-color" style="background: #ffdd57;"></span>
<code>#ffdd57</code>
</td>
<td>
<code>0.76863</code>
</td>
<td>
<span class="color" style="background: rgba(0, 0, 0, 0.7);"></span>
<span class="bd-color" style="background: rgba(0, 0, 0, 0.7);"></span>
<code>rgba(0, 0, 0, 0.7)</code>
</td>
<td>
@@ -118,14 +118,14 @@ doc-subtab: functions
</tr>
<tr>
<td>
<span class="color" style="background: #ff3860;"></span>
<span class="bd-color" style="background: #ff3860;"></span>
<code>#ff3860</code>
</td>
<td>
<code>0.27313</code>
</td>
<td>
<span class="color" style="background: #fff;"></span>
<span class="bd-color" style="background: #fff;"></span>
<code>#fff</code>
</td>
<td>
@@ -136,14 +136,14 @@ doc-subtab: functions
</tr>
<tr>
<td>
<span class="color" style="background: #ffb3b3;"></span>
<span class="bd-color" style="background: #ffb3b3;"></span>
<code>#ffb3b3</code>
</td>
<td>
<code>0.61796</code>
</td>
<td>
<span class="color" style="background: rgba(0,0,0,0.7);"></span>
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
<code>rgba(0,0,0,0.7)</code>
</td>
<td>
@@ -154,14 +154,14 @@ doc-subtab: functions
</tr>
<tr>
<td>
<span class="color" style="background: #ffbc6b;"></span>
<span class="bd-color" style="background: #ffbc6b;"></span>
<code>#ffbc6b</code>
</td>
<td>
<code>0.63053</code>
</td>
<td>
<span class="color" style="background: rgba(0,0,0,0.7);"></span>
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
<code>rgba(0,0,0,0.7)</code>
</td>
<td>
@@ -172,14 +172,14 @@ doc-subtab: functions
</tr>
<tr>
<td>
<span class="color" style="background: hsl(294, 71%, 79%);"></span>
<span class="bd-color" style="background: hsl(294, 71%, 79%);"></span>
<code>hsl(294, 71%, 79%)</code>
</td>
<td>
<code>0.5529</code>
</td>
<td>
<span class="color" style="background: rgba(0,0,0,0.7);"></span>
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
<code>rgba(0,0,0,0.7)</code>
</td>
<td>
@@ -193,7 +193,7 @@ doc-subtab: functions
<p>
For colors that have a luminance close to the <code>0.55</code> threshold, it can be useful to <strong>override</strong> the <code>findColorInvert()</code> function, and rather set the invert color <strong>manually.</strong>
<br>
For example, this shade of <span class="color" style="background: hsl(294, 71%, 79%); float: none; height: 16px; width: 16px; margin-right: 0; vertical-align: middle;"></span> purple has a color luminance of <code>0.5529</code>. It can be preferable to set a color invert of white instead of transparent black:
For example, this shade of <span class="bd-color" style="background: hsl(294, 71%, 79%); float: none; height: 16px; width: 16px; margin-right: 0; vertical-align: middle;"></span> purple has a color luminance of <code>0.5529</code>. It can be preferable to set a color invert of white instead of transparent black:
</p>
<table class="table is-bordered">
<tbody>
@@ -205,7 +205,7 @@ doc-subtab: functions
<code>$purple-invert: findColorInvert($purple)</code>
</td>
<td>
<span class="color" style="background: rgba(0,0,0,0.7);"></span>
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
<code>rgba(0,0,0,0.7)</code>
</td>
<td>
@@ -222,7 +222,7 @@ doc-subtab: functions
<code>$purple-invert: #fff</code>
</td>
<td>
<span class="color" style="background: #fff;"></span>
<span class="bd-color" style="background: #fff;"></span>
<code>#fff</code>
</td>
<td>

2
docs/documentation/overview/start.html
View File

@@ -89,7 +89,7 @@ doc-subtab: start
</p>
</div>
<div class="example highlight-full">
<div class="bd-example highlight-full">
{% highlight html %}{% include getting-started.html %}{% endhighlight %}
</div>

2
docs/documentation/overview/variables.html
View File

@@ -264,7 +264,7 @@ derived_variables:
<code style="white-space: nowrap;">{{ color.name }}</code>
</td>
<td>
<span class="color" style="background: {{ color.value }};"></span>
<span class="bd-color" style="background: {{ color.value }};"></span>
<code>{{ color.value }}</code>
</td>
</tr>