mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-31 01:29:46 +02:00
Code Issues Releases Wiki Activity

Forms module initial commit

Browse Source
This commit is contained in:
Angelos Chalaris
2016-10-25 20:48:17 +03:00
parent 31bcceaa7d
commit 2ad1bc879a
6 changed files with 47 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/v2/index.html
View File

@@ -263,7 +263,7 @@
<a href="#" class="button">Link button</a>
<button disabled>Disabled button</button><br>
<p>File inputs are a sore spot in most frameworks, as they cannot be easily stylized using CSS. <strong>mini.css</strong> deals with the problem, using a workaround involving labels that use the <code>button</code> class, which applies the exact same style to those labels. Just link it to the <code>&lt;input type=&quot;file&quot;&gt;</code> element of your choice and you're good to go. For example:</p>
<span style="margin:3px;"></span><input type="file" id="file-input-demo"><label for="file-input-demo" class="button">Upload file</label><br>
<span style="margin:3px;"></span><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>
<p>There are also different kinds of buttons, specifically <code>primary</code>, <code>secondary</code> and <code>tertiary</code>, as well as <code>small</code> and <code>large</code> buttons. All of these types can be specified as classes. For example:</p>
<span style="margin:3px;"></span>
<button class="primary">Primary normal button</button>
@@ -271,6 +271,20 @@
<input type="reset" value="Tertiary reset button" class="tertiary">
<input type="submit" value="Large submit button" class="large">
<label disabled class="button small primary">Small primary disabled label button</label><br>
<h3>Forms</h3>
<p>Forms are pre-styled as well and they offer consistency across all inputs. There are options for normal forms (unaligned) or inline forms (horizontal), as well as aligned forms, that utilise the grid system to present their content. Below are some examples:</p>
<form>
<input type="text" value="text">
<input type="color">
<input type="email" value="mail@mail.com">
<input type="hidden" value="hidden">
<input type="number" value="4">
<input type="password" value="password">
<input type="range" value="4">
<input type="search">
<input type="url" value="data.google.com">
<input value="normal">
</form>
</div>
</div>
</div>