diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index 01e6dd2..7a786a1 100644 --- a/docs/v3/DEVLOG.md +++ b/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). diff --git a/src/mini/_input_control.scss b/src/mini/_input_control.scss index 2101513..3cc0036 100644 --- a/src/mini/_input_control.scss +++ b/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 */ diff --git a/src/mini/_layout.scss b/src/mini/_layout.scss index d43b11b..0ee86c4 100644 --- a/src/mini/_layout.scss +++ b/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-padding-var: '--universal-padding' !default; +// $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-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); } diff --git a/src/mini/_navigation.scss b/src/mini/_navigation.scss index 3f25a8f..6c905bf 100644 --- a/src/mini/_navigation.scss +++ b/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;