Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-18 19:34:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Improve form documentation

Browse Source
This commit is contained in:
Jeremy Thomas
2019-10-13 20:06:56 +01:00
parent e5390369a9
commit a87e20b5c7
5 changed files with 213 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -568,31 +568,31 @@ meta:
<div class="content">
<p>
The <code>.file</code> element is a simple <strong>interactive label</strong> that wraps an <code>&lt;input type="file"&gt;</code>. It comprises several sub-elements:
The <code>file</code> element is a simple <strong>interactive label</strong> that wraps an <code>&lt;input type="file"&gt;</code>. It comprises several sub-elements:
</p>
<ul>
<li>
<code>.file</code> the main <strong>container</strong>
<code>file</code> the main <strong>container</strong>
<ul>
<li>
<code>.file-label</code> the actual <strong>interactive</strong> and clickable part of the element
<code>file-label</code> the actual <strong>interactive</strong> and clickable part of the element
<ul>
<li>
<code>.file-input</code> the <strong>native</strong> file input, hidden for styling purposes
<code>file-input</code> the <strong>native</strong> file input, hidden for styling purposes
</li>
<li>
<code>.file-cta</code> the upload <strong>call-to-action</strong>
<code>file-cta</code> the upload <strong>call-to-action</strong>
<ul>
<li>
<code>.file-icon</code> an optional <strong>upload</strong> icon
<code>file-icon</code> an optional <strong>upload</strong> icon
</li>
<li>
<code>.file-label</code> the "Choose a file…" text
<code>file-label</code> the "Choose a file…" text
</li>
</ul>
</li>
<li>
<code>.file-name</code> a container for the <strong>chosen file</strong> name
<code>file-name</code> a container for the <strong>chosen file</strong> name
</li>
</ul>
</li>
@@ -609,7 +609,7 @@ meta:
<div class="column">
<div class="content">
<p>
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.
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="bd-example">
@@ -625,7 +625,7 @@ meta:
<div class="column">
<div class="content">
<p>
You can move the CTA to the <strong>right side</strong> with the <code>.is-right</code> modifier.
You can move the CTA to the <strong>right side</strong> with the <code>is-right</code> modifier.
</p>
</div>
<div class="bd-example">
@@ -641,7 +641,7 @@ meta:
<div class="column">
<div class="content">
<p>
You can also <strong>expand</strong> the name to fill up the space with the <code>.is-fullwidth</code> modifier.
You can also <strong>expand</strong> the name to fill up the space with the <code>is-fullwidth</code> modifier.
</p>
</div>
<div class="bd-example">
@@ -657,7 +657,7 @@ meta:
<div class="column">
<div class="content">
<p>
You can have a <strong>boxed block</strong> with the <code>.is-boxed</code> modifier.
You can have a <strong>boxed block</strong> with the <code>is-boxed</code> modifier.
</p>
</div>
<div class="bd-example">
@@ -673,7 +673,7 @@ meta:
<div class="column">
<div class="content">
<p>
You can <strong>combine</strong> <code>.has-name</code> and <code>.is-boxed</code>.
You can <strong>combine</strong> <code>has-name</code> and <code>is-boxed</code>.
</p>
</div>
<div class="bd-example">
@@ -710,13 +710,13 @@ meta:
</p>
<ul>
<li>
<code>.is-small</code>
<code>is-small</code>
</li>
<li>
<code>.is-medium</code>
<code>is-medium</code>
</li>
<li>
<code>.is-large</code>
<code>is-large</code>
</li>
</ul>
</div>