Added external variables to modules

docs/v3/DEVLOG.md

@@ -142,3 +142,4 @@
 
 - Properly applied variable styling to `checkbox` and `radio` elements. They now use the `base-font-size` Sass variable to get their size, which makes sense.
 - Added `.button-group`s, they seem to behave properly, `border-color` could use some tweaking maybe.
+- Added external Sass variables to all modules (hopefully I didn't miss any), so that they can be used on their own now (not recommended, but doable).

src/mini/_input_control.scss

@@ -41,6 +41,27 @@ $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;
 $button-group-border-color-var: '--button-group-border-color' !default;
+// == Uncomment below code if this module is used on its own ==
+//
+// $base-font-size:          1rem !default;        // Font sizing for all elements
+// $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
+// $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;
+// :root {
+//  #{$universal-margin-var}: $universal-margin;
+//  #{$universal-padding-var}: $universal-padding;
+//  #{$universal-border-radius-var}: $universal-border-radius;
+//  @if $universal-box-shadow != none {
+//   #{$universal-box-shadow-var}: $universal-box-shadow;
+//  }
+// }
+//
+// ============================================================
 // Check the `_input_control_mixins.scss` file to find this module's mixins.
 @import 'input_control_mixins';
 /* Input_control module CSS variable definitions */

src/mini/_layout.scss

@@ -31,10 +31,21 @@ $card-back-color-var:          '--card-back-color' !default;
 $card-border-color-var:        '--card-border-color' !default;
 // == Uncomment below code if this module is used on its own ==
 //
-// $universal-padding:       0.5rem !default;
+// $universal-margin:        0.5rem !default;      // Universal margin for the most elements
-// $universal-padding-var:   '--universal-padding' !default;
+// $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
+// $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;
 // :root {
-//   #{$universal-padding-var}: $universal-padding;
+//  #{$universal-margin-var}: $universal-margin;
+//  #{$universal-padding-var}: $universal-padding;
+//  #{$universal-border-radius-var}: $universal-border-radius;
+//  @if $universal-box-shadow != none {
+//   #{$universal-box-shadow-var}: $universal-box-shadow;
+//  }
 // }
 //
 // ============================================================
@@ -66,7 +77,6 @@ $card-border-color-var:        '--card-border-color' !default;
     // Grid column specific definition for flexible column.
     .#{$grid-column-prefix}-#{$size-prefix},
     .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix} > *  {
-      // max-width: 100%; -- TODO: Are we certain we don't need this?
       flex-grow: 1;
       flex-basis: 0;
     }
@@ -81,7 +91,6 @@ $card-border-color-var:        '--card-border-color' !default;
     }
     // Grid column specific definition for flexible column.
     .#{$grid-column-prefix}-#{$size-prefix} {
-      // max-width: 100%; -- TODO: Are we certain we don't need this?
       flex-grow: 1;
       flex-basis: 0;
     }
@@ -122,7 +131,7 @@ $card-border-color-var:        '--card-border-color' !default;
 }
 // Definitions for smaller screens.
 @include generate-grid-size($grid-small-prefix);
-// Definitions for mediium screens.
+// Definitions for medium screens.
 @media screen and (min-width: #{$grid-medium-breakpoint}){
   @include generate-grid-size($grid-medium-prefix);
 }

src/mini/_navigation.scss

@@ -57,6 +57,26 @@ $drawer-back-color-var:          '--drawer-back-color' !default;
 $drawer-border-color-var:        '--drawer-border-color' !default;
 $drawer-hover-back-color-var:    '--drawer-hover-back-color' !default;
 $drawer-close-color-var:         '--drawer-close-color' !default;
+// == Uncomment below code if this module is used on its own ==
+//
+// $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
+// $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;
+// :root {
+//  #{$universal-margin-var}: $universal-margin;
+//  #{$universal-padding-var}: $universal-padding;
+//  #{$universal-border-radius-var}: $universal-border-radius;
+//  @if $universal-box-shadow != none {
+//   #{$universal-box-shadow-var}: $universal-box-shadow;
+//  }
+// }
+//
+// ============================================================
 /* Navigation module CSS variable definitions */
 :root {
   #{$header-back-color-var}: $header-back-color;