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

Textarea snippets

Browse Source
This commit is contained in:
Jeremy Thomas 2017-08-30 22:33:52 +01:00
parent 695c72c6a9
commit 51866c4182
2 changed files with 39 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
docs/_includes/snippet.html
View File

@ -1,13 +1,26 @@
<div class="
bd-snippet
{% if include.horizontal %}bd-is-horizontal{% else %}bd-is-vertical{% endif %}
{% if include.clipped %}bd-is-clipped{% endif %}
{% if include.size %}bd-is-{{ include.size }}{% endif %}
">
<div class="bd-snippet-preview">
{{ include.content }}
{% if include.plain %}
<div class="columns">
<div class="column is-half">
<div class="bd-example">
{{ include.content }}
</div>
</div>
<div class="column is-half">
{% highlight html %}{{ include.content }}{% endhighlight %}
</div>
</div>
<div class="bd-snippet-code {% unless include.clipped %}highlight-full{% endunless %}">
{% highlight html %}{{ include.content }}{% endhighlight %}
{% else %}
<div class="
bd-snippet
{% if include.horizontal %}bd-is-horizontal{% else %}bd-is-vertical{% endif %}
{% if include.clipped %}bd-is-clipped{% endif %}
{% if include.size %}bd-is-{{ include.size }}{% endif %}
">
<div class="bd-snippet-preview">
{{ include.content }}
</div>
<div class="bd-snippet-code {% unless include.clipped %}highlight-full{% endunless %}">
{% highlight html %}{{ include.content }}{% endhighlight %}
</div>
</div>
</div>
{% endif %}

98
docs/documentation/form/textarea.html
View File

@ -134,23 +134,7 @@ doc-subtab: textarea
<hr>
<div class="content">
<p>The following <strong>modifiers</strong> are supported:</p>
<ul>
<li>the <strong><a href="#input-color">color</a></strong></li>
<li>the <strong><a href="#input-size">size</a></strong></li>
<li>the <strong><a href="#input-state">state</a></strong></li>
</ul>
</div>
<div class="columns">
<div class="column is-half">
{{textarea_example}}
</div>
<div class="column is-half highlight-full">
{% highlight html %}{{textarea_example}}{% endhighlight %}
</div>
</div>
{% include snippet.html content=textarea_example %}
<div class="content">
<p>
@ -162,79 +146,33 @@ doc-subtab: textarea
</p>
</div>
<div class="columns">
<div class="column is-half">
{{textarea_rows_example}}
</div>
<div class="column is-half highlight-full">
{% highlight html %}{{textarea_rows_example}}{% endhighlight %}
</div>
</div>
{% include snippet.html content=textarea_rows_example %}
{% include anchor.html name="Colors" %}
<div class="columns">
<div class="column is-half">
{{colors_example}}
</div>
<div class="column is-half highlight-full">
{% highlight html %}{{colors_example}}{% endhighlight %}
</div>
</div>
{% include snippet.html content=colors_example %}
{% include anchor.html name="Sizes" %}
<div class="columns">
<div class="column is-half">
{{sizes_example}}
</div>
<div class="column is-half highlight-full">
{% highlight html %}{{sizes_example}}{% endhighlight %}
</div>
</div>
{% include snippet.html content=sizes_example %}
<hr>
{% include anchor.html name="States" %}
<h3 id="input-state" class="title">States</h3>
<h4 class="subtitle">Normal</h4>
<div class="columns">
<div class="column is-half">
{{normal_example}}
</div>
<div class="column is-half">
{% highlight html %}{{normal_example}}{% endhighlight %}
</div>
</div>
{% include snippet.html content=normal_example %}
<h4 class="subtitle">Hover</h4>
<div class="columns">
<div class="column is-half">
{{hover_example}}
</div>
<div class="column is-half">
{% highlight html %}{{hover_example}}{% endhighlight %}
</div>
</div>
{% include snippet.html content=hover_example %}
<h4 class="subtitle">Focus</h4>
<div class="columns">
<div class="column is-half">
{{focus_example}}
</div>
<div class="column is-half">
{% highlight html %}{{focus_example}}{% endhighlight %}
</div>
</div>
{% include snippet.html content=focus_example %}
<h4 class="subtitle">Loading</h4>
<div class="columns">
<div class="column is-half">
{{loading_example}}
</div>
<div class="column is-half">
{% highlight html %}{{loading_example}}{% endhighlight %}
</div>
</div>
{% include snippet.html content=loading_example %}
{% if site.vernum >= 43 %}
<div class="columns">
@ -257,14 +195,8 @@ doc-subtab: textarea
{% endif %}
<h4 class="subtitle">Disabled</h4>
<div class="columns">
<div class="column is-half">
{{disabled_example}}
</div>
<div class="column is-half">
{% highlight html %}{{disabled_example}}{% endhighlight %}
</div>
</div>
{% include snippet.html content=disabled_example %}
</div>
</section>