diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index ea999d7..ec00b12 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -917,3 +917,8 @@ - Updated `navigation`'s defaults to include class name defaults. Added *external variables* in `navigation` to remedy the problems that stem from single module usage. - Updated `input_control` with new **hidden flag** `$include-button-group` just in case and external variables, plus all the needed class names at the very top. - Updated `table` module with the required external variables and required names. +- Added external variables to `card`. +- Updated `tab` module with default breakpoint and added external variables as required. +- Added external variables to `contextual`. +- Updated defaults for `progress` module, no externals were needed. +- Added more default values to `utility`. Default and external adding seems complete, I might have missed something, but good enough for now. diff --git a/src/mini/_card.scss b/src/mini/_card.scss index 752f55c..d225086 100644 --- a/src/mini/_card.scss +++ b/src/mini/_card.scss @@ -8,6 +8,9 @@ $card-name: 'card' !default; // Class name for the cards $card-section-name: 'section' !default; // Class name for the cards' sections $card-section-media-name: 'media' !default; // Class name for the cards' sections (media cotent) $card-normal-width: 320px !default; // Width for normal cards +// External variables' defaults are used only if you import this module on its own, without the rest of the framework. +$back-color: white !default; // [External variable - core] Background color for everything. +$fore-color: black !default; // [External variable - core] Foreground color for everything. // Card styling .#{$card-name} { // Old syntax diff --git a/src/mini/_contextual.scss b/src/mini/_contextual.scss index 6fc4ace..c2b1b19 100644 --- a/src/mini/_contextual.scss +++ b/src/mini/_contextual.scss @@ -12,6 +12,10 @@ $alert-animated-name: 'animated' !default; // Class name for animated alerts $include-tooltip: true !default; // Should tooltips be included? (`true`/`false`) $tooltip-name: 'tooltip' !default; // Class name for the tooltips. $tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name. +// External variables' defaults are used only if you import this module on its own, without the rest of the framework. +$back-color: white !default; // [External variable - core] Background color for everything. +$fore-color: black !default; // [External variable - core] Foreground color for everything. +$base-line-height: 1 !default; // [External variable - core] Line height for everything. // Default styling for mark. Use mixins for alternate styles. mark { @if $mark-back-color != $back-color { diff --git a/src/mini/_progress.scss b/src/mini/_progress.scss index 242c918..8c7223a 100644 --- a/src/mini/_progress.scss +++ b/src/mini/_progress.scss @@ -5,7 +5,9 @@ @import 'progress_mixins'; // Progress elements use the progress element as their base. $progress-max-value: 100 !default; // Arithmetic max value of - use integer values. +$progress-height: 14px !default; // Height of . $include-spinner-donut: true !default; // [Hidden flag] Should spinner donuts be enabled? (`true`/`false`) +$spinner-donut-name: 'spinner-donut' !default; // Class name for donut spinner. // Default styling for progress. Use mixins for alternate styles. progress { display: block; @@ -63,7 +65,7 @@ progress { @supports (width: calc(100% - 2*#{$progress-left-right-margin})) or (width: -webkit-calc(100% - 2*#{$progress-left-right-margin})) { progress { width: -webkit-calc(100% - 2*#{$progress-left-right-margin}); - width: calc(100% - 2*#{$progress-left-right-margin}); + width: calc(100% - 2*#{$progress-left-right-margin}); margin: $progress-top-bottom-margin $progress-left-right-margin; } } @@ -89,6 +91,6 @@ progress { width: $spinner-donut-size; height: $spinner-donut-size; -webkit-animation: spinner-donut-anim 1.2s linear infinite; - animation: spinner-donut-anim 1.2s linear infinite; + animation: spinner-donut-anim 1.2s linear infinite; } } diff --git a/src/mini/_tab.scss b/src/mini/_tab.scss index f9c1cb6..a59e102 100644 --- a/src/mini/_tab.scss +++ b/src/mini/_tab.scss @@ -5,6 +5,10 @@ $tab-container-name: 'tabs' !default; // Class name for the tabs container. $include-stacked-tabs: true !default; // [Hidden flag] Should stacked tabs be included? (`true`/`false`). $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs container. +$tab-stacked-breakpoint: 767px !default; // Breakpoint for tabs layout (stacked/horizontal) +// External variables' defaults are used only if you import this module on its own, without the rest of the framework. +$back-color: white !default; // [External variable - core] Background color for everything. +$fore-color: black !default; // [External variable - core] Foreground color for everything. // Tab styling .#{$tab-container-name} { width: 100%; diff --git a/src/mini/_table.scss b/src/mini/_table.scss index 457f0e9..5a53b7d 100644 --- a/src/mini/_table.scss +++ b/src/mini/_table.scss @@ -3,13 +3,13 @@ */ // The tables use the common table elements and syntax. $table-mobile-breakpoint: 767px !default; // Breakpoint for table mobile view. -$table-mobile-card-spacing: 10px !default; // Space between cards - mobile view -$table-mobile-card-label: 'data-label' !default;// Attribute used to replace column headers in mobile view +$table-mobile-card-spacing: 10px !default; // Space between cards - mobile view. +$table-mobile-card-label: 'data-label' !default;// Attribute used to replace column headers in mobile view. $table-not-responsive-name: 'preset' !default; // Class name for table non-responsive view. $include-horizontal-table: true !default; // Should horizontal tables be included? -$table-horizontal-name: 'horizontal' !default;// Class name for table horizontal view +$table-horizontal-name: 'horizontal' !default;// Class name for table horizontal view. $include-striped-table: true !default; // [Hidden flag] Should striped tables be included? (`true`/`false`) -$table-striped-name: 'striped' !default; // Class name for striped table +$table-striped-name: 'striped' !default; // Class name for striped table. // External variables' defaults are used only if you import this module on its own, without the rest of the framework. $back-color: white !default; // [External variable - core] Background color for everything. $fore-color: black !default; // [External variable - core] Foreground color for everything. diff --git a/src/mini/_utility.scss b/src/mini/_utility.scss index c3a8d3c..f92f5a8 100644 --- a/src/mini/_utility.scss +++ b/src/mini/_utility.scss @@ -3,12 +3,16 @@ */ // Check the `_utility_mixins.scss` file to find this module's mixins. @import 'utility_mixins'; +$hidden-name: 'hidden' !default; // Class name for hidden elements. +$visually-hidden-name: 'visually-hidden' !default; // Class name for visually hidden elements. +$include-breadcrumbs: true !default; // [Hidden flag] Should breadcrumbs be included? (`true`/`false`) +$breadcrumbs-name: 'breadcrumbs' !default; // Class name for breadcrumbs. +$include-close-icon: true !default; // [Hidden flag] Should the close icon be included? (`true`/`false`) +$close-icon-name: 'close'!default; // Class name for close icon. // The floats, clearfix and center-block flags are for legacy features. $include-floats: false !default; // Should floats be included? (`true`/`false`) $include-clearfix: false !default; // Should clearfix be included? (`true`/`false`) $include-center-block: false !default; // Should center block be included? (`true`/`false`) -$include-breadcrumbs: true !default; // [Hidden flag] Should breadcrumbs be included? (`true`/`false`) -$include-close-icon: true !default; // [Hidden flag] Should the close icon be included? (`true`/`false`) // Hidden elements class. ATTENTION: Uses !important. .#{$hidden-name}{ display: none !important;