diff --git a/docs/doc-fragments/buildYourOwnFlavor.js b/docs/doc-fragments/buildYourOwnFlavor.js index b12e68b..ca06ae2 100644 --- a/docs/doc-fragments/buildYourOwnFlavor.js +++ b/docs/doc-fragments/buildYourOwnFlavor.js @@ -376,6 +376,78 @@ module.exports = {

Border color for buttons on hover

+
+ + + +

Foreground color for primary button variant

+
+
+ + + +

Background color for primary button variant

+
+
+ + + +

Background color for primary button variant on hover

+
+
+ + + +

Foreground color for secondary button variant

+
+
+ + + +

Background color for secondary button variant

+
+
+ + + +

Background color for secondary button variant on hover

+
+
+ + + +

Foreground color for tertiary button variant

+
+
+ + + +

Background color for tertiary button variant

+
+
+ + + +

Background color for tertiary button variant on hover

+
+
+ + + +

Foreground color for inverse button variant

+
+
+ + + +

Background color for inverse button variant

+
+
+ + + +

Background color for inverse button variant on hover

+
@@ -651,6 +723,23 @@ module.exports = {

Line height for highlighted text elements

+
+ + + +

Background color for highlighted text element secondary variant

+
+
+ + + +

Background color for highlighted text element tertiary variant

+
+
+ + +

Border radius for highlighted text element tag variant, relative to context

+
Toasts @@ -948,6 +1037,18 @@ module.exports = { ['buttonBorderColor','buttonBorderColorPreview'], ['buttonHoverBackColor','buttonHoverBackColorPreview'], ['buttonHoverBorderColor','buttonHoverBorderColorPreview'], + ['buttonPrimaryForeColor','buttonPrimaryForeColorPreview'], + ['buttonPrimaryBackColor','buttonPrimaryBackColorPreview'], + ['buttonPrimaryHoverBackColor','buttonPrimaryHoverBackColorPreview'], + ['buttonSecondaryForeColor','buttonSecondaryForeColorPreview'], + ['buttonSecondaryBackColor','buttonSecondaryBackColorPreview'], + ['buttonSecondaryHoverBackColor','buttonSecondaryHoverBackColorPreview'], + ['buttonTertiaryForeColor','buttonTertiaryForeColorPreview'], + ['buttonTertiaryBackColor','buttonTertiaryBackColorPreview'], + ['buttonTertiaryHoverBackColor','buttonTertiaryHoverBackColorPreview'], + ['buttonInverseForeColor','buttonInverseForeColorPreview'], + ['buttonInverseBackColor','buttonInverseBackColorPreview'], + ['buttonInverseHoverBackColor','buttonInverseHoverBackColorPreview'], ['buttonGroupBorderColor','buttonGroupBorderColorPreview'], ['headerForeColor','headerForeColorPreview'], ['headerBackColor','headerBackColorPreview'], @@ -975,6 +1076,8 @@ module.exports = { ['tdHoverBackColor','tdHoverBackColorPreview'], ['markForeColor','markForeColorPreview'], ['markBackColor','markBackColorPreview'], + ['markSecondaryBackColor','markSecondaryBackColorPreview'], + ['markTertiaryBackColor','markTertiaryBackColorPreview'], ['toastForeColor','toastForeColorPreview'], ['toastBackColor','toastBackColorPreview'], ['tooltipForeColor','tooltipForeColorPreview'], @@ -1131,6 +1234,32 @@ module.exports = { }, inputControl : { enabled: document.getElementById('inputControlEnabled').checked, + formBackColor: document.getElementById('formBackColor').value, + formForeColor: document.getElementById('formForeColor').value, + formBorderColor: document.getElementById('formBorderColor').value, + inputBackColor: document.getElementById('inputBackColor').value, + inputForeColor: document.getElementById('inputForeColor').value, + inputBorderColor: document.getElementById('inputBorderColor').value, + inputFocusColor: document.getElementById('inputFocusColor').value, + inputInvalidColor: document.getElementById('inputInvalidColor').value, + buttonBackColor: document.getElementById('buttonBackColor').value, + buttonForeColor: document.getElementById('buttonForeColor').value, + buttonHoverBackColor: document.getElementById('buttonHoverBackColor').value, + buttonBorderColor: document.getElementById('buttonBorderColor').value, + buttonHoverBorderColor: document.getElementById('buttonHoverBorderColor').value, + buttonGroupBorderColor: document.getElementById('buttonGroupBorderColor').value, + buttonPrimaryForeColor: document.getElementById('buttonPrimaryForeColor').value, + buttonPrimaryBackColor: document.getElementById('buttonPrimaryBackColor').value, + buttonPrimaryHoverBackColor: document.getElementById('buttonPrimaryHoverBackColor').value, + buttonSecondaryForeColor: document.getElementById('buttonSecondaryForeColor').value, + buttonSecondaryBackColor: document.getElementById('buttonSecondaryBackColor').value, + buttonSecondaryHoverBackColor: document.getElementById('buttonSecondaryHoverBackColor').value, + buttonTertiaryForeColor: document.getElementById('buttonTertiaryForeColor').value, + buttonTertiaryBackColor: document.getElementById('buttonTertiaryBackColor').value, + buttonTertiaryHoverBackColor: document.getElementById('buttonTertiaryHoverBackColor').value, + buttonInverseForeColor: document.getElementById('buttonInverseForeColor').value, + buttonInverseBackColor: document.getElementById('buttonInverseBackColor').value, + buttonInverseHoverBackColor: document.getElementById('buttonInverseHoverBackColor').value }, navigation : { enabled: document.getElementById('navigationEnabled').checked, @@ -1176,6 +1305,30 @@ module.exports = { }, contextual : { enabled: document.getElementById('contextualEnabled').checked, + markBackColor: document.getElementById('markBackColor').value, + markForeColor: document.getElementById('markForeColor').value, + markFontSize: document.getElementById('markFontSize').value, + markLineHeight: document.getElementById('markLineHeight').value, + markSecondaryBackColor: document.getElementById('markSecondaryBackColor').value, + markTertiaryBackColor: document.getElementById('markTertiaryBackColor').value, + markTagBorderRadius: document.getElementById('markTagBorderRadius').value, + toastBackColor: document.getElementById('toastBackColor').value, + toastForeColor: document.getElementById('toastForeColor').value, + tooltipBackColor: document.getElementById('tooltipBackColor').value, + tooltipForeColor: document.getElementById('tooltipForeColor').value, + modalOverlayColor: document.getElementById('modalOverlayColor').value, + modalCloseColor: document.getElementById('modalCloseColor').value, + modalCloseHoverBackColor: document.getElementById('modalCloseHoverBackColor').value, + modalCloseSize: document.getElementById('modalCloseSize').value, + collapseLabelHeight: document.getElementById('collapseLabelHeight').value, + collapseContentMaxHeight: document.getElementById('collapseContentMaxHeight').value, + collapseContentBackColor: document.getElementById('collapseContentBackColor').value, + collapseLabelBackColor: document.getElementById('collapseLabelBackColor').value, + collapseLabelForeColor: document.getElementById('collapseLabelForeColor').value, + collapseLabelHoverBackColor: document.getElementById('collapseLabelHoverBackColor').value, + collapseSelectedLabelBackColor: document.getElementById('collapseSelectedLabelBackColor').value, + collapseBorderColor: document.getElementById('collapseBorderColor').value, + collapseSelectedLabelBorderColor: document.getElementById('collapseSelectedLabelBorderColor').value }, progress : { enabled: document.getElementById('progressEnabled').checked, @@ -1295,12 +1448,61 @@ module.exports = { flavorFile +='$card-section-double-padded-name: \\'double-padded\\'; // Class name for card double-padded section variant.\\n'; flavorFile +='$card-section-double-padded-padding: calc(1.5 * var(#{$universal-padding-var})); // Padding for card sectiondouble-padded section variant.\\n'; flavorFile +='@include make-card-section-alt-style ($card-section-double-padded-name, $card-section-double-padded-padding);\\n'; + flavorFile +='\\n'; } if(flavorData.inputControl.enabled){ - + flavorFile +='$input-group-mobile-breakpoint: $mobile-breakpoint - 1px; // Breakpoint for fluid input group mobile view.\\n'; + flavorFile +='$form-back-color: '+flavorData.inputControl.formBackColor+'; // Background color for forms.\\n'; + flavorFile +='$form-fore-color: '+flavorData.inputControl.formForeColor+'; // Text color for forms.\\n'; + flavorFile +='$form-border-color: '+flavorData.inputControl.formBorderColor+'; // Border color for forms.\\n'; + flavorFile +='$input-back-color: '+flavorData.inputControl.inputBackColor+'; // Background color for input elements.\\n'; + flavorFile +='$input-fore-color: '+flavorData.inputControl.inputForeColor+'; // Text color for input elements.\\n'; + flavorFile +='$input-border-color: '+flavorData.inputControl.inputBorderColor+'; // Border color for input elements.\\n'; + flavorFile +='$input-focus-color: '+flavorData.inputControl.inputFocusColor+'; // Border color for focused input elements.\\n'; + flavorFile +='$input-invalid-color: '+flavorData.inputControl.inputInvalidColor+'; // Border color for invalid input elements.\\n'; + flavorFile +='$button-back-color: '+flavorData.inputControl.buttonBackColor+'; // Background color for buttons.\\n'; + flavorFile +='$button-hover-back-color: '+flavorData.inputControl.buttonHoverBackColor+'; // Background color for buttons (hover).\\n'; + flavorFile +='$button-fore-color: '+flavorData.inputControl.buttonForeColor+'; // Text color for buttons.\\n'; + flavorFile +='$button-border-color: '+flavorData.inputControl.buttonBorderColor+'; // Border color for buttons.\\n'; + flavorFile +='$button-hover-border-color: '+flavorData.inputControl.buttonHoverBorderColor+'; // Border color for buttons (hover).\\n'; + flavorFile +='$button-group-border-color: '+flavorData.inputControl.buttonGroupBorderColor+'; // Border color for button groups.\\n'; flavorFile +='\\n'; flavorFile +='@import \\'../mini/inputControl\\';\\n'; flavorFile +='\\n'; + flavorFile +='$button-primary-name: \\'primary\\'; // Class name for primary button color variant.\\n'; + flavorFile +='$button-primary-back-color: '+flavorData.inputControl.buttonPrimaryBackColor+';// Background color for primary button color variant.\\n'; + flavorFile +='$button-primary-hover-back-color: '+flavorData.inputControl.buttonPrimaryHoverBackColor+';// Background color for primary button color variant (hover).\\n'; + flavorFile +='$button-primary-fore-color: '+flavorData.inputControl.buttonPrimaryForeColor+';// Text color for primary button color variant.\\n'; + flavorFile +='@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);\\n'; + flavorFile +='\\n'; + flavorFile +='$button-secondary-name: \\'secondary\\'; // Class name for secondary button color variant.\\n'; + flavorFile +='$button-secondary-back-color: '+flavorData.inputControl.buttonSecondaryBackColor+';// Background color for secondary button color variant.\\n'; + flavorFile +='$button-secondary-hover-back-color: '+flavorData.inputControl.buttonSecondaryHoverBackColor+';// Background color for secondary button color variant (hover).\\n'; + flavorFile +='$button-secondary-fore-color: '+flavorData.inputControl.buttonSecondaryForeColor+';// Text color for secondary button color variant.\\n'; + flavorFile +='@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);\\n'; + flavorFile +='\\n'; + flavorFile +='$button-tertiary-name: \\'tertiary\\'; // Class name for tertiary button color variant.\\n'; + flavorFile +='$button-tertiary-back-color: '+flavorData.inputControl.buttonTertiaryBackColor+';// Background color for tertiary button color variant.\\n'; + flavorFile +='$button-tertiary-hover-back-color: '+flavorData.inputControl.buttonTertiaryHoverBackColor+';// Background color for tertiary button color variant (hover).\\n'; + flavorFile +='$button-tertiary-fore-color: '+flavorData.inputControl.buttonTertiaryForeColor+';// Text color for tertiary button color variant.\\n'; + flavorFile +='@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);\\n'; + flavorFile +='\\n'; + flavorFile +='$button-inverse-name: \\'inverse\\'; // Class name for inverse button color variant.\\n'; + flavorFile +='$button-inverse-back-color: '+flavorData.inputControl.buttonInverseBackColor+';// Background color for inverse button color variant.\\n'; + flavorFile +='$button-inverse-hover-back-color: '+flavorData.inputControl.buttonInverseHoverBackColor+';// Background color for inverse button color variant (hover).\\n'; + flavorFile +='$button-inverse-fore-color: '+flavorData.inputControl.buttonInverseForeColor+';// Text color for inverse button color variant.\\n'; + flavorFile +='@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);\\n'; + flavorFile +='\\n'; + flavorFile +='$button-small-name: \\'small\\'; // Class name, padding and margin for small button size variant.\\n'; + flavorFile +='$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));\\n'; + flavorFile +='$button-small-margin: var(#{$universal-margin-var});\\n'; + flavorFile +='@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);\\n'; + flavorFile +='\\n'; + flavorFile +='$button-large-name: \\'large\\'; // Class name, padding and margin for large button size variant.\\n'; + flavorFile +='$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));\\n'; + flavorFile +='$button-large-margin: var(#{$universal-margin-var});\\n'; + flavorFile +='@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);\\n'; + flavorFile +='\\n'; } if(flavorData.navigation.enabled){ flavorFile +='$header-height: '+flavorData.navigation.headerHeight+'rem; // Height of the header element.\\n'; @@ -1351,9 +1553,41 @@ module.exports = { flavorFile +='\\n'; } if(flavorData.contextual.enabled){ - + flavorFile +='$mark-back-color: '+flavorData.contextual.markBackColor+'; // Background color for \\n'; + flavorFile +='$mark-fore-color: '+flavorData.contextual.markForeColor+'; // Text color for \\n'; + flavorFile +='$mark-font-size: '+flavorData.contextual.markFontSize+'em; // Font size for \\n'; + flavorFile +='$mark-line-height: '+flavorData.contextual.markLineHeight+'em; // Line height for \\n'; + flavorFile +='$toast-back-color: '+flavorData.contextual.toastBackColor+'; // Background color for toast component\\n'; + flavorFile +='$toast-fore-color: '+flavorData.contextual.toastForeColor+'; // Text color for toast component\\n'; + flavorFile +='$tooltip-back-color: '+flavorData.contextual.tooltipBackColor+'; // Background color for tooltip component\\n'; + flavorFile +='$tooltip-fore-color: '+flavorData.contextual.tooltipForeColor+'; // Text color for tooltip component\\n'; + flavorFile +='$modal-overlay-color: '+flavorData.contextual.modalOverlayColor+'; // Overlay color for modal dialog component\\n'; + flavorFile +='$modal-close-color: '+flavorData.contextual.modalCloseColor+'; // Text color for the close button of the modal dialog component\\n'; + flavorFile +='$modal-close-hover-back-color: '+flavorData.contextual.modalCloseHoverBackColor+'; // Background color for the close button of the modal dialog component (on hover/focus)\\n'; + flavorFile +='$modal-close-size: '+flavorData.contextual.modalCloseSize+'; // Font size for the close button of the modal dialog component\\n'; + flavorFile +='$collapse-label-height: '+flavorData.contextual.collapseLabelHeight+'; // Height for the labels in the collapse component\\n'; + flavorFile +='$collapse-content-max-height: '+flavorData.contextual.collapseContentMaxHeight+'px; // Max height for the content panes in the collapse component\\n'; + flavorFile +='$collapse-label-back-color: '+flavorData.contextual.collapseLabelBackColor+'; // Background color for labels in the collapse component\\n'; + flavorFile +='$collapse-label-fore-color: '+flavorData.contextual.collapseLabelForeColor+'; // Text color for labels in the collapse component\\n'; + flavorFile +='$collapse-label-hover-back-color: '+flavorData.contextual.collapseLabelHoverBackColor+'; // Background color for labels in the collapse component (hover)\\n'; + flavorFile +='$collapse-selected-label-back-color: '+flavorData.contextual.collapseSelectedLabelBackColor+'; // Background color for selected labels in the collapse component\\n'; + flavorFile +='$collapse-border-color: '+flavorData.contextual.collapseBorderColor+'; // Border color for collapse component\\n'; + flavorFile +='$collapse-selected-label-border-color: '+flavorData.contextual.collapseSelectedLabelBorderColor+'; // Border color for collapse component\\'s selected labels\\n'; + flavorFile +='$collapse-content-back-color: '+flavorData.contextual.collapseContentBackColor+'; // Background color for collapse component\\'s content panes\\n'; flavorFile +='\\n'; flavorFile +='@import \\'../mini/contextual\\';\\n'; + flavorFile +='$mark-secondary-name: \\'secondary\\'; // Class name for secondary color variant.\\n'; + flavorFile +='$mark-secondary-back-color: '+flavorData.contextual.markSecondaryBackColor+'; // Background color for secondary color variant.\\n'; + flavorFile +='@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);\\n'; + flavorFile +='\\n'; + flavorFile +='$mark-tertiary-name: \\'tertiary\\'; // Class name for tertiary color variant.\\n'; + flavorFile +='$mark-tertiary-back-color: '+flavorData.contextual.markTertiaryBackColor+'; // Background color for tertiary color variant.\\n'; + flavorFile +='@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);\\n'; + flavorFile +='\\n'; + flavorFile +='$mark-tag-name: \\'tag\\'; // Class name, padding and border radius for tag size variant.\\n'; + flavorFile +='$mark-tag-padding: calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});\\n'; + flavorFile +='$mark-tag-border-radius: '+flavorData.contextual.markTagBorderRadius+'em; \\n'; + flavorFile +='@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);\\n'; flavorFile +='\\n'; } if(flavorData.progress.enabled){ diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index 3ec43f9..ec915b6 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -356,3 +356,7 @@ - Finished Sass variable generation for `progress` module in flavors page. - Added mixin parts to `layout` for flavors page. - Finished Sass variable generation for `layout` module in flavors page. + +## 20180520 +- Finished Sass variable generation for `input_control` module in flavors page. +- Finished Sass variable generation for `contextual` module in flavors page. diff --git a/docs/v3/flavors.html b/docs/v3/flavors.html index fd698ad..248a835 100644 --- a/docs/v3/flavors.html +++ b/docs/v3/flavors.html @@ -400,6 +400,78 @@

Border color for buttons on hover

+
+ + + +

Foreground color for primary button variant

+
+
+ + + +

Background color for primary button variant

+
+
+ + + +

Background color for primary button variant on hover

+
+
+ + + +

Foreground color for secondary button variant

+
+
+ + + +

Background color for secondary button variant

+
+
+ + + +

Background color for secondary button variant on hover

+
+
+ + + +

Foreground color for tertiary button variant

+
+
+ + + +

Background color for tertiary button variant

+
+
+ + + +

Background color for tertiary button variant on hover

+
+
+ + + +

Foreground color for inverse button variant

+
+
+ + + +

Background color for inverse button variant

+
+
+ + + +

Background color for inverse button variant on hover

+
@@ -675,6 +747,23 @@

Line height for highlighted text elements

+
+ + + +

Background color for highlighted text element secondary variant

+
+
+ + + +

Background color for highlighted text element tertiary variant

+
+
+ + +

Border radius for highlighted text element tag variant, relative to context

+
Toasts @@ -972,6 +1061,18 @@ ['buttonBorderColor','buttonBorderColorPreview'], ['buttonHoverBackColor','buttonHoverBackColorPreview'], ['buttonHoverBorderColor','buttonHoverBorderColorPreview'], + ['buttonPrimaryForeColor','buttonPrimaryForeColorPreview'], + ['buttonPrimaryBackColor','buttonPrimaryBackColorPreview'], + ['buttonPrimaryHoverBackColor','buttonPrimaryHoverBackColorPreview'], + ['buttonSecondaryForeColor','buttonSecondaryForeColorPreview'], + ['buttonSecondaryBackColor','buttonSecondaryBackColorPreview'], + ['buttonSecondaryHoverBackColor','buttonSecondaryHoverBackColorPreview'], + ['buttonTertiaryForeColor','buttonTertiaryForeColorPreview'], + ['buttonTertiaryBackColor','buttonTertiaryBackColorPreview'], + ['buttonTertiaryHoverBackColor','buttonTertiaryHoverBackColorPreview'], + ['buttonInverseForeColor','buttonInverseForeColorPreview'], + ['buttonInverseBackColor','buttonInverseBackColorPreview'], + ['buttonInverseHoverBackColor','buttonInverseHoverBackColorPreview'], ['buttonGroupBorderColor','buttonGroupBorderColorPreview'], ['headerForeColor','headerForeColorPreview'], ['headerBackColor','headerBackColorPreview'], @@ -999,6 +1100,8 @@ ['tdHoverBackColor','tdHoverBackColorPreview'], ['markForeColor','markForeColorPreview'], ['markBackColor','markBackColorPreview'], + ['markSecondaryBackColor','markSecondaryBackColorPreview'], + ['markTertiaryBackColor','markTertiaryBackColorPreview'], ['toastForeColor','toastForeColorPreview'], ['toastBackColor','toastBackColorPreview'], ['tooltipForeColor','tooltipForeColorPreview'], @@ -1155,6 +1258,32 @@ }, inputControl : { enabled: document.getElementById('inputControlEnabled').checked, + formBackColor: document.getElementById('formBackColor').value, + formForeColor: document.getElementById('formForeColor').value, + formBorderColor: document.getElementById('formBorderColor').value, + inputBackColor: document.getElementById('inputBackColor').value, + inputForeColor: document.getElementById('inputForeColor').value, + inputBorderColor: document.getElementById('inputBorderColor').value, + inputFocusColor: document.getElementById('inputFocusColor').value, + inputInvalidColor: document.getElementById('inputInvalidColor').value, + buttonBackColor: document.getElementById('buttonBackColor').value, + buttonForeColor: document.getElementById('buttonForeColor').value, + buttonHoverBackColor: document.getElementById('buttonHoverBackColor').value, + buttonBorderColor: document.getElementById('buttonBorderColor').value, + buttonHoverBorderColor: document.getElementById('buttonHoverBorderColor').value, + buttonGroupBorderColor: document.getElementById('buttonGroupBorderColor').value, + buttonPrimaryForeColor: document.getElementById('buttonPrimaryForeColor').value, + buttonPrimaryBackColor: document.getElementById('buttonPrimaryBackColor').value, + buttonPrimaryHoverBackColor: document.getElementById('buttonPrimaryHoverBackColor').value, + buttonSecondaryForeColor: document.getElementById('buttonSecondaryForeColor').value, + buttonSecondaryBackColor: document.getElementById('buttonSecondaryBackColor').value, + buttonSecondaryHoverBackColor: document.getElementById('buttonSecondaryHoverBackColor').value, + buttonTertiaryForeColor: document.getElementById('buttonTertiaryForeColor').value, + buttonTertiaryBackColor: document.getElementById('buttonTertiaryBackColor').value, + buttonTertiaryHoverBackColor: document.getElementById('buttonTertiaryHoverBackColor').value, + buttonInverseForeColor: document.getElementById('buttonInverseForeColor').value, + buttonInverseBackColor: document.getElementById('buttonInverseBackColor').value, + buttonInverseHoverBackColor: document.getElementById('buttonInverseHoverBackColor').value }, navigation : { enabled: document.getElementById('navigationEnabled').checked, @@ -1200,6 +1329,30 @@ }, contextual : { enabled: document.getElementById('contextualEnabled').checked, + markBackColor: document.getElementById('markBackColor').value, + markForeColor: document.getElementById('markForeColor').value, + markFontSize: document.getElementById('markFontSize').value, + markLineHeight: document.getElementById('markLineHeight').value, + markSecondaryBackColor: document.getElementById('markSecondaryBackColor').value, + markTertiaryBackColor: document.getElementById('markTertiaryBackColor').value, + markTagBorderRadius: document.getElementById('markTagBorderRadius').value, + toastBackColor: document.getElementById('toastBackColor').value, + toastForeColor: document.getElementById('toastForeColor').value, + tooltipBackColor: document.getElementById('tooltipBackColor').value, + tooltipForeColor: document.getElementById('tooltipForeColor').value, + modalOverlayColor: document.getElementById('modalOverlayColor').value, + modalCloseColor: document.getElementById('modalCloseColor').value, + modalCloseHoverBackColor: document.getElementById('modalCloseHoverBackColor').value, + modalCloseSize: document.getElementById('modalCloseSize').value, + collapseLabelHeight: document.getElementById('collapseLabelHeight').value, + collapseContentMaxHeight: document.getElementById('collapseContentMaxHeight').value, + collapseContentBackColor: document.getElementById('collapseContentBackColor').value, + collapseLabelBackColor: document.getElementById('collapseLabelBackColor').value, + collapseLabelForeColor: document.getElementById('collapseLabelForeColor').value, + collapseLabelHoverBackColor: document.getElementById('collapseLabelHoverBackColor').value, + collapseSelectedLabelBackColor: document.getElementById('collapseSelectedLabelBackColor').value, + collapseBorderColor: document.getElementById('collapseBorderColor').value, + collapseSelectedLabelBorderColor: document.getElementById('collapseSelectedLabelBorderColor').value }, progress : { enabled: document.getElementById('progressEnabled').checked, @@ -1319,12 +1472,61 @@ flavorFile +='$card-section-double-padded-name: \'double-padded\'; // Class name for card double-padded section variant.\n'; flavorFile +='$card-section-double-padded-padding: calc(1.5 * var(#{$universal-padding-var})); // Padding for card sectiondouble-padded section variant.\n'; flavorFile +='@include make-card-section-alt-style ($card-section-double-padded-name, $card-section-double-padded-padding);\n'; + flavorFile +='\n'; } if(flavorData.inputControl.enabled){ - + flavorFile +='$input-group-mobile-breakpoint: $mobile-breakpoint - 1px; // Breakpoint for fluid input group mobile view.\n'; + flavorFile +='$form-back-color: '+flavorData.inputControl.formBackColor+'; // Background color for forms.\n'; + flavorFile +='$form-fore-color: '+flavorData.inputControl.formForeColor+'; // Text color for forms.\n'; + flavorFile +='$form-border-color: '+flavorData.inputControl.formBorderColor+'; // Border color for forms.\n'; + flavorFile +='$input-back-color: '+flavorData.inputControl.inputBackColor+'; // Background color for input elements.\n'; + flavorFile +='$input-fore-color: '+flavorData.inputControl.inputForeColor+'; // Text color for input elements.\n'; + flavorFile +='$input-border-color: '+flavorData.inputControl.inputBorderColor+'; // Border color for input elements.\n'; + flavorFile +='$input-focus-color: '+flavorData.inputControl.inputFocusColor+'; // Border color for focused input elements.\n'; + flavorFile +='$input-invalid-color: '+flavorData.inputControl.inputInvalidColor+'; // Border color for invalid input elements.\n'; + flavorFile +='$button-back-color: '+flavorData.inputControl.buttonBackColor+'; // Background color for buttons.\n'; + flavorFile +='$button-hover-back-color: '+flavorData.inputControl.buttonHoverBackColor+'; // Background color for buttons (hover).\n'; + flavorFile +='$button-fore-color: '+flavorData.inputControl.buttonForeColor+'; // Text color for buttons.\n'; + flavorFile +='$button-border-color: '+flavorData.inputControl.buttonBorderColor+'; // Border color for buttons.\n'; + flavorFile +='$button-hover-border-color: '+flavorData.inputControl.buttonHoverBorderColor+'; // Border color for buttons (hover).\n'; + flavorFile +='$button-group-border-color: '+flavorData.inputControl.buttonGroupBorderColor+'; // Border color for button groups.\n'; flavorFile +='\n'; flavorFile +='@import \'../mini/inputControl\';\n'; flavorFile +='\n'; + flavorFile +='$button-primary-name: \'primary\'; // Class name for primary button color variant.\n'; + flavorFile +='$button-primary-back-color: '+flavorData.inputControl.buttonPrimaryBackColor+';// Background color for primary button color variant.\n'; + flavorFile +='$button-primary-hover-back-color: '+flavorData.inputControl.buttonPrimaryHoverBackColor+';// Background color for primary button color variant (hover).\n'; + flavorFile +='$button-primary-fore-color: '+flavorData.inputControl.buttonPrimaryForeColor+';// Text color for primary button color variant.\n'; + flavorFile +='@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);\n'; + flavorFile +='\n'; + flavorFile +='$button-secondary-name: \'secondary\'; // Class name for secondary button color variant.\n'; + flavorFile +='$button-secondary-back-color: '+flavorData.inputControl.buttonSecondaryBackColor+';// Background color for secondary button color variant.\n'; + flavorFile +='$button-secondary-hover-back-color: '+flavorData.inputControl.buttonSecondaryHoverBackColor+';// Background color for secondary button color variant (hover).\n'; + flavorFile +='$button-secondary-fore-color: '+flavorData.inputControl.buttonSecondaryForeColor+';// Text color for secondary button color variant.\n'; + flavorFile +='@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);\n'; + flavorFile +='\n'; + flavorFile +='$button-tertiary-name: \'tertiary\'; // Class name for tertiary button color variant.\n'; + flavorFile +='$button-tertiary-back-color: '+flavorData.inputControl.buttonTertiaryBackColor+';// Background color for tertiary button color variant.\n'; + flavorFile +='$button-tertiary-hover-back-color: '+flavorData.inputControl.buttonTertiaryHoverBackColor+';// Background color for tertiary button color variant (hover).\n'; + flavorFile +='$button-tertiary-fore-color: '+flavorData.inputControl.buttonTertiaryForeColor+';// Text color for tertiary button color variant.\n'; + flavorFile +='@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);\n'; + flavorFile +='\n'; + flavorFile +='$button-inverse-name: \'inverse\'; // Class name for inverse button color variant.\n'; + flavorFile +='$button-inverse-back-color: '+flavorData.inputControl.buttonInverseBackColor+';// Background color for inverse button color variant.\n'; + flavorFile +='$button-inverse-hover-back-color: '+flavorData.inputControl.buttonInverseHoverBackColor+';// Background color for inverse button color variant (hover).\n'; + flavorFile +='$button-inverse-fore-color: '+flavorData.inputControl.buttonInverseForeColor+';// Text color for inverse button color variant.\n'; + flavorFile +='@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);\n'; + flavorFile +='\n'; + flavorFile +='$button-small-name: \'small\'; // Class name, padding and margin for small button size variant.\n'; + flavorFile +='$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));\n'; + flavorFile +='$button-small-margin: var(#{$universal-margin-var});\n'; + flavorFile +='@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);\n'; + flavorFile +='\n'; + flavorFile +='$button-large-name: \'large\'; // Class name, padding and margin for large button size variant.\n'; + flavorFile +='$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));\n'; + flavorFile +='$button-large-margin: var(#{$universal-margin-var});\n'; + flavorFile +='@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);\n'; + flavorFile +='\n'; } if(flavorData.navigation.enabled){ flavorFile +='$header-height: '+flavorData.navigation.headerHeight+'rem; // Height of the header element.\n'; @@ -1375,9 +1577,41 @@ flavorFile +='\n'; } if(flavorData.contextual.enabled){ - + flavorFile +='$mark-back-color: '+flavorData.contextual.markBackColor+'; // Background color for \n'; + flavorFile +='$mark-fore-color: '+flavorData.contextual.markForeColor+'; // Text color for \n'; + flavorFile +='$mark-font-size: '+flavorData.contextual.markFontSize+'em; // Font size for \n'; + flavorFile +='$mark-line-height: '+flavorData.contextual.markLineHeight+'em; // Line height for \n'; + flavorFile +='$toast-back-color: '+flavorData.contextual.toastBackColor+'; // Background color for toast component\n'; + flavorFile +='$toast-fore-color: '+flavorData.contextual.toastForeColor+'; // Text color for toast component\n'; + flavorFile +='$tooltip-back-color: '+flavorData.contextual.tooltipBackColor+'; // Background color for tooltip component\n'; + flavorFile +='$tooltip-fore-color: '+flavorData.contextual.tooltipForeColor+'; // Text color for tooltip component\n'; + flavorFile +='$modal-overlay-color: '+flavorData.contextual.modalOverlayColor+'; // Overlay color for modal dialog component\n'; + flavorFile +='$modal-close-color: '+flavorData.contextual.modalCloseColor+'; // Text color for the close button of the modal dialog component\n'; + flavorFile +='$modal-close-hover-back-color: '+flavorData.contextual.modalCloseHoverBackColor+'; // Background color for the close button of the modal dialog component (on hover/focus)\n'; + flavorFile +='$modal-close-size: '+flavorData.contextual.modalCloseSize+'; // Font size for the close button of the modal dialog component\n'; + flavorFile +='$collapse-label-height: '+flavorData.contextual.collapseLabelHeight+'; // Height for the labels in the collapse component\n'; + flavorFile +='$collapse-content-max-height: '+flavorData.contextual.collapseContentMaxHeight+'px; // Max height for the content panes in the collapse component\n'; + flavorFile +='$collapse-label-back-color: '+flavorData.contextual.collapseLabelBackColor+'; // Background color for labels in the collapse component\n'; + flavorFile +='$collapse-label-fore-color: '+flavorData.contextual.collapseLabelForeColor+'; // Text color for labels in the collapse component\n'; + flavorFile +='$collapse-label-hover-back-color: '+flavorData.contextual.collapseLabelHoverBackColor+'; // Background color for labels in the collapse component (hover)\n'; + flavorFile +='$collapse-selected-label-back-color: '+flavorData.contextual.collapseSelectedLabelBackColor+'; // Background color for selected labels in the collapse component\n'; + flavorFile +='$collapse-border-color: '+flavorData.contextual.collapseBorderColor+'; // Border color for collapse component\n'; + flavorFile +='$collapse-selected-label-border-color: '+flavorData.contextual.collapseSelectedLabelBorderColor+'; // Border color for collapse component\'s selected labels\n'; + flavorFile +='$collapse-content-back-color: '+flavorData.contextual.collapseContentBackColor+'; // Background color for collapse component\'s content panes\n'; flavorFile +='\n'; flavorFile +='@import \'../mini/contextual\';\n'; + flavorFile +='$mark-secondary-name: \'secondary\'; // Class name for secondary color variant.\n'; + flavorFile +='$mark-secondary-back-color: '+flavorData.contextual.markSecondaryBackColor+'; // Background color for secondary color variant.\n'; + flavorFile +='@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);\n'; + flavorFile +='\n'; + flavorFile +='$mark-tertiary-name: \'tertiary\'; // Class name for tertiary color variant.\n'; + flavorFile +='$mark-tertiary-back-color: '+flavorData.contextual.markTertiaryBackColor+'; // Background color for tertiary color variant.\n'; + flavorFile +='@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);\n'; + flavorFile +='\n'; + flavorFile +='$mark-tag-name: \'tag\'; // Class name, padding and border radius for tag size variant.\n'; + flavorFile +='$mark-tag-padding: calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});\n'; + flavorFile +='$mark-tag-border-radius: '+flavorData.contextual.markTagBorderRadius+'em; \n'; + flavorFile +='@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);\n'; flavorFile +='\n'; } if(flavorData.progress.enabled){