Mixins for buttons

Added mixins for buttons, allowing for button variants to be added.

dist/mini-default.css

@@ -13,7 +13,7 @@
   --fore-color: #111;
   --secondary-fore-color: #444;
   --back-color: #f8f8f8;
-  --secondary-back-color: #eee;
+  --secondary-back-color: #f0f0f0;
   --blockquote-color: #f57c00;
   --pre-color: #1565c0;
   --border-color: #aaa;
@@ -30,6 +30,10 @@ html {
   font-size: 16px;
 }
 
+a, b, del, em, i, ins, q, span, strong, u {
+  font-size: 1em;
+}
+
 html, * {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;
   line-height: 1.5;
@@ -590,3 +594,178 @@ a:hover, a:focus {
     order: 999;
   }
 }
+
+/*
+  Definitions for forms and input elements.
+*/
+/* Input_control module CSS variable definitions */
+:root {
+  --input-focus-color: #0288d1;
+  --input-invalid-color: #d32f2f;
+  --button-back-color: #e2e2e2;
+  --button-hover-back-color: #dcdcdc;
+  --button-fore-color: #212121;
+  --button-border-color: transparent;
+  --button-hover-border-color: transparent;
+}
+
+form {
+  background: var(--secondary-back-color);
+  border: 0.0625rem solid var(--secondary-border-color);
+  border-radius: var(--universal-border-radius);
+  margin: var(--universal-margin);
+  padding: calc(2 * var(--universal-padding)) var(--universal-padding);
+}
+
+fieldset {
+  border: 0.0625rem solid var(--secondary-border-color);
+  border-radius: var(--universal-border-radius);
+  margin: calc(var(--universal-margin) / 4);
+  padding: var(--universal-padding);
+}
+
+legend {
+  box-sizing: border-box;
+  display: table;
+  max-width: 100%;
+  white-space: normal;
+  font-weight: 700;
+  padding: calc(var(--universal-padding) / 2);
+}
+
+label {
+  padding: calc(var(--universal-padding) / 2) var(--universal-padding);
+}
+
+.input-group {
+  display: inline-block;
+}
+
+.input-group.fluid {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.input-group.fluid > input {
+  flex-grow: 1;
+  flex-basis: 0px;
+}
+
+@media screen and (max-width: 767px) {
+  .input-group.fluid {
+    align-items: stretch;
+    flex-direction: column;
+  }
+}
+
+.input-group.vertical {
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+}
+
+.input-group.vertical > input {
+  flex-grow: 1;
+  flex-basis: 0px;
+}
+
+[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
+  height: 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;
+  background: var(--back-color);
+  color: var(--fore-color);
+  border: 0.0625rem solid var(--secondary-border-color);
+  border-radius: var(--universal-border-radius);
+  margin: calc(var(--universal-margin) / 2);
+  padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
+}
+
+input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:hover, textarea:focus, select:hover, select:focus {
+  border-color: var(--input-focus-color);
+  box-shadow: none;
+}
+
+input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid, textarea:invalid, textarea:focus:invalid, select:invalid, select:focus:invalid {
+  border-color: var(--input-invalid-color);
+  box-shadow: none;
+}
+
+input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], textarea[readonly], select[readonly] {
+  background: var(--secondary-back-color);
+}
+
+select {
+  max-width: 100%;
+}
+
+option {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:placeholder-shown {
+  color: var(--fore-color);
+}
+
+::-ms-placeholder {
+  color: var(--fore-color);
+  opacity: 0.54;
+}
+
+button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+button, html [type="button"], [type="reset"], [type="submit"] {
+  -webkit-appearance: button;
+}
+
+button {
+  overflow: visible;
+  text-transform: none;
+}
+
+button, [type="button"], [type="submit"], [type="reset"],
+a.button, label.button, .button,
+a[role="button"], label[role="button"], [role="button"] {
+  display: inline-block;
+  background: var(--button-back-color);
+  color: var(--button-fore-color);
+  border: 0.0625rem solid var(--button-border-color);
+  border-radius: var(--universal-border-radius);
+  padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
+  margin: var(--universal-margin);
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+button:hover, button:focus, [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:focus,
+a.button:hover,
+a.button:focus, label.button:hover, label.button:focus, .button:hover, .button:focus,
+a[role="button"]:hover,
+a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus, [role="button"]:hover, [role="button"]:focus {
+  background: var(--button-hover-back-color);
+  border-color: var(--button-hover-border-color);
+}
+
+input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:disabled, select[disabled], button:disabled, button[disabled], .button:disabled, .button[disabled], [role="button"]:disabled, [role="button"][disabled] {
+  cursor: not-allowed;
+  opacity: 0.75;
+}

docs/v3/DEVLOG.md

@@ -108,3 +108,5 @@
 - Created proper variables for `button`-like elements, built element syling on CSS variables.
 - Tested CSS variables for button, should allow for easy customization and additional styles, meaning it will be a breeze to add all the extra stuff as soon as possible.
 - Bundled up `[disabled]` styling for all elements in `input_control` as this should now be the default behavior of the code.
+- Dealt with #114. It shouldn't be a problem anymore.
+- Added mixins for `button` elements in `input_control`. They should now be perfectly usable.

src/flavors/mini-default.scss

@@ -10,3 +10,5 @@
 
 @import '../mini/core';
 @import '../mini/grid';
+@import '../mini/input_control';
+@import '../mini/navigation';

src/flavors/mini-doc.scss

@@ -3,6 +3,7 @@
 @import '../mini/core';
 @import '../mini/grid';
 @import '../mini/input_control';
+@import '../mini/navigation';
 
 :not(.doc) {
   font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;

src/mini/_core.scss

@@ -78,6 +78,9 @@ $a-visited-color-var:           '--a-visited-color' !default;
 html {
   font-size: $base-root-font-size;  // Set root's font sizing.
 }
+a, b, del, em, i, ins, q, span, strong, u {
+  font-size: 1em; // Fix for elements inside headings not displaying properly.
+}
 
 @if $_apply-defaults-to-all {
   html, * {

src/mini/_input_control.scss

@@ -26,8 +26,8 @@ $button-hover-fore-color-var: '--button-hover-fore-color' !default;
 $button-border-color-var:       '--button-border-color' !default;
 $button-hover-border-color-var: '--button-hover-border-color' !default;
 // Check the `_input_control_mixins.scss` file to find this module's mixins.
-// @import 'input_control_mixins';
-// TODO: Uncomment above as soon as mixins are ready to be used.
+@import 'input_control_mixins';
+// TODO: Add a mixin for the switches.
 /* Input_control module CSS variable definitions */
 :root {
   #{$input-focus-color-var}: $input-focus-color;

src/mini/_input_control_mixins.scss

@@ -0,0 +1,46 @@
+// Input_control module's mixin definitions are here. For the module itself
+// check `_input_control.scss`.
+// Button color variant mixin:
+//  $button-alt-name: The name of the class used for the button variant.
+//  $button-alt-back-color: Background color for button variant.
+//  $button-alt-hover-back-color: Background color for button variant (hover).
+//  $button-alt-fore-color: Text color for button variant.
+//  $button-alt-border-color: Border color for button variant.
+//  $button-alt-hover-border-color: Border color for button variant (hover).
+@mixin make-button-alt-color ($button-alt-name, $button-alt-back-color : $button-back-color,
+  $button-alt-hover-back-color : $button-hover-back-color, $button-alt-fore-color : $button-fore-color,
+  $button-alt-border-color : $button-border-color, $button-alt-hover-border-color : $button-hover-border-color) {
+    button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
+      &.#{$button-alt-name} {
+        @if $button-alt-back-color != $button-back-color {
+          background: var(#{$button-alt-back-color-var});
+        }
+        @if $button-alt-fore-color != $button-fore-color{
+          color: var(#{$button-alt-fore-color-var});
+        }
+        @if $button-alt-border-color != $button-border-color{
+          border-color: var(#{$button-alt-border-color-var});
+        }
+        &:hover, &:focus {
+          @if $button-alt-hover-back-color != $button-hover-back-color{
+            background: var(#{$button-alt-hover-back-color-var});
+          }
+          @if $button-alt-hover-border-color != $button-hover-border-color{
+            border-color: var(#{$button-alt-hover-border-color-var});
+          }
+        }
+      }
+    }
+}
+// Button size variant mixin:
+//  $button-alt-name: The name of the class used for the button variant.
+//  $button-alt-padding: The padding of the button variant.
+//  $button-alt-margin The margin of the button variant.
+@mixin make-button-alt-size ($button-alt-name, $button-alt-padding, $button-alt-margin) {
+  button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
+    &.#{$button-alt-name} {
+      padding: $button-alt-padding;
+      margin: $button-alt-margin;
+    }
+  }
+}