mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Organize partials
This commit is contained in:
@@ -572,9 +572,9 @@ meta:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=file %}
|
||||
{% include elements/snippet.html content=file %}
|
||||
|
||||
{% include anchor.html name="Modifiers" %}
|
||||
{% include elements/anchor.html name="Modifiers" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
@@ -656,7 +656,7 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Colors" %}
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -671,9 +671,9 @@ meta:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=file_colors clipped=true %}
|
||||
{% include elements/snippet.html content=file_colors clipped=true %}
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -692,15 +692,15 @@ meta:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=file_sizes clipped=true %}
|
||||
{% include elements/snippet.html content=file_sizes clipped=true %}
|
||||
|
||||
{% include snippet.html content=file_sizes_name clipped=true %}
|
||||
{% include elements/snippet.html content=file_sizes_name clipped=true %}
|
||||
|
||||
{% include snippet.html content=file_sizes_boxed clipped=true %}
|
||||
{% include elements/snippet.html content=file_sizes_boxed clipped=true %}
|
||||
|
||||
{% include snippet.html content=file_sizes_boxed_name clipped=true %}
|
||||
{% include elements/snippet.html content=file_sizes_boxed_name clipped=true %}
|
||||
|
||||
{% include anchor.html name="Alignment" %}
|
||||
{% include elements/anchor.html name="Alignment" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -716,11 +716,11 @@ meta:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=file_centered %}
|
||||
{% include elements/snippet.html content=file_centered %}
|
||||
|
||||
{% include snippet.html content=file_right %}
|
||||
{% include elements/snippet.html content=file_right %}
|
||||
|
||||
{% include anchor.html name="JavaScript" %}
|
||||
{% include elements/anchor.html name="JavaScript" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -730,7 +730,7 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Variables" %}
|
||||
{% include elements/anchor.html name="Variables" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
|
||||
@@ -816,9 +816,9 @@ variables_form_keys:
|
||||
When combining several controls in a <strong>form</strong>, use the <code>.field</code> class as a <strong>container</strong>, to keep the spacing consistent.</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=example more=true %}
|
||||
{% include elements/snippet.html content=example more=true %}
|
||||
|
||||
{% include anchor.html name="Form field" %}
|
||||
{% include elements/anchor.html name="Form field" %}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>field</code> container is a simple container for:</p>
|
||||
@@ -829,15 +829,15 @@ variables_form_keys:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=field_example %}
|
||||
{% include elements/snippet.html content=field_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>This container allows form fields to be <strong>spaced consistently</strong>.</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=fields_example %}
|
||||
{% include elements/snippet.html content=fields_example %}
|
||||
|
||||
{% include anchor.html name="Form control" %}
|
||||
{% include elements/anchor.html name="Form control" %}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>control</code> is a versatile container meant to <strong>enhance single form controls</strong>. Because it has the same height as a control elements, it can <strong class="has-text-danger">only contain</strong> the following elements:</p>
|
||||
@@ -849,14 +849,14 @@ variables_form_keys:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=control_input_example %}
|
||||
{% include elements/snippet.html content=control_input_example %}
|
||||
|
||||
{% include snippet.html content=control_select_example %}
|
||||
{% include elements/snippet.html content=control_select_example %}
|
||||
|
||||
{% include snippet.html content=control_button_example %}
|
||||
{% include elements/snippet.html content=control_button_example %}
|
||||
|
||||
<!-- Font Awesome Icons -->
|
||||
{% include anchor.html name="With icons" %}
|
||||
{% include elements/anchor.html name="With icons" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can append one of 2 <strong>modifiers</strong> on a control:</p>
|
||||
@@ -880,7 +880,7 @@ variables_form_keys:
|
||||
<p>The size of the <strong>input</strong> will define the size of the icon container.</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=icons_example clipped=true %}
|
||||
{% include elements/snippet.html content=icons_example clipped=true %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -888,7 +888,7 @@ variables_form_keys:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=select_icons_example %}
|
||||
{% include elements/snippet.html content=select_icons_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -896,21 +896,21 @@ variables_form_keys:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=has_icons_small_example %}
|
||||
{% include elements/snippet.html content=has_icons_small_example %}
|
||||
|
||||
{% include snippet.html content=has_icons_normal_example clipped=true %}
|
||||
{% include elements/snippet.html content=has_icons_normal_example clipped=true %}
|
||||
|
||||
{% include snippet.html content=has_icons_medium_example clipped=true %}
|
||||
{% include elements/snippet.html content=has_icons_medium_example clipped=true %}
|
||||
|
||||
{% include snippet.html content=has_icons_large_example clipped=true %}
|
||||
{% include elements/snippet.html content=has_icons_large_example clipped=true %}
|
||||
|
||||
{% include anchor.html name="Form addons" %}
|
||||
{% include elements/anchor.html name="Form addons" %}
|
||||
|
||||
<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>
|
||||
|
||||
{% include snippet.html content=addons_example %}
|
||||
{% include elements/snippet.html content=addons_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can attach inputs, buttons, and dropdowns <strong>only</strong>.</p>
|
||||
@@ -920,29 +920,29 @@ variables_form_keys:
|
||||
<p>It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=addons_static_example %}
|
||||
{% include elements/snippet.html content=addons_static_example %}
|
||||
|
||||
<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>
|
||||
|
||||
{% include snippet.html content=addons_expanded_example horizontal=true more=true %}
|
||||
{% include elements/snippet.html content=addons_expanded_example horizontal=true more=true %}
|
||||
|
||||
<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>
|
||||
|
||||
{% include snippet.html content=addons_expanded_fullwidth_example %}
|
||||
{% include elements/snippet.html content=addons_expanded_fullwidth_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>Use the <code>has-addons-centered</code> or the <code>has-addons-right</code> modifiers to alter the <strong>alignment</strong>.</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=addons_center_example %}
|
||||
{% include elements/snippet.html content=addons_center_example %}
|
||||
|
||||
{% include snippet.html content=addons_right_example %}
|
||||
{% include elements/snippet.html content=addons_right_example %}
|
||||
|
||||
{% include anchor.html name="Form group" %}
|
||||
{% include elements/anchor.html name="Form group" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -950,16 +950,16 @@ variables_form_keys:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=group_example %}
|
||||
{% include elements/snippet.html content=group_example %}
|
||||
|
||||
<div class="content">
|
||||
Use the <code>is-grouped-centered</code> or the <code>is-grouped-right</code> modifiers to alter the <strong>alignment</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=group_centered_example %}
|
||||
{% include elements/snippet.html content=group_centered_example %}
|
||||
|
||||
{% include snippet.html content=group_right_example %}
|
||||
{% include elements/snippet.html content=group_right_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -967,7 +967,7 @@ variables_form_keys:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=group_expanded_example %}
|
||||
{% include elements/snippet.html content=group_expanded_example %}
|
||||
|
||||
<div id="form-group-multiline" class="content">
|
||||
<p>
|
||||
@@ -975,7 +975,7 @@ variables_form_keys:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=group_multiline_example clipped=true %}
|
||||
{% include elements/snippet.html content=group_multiline_example clipped=true %}
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message-header">
|
||||
@@ -990,7 +990,7 @@ variables_form_keys:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Horizontal form" %}
|
||||
{% include elements/anchor.html name="Horizontal form" %}
|
||||
|
||||
<div class="content">
|
||||
<p>If you want a <strong>horizontal</strong> form control, use the <code>is-horizontal</code> modifier on the <code>field</code> container, in which you include:</p>
|
||||
@@ -1005,7 +1005,7 @@ variables_form_keys:
|
||||
<p>You can use <code>is-grouped</code> or <code>has-addons</code> for the child elements.</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=horizontal_form_example horizontal=true more=true %}
|
||||
{% include elements/snippet.html content=horizontal_form_example horizontal=true more=true %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -1027,9 +1027,9 @@ variables_form_keys:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=field_label_example horizontal=true more=true %}
|
||||
{% include elements/snippet.html content=field_label_example horizontal=true more=true %}
|
||||
|
||||
{% include anchor.html name="Variables" %}
|
||||
{% include elements/anchor.html name="Variables" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
|
||||
@@ -273,7 +273,7 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Colors" %}
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
@@ -284,7 +284,7 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
@@ -295,7 +295,7 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Styles" %}
|
||||
{% include elements/anchor.html name="Styles" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.6.2" %}
|
||||
|
||||
@@ -308,7 +308,7 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="States" %}
|
||||
{% include elements/anchor.html name="States" %}
|
||||
|
||||
<h4 class="subtitle">Normal</h4>
|
||||
<div class="columns">
|
||||
@@ -405,7 +405,7 @@ meta:
|
||||
{% highlight html %}{{ static_example }}{% endhighlight %}
|
||||
|
||||
<!-- Font Awesome Icons -->
|
||||
{% include anchor.html name="With Font Awesome icons" %}
|
||||
{% include elements/anchor.html name="With Font Awesome icons" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can append one of 2 <strong>modifiers</strong> on a control:</p>
|
||||
@@ -478,7 +478,7 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Variables" %}
|
||||
{% include elements/anchor.html name="Variables" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
|
||||
@@ -315,7 +315,7 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Colors" %}
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
@@ -326,7 +326,7 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Styles" %}
|
||||
{% include elements/anchor.html name="Styles" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.6.2" %}
|
||||
|
||||
@@ -339,7 +339,7 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
|
||||
@@ -132,7 +132,7 @@ meta:
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include snippet.html content=textarea_example %}
|
||||
{% include elements/snippet.html content=textarea_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -140,33 +140,33 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=textarea_rows_example %}
|
||||
{% include elements/snippet.html content=textarea_rows_example %}
|
||||
|
||||
{% include anchor.html name="Colors" %}
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
|
||||
{% include snippet.html content=colors_example %}
|
||||
{% include elements/snippet.html content=colors_example %}
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
|
||||
{% include snippet.html content=sizes_example %}
|
||||
{% include elements/snippet.html content=sizes_example %}
|
||||
|
||||
{% include anchor.html name="States" %}
|
||||
{% include elements/anchor.html name="States" %}
|
||||
|
||||
<h4 class="subtitle">Normal</h4>
|
||||
|
||||
{% include snippet.html content=normal_example %}
|
||||
{% include elements/snippet.html content=normal_example %}
|
||||
|
||||
<h4 class="subtitle">Hover</h4>
|
||||
|
||||
{% include snippet.html content=hover_example %}
|
||||
{% include elements/snippet.html content=hover_example %}
|
||||
|
||||
<h4 class="subtitle">Focus</h4>
|
||||
|
||||
{% include snippet.html content=focus_example %}
|
||||
{% include elements/snippet.html content=focus_example %}
|
||||
|
||||
<h4 class="subtitle">Loading</h4>
|
||||
|
||||
{% include snippet.html content=loading_example %}
|
||||
{% include elements/snippet.html content=loading_example %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
@@ -184,7 +184,7 @@ meta:
|
||||
|
||||
<h4 class="subtitle">Disabled</h4>
|
||||
|
||||
{% include snippet.html content=disabled_example %}
|
||||
{% include elements/snippet.html content=disabled_example %}
|
||||
|
||||
<h4 class="subtitle">Readonly</h4>
|
||||
|
||||
@@ -199,4 +199,4 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=readonly_example %}
|
||||
{% include elements/snippet.html content=readonly_example %}
|
||||
|
||||
Reference in New Issue
Block a user