mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-12 08:53:59 +02:00
Code Issues Releases Wiki Activity

Button module mixin for color variants

Browse Source
This commit is contained in:
Angelos Chalaris
2016-10-25 17:53:07 +03:00
parent b30be1cb62
commit 63e3f2f2bb
6 changed files with 55 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/v2/DEVLOG.md
View File

@@ -191,4 +191,5 @@
- Due to implicit labeling (e.g. `<label>Name:<input></label>`) not being correctly handled by some assistive technologies, explicit labels will be used for the `file` `<input>` elements.
- Added `$hide-file-inputs` flag to decide the styling of `file` `<input>` elements.
- Softcoded changes and optimized some things in the `button` module.
- Updated demo page.
- Updated demo page.
- Added and optimized `make-button-alt-color` mixin, created primary color variant.

9
docs/v2/index.html
View File

@@ -262,7 +262,14 @@
<input type="reset" value="Reset button">
<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>
<span style="margin:3px;"></span><input type="file" id="file-input-demo"><label for="file-input-demo" class="button">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>
<input type="button" value="Secondary input button" class="secondary">
<input type="reset" value="Tertiary reset button" class="tertiary">
<input type="submit" value="Large submit button" class="large">
<button disabled class="small primary">Small primary disabled button</button><br>
</div>
</div>
</div>