Flavor generation for contextual and input_control
This commit is contained in:
Angelos Chalaris
parent
ebacce166c
commit
a361f69240
|
|
@ -376,6 +376,78 @@ module.exports = {
|
|||
<span id="buttonHoverBorderColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:transparent; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Border color for buttons on hover</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonPrimaryForeColor">Button primary variant foreground color:</label>
|
||||
<input type="text" id="buttonPrimaryForeColor" value="#f8f8f8" autocomplete="off"/>
|
||||
<span id="buttonPrimaryForeColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#f8f8f8; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Foreground color for primary button variant</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonPrimaryBackColor">Button primary variant background color:</label>
|
||||
<input type="text" id="buttonPrimaryBackColor" value="#1976d2" autocomplete="off"/>
|
||||
<span id="buttonPrimaryBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#1976d2; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Background color for primary button variant</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonPrimaryHoverBackColor">Button primary variant background color (hover):</label>
|
||||
<input type="text" id="buttonPrimaryHoverBackColor" value="#1565c0" autocomplete="off"/>
|
||||
<span id="buttonPrimaryHoverBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#1565c0; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Background color for primary button variant on hover</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonSecondaryForeColor">Button secondary variant foreground color:</label>
|
||||
<input type="text" id="buttonSecondaryForeColor" value="#f8f8f8" autocomplete="off"/>
|
||||
<span id="buttonSecondaryForeColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#f8f8f8; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Foreground color for secondary button variant</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonSecondaryBackColor">Button secondary variant background color:</label>
|
||||
<input type="text" id="buttonSecondaryBackColor" value="#d32f2f" autocomplete="off"/>
|
||||
<span id="buttonSecondaryBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#d32f2f; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Background color for secondary button variant</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonSecondaryHoverBackColor">Button secondary variant background color (hover):</label>
|
||||
<input type="text" id="buttonSecondaryHoverBackColor" value="#c62828" autocomplete="off"/>
|
||||
<span id="buttonHoverSecondaryBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#c62828; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Background color for secondary button variant on hover</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonTertiaryForeColor">Button tertiary variant foreground color:</label>
|
||||
<input type="text" id="buttonTertiaryForeColor" value="#f8f8f8" autocomplete="off"/>
|
||||
<span id="buttonTertiaryForeColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#f8f8f8; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Foreground color for tertiary button variant</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonTertiaryBackColor">Button tertiary variant background color:</label>
|
||||
<input type="text" id="buttonTertiaryBackColor" value="#308732" autocomplete="off"/>
|
||||
<span id="buttonTertiaryBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#308732; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Background color for tertiary button variant</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonTertiaryHoverBackColor">Button tertiary variant background color (hover):</label>
|
||||
<input type="text" id="buttonTertiaryHoverBackColor" value="#277529" autocomplete="off"/>
|
||||
<span id="buttonTertiaryHoverBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#277529; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Background color for tertiary button variant on hover</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonInverseForeColor">Button inverse variant foreground color:</label>
|
||||
<input type="text" id="buttonInverseForeColor" value="#f8f8f8" autocomplete="off"/>
|
||||
<span id="buttonInverseForeColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#f8f8f8; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Foreground color for inverse button variant</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonInverseBackColor">Button inverse variant background color:</label>
|
||||
<input type="text" id="buttonInverseBackColor" value="#111" autocomplete="off"/>
|
||||
<span id="buttonInverseBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#111; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Background color for inverse button variant</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonInverseHoverBackColor">Button inverse variant background color (hover):</label>
|
||||
<input type="text" id="buttonInverseHoverBackColor" value="#212121" autocomplete="off"/>
|
||||
<span id="buttonInverseHoverBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#212121; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Background color for inverse button variant on hover</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonGroupBorderColor">Button group border color:</label>
|
||||
<input type="text" id="buttonGroupBorderColor" value="rgba(124,124,124,0.54)" autocomplete="off"/>
|
||||
|
|
@ -651,6 +723,23 @@ module.exports = {
|
|||
<input type="number" id="markLineHeight" style="width:calc(100% - 0.5rem);" value="1" step="0.001" autocomplete="off"/>
|
||||
<p><small>Line height for highlighted text elements</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="markSecondaryBackColor">Secondary highlight background color:</label>
|
||||
<input type="text" id="markSecondaryBackColor" value="#d32f2f" autocomplete="off"/>
|
||||
<span id="markSecondaryBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#d32f2f; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Background color for highlighted text element secondary variant</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="markTertiaryBackColor">Tertiary highlight background color:</label>
|
||||
<input type="text" id="markTertiaryBackColor" value="#308732" autocomplete="off"/>
|
||||
<span id="markTertiaryBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#308732; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Background color for highlighted text element tertiary variant</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="markTagBorderRadius">Highlight tag variant border radius (em):</label>
|
||||
<input type="number" id="markTagBorderRadius" style="width:calc(100% - 0.5rem);" value="1" step="0.001" autocomplete="off"/>
|
||||
<p><small>Border radius for highlighted text element tag variant, relative to context</small></p>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend id="toasts">Toasts</legend>
|
||||
|
|
@ -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 <mark>\\n';
|
||||
flavorFile +='$mark-fore-color: '+flavorData.contextual.markForeColor+'; // Text color for <mark>\\n';
|
||||
flavorFile +='$mark-font-size: '+flavorData.contextual.markFontSize+'em; // Font size for <mark>\\n';
|
||||
flavorFile +='$mark-line-height: '+flavorData.contextual.markLineHeight+'em; // Line height for <mark>\\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 <mark> color variant.\\n';
|
||||
flavorFile +='$mark-secondary-back-color: '+flavorData.contextual.markSecondaryBackColor+'; // Background color for secondary <mark> 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 <mark> color variant.\\n';
|
||||
flavorFile +='$mark-tertiary-back-color: '+flavorData.contextual.markTertiaryBackColor+'; // Background color for tertiary <mark> 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 <mark> 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){
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -400,6 +400,78 @@
|
|||
<span id="buttonHoverBorderColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:transparent; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Border color for buttons on hover</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonPrimaryForeColor">Button primary variant foreground color:</label>
|
||||
<input type="text" id="buttonPrimaryForeColor" value="#f8f8f8" autocomplete="off"/>
|
||||
<span id="buttonPrimaryForeColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#f8f8f8; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Foreground color for primary button variant</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonPrimaryBackColor">Button primary variant background color:</label>
|
||||
<input type="text" id="buttonPrimaryBackColor" value="#1976d2" autocomplete="off"/>
|
||||
<span id="buttonPrimaryBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#1976d2; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Background color for primary button variant</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonPrimaryHoverBackColor">Button primary variant background color (hover):</label>
|
||||
<input type="text" id="buttonPrimaryHoverBackColor" value="#1565c0" autocomplete="off"/>
|
||||
<span id="buttonPrimaryHoverBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#1565c0; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Background color for primary button variant on hover</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonSecondaryForeColor">Button secondary variant foreground color:</label>
|
||||
<input type="text" id="buttonSecondaryForeColor" value="#f8f8f8" autocomplete="off"/>
|
||||
<span id="buttonSecondaryForeColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#f8f8f8; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Foreground color for secondary button variant</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonSecondaryBackColor">Button secondary variant background color:</label>
|
||||
<input type="text" id="buttonSecondaryBackColor" value="#d32f2f" autocomplete="off"/>
|
||||
<span id="buttonSecondaryBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#d32f2f; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Background color for secondary button variant</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonSecondaryHoverBackColor">Button secondary variant background color (hover):</label>
|
||||
<input type="text" id="buttonSecondaryHoverBackColor" value="#c62828" autocomplete="off"/>
|
||||
<span id="buttonHoverSecondaryBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#c62828; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Background color for secondary button variant on hover</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonTertiaryForeColor">Button tertiary variant foreground color:</label>
|
||||
<input type="text" id="buttonTertiaryForeColor" value="#f8f8f8" autocomplete="off"/>
|
||||
<span id="buttonTertiaryForeColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#f8f8f8; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Foreground color for tertiary button variant</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonTertiaryBackColor">Button tertiary variant background color:</label>
|
||||
<input type="text" id="buttonTertiaryBackColor" value="#308732" autocomplete="off"/>
|
||||
<span id="buttonTertiaryBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#308732; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Background color for tertiary button variant</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonTertiaryHoverBackColor">Button tertiary variant background color (hover):</label>
|
||||
<input type="text" id="buttonTertiaryHoverBackColor" value="#277529" autocomplete="off"/>
|
||||
<span id="buttonTertiaryHoverBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#277529; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Background color for tertiary button variant on hover</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonInverseForeColor">Button inverse variant foreground color:</label>
|
||||
<input type="text" id="buttonInverseForeColor" value="#f8f8f8" autocomplete="off"/>
|
||||
<span id="buttonInverseForeColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#f8f8f8; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Foreground color for inverse button variant</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonInverseBackColor">Button inverse variant background color:</label>
|
||||
<input type="text" id="buttonInverseBackColor" value="#111" autocomplete="off"/>
|
||||
<span id="buttonInverseBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#111; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Background color for inverse button variant</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonInverseHoverBackColor">Button inverse variant background color (hover):</label>
|
||||
<input type="text" id="buttonInverseHoverBackColor" value="#212121" autocomplete="off"/>
|
||||
<span id="buttonInverseHoverBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#212121; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Background color for inverse button variant on hover</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonGroupBorderColor">Button group border color:</label>
|
||||
<input type="text" id="buttonGroupBorderColor" value="rgba(124,124,124,0.54)" autocomplete="off"/>
|
||||
|
|
@ -675,6 +747,23 @@
|
|||
<input type="number" id="markLineHeight" style="width:calc(100% - 0.5rem);" value="1" step="0.001" autocomplete="off"/>
|
||||
<p><small>Line height for highlighted text elements</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="markSecondaryBackColor">Secondary highlight background color:</label>
|
||||
<input type="text" id="markSecondaryBackColor" value="#d32f2f" autocomplete="off"/>
|
||||
<span id="markSecondaryBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#d32f2f; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Background color for highlighted text element secondary variant</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="markTertiaryBackColor">Tertiary highlight background color:</label>
|
||||
<input type="text" id="markTertiaryBackColor" value="#308732" autocomplete="off"/>
|
||||
<span id="markTertiaryBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#308732; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Background color for highlighted text element tertiary variant</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="markTagBorderRadius">Highlight tag variant border radius (em):</label>
|
||||
<input type="number" id="markTagBorderRadius" style="width:calc(100% - 0.5rem);" value="1" step="0.001" autocomplete="off"/>
|
||||
<p><small>Border radius for highlighted text element tag variant, relative to context</small></p>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend id="toasts">Toasts</legend>
|
||||
|
|
@ -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 <mark>\n';
|
||||
flavorFile +='$mark-fore-color: '+flavorData.contextual.markForeColor+'; // Text color for <mark>\n';
|
||||
flavorFile +='$mark-font-size: '+flavorData.contextual.markFontSize+'em; // Font size for <mark>\n';
|
||||
flavorFile +='$mark-line-height: '+flavorData.contextual.markLineHeight+'em; // Line height for <mark>\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 <mark> color variant.\n';
|
||||
flavorFile +='$mark-secondary-back-color: '+flavorData.contextual.markSecondaryBackColor+'; // Background color for secondary <mark> 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 <mark> color variant.\n';
|
||||
flavorFile +='$mark-tertiary-back-color: '+flavorData.contextual.markTertiaryBackColor+'; // Background color for tertiary <mark> 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 <mark> 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){
|
||||
|
|
|
|||
Loading…
Reference in a new issue