beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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
Show stats 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>

44
flavors/v2/mini-default.css
View file

@ -603,7 +603,7 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
box-shadow: none; }
input:not([type])[readonly], [type="text"][readonly], [type="email"][readonly], [type="number"][readonly], [type="search"][readonly],
[type="password"][readonly], [type="url"][readonly], [type="tel"][readonly], textarea[readonly], select[readonly] {
background-color: #eceff1;
background: #eceff1;
border-color: #90a4ae; }
::-webkit-placeholder {
@ -648,15 +648,24 @@ input[type="file"] {
display: none; }
[type="checkbox"], [type="radio"] {
display: none; }
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%); }
.input-group [type="checkbox"] + label, .input-group [type="radio"] + label {
position: relative;
margin-left: 21px; }
margin-left: 21.25px; }
.input-group [type="checkbox"] + label:before, .input-group [type="radio"] + label:before {
box-sizing: border-box;
position: absolute;
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 17px;
height: 17px;
content: '';
@ -664,20 +673,25 @@ input[type="file"] {
border-radius: 1px;
background: #fafafa;
color: #212121;
margin-left: -21px;
vertical-align: text-bottom;
padding: 2px;
top: 0;
left: 0; }
margin-left: -21.25px;
vertical-align: text-bottom; }
.input-group [type="checkbox"] + label:hover:before, .input-group [type="checkbox"] + label:active:before, .input-group [type="checkbox"] + label:focus:before, .input-group [type="radio"] + label:hover:before, .input-group [type="radio"] + label:active:before, .input-group [type="radio"] + label:focus:before {
border-color: #0288d1; }
.input-group [type="checkbox"]:focus + label:before, .input-group [type="radio"]:focus + label:before {
border-color: #0288d1; }
.input-group [type="radio"] + label:before, .input-group [type="radio"] + label:after {
border-radius: 50%; }
.input-group [type="checkbox"]:checked + label:after {
margin-left: -21px;
.input-group [type="checkbox"][disabled] + label, .input-group [type="radio"][disabled] + label {
cursor: not-allowed; }
.input-group [type="checkbox"][disabled] + label:before, .input-group [type="checkbox"][disabled] + label:after, .input-group [type="radio"][disabled] + label:before, .input-group [type="radio"][disabled] + label:after {
opacity: 0.75; }
.input-group [type="checkbox"]:checked + label:after, .input-group [type="radio"]:checked + label:after {
margin-left: -21.25px;
position: absolute;
top: 4px;
left: 4px;
width: 9px;
height: 9px;
top: 3.825px;
left: 3.825px;
width: 9.35px;
height: 9.35px;
background: #212121;
content: ''; }

2
flavors/v2/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

12
flavors/v2/mini-default.scss
View file

@ -227,8 +227,16 @@ $button-style2-margin: 7px; // Margin for button style 2
// to access them is via the use of <label> elements that are linked to them. This option is enabled by default to
// allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
// Variables for checkboxes and radio buttons
$checkbox-size: 17px; // Size for checkbox/radio [1]
$checkbox-back-color: $input-back-color; // Background clor for checkbox/radio
$checkbox-fore-color: $input-fore-color; // Text/mark color for checkbox/radio
$checkbox-border-style: $input-border-style; // Border style for checkbox/radio
$checkbox-border-radius: $input-border-radius; // Border radius for checkbox/radio
$checkbox-focus-border-color: $input-focus-border-color; // Border color for checkbox/radio on focus
$checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabled checkbox/radio
// Notes:
// [1] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
// Variables for contextual background elements
$mark-back-color: #0277bd; // Background color for <mark>
$mark-fore-color: $back-color; // Text color for <mark>

2
scss/v2/mini-core/_button.scss
View file

@ -34,7 +34,7 @@ button, [type="button"], [type="submit"], [type="reset"], a.#{$button-class-name
}
transition: all 0.3s ease 0s;
cursor: pointer;
&:hover, &:active, &:focus{
&:hover, &:active, &:focus {
background: rgba($button-back-color, $button-hover-back-opacity);
@if $apply-link-hover-fade { // Override for links if hover-fade is enabled.
opacity: 1;

83
scss/v2/mini-core/_checkbox.scss
View file

@ -1,62 +1,73 @@
// Definitions for checkboxes and radio button elements.
// Note: both elements are hidden by default and use labels to show their input state.
// Hide both input types.
// Hide both input types - accessible (element is not visible, but screen readers read it normally).
[type="checkbox"], [type="radio"] {
display: none;
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
}
// Use input-group to setup the style for labels.
.#{$input-group-name} {
// Label styling based on the specifics of the checkbox/radio variables.
[type="checkbox"] + label, [type="radio"] + label {
position: relative;
margin-left: 21px;
position: relative;
margin-left: $checkbox-size + ($checkbox-size * 0.25);
// Styling for checkbox/radio box part.
&:before {
box-sizing: border-box;
position: absolute;
box-sizing: border-box;
display: inline-block;
width: 17px;
height: 17px;
content: '';
border: 1px solid #b0bec5;
border-radius: 1px;
background: #fafafa;
color: #212121;
margin-left: -21px;
vertical-align: text-bottom;
padding: 2px;
position: absolute;
top: 0;
left: 0;
width: $checkbox-size;
height: $checkbox-size;
content: '';
border: $checkbox-border-style;
border-radius: $checkbox-border-radius;
background: $checkbox-back-color;
color: $checkbox-fore-color;
margin-left: -($checkbox-size + ($checkbox-size * 0.25));
vertical-align: text-bottom;
}
// Hover, focus, active styling.
&:hover, &:active, &:focus {
&:before {
border-color: $checkbox-focus-border-color;
}
}
}
[type="checkbox"]:focus + label:before, [type="radio"]:focus + label:before {
border-color: $checkbox-focus-border-color;
}
// Make radio button box and fill circular.
[type="radio"] + label {
&:before, &:after {
border-radius: 50%;
}
}
// Disabled and readonly styles.
[type="checkbox"][disabled] + label, [type="radio"][disabled] + label {
&:before {
cursor: not-allowed;
&:before, &:after {
opacity: $checkbox-disabled-opacity;
}
}
[type="checkbox"][readonly] + label, [type="radio"][readonly] + label {
&:before {
}
}
[type="checkbox"]:checked + label{
// Fill for checked checkbox/radio elements.
[type="checkbox"]:checked + label, [type="radio"]:checked + label{
&:after {
margin-left: -21px;
margin-left: -($checkbox-size + ($checkbox-size * 0.25));
position: absolute;
top: 4px;
left: 4px;
width: 9px;
height: 9px;
background: #212121;
top: ($checkbox-size - ($checkbox-size * 0.55))/2;
left: ($checkbox-size - ($checkbox-size * 0.55))/2;
width: ($checkbox-size * 0.55);
height: ($checkbox-size * 0.55);
background: $checkbox-fore-color;
content: '';
}
}
}
// TODO: Add a certain font-family like Arial to the afters to make sure they always display properly.
// TODO: Softcode, setup everything etc.
// TODO: Maybe move away from checkmark and change to a square instead.
}

2
scss/v2/mini-core/_form.scss
View file

@ -101,7 +101,7 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
box-shadow: none;
}
&[readonly]{
background-color: $input-readonly-back-color;
background: $input-readonly-back-color;
border-color: $input-readonly-border-color;
}
}