From 149979fe224abe1888b664482cca130a71d58b25 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sat, 19 May 2018 11:01:09 +0300 Subject: [PATCH] Flavor generation for table --- docs/doc-fragments/buildYourOwnFlavor.js | 31 +++++++++++++++++++++--- docs/v3/DEVLOG.md | 1 + docs/v3/flavors.html | 31 +++++++++++++++++++++--- 3 files changed, 55 insertions(+), 8 deletions(-) diff --git a/docs/doc-fragments/buildYourOwnFlavor.js b/docs/doc-fragments/buildYourOwnFlavor.js index bd5fa38..bb468ba 100644 --- a/docs/doc-fragments/buildYourOwnFlavor.js +++ b/docs/doc-fragments/buildYourOwnFlavor.js @@ -1025,6 +1025,18 @@ module.exports = { }, table : { enabled: document.getElementById('tableEnabled').checked, + maxHeight: document.getElementById('maxHeight').value, + captionFontSize: document.getElementById('captionFontSize').value, + mobileCardLabel: document.getElementById('mobileCardLabel').value, + mobileLabelFontWeight: document.getElementById('mobileLabelFontWeight').value, + tableBorderColor: document.getElementById('tableBorderColor').value, + tableBorderSeparatorColor: document.getElementById('tableBorderSeparatorColor').value, + thBackColor: document.getElementById('thBackColor').value, + thForeColor: document.getElementById('thForeColor').value, + tdBackColor: document.getElementById('tdBackColor').value, + tdForeColor: document.getElementById('tdForeColor').value, + tdAltBackColor: document.getElementById('tdAltBackColor').value, + tdHoverBackColor: document.getElementById('tdHoverBackColor').value, }, contextual : { enabled: document.getElementById('contextualEnabled').checked, @@ -1083,8 +1095,8 @@ module.exports = { flavorFile +='$a-link-color: '+flavorData.core.aLinkColor+'; // Color for :link\\n'; flavorFile +='$a-visited-color: '+flavorData.core.aVisitedColor+'; // Color for :visited\\n'; flavorFile +='$bold-font-weight: '+flavorData.core.boldFontWeight+'; // Font weight for and \\n'; - flavorFile +='$mobile-breakpoint: '+flavorData.core.mobileBreakpoint+'; // Breakpoint between small and medium screens (px)\\n'; - flavorFile +='$large-screen-breakpoint: '+flavorData.core.largeScreenBreakpoint+'; // Breakpoint between medium and large screens (px)\\n'; + flavorFile +='$mobile-breakpoint: '+flavorData.core.mobileBreakpoint+'px; // Breakpoint between small and medium screens (px)\\n'; + flavorFile +='$large-screen-breakpoint: '+flavorData.core.largeScreenBreakpoint+'px; // Breakpoint between medium and large screens (px)\\n'; flavorFile +='\\n'; flavorFile +='@import \\'../mini/core\\';\\n'; flavorFile +='\\n'; @@ -1107,7 +1119,19 @@ module.exports = { flavorFile +='\\n'; } if(flavorData.table.enabled){ - + flavorFile +='$table-mobile-breakpoint: $mobile-breakpoint; // Breakpoint for mobile view.\\n'; + flavorFile +='$table-max-height: '+flavorData.table.maxHeight+'px; // Maximum height of
elements (non-horizontal).\\n'; + flavorFile +='$table-caption-font-size: '+flavorData.table.captionFontSize+'rem; // Font size for
elements.\\n'; + flavorFile +='$table-mobile-card-label: \\''+flavorData.table.mobileCardLabel+'\\'; // Attribute used to replace column headers in mobile view.\\n'; + flavorFile +='$table-mobile-label-font-weight: '+flavorData.table.mobileLabelFontWeight+'; // Font weight for column header labels in mobile view.\\n'; + flavorFile +='$table-border-color: '+flavorData.table.tableBorderColor+'; // Border color for elements.\\n'; + flavorFile +='$table-border-separator-color: '+flavorData.table.tableBorderSeparatorColor+'; // Border color for the border between and .\\n'; + flavorFile +='$table-th-back-color: '+flavorData.table.thBackColor+'; // Background color for
elements.\\n'; + flavorFile +='$table-th-fore-color: '+flavorData.table.thForeColor+'; // Text color for elements.\\n'; + flavorFile +='$table-td-back-color: '+flavorData.table.tdBackColor+'; // Background color for elements.\\n'; + flavorFile +='$table-td-fore-color: '+flavorData.table.tdForeColor+'; // Text color for elements.\\n'; + flavorFile +='$table-td-alt-back-color: '+flavorData.table.tdAltBackColor+'; // Alternative background color for elements in striped tables.\\n'; + flavorFile +='$table-td-hover-back-color: '+flavorData.table.tdHoverBackColor+'; // Hover background color for elements in hoverable tables.\\n'; flavorFile +='\\n'; flavorFile +='@import \\'../mini/table\\';\\n'; flavorFile +='\\n'; @@ -1130,7 +1154,6 @@ module.exports = { flavorFile +='\\n'; } if(flavorData.utility.enabled){ - flavorFile +='$box-shadow-generic: 0 4*$__1px 4*$__1px 0 '+flavorData.utility.genericBoxShadowColor+', 0 2*$__1px 2*$__1px -2*$__1px '+flavorData.utility.genericBoxShadowColor+';\\n'; flavorFile +='$border-generic-color: '+flavorData.utility.genericBorderColor+'; // Border color for bordered elements.\\n'; flavorFile +='\\n'; diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index a6e4510..9ac6394 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -350,3 +350,4 @@ - Finished Sass variable generation for `core` module in flavors page. - Finished Sass variable generation for `icon` module in flavors page. - Finished Sass variable generation for `utility` module in flavors page. +- Finished Sass variable generation for `table` module in flavors page. diff --git a/docs/v3/flavors.html b/docs/v3/flavors.html index 681b2bb..132b1e0 100644 --- a/docs/v3/flavors.html +++ b/docs/v3/flavors.html @@ -1049,6 +1049,18 @@ }, table : { enabled: document.getElementById('tableEnabled').checked, + maxHeight: document.getElementById('maxHeight').value, + captionFontSize: document.getElementById('captionFontSize').value, + mobileCardLabel: document.getElementById('mobileCardLabel').value, + mobileLabelFontWeight: document.getElementById('mobileLabelFontWeight').value, + tableBorderColor: document.getElementById('tableBorderColor').value, + tableBorderSeparatorColor: document.getElementById('tableBorderSeparatorColor').value, + thBackColor: document.getElementById('thBackColor').value, + thForeColor: document.getElementById('thForeColor').value, + tdBackColor: document.getElementById('tdBackColor').value, + tdForeColor: document.getElementById('tdForeColor').value, + tdAltBackColor: document.getElementById('tdAltBackColor').value, + tdHoverBackColor: document.getElementById('tdHoverBackColor').value, }, contextual : { enabled: document.getElementById('contextualEnabled').checked, @@ -1107,8 +1119,8 @@ flavorFile +='$a-link-color: '+flavorData.core.aLinkColor+'; // Color for :link\n'; flavorFile +='$a-visited-color: '+flavorData.core.aVisitedColor+'; // Color for :visited\n'; flavorFile +='$bold-font-weight: '+flavorData.core.boldFontWeight+'; // Font weight for and \n'; - flavorFile +='$mobile-breakpoint: '+flavorData.core.mobileBreakpoint+'; // Breakpoint between small and medium screens (px)\n'; - flavorFile +='$large-screen-breakpoint: '+flavorData.core.largeScreenBreakpoint+'; // Breakpoint between medium and large screens (px)\n'; + flavorFile +='$mobile-breakpoint: '+flavorData.core.mobileBreakpoint+'px; // Breakpoint between small and medium screens (px)\n'; + flavorFile +='$large-screen-breakpoint: '+flavorData.core.largeScreenBreakpoint+'px; // Breakpoint between medium and large screens (px)\n'; flavorFile +='\n'; flavorFile +='@import \'../mini/core\';\n'; flavorFile +='\n'; @@ -1131,7 +1143,19 @@ flavorFile +='\n'; } if(flavorData.table.enabled){ - + flavorFile +='$table-mobile-breakpoint: $mobile-breakpoint; // Breakpoint for mobile view.\n'; + flavorFile +='$table-max-height: '+flavorData.table.maxHeight+'px; // Maximum height of
elements (non-horizontal).\n'; + flavorFile +='$table-caption-font-size: '+flavorData.table.captionFontSize+'rem; // Font size for
elements.\n'; + flavorFile +='$table-mobile-card-label: \''+flavorData.table.mobileCardLabel+'\'; // Attribute used to replace column headers in mobile view.\n'; + flavorFile +='$table-mobile-label-font-weight: '+flavorData.table.mobileLabelFontWeight+'; // Font weight for column header labels in mobile view.\n'; + flavorFile +='$table-border-color: '+flavorData.table.tableBorderColor+'; // Border color for elements.\n'; + flavorFile +='$table-border-separator-color: '+flavorData.table.tableBorderSeparatorColor+'; // Border color for the border between and .\n'; + flavorFile +='$table-th-back-color: '+flavorData.table.thBackColor+'; // Background color for
elements.\n'; + flavorFile +='$table-th-fore-color: '+flavorData.table.thForeColor+'; // Text color for elements.\n'; + flavorFile +='$table-td-back-color: '+flavorData.table.tdBackColor+'; // Background color for elements.\n'; + flavorFile +='$table-td-fore-color: '+flavorData.table.tdForeColor+'; // Text color for elements.\n'; + flavorFile +='$table-td-alt-back-color: '+flavorData.table.tdAltBackColor+'; // Alternative background color for elements in striped tables.\n'; + flavorFile +='$table-td-hover-back-color: '+flavorData.table.tdHoverBackColor+'; // Hover background color for elements in hoverable tables.\n'; flavorFile +='\n'; flavorFile +='@import \'../mini/table\';\n'; flavorFile +='\n'; @@ -1154,7 +1178,6 @@ flavorFile +='\n'; } if(flavorData.utility.enabled){ - flavorFile +='$box-shadow-generic: 0 4*$__1px 4*$__1px 0 '+flavorData.utility.genericBoxShadowColor+', 0 2*$__1px 2*$__1px -2*$__1px '+flavorData.utility.genericBoxShadowColor+';\n'; flavorFile +='$border-generic-color: '+flavorData.utility.genericBorderColor+'; // Border color for bordered elements.\n'; flavorFile +='\n';