mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-24 14:33:10 +02:00
Code Issues Releases Wiki Activity

Initial commit for checkboxes

Browse Source
This commit is contained in:
Angelos Chalaris
2016-10-30 22:15:18 +02:00
parent d83131cc6b
commit 5b4a224c4c
7 changed files with 147 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/v2/DEVLOG.md
View File

@@ -226,3 +226,12 @@
- Decided to avoid styling `search` `input` `type`s, due to lack of support for magnifying lens icon for most search inputs. Generally speaking this can easily be added by the user.
- Reorganized the loading order of modules in `core`.
- Added `search` fixes to `form` module.
- *DESIGN DECISION* To deal with accessibility concerns and the very "hacky" way navigation was implemented in the previous version, the following design decisions have been made.
1. The top menu will be based around the `header` element and will not be able to do `display: fixed`. This will allow content over the fold to appear when important content exists in the menu. Space for a logo and some additional things will be added there.
2. `nav` will be used as a vertical menu, not `fixed`, that will display any navigational content as required by the user. This is the traditional navigation menu. It will be embeddable in a grid column left or right based on user preference.
3. Dropdown components will be removed, as the top bar does not need them to work properly and the side bar can be toggled with code.
4. Sidebar collapsing will not be added as a checkbox hack anymore, but users will be able to use Javascript for that.
5. An example of Javascript will be added for said collapse.
- All `checkbox` and `radio` elements will be `display: none` by default. Grouping one in an `input-group` with a `label` will give the desired style to the label.
- Created module `mini-core/checkbox`.
- Started styling `checkbox`es and `radio` buttons. Got most of the styling done, hardcoded.

12
docs/v2/index.html
View File

@@ -318,6 +318,18 @@
<input type="search" placeholder="search..." value="">
</fieldset>
</form>
<h3>Checkboxes and Radio buttons</h3>
<p>Checkboxes and radio buttons are styled using the <a href="">checkbox hack</a>, while keeping things simple and adding just the needed consistency for those input types. You can see some examples below:</p>
<form>
<div class="input-group">
<input type="checkbox" id="c1"> <label for="c1">Test</label>
</div><br>
<div class="input-group">
<input type="radio" name="gender" value="male" checked id="i1"> <label for="i1">Male</label>
<input type="radio" name="gender" value="female" id="i2"> <label for="i2">Female</label>
<input type="radio" name="gender" value="other"checked id="i3"> <label for="i3">Other</label>
</div>
</form>
</div>
</div>
</div>