Initial commit for checkboxes

docs/v2/DEVLOG.md

@@ -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.

docs/v2/index.html

@@ -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>

flavors/v2/mini-default.css

@@ -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;

scss/v2/_core.scss

@@ -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';
 

scss/v2/mini-core/_checkbox.scss

@@ -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.

scss/v2/mini-core/_form.scss

@@ -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;
 }
@@ -105,15 +115,3 @@ 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;
-}