Base form styling

Also some fixes for missing values in core.

docs/v3/DEVLOG.md

@@ -91,3 +91,6 @@
 - Scraped the old website to get content for new documentation.
 - Started development of the new website app in `v3_dev`. This is going to be where the docs app is going to be created in.
 - Initial scaffolding of the documentation UI.
+- Added conditions for `box-shadow` values in `core`. The module is mostly complete, apart from extra features that I might want to add in the future.
+- Decided not to add the `select` fix in `input_control`. Browsers are pretty wild around the element and its use cases are causing a ton of complications. It is possible, but quite unlikely that it will be rebuilt in the old way in the future, but most likely it will just follow the OS/Browser/Native UI as it should have done originally. It's debatable if this is for the best, but quite frankly it saves me a lot of time and effort for a single element and a lot of bytes in the codebase. I would rather not style it and provide an outside fix for safety, one that goes a bit against semantics to provide better styling. If you are reading this and want to tell me why this was a bad choice and led to the demise of the **hugging cat**, kindly do!
+- Added styling for `form` elements, simplified the values of `padding` to make them more reasonable and uniform.

src/flavors/mini-doc.scss

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

src/mini/_core.scss

@@ -25,6 +25,7 @@ $subheading-top-margin:   -0.25rem !default;    // Top margin of <small> element
 $universal-margin:        0.5rem !default;      // Universal margin for the most elements
 $universal-padding:       0.5rem !default;      // Universal padding for the most elements
 $universal-border-radius: 0.125rem !default;    // Universal border-radius for most elements
+$universal-box-shadow:    none !default;        // Universal box-shadow for most elements
 $small-font-size:         0.75em !default;      // Font sizing for <small> elements
 $heading-font-weight:     500 !default;         // Font weight for headings
 $bold-font-weight:        700 !default;         // Font weight for <b> and <strong>
@@ -51,6 +52,7 @@ $heading-ratio-var:             '--heading-ratio' !default;
 $universal-margin-var:          '--universal-margin' !default;
 $universal-padding-var:         '--universal-padding' !default;
 $universal-border-radius-var:   '--universal-border-radius' !default;
+$universal-box-shadow-var:      '--universal-box-shadow' !default;
 $a-link-color-var:              '--a-link-color' !default;
 $a-visited-color-var:           '--a-visited-color' !default;
 /* Core module CSS variable definitions */
@@ -69,6 +71,9 @@ $a-visited-color-var:           '--a-visited-color' !default;
   #{$universal-border-radius-var}: $universal-border-radius;
   #{$a-link-color-var} : $a-link-color;
   #{$a-visited-color-var} : $a-visited-color;
+  @if $universal-box-shadow != none {
+    #{$universal-box-shadow-var}: $universal-box-shadow;
+  }
 }
 html {
   font-size: $base-root-font-size;  // Set root's font sizing.
@@ -186,7 +191,7 @@ hr {
   background: linear-gradient(to right, transparent, var(#{$border-color-var}) 20%, var(#{$border-color-var}) 80%, transparent);
 }
 
-blockquote {  // Doesn't have a back color yet, as well as no shadow...
+blockquote {  // Doesn't have a back color by default, can be added manually.
   display: block;
   position: relative;
   font-style: italic;
@@ -196,6 +201,9 @@ blockquote {  // Doesn't have a back color yet, as well as no shadow...
   border: $__1px solid var(#{$secondary-border-color-var});
   border-left: 6*$__1px solid var(#{$blockquote-color-var});
   border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
+  @if $universal-box-shadow != none {
+    box-shadow: var(#{$universal-box-shadow-var});
+  }
   &:before {
     position: absolute;
     top: calc(0rem - var(#{$universal-padding-var}));
@@ -220,29 +228,38 @@ code, kbd, pre, samp {
   font-size: $code-font-size;
 }
 
-code { // No border color yet and fore color is the default, as well as no shadow...
+code { // No border color by default and fore color is the default for text, can be altered manually.
   background: var(#{$secondary-back-color-var});
   border-radius: var(#{$universal-border-radius-var});
   // This could be a bit counterintuitive and burden the codebase a bit, look into it again?
   padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
+  @if $universal-box-shadow != none {
+    box-shadow: var(#{$universal-box-shadow-var});
+  }
 }
 
-kbd { // No border color yet and no shadow, colors might want to be tweaked a bit...
+kbd { // No border color by default, can be altered manually.
   background: var(#{$fore-color-var});
   color: var(#{$back-color-var});
   border-radius: var(#{$universal-border-radius-var});
   // This could be a bit counterintuitive and burden the codebase a bit, look into it again?
   padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
+  @if $universal-box-shadow != none {
+    box-shadow: var(#{$universal-box-shadow-var});
+  }
 }
 
-pre { // Fore color is the default, as well as no shadow...
+pre { // Fore color is the default, can be altered manually.
   overflow: auto; // Responsiveness
   background: var(#{$secondary-back-color-var});
   padding: calc(1.5 * var(#{$universal-padding-var}));
   margin: var(#{$universal-margin-var});
   border: $__1px solid var(#{$secondary-border-color-var});
   border-left: 4*$__1px solid var(#{$pre-color-var});
-  border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
+  border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;  
+  @if $universal-box-shadow != none {
+    box-shadow: var(#{$universal-box-shadow-var});
+  }
 }
 
 // Prevent elements from affecting the line height in all browsers.

src/mini/_input_control.scss

@@ -0,0 +1,19 @@
+/*
+  Definitions for forms and input elements.
+*/
+// Different elements are styled based on the same set of rules.
+
+// 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.
+// Base form styling
+form {  // Text color is the default, this can be changed manually.
+  background: var(#{$secondary-back-color-var});
+  border:  $__1px solid var(#{$secondary-border-color-var});
+  border-radius: var(#{$universal-border-radius-var});
+  margin: var(#{$universal-margin-var});
+  padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
+  @if $universal-box-shadow != none {
+    box-shadow: var(#{$universal-box-shadow-var});
+  }
+}