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

Updated button module

Browse Source
This commit is contained in:
Angelos Chalaris
2016-10-25 17:23:24 +03:00
parent 8a1ff16104
commit e4b326ec36
6 changed files with 69 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/v2/DEVLOG.md
View File

@@ -183,4 +183,11 @@
- Rebuilt grid system to work with 3 screen sizes instead of 4. Legacy system is now used only if a flag (`$use-four-step-grid`) is enabled.
- Three-step grid breakpoints tweaked to `800px` and `1080px` accordingly.
- Deployed live demo with new grid.
- Deployed live demo with new grid.
## 20161025
- Issue maintenance and minor changes to issue structure on Github.
- 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.

6
docs/v2/index.html
View File

@@ -10,7 +10,7 @@
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- Live demo styled as of 20161024 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/08062eff88dbab3d3b03f8bde56cce5f9d6882e2/flavors/v2/mini-default.min.css">
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/08062eff88dbab3d3b03f8bde56cce5f9d6882e2/flavors/v2/mini-default.min.css"> -->
<link rel="stylesheet" href="../../flavors/v2/mini-default.css">
<style>
#top-logo {
@@ -261,8 +261,8 @@
<input type="submit" value="Submit button">
<input type="reset" value="Reset button">
<button disabled>Disabled button</button><br>
<input type="file" value="File 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>
</div>
</div>
</div>