mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-06 13:56:27 +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>

50
flavors/v2/mini-default.css
View File

@@ -570,6 +570,14 @@ legend {
textarea {
overflow: auto; }
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px; }
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
[type="password"], [type="url"], [type="tel"], textarea, select {
box-sizing: border-box;
@@ -607,14 +615,6 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
::-ms-placeholder {
color: #37474f; }
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px; }
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0; }
@@ -647,6 +647,40 @@ button, [type="button"], [type="submit"], [type="reset"], a.button, label.button
input[type="file"] {
display: none; }
[type="checkbox"], [type="radio"] {
display: none; }
.input-group [type="checkbox"] + label, .input-group [type="radio"] + label {
position: relative;
margin-left: 21px; }
.input-group [type="checkbox"] + label:before, .input-group [type="radio"] + label:before {
box-sizing: border-box;
position: absolute;
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;
top: 0;
left: 0; }
.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;
position: absolute;
top: 4px;
left: 4px;
width: 9px;
height: 9px;
background: #212121;
content: ''; }
mark {
background: #0277bd;
color: #fafafa;

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

File diff suppressed because one or more lines are too long

1
scss/v2/_core.scss
View File

@@ -348,6 +348,7 @@ a{
@import 'mini-core/table';
@import 'mini-core/form';
@import 'mini-core/button';
@import 'mini-core/checkbox';
@import 'mini-core/contextual';
@import 'mini-core/progress';

62
scss/v2/mini-core/_checkbox.scss Normal file
View File

@@ -0,0 +1,62 @@
// 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.
[type="checkbox"], [type="radio"] {
display: none;
}
// Use input-group to setup the style for labels.
.#{$input-group-name} {
[type="checkbox"] + label, [type="radio"] + label {
position: relative;
margin-left: 21px;
&:before {
box-sizing: border-box;
position: absolute;
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;
top: 0;
left: 0;
}
}
[type="radio"] + label {
&:before, &:after {
border-radius: 50%;
}
}
[type="checkbox"][disabled] + label, [type="radio"][disabled] + label {
&:before {
}
}
[type="checkbox"][readonly] + label, [type="radio"][readonly] + label {
&:before {
}
}
[type="checkbox"]:checked + label{
&:after {
margin-left: -21px;
position: absolute;
top: 4px;
left: 4px;
width: 9px;
height: 9px;
background: #212121;
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.

42
scss/v2/mini-core/_form.scss
View File

@@ -1,6 +1,6 @@
// Definitions for forms and input elements.
// Different elements are styled based on the same set of rules.
// Base form styling.
form {
@if $form-back-color != $back-color {
background: $form-back-color;
@@ -21,7 +21,7 @@ form {
padding: $form-padding;
}
}
// Fieldset styling.
fieldset {
@if $fieldset-back-color != $form-back-color {
background: $fieldset-back-color;
@@ -32,7 +32,7 @@ fieldset {
margin: $fieldset-margin;
padding: $fieldset-padding;
}
// Legend styling.
legend {
// IE and Edge fixes.
box-sizing: border-box;
@@ -49,19 +49,29 @@ legend {
padding: $legend-padding;
}
}
// Input group base naming.
.#{$input-group-name} {
display: inline-block;
}
// Correct the cursor style of increment and decrement buttons in Chrome.
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
height: auto; // Correct the cursor style of increment and decrement buttons in Chrome.
height: auto;
}
// Remove the default vertical scrollbar in IE.
textarea {
overflow: auto; // Remove the default vertical scrollbar in IE.
overflow: auto;
}
// Correct style in Chrome and Safari.
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
// Correct style in Chrome and Safari.
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
// Common textual input styling.
input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
[type="password"], [type="url"], [type="tel"], textarea, select {
box-sizing: border-box;
@@ -95,7 +105,7 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
border-color: $input-readonly-border-color;
}
}
// Placeholder styling.
::-webkit-placeholder {
color: $input-placeholder-fore-color;
}
@@ -104,16 +114,4 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
}
::-ms-placeholder {
color: $input-placeholder-fore-color;
}
// Correct style in Chrome and Safari.
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
// Correct style in Chrome and Safari.
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}