Forms module initial commit

docs/v2/DEVLOG.md

@@ -197,3 +197,6 @@
 - Added button overrides for links styled as buttons for `text-decoration: underline` and `&:hover { opacity: 0.75}`. Should now not give away the fact that it's a link.
 - Added `make-button-alt-style` mixin, created `small` and `large` style variants.
 - Added and tested an entirely custom button style that does something very different compared to the original variants. Variables and mixins included in the flavor file, but are commented out, as they are only used as a demonstration. *TODO* Add a blog post later down the line where I design a full flavor using the files etc., showcasing things like these.
+- Forms module started at `mini-core/form`.
+- `input` element selection is based on `not:()` selectors instead of straightforward selection as this is more compact in terms of code and allows for non-standard `input`s like `date` types to by easily styled.
+- Added a list of `TODO`s in the `form` module, tried some base styling just to make sure everything works.

docs/v2/index.html

@@ -263,7 +263,7 @@
             <a href="#" class="button">Link button</a>
             <button disabled>Disabled button</button><br>
             <p>File inputs are a sore spot in most frameworks, as they cannot be easily stylized using CSS. <strong>mini.css</strong> deals with the problem, using a workaround involving labels that use the <code>button</code> class, which applies the exact same style to those labels. Just link it to the <code>&lt;input type=&quot;file&quot;&gt;</code> element of your choice and you're good to go. For example:</p>
-            <span style="margin:3px;"></span><input type="file" id="file-input-demo"><label for="file-input-demo" class="button">Upload file</label><br>
+            <span style="margin:3px;"></span><input type="file" id="file-input-demo"><label for="file-input-demo" class="button"><i class="fa fa-upload" aria-hidden="true"></i>&nbsp;Upload file</label><br>
             <p>There are also different kinds of buttons, specifically <code>primary</code>, <code>secondary</code> and <code>tertiary</code>, as well as <code>small</code> and <code>large</code> buttons. All of these types can be specified as classes. For example:</p>
             <span style="margin:3px;"></span>
             <button class="primary">Primary normal button</button>
@@ -271,6 +271,20 @@
             <input type="reset" value="Tertiary reset button" class="tertiary">
             <input type="submit" value="Large submit button" class="large">
             <label disabled class="button small primary">Small primary disabled label button</label><br>
+            <h3>Forms</h3>
+            <p>Forms are pre-styled as well and they offer consistency across all inputs. There are options for normal forms (unaligned) or inline forms (horizontal), as well as aligned forms, that utilise the grid system to present their content. Below are some examples:</p>
+            <form>
+            <input type="text" value="text">
+            <input type="color">
+            <input type="email" value="mail@mail.com">
+            <input type="hidden" value="hidden">
+            <input type="number" value="4">
+            <input type="password" value="password">
+            <input type="range" value="4">
+            <input type="search">
+            <input type="url" value="data.google.com">
+            <input value="normal">
+            </form>
           </div>
         </div>
       </div>

flavors/v2/mini-default.css

@@ -606,6 +606,13 @@ button, [type="button"], [type="submit"], [type="reset"], a.button, label.button
 input[type="file"] {
   display: none; }
 
+input:not([type="button"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="file"]):not([type="image"]) {
+  background-color: #f5f5f5;
+  color: #212121;
+  border: 1px solid #e0e0e0;
+  border-radius: 2px;
+  vertical-align: middle; }
+
 /**
  * Remove the inheritance of text transform in Firefox.
  */

scss/v2/_core.scss

@@ -349,6 +349,7 @@ a{
 @import 'mini-core/contextual';
 @import 'mini-core/progress';
 @import 'mini-core/button';
+@import 'mini-core/form';
 
 // TODO: Move to forms.
 

scss/v2/mini-core/_form.scss

@@ -0,0 +1,20 @@
+// Definitions for forms and input elements.
+// Different elements are styled based on the same set of rules.
+
+input:not([type="button"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="file"]):not([type="image"]) {
+	background-color: #f5f5f5;
+	color: #212121;
+	border: 1px solid #e0e0e0;
+	border-radius: 2px;
+	vertical-align: middle;
+}
+
+// TODO: Checkboxes and radios will be in a different module
+// TODO: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ - For range sliders
+// TODO: Maybe add rule for `hidden` just in case
+// TODO: Add `textarea`s to the styling set, as well as `select`
+// TODO: Make form styles proper
+// TODO: Add fixes from core
+// TODO: Add styles for stuff like `legend`, `fieldset` etc.
+// TODO: Add styling for forms
+// TODO: Find a way to make inline and vertical and aligned forms etc. (can also not be a style, but rather built in html)