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

Checkbox/radio module complete

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-02 11:18:17 +02:00
parent 8aa5266cfa
commit e382ae1a02
8 changed files with 121 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/v2/DEVLOG.md
View File

@@ -236,3 +236,17 @@
- Created module `mini-core/checkbox`.
- Started styling `checkbox`es and `radio` buttons. Got most of the styling done, hardcoded.
- Updated demo again.
## 20161102
- Updated `checkbox` and `radio` styles for accesibility. Now they are visible to screen readers.
- Added style for `:hover`, :focus`, `:active` for the `label` elements of the `checkbox` module.
- Added `tabindex` marks for labels in the `checkbox` module demo.
- Added styling for `readonly` and `disabled` for `checkbox` module.
- Updated `checkbox` module and added variables.
- Added issue for flag `use-checkbox-tick-mark` to allow for one of two styles for `checkboxes` and variables according to that. Implementation pending for **v2.1** or similar.
- Minor updates to `button` and `form` for CSS consistencies.
- Added variables for `checkbox` module, optimized a little bit. (Some optimizations do not make sense, like no-border checkboxes and radio buttons, so I omitted them for this reason).
- Added edge case for tabbing to checkbox for `focus`, which will make the `label`'s box `border` glow to the blue-ish shade usually used.
- Removed `readonly` styling for `checkbox` and `radio` as it does not work due to technicalities.
- Updated demo page for `checkbox` module.

28
docs/v2/index.html
View File

@@ -2,7 +2,7 @@
<html>
<head>
<!-- Live demo styled as of 20161025 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/5b4a224c4cad68a76b94e1635696925d13ea45f6/flavors/v2/mini-default.min.css">
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/5b4a224c4cad68a76b94e1635696925d13ea45f6/flavors/v2/mini-default.min.css"> -->
<link rel="stylesheet" href="../../flavors/v2/mini-default.css">
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
<meta charset="utf-8">
@@ -310,6 +310,7 @@
<fieldset>
<legend>More inputs</legend>
<input disabled value="Disabled">
<input readonly value="Readonly">
<input type="number" value="4">
<select>
<option>Test</option>
@@ -319,16 +320,23 @@
</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>
<p>Checkboxes and radio buttons are styled using the <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>, while keeping things simple and adding just the needed consistency for those input types. Place an <code>&lt;input&gt;</code> (checkbox or radio button) and a linked <code>&lt;label&gt;</code> inside an <code>.input-group</code> and the controls will style themselves. To allow accessibility for those controls, you can use <code>tabindex=&quot;0&quot;</code> on the <code>&lt;input&gt;</code> elements only. 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>
<fieldset>
<div class="input-group">
<input type="checkbox" id="c1" tabindex="0"> <label for="c1">Checkbox</label>
</div>
<div class="input-group">
<input type="checkbox" id="c2" disabled> <label for="c2" disabled>Disabled</label>
</div>
</fieldset>
<fieldset>
<div class="input-group">
<input type="radio" name="radios" value="r1" checked id="r1" tabindex="0"> <label for="i1">Value 1</label>
<input type="radio" name="radios" value="r2" id="r2" tabindex="0"> <label for="i2">Value 2</label>
<input type="radio" name="radios" value="r3"checked id="r3" tabindex="0"> <label for="i3">Value 3</label>
</div>
</fieldset>
</form>
</div>
</div>