From ab9304ed3aea22e49eff7685d6da70e5c66e82ce Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sat, 19 May 2018 13:24:25 +0300 Subject: [PATCH] Flavor generation for layout --- docs/doc-fragments/buildYourOwnFlavor.js | 135 ++++++++++++++++++++--- docs/v3/DEVLOG.md | 2 + docs/v3/flavors.html | 135 ++++++++++++++++++++--- 3 files changed, 246 insertions(+), 26 deletions(-) diff --git a/docs/doc-fragments/buildYourOwnFlavor.js b/docs/doc-fragments/buildYourOwnFlavor.js index 1ef5830..b12e68b 100644 --- a/docs/doc-fragments/buildYourOwnFlavor.js +++ b/docs/doc-fragments/buildYourOwnFlavor.js @@ -195,16 +195,6 @@ module.exports = {

Number of horizontal column partitions for the grid system (default 12)

-
- - -

Breakpoint between small and medium screens, in pixels

-
-
- - -

Breakpoint between medium and large screens, in pixels

-
Cards @@ -213,6 +203,16 @@ module.exports = {

Width of normal cards, in pixels

+
+ + +

Width of small cards, in pixels

+
+
+ + +

Width of large cards, in pixels

+
@@ -236,6 +236,54 @@ module.exports = {

Border color for cards

+
+ + + +

Foreground color for warning cards

+
+
+ + + +

Background color for warning cards

+
+
+ + + +

Border color for warning cards

+
+
+ + + +

Foreground color for error cards

+
+
+ + + +

Background color for error cards

+
+
+ + + +

Border color for error cards

+
+
+ + + +

Foreground color for card dark sections

+
+
+ + + +

Background color for card dark sections

+

Input control module

@@ -879,6 +927,14 @@ module.exports = { ['cardForeColor','cardForeColorPreview'], ['cardBackColor','cardBackColorPreview'], ['cardBorderColor','cardBorderColorPreview'], + ['cardWarningBackColor', 'cardWarningBackColorPreview'], + ['cardWarningForeColor', 'cardWarningForeColorPreview'], + ['cardWarningBorderColor', 'cardWarningBorderColorPreview'], + ['cardErrorBackColor', 'cardErrorBackColorPreview'], + ['cardErrorForeColor', 'cardErrorForeColorPreview'], + ['cardErrorBorderColor', 'cardErrorBorderColorPreview'], + ['cardDarkSectionBackColor', 'cardDarkSectionBackColorPreview'], + ['cardDarkSectionForeColor', 'cardDarkSectionForeColorPreview'], ['formForeColor','formForeColorPreview'], ['formBackColor','formBackColorPreview'], ['formBorderColor','formBorderColorPreview'], @@ -947,8 +1003,6 @@ module.exports = { ['genericBoxShadowColor','genericBoxShadowColorPreview'] ]; var autoUpdatePairs = [ - ['gridMediumBreakpoint', 'mobileBreakpoint'], - ['gridLargeBreakpoint', 'largeScreenBreakpoint'], ['cardForeColor', 'foreColor'], ['cardBackColor', 'backColor'], ['cardBorderColor', 'secondaryBorderColor'], @@ -1058,6 +1112,22 @@ module.exports = { }, layout : { enabled: document.getElementById('layoutEnabled').checked, + gridColumnCount: document.getElementById('gridColumnCount').value, + cardNormalWidth: document.getElementById('cardNormalWidth').value, + cardSectionMediaHeight: document.getElementById('cardSectionMediaHeight').value, + cardBackColor: document.getElementById('cardBackColor').value, + cardForeColor: document.getElementById('cardForeColor').value, + cardBorderColor: document.getElementById('cardBorderColor').value, + cardSmallWidth: document.getElementById('cardSmallWidth').value, + cardLargeWidth: document.getElementById('cardLargeWidth').value, + cardWarningBackColor: document.getElementById('cardWarningBackColor').value, + cardWarningForeColor: document.getElementById('cardWarningForeColor').value, + cardWarningBorderColor: document.getElementById('cardWarningBorderColor').value, + cardErrorBackColor: document.getElementById('cardErrorBackColor').value, + cardErrorForeColor: document.getElementById('cardErrorForeColor').value, + cardErrorBorderColor: document.getElementById('cardErrorBorderColor').value, + cardDarkSectionBackColor: document.getElementById('cardDarkSectionBackColor').value, + cardDarkSectionForeColor: document.getElementById('cardDarkSectionForeColor').value }, inputControl : { enabled: document.getElementById('inputControlEnabled').checked, @@ -1182,10 +1252,49 @@ module.exports = { flavorFile +='@import \\'../mini/core\\';\\n'; flavorFile +='\\n'; if(flavorData.layout.enabled){ - + flavorFile +='$grid-column-count: '+flavorData.layout.gridColumnCount+'; // Number of columns in the grid (integer value only).\\n'; + flavorFile +='$grid-medium-breakpoint: $mobile-breakpoint; // Medium screen breakpoint for grid.\\n'; + flavorFile +='$grid-large-breakpoint: $large-screen-breakpoint; // Large screen breakpoint for grid.\\n'; + flavorFile +='$card-normal-width: '+flavorData.layout.cardNormalWidth+'px; // Width for normal cards.\\n'; + flavorFile +='$card-section-media-height: '+flavorData.layout.cardSectionMediaHeight+'px; // Height for cards\\' media sections.\\n'; + flavorFile +='$card-fore-color: '+flavorData.layout.cardForeColor+'; // Text color for the cards.\\n'; + flavorFile +='$card-back-color: '+flavorData.layout.cardBackColor+'; // Background color for the cards.\\n'; + flavorFile +='$card-border-color: '+flavorData.layout.cardBorderColor+'; // Border color for the cards.\\n'; flavorFile +='\\n'; flavorFile +='@import \\'../mini/layout\\';\\n'; flavorFile +='\\n'; + flavorFile +='$card-small-name: \\'small\\'; // Class name for small cards.\\n'; + flavorFile +='$card-small-width: '+flavorData.layout.cardSmallWidth+'px; // Width for small cards.\\n'; + flavorFile +='@include make-card-alt-size ($card-small-name, $card-small-width);\\n'; + flavorFile +='\\n'; + flavorFile +='$card-large-name: \\'large\\'; // Class name for large cards.\\n'; + flavorFile +='$card-large-width: '+flavorData.layout.cardLargeWidth+'px; // Width for large cards.\\n'; + flavorFile +='@include make-card-alt-size ($card-large-name, $card-large-width);\\n'; + flavorFile +='\\n'; + flavorFile +='$card-fluid-name: \\'fluid\\'; // Class name for fluid cards.\\n'; + flavorFile +='$card-fluid-width: 100%; // Width for fluid cards.\\n'; + flavorFile +='@include make-card-alt-size ($card-fluid-name, $card-fluid-width);\\n'; + flavorFile +='\\n'; + flavorFile +='$card-warning-name: \\'warning\\'; // Class name for card warnging color variant.\\n'; + flavorFile +='$card-warning-back-color: '+flavorData.layout.cardWarningBackColor+'; // Background color for card warnging color variant.\\n'; + flavorFile +='$card-warning-fore-color: '+flavorData.layout.cardWarningForeColor+'; // Text color for card warnging color variant.\\n'; + flavorFile +='$card-warning-border-color: '+flavorData.layout.cardWarningBorderColor+'; // Border style for card warnging color variant.\\n'; + flavorFile +='@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);\\n'; + flavorFile +='\\n'; + flavorFile +='$card-error-name: \\'error\\'; // Class name for card error color variant.\\n'; + flavorFile +='$card-error-back-color: '+flavorData.layout.cardErrorBackColor+'; // Background color for card error color variant.\\n'; + flavorFile +='$card-error-fore-color: '+flavorData.layout.cardErrorForeColor+'; // Text color for card error color variant.\\n'; + flavorFile +='$card-error-border-color: '+flavorData.layout.cardErrorBorderColor+'; // Border style for card error color variant.\\n'; + flavorFile +='@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);\\n'; + flavorFile +='\\n'; + flavorFile +='$card-section-dark-name: \\'dark\\'; // Class name for card dark section variant.\\n'; + flavorFile +='$card-section-dark-back-color: '+flavorData.layout.cardDarkSectionBackColor+'; // Background color for card dark section variant.\\n'; + flavorFile +='$card-section-dark-fore-color: '+flavorData.layout.cardDarkSectionForeColor+'; // Text color for card dark section variant.\\n'; + flavorFile +='@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);\\n'; + flavorFile +='\\n'; + 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'; } if(flavorData.inputControl.enabled){ diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index 65341c8..3ec43f9 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -354,3 +354,5 @@ - Finished Sass variable generation for `navigation` module in flavors page. - Added mixin parts to `progress` for flavors page. - 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. diff --git a/docs/v3/flavors.html b/docs/v3/flavors.html index 8c26562..fd698ad 100644 --- a/docs/v3/flavors.html +++ b/docs/v3/flavors.html @@ -219,16 +219,6 @@

Number of horizontal column partitions for the grid system (default 12)

-
- - -

Breakpoint between small and medium screens, in pixels

-
-
- - -

Breakpoint between medium and large screens, in pixels

-
Cards @@ -237,6 +227,16 @@

Width of normal cards, in pixels

+
+ + +

Width of small cards, in pixels

+
+
+ + +

Width of large cards, in pixels

+
@@ -260,6 +260,54 @@

Border color for cards

+
+ + + +

Foreground color for warning cards

+
+
+ + + +

Background color for warning cards

+
+
+ + + +

Border color for warning cards

+
+
+ + + +

Foreground color for error cards

+
+
+ + + +

Background color for error cards

+
+
+ + + +

Border color for error cards

+
+
+ + + +

Foreground color for card dark sections

+
+
+ + + +

Background color for card dark sections

+

Input control module

@@ -903,6 +951,14 @@ ['cardForeColor','cardForeColorPreview'], ['cardBackColor','cardBackColorPreview'], ['cardBorderColor','cardBorderColorPreview'], + ['cardWarningBackColor', 'cardWarningBackColorPreview'], + ['cardWarningForeColor', 'cardWarningForeColorPreview'], + ['cardWarningBorderColor', 'cardWarningBorderColorPreview'], + ['cardErrorBackColor', 'cardErrorBackColorPreview'], + ['cardErrorForeColor', 'cardErrorForeColorPreview'], + ['cardErrorBorderColor', 'cardErrorBorderColorPreview'], + ['cardDarkSectionBackColor', 'cardDarkSectionBackColorPreview'], + ['cardDarkSectionForeColor', 'cardDarkSectionForeColorPreview'], ['formForeColor','formForeColorPreview'], ['formBackColor','formBackColorPreview'], ['formBorderColor','formBorderColorPreview'], @@ -971,8 +1027,6 @@ ['genericBoxShadowColor','genericBoxShadowColorPreview'] ]; var autoUpdatePairs = [ - ['gridMediumBreakpoint', 'mobileBreakpoint'], - ['gridLargeBreakpoint', 'largeScreenBreakpoint'], ['cardForeColor', 'foreColor'], ['cardBackColor', 'backColor'], ['cardBorderColor', 'secondaryBorderColor'], @@ -1082,6 +1136,22 @@ }, layout : { enabled: document.getElementById('layoutEnabled').checked, + gridColumnCount: document.getElementById('gridColumnCount').value, + cardNormalWidth: document.getElementById('cardNormalWidth').value, + cardSectionMediaHeight: document.getElementById('cardSectionMediaHeight').value, + cardBackColor: document.getElementById('cardBackColor').value, + cardForeColor: document.getElementById('cardForeColor').value, + cardBorderColor: document.getElementById('cardBorderColor').value, + cardSmallWidth: document.getElementById('cardSmallWidth').value, + cardLargeWidth: document.getElementById('cardLargeWidth').value, + cardWarningBackColor: document.getElementById('cardWarningBackColor').value, + cardWarningForeColor: document.getElementById('cardWarningForeColor').value, + cardWarningBorderColor: document.getElementById('cardWarningBorderColor').value, + cardErrorBackColor: document.getElementById('cardErrorBackColor').value, + cardErrorForeColor: document.getElementById('cardErrorForeColor').value, + cardErrorBorderColor: document.getElementById('cardErrorBorderColor').value, + cardDarkSectionBackColor: document.getElementById('cardDarkSectionBackColor').value, + cardDarkSectionForeColor: document.getElementById('cardDarkSectionForeColor').value }, inputControl : { enabled: document.getElementById('inputControlEnabled').checked, @@ -1206,10 +1276,49 @@ flavorFile +='@import \'../mini/core\';\n'; flavorFile +='\n'; if(flavorData.layout.enabled){ - + flavorFile +='$grid-column-count: '+flavorData.layout.gridColumnCount+'; // Number of columns in the grid (integer value only).\n'; + flavorFile +='$grid-medium-breakpoint: $mobile-breakpoint; // Medium screen breakpoint for grid.\n'; + flavorFile +='$grid-large-breakpoint: $large-screen-breakpoint; // Large screen breakpoint for grid.\n'; + flavorFile +='$card-normal-width: '+flavorData.layout.cardNormalWidth+'px; // Width for normal cards.\n'; + flavorFile +='$card-section-media-height: '+flavorData.layout.cardSectionMediaHeight+'px; // Height for cards\' media sections.\n'; + flavorFile +='$card-fore-color: '+flavorData.layout.cardForeColor+'; // Text color for the cards.\n'; + flavorFile +='$card-back-color: '+flavorData.layout.cardBackColor+'; // Background color for the cards.\n'; + flavorFile +='$card-border-color: '+flavorData.layout.cardBorderColor+'; // Border color for the cards.\n'; flavorFile +='\n'; flavorFile +='@import \'../mini/layout\';\n'; flavorFile +='\n'; + flavorFile +='$card-small-name: \'small\'; // Class name for small cards.\n'; + flavorFile +='$card-small-width: '+flavorData.layout.cardSmallWidth+'px; // Width for small cards.\n'; + flavorFile +='@include make-card-alt-size ($card-small-name, $card-small-width);\n'; + flavorFile +='\n'; + flavorFile +='$card-large-name: \'large\'; // Class name for large cards.\n'; + flavorFile +='$card-large-width: '+flavorData.layout.cardLargeWidth+'px; // Width for large cards.\n'; + flavorFile +='@include make-card-alt-size ($card-large-name, $card-large-width);\n'; + flavorFile +='\n'; + flavorFile +='$card-fluid-name: \'fluid\'; // Class name for fluid cards.\n'; + flavorFile +='$card-fluid-width: 100%; // Width for fluid cards.\n'; + flavorFile +='@include make-card-alt-size ($card-fluid-name, $card-fluid-width);\n'; + flavorFile +='\n'; + flavorFile +='$card-warning-name: \'warning\'; // Class name for card warnging color variant.\n'; + flavorFile +='$card-warning-back-color: '+flavorData.layout.cardWarningBackColor+'; // Background color for card warnging color variant.\n'; + flavorFile +='$card-warning-fore-color: '+flavorData.layout.cardWarningForeColor+'; // Text color for card warnging color variant.\n'; + flavorFile +='$card-warning-border-color: '+flavorData.layout.cardWarningBorderColor+'; // Border style for card warnging color variant.\n'; + flavorFile +='@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);\n'; + flavorFile +='\n'; + flavorFile +='$card-error-name: \'error\'; // Class name for card error color variant.\n'; + flavorFile +='$card-error-back-color: '+flavorData.layout.cardErrorBackColor+'; // Background color for card error color variant.\n'; + flavorFile +='$card-error-fore-color: '+flavorData.layout.cardErrorForeColor+'; // Text color for card error color variant.\n'; + flavorFile +='$card-error-border-color: '+flavorData.layout.cardErrorBorderColor+'; // Border style for card error color variant.\n'; + flavorFile +='@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);\n'; + flavorFile +='\n'; + flavorFile +='$card-section-dark-name: \'dark\'; // Class name for card dark section variant.\n'; + flavorFile +='$card-section-dark-back-color: '+flavorData.layout.cardDarkSectionBackColor+'; // Background color for card dark section variant.\n'; + flavorFile +='$card-section-dark-fore-color: '+flavorData.layout.cardDarkSectionForeColor+'; // Text color for card dark section variant.\n'; + flavorFile +='@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);\n'; + flavorFile +='\n'; + 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'; } if(flavorData.inputControl.enabled){