mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-04-22 13:21:56 +02:00
Code Issues Releases Wiki Activity

Input_control documentation complete

Browse Source
This commit is contained in:
Angelos Chalaris 2016-12-07 10:46:33 +02:00
parent 3f80509c22
commit 1bc0979362
3 changed files with 20 additions and 12 deletions

1
docs/v2/DEVLOG.md

@ -617,3 +617,4 @@
- Documented `radio` and `checkbox` in the `input_control` doc page.
- Tweaked all references of `$back-color` to now use `#fafafa` instead of the previous `#f5f5f5`. This will make contrast better and allow for better visibility of certain pieces of text.
- Full documentation for `button`s and `button-group`s.
- Added documentation for `file` upload in the `input_control` module. Docs complete.

29
docs/v2/input_control.html

@ -480,29 +480,34 @@
</div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
<!-- sample -->
<div class="input-group">
<br>
<input type="file" id="file-input-demo">
<label for="file-input-demo" class="button"><i class="fa fa-upload" aria-hidden="true"></i>&nbsp;Upload file</label>
<br>
</div>
</div>
<div class="col-sm-12 col-sm-first col-lg-8 col-lg-normal">
<p></p>
<p>File upload buttons are commonly a sore spot in UI toolkits. We try to remedy this problem by hiding the <code>&lt;input <span class="fore-secondary">type</span>=<span class="fore-primary">&quot;file&quot;</span>&gt;</code>, while maintaining accessiblity and using a linked <code>&lt;label&gt;</code> of the <code>.button</code> class to display it in a modern way.</p>
<h3>Sample code</h3>
<pre></pre>
<pre>&lt;input type=&quot;file&quot; id=&quot;file-input&quot;&gt;
&lt;label for=&quot;file-input&quot; class=&quot;button&quot;&gt;Upload file...&lt;/label&gt;</pre>
</div>
</div>
<div class="section">
<h3>Notes</h3>
<ul>
<li></li>
<li></li>
<li>The icon displayed in the example above is not part of the button styling.</li>
<li>File upload buttons do not change their text to the name of the file after the user has selected a file to upload. You can, however, add this functionality using a few lines of Javascript.</li>
</ul>
<hr>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<pre><!-- do code --></pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;</p>
</div>
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
<pre><!-- don't code --></pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;</p>
<div class="col-sm-12">
<pre>&lt;div class=&quot;input-group&quot;&gt;
&lt;input type=&quot;file&quot; id=&quot;file-input&quot;&gt;
&lt;label for=&quot;file-input&quot; class=&quot;button&quot;&gt;Upload file...&lt;/label&gt;
&lt;/div&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can use a <code>.input-group</code> to wrap the <code>&lt;input&gt;</code> and <code>&lt;label&gt;</code>, if you wish.</p>
</div>
</div>
</div>

2
docs/v2/playground.html

@ -228,6 +228,8 @@
<button>Button</button>
<button>Button</button>
</div>
<br>
<input type="file" id="file-input-demo"><label for="file-input-demo" class="button"><i class="fa fa-upload" aria-hidden="true"></i>&nbsp;Upload file</label>
</div></main>
<!-- End of page content-->
<footer><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>