From 3ed78963c00b45f297719fd178ed2e7ddaa1f577 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sat, 19 May 2018 11:15:19 +0300 Subject: [PATCH] Flavor generation for navigation --- docs/doc-fragments/buildYourOwnFlavor.js | 58 ++++++++++++++++++++++-- docs/v3/DEVLOG.md | 1 + docs/v3/flavors.html | 58 ++++++++++++++++++++++-- src/mini/_navigation.scss | 1 - 4 files changed, 107 insertions(+), 11 deletions(-) diff --git a/docs/doc-fragments/buildYourOwnFlavor.js b/docs/doc-fragments/buildYourOwnFlavor.js index bb468ba..a8dde3a 100644 --- a/docs/doc-fragments/buildYourOwnFlavor.js +++ b/docs/doc-fragments/buildYourOwnFlavor.js @@ -346,8 +346,8 @@ module.exports = {
Header
- - + +

Height for header elements, relative to root

@@ -1012,7 +1012,7 @@ module.exports = { aLinkColor: document.getElementById('aLinkColor').value, aVisitedColor: document.getElementById('aVisitedColor').value, mobileBreakpoint: document.getElementById('mobileBreakpoint').value, - largeScreenBreakpoint: document.getElementById('largeScreenBreakpoint').value, + largeScreenBreakpoint: document.getElementById('largeScreenBreakpoint').value }, layout : { enabled: document.getElementById('layoutEnabled').checked, @@ -1022,6 +1022,30 @@ module.exports = { }, navigation : { enabled: document.getElementById('navigationEnabled').checked, + headerHeight: document.getElementById('headerHeight').value, + headerBackColor: document.getElementById('headerBackColor').value, + headerHoverBackColor: document.getElementById('headerHoverBackColor').value, + headerForeColor: document.getElementById('headerForeColor').value, + headerBorderColor: document.getElementById('headerBorderColor').value, + navBackColor: document.getElementById('navBackColor').value, + navHoverBackColor: document.getElementById('navHoverBackColor').value, + navForeColor: document.getElementById('navForeColor').value, + navBorderColor: document.getElementById('navBorderColor').value, + navLinkColor: document.getElementById('navLinkColor').value, + footerForeColor: document.getElementById('footerForeColor').value, + footerBackColor: document.getElementById('footerBackColor').value, + footerBorderColor: document.getElementById('footerBorderColor').value, + footerLinkColor: document.getElementById('footerLinkColor').value, + drawerBackColor: document.getElementById('drawerBackColor').value, + drawerBorderColor: document.getElementById('drawerBorderColor').value, + drawerHoverBackColor: document.getElementById('drawerHoverBackColor').value, + drawerCloseColor: document.getElementById('drawerCloseColor').value, + headerLogoFontSize: document.getElementById('headerLogoFontSize').value, + navSublinkDepth: document.getElementById('navSublinkDepth').value, + footerFontSize: document.getElementById('footerFontSize').value, + drawerToggleFontSize: document.getElementById('drawerToggleFontSize').value, + drawerWidth: document.getElementById('drawerWidth').value, + drawerCloseSize: document.getElementById('drawerCloseSize').value }, table : { enabled: document.getElementById('tableEnabled').checked, @@ -1036,7 +1060,7 @@ module.exports = { tdBackColor: document.getElementById('tdBackColor').value, tdForeColor: document.getElementById('tdForeColor').value, tdAltBackColor: document.getElementById('tdAltBackColor').value, - tdHoverBackColor: document.getElementById('tdHoverBackColor').value, + tdHoverBackColor: document.getElementById('tdHoverBackColor').value }, contextual : { enabled: document.getElementById('contextualEnabled').checked, @@ -1113,7 +1137,31 @@ module.exports = { flavorFile +='\\n'; } if(flavorData.navigation.enabled){ - + flavorFile +='$header-height: '+flavorData.navigation.headerHeight+'rem; // Height of the header element.\\n'; + flavorFile +='$header-back-color: '+flavorData.navigation.headerBackColor+'; // Background color for the header element.\\n'; + flavorFile +='$header-hover-back-color: '+flavorData.navigation.headerHoverBackColor+'; // Background color for the header element (hover).\\n'; + flavorFile +='$header-fore-color: '+flavorData.navigation.headerForeColor+'; // Text color for the header element.\\n'; + flavorFile +='$header-border-color: '+flavorData.navigation.headerBorderColor+'; // Border color for the header element.\\n'; + flavorFile +='$nav-back-color: '+flavorData.navigation.navBackColor+'; // Background color for the nav element.\\n'; + flavorFile +='$nav-hover-back-color: '+flavorData.navigation.navHoverBackColor+'; // Background color for the nav element (hover).\\n'; + flavorFile +='$nav-fore-color: '+flavorData.navigation.navForeColor+'; // Text color for the nav element.\\n'; + flavorFile +='$nav-border-color: '+flavorData.navigation.navBorderColor+'; // Border color for the nav element.\\n'; + flavorFile +='$nav-link-color: '+flavorData.navigation.navLinkColor+'; / Color for link in the nav element.\\n'; + flavorFile +='$footer-fore-color: '+flavorData.navigation.footerForeColor+'; // Text color for the footer element.\\n'; + flavorFile +='$footer-back-color: '+flavorData.navigation.footerBackColor+'; // Background color for footer nav element.\\n'; + flavorFile +='$footer-border-color: '+flavorData.navigation.footerBorderColor+'; // Border color for the footer element.\\n'; + flavorFile +='$footer-link-color: '+flavorData.navigation.footerLinkColor+'; // Color for link in the footer element.\\n'; + flavorFile +='$drawer-back-color: '+flavorData.navigation.drawerBackColor+'; // Background color for the drawer component.\\n'; + flavorFile +='$drawer-border-color: '+flavorData.navigation.drawerBorderColor+'; // Border color for the drawer component.\\n'; + flavorFile +='$drawer-hover-back-color: '+flavorData.navigation.drawerHoverBackColor+'; // Background color for the drawer component\\'s close (hover).\\n'; + flavorFile +='$drawer-close-color: '+flavorData.navigation.drawerCloseColor+'; // Color of the close element for the drawer component.\\n'; + flavorFile +='$header-logo-font-size: '+flavorData.navigation.headerLogoFontSize+'rem; // Font size for the header logo element.\\n'; + flavorFile +='$nav-sublink-depth: '+flavorData.navigation.navSublinkDepth+'; // Amount of subcategory classes to add.\\n'; + flavorFile +='$footer-font-size: '+flavorData.navigation.footerFontSize+'rem; // Font size for text in footer element.\\n'; + flavorFile +='$drawer-toggle-font-size: '+flavorData.navigation.drawerToggleFontSize+'em; // Font size for the drawer component\\'s toggle. (prefer em units)\\n'; + flavorFile +='$drawer-width: '+flavorData.navigation.drawerWidth+'px; // Width of the drawer component.\\n'; + flavorFile +='$drawer-close-size: '+flavorData.navigation.drawerCloseSize+'rem; // Size of the close element for the drawer component.\\n'; + flavorFile +='$drawer-mobile-breakpoint: $mobile-breakpoint; // Mobile breakpoint for the drawer component.\\n'; flavorFile +='\\n'; flavorFile +='@import \\'../mini/navigation\\';\\n'; flavorFile +='\\n'; diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index 9ac6394..f37aca8 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -351,3 +351,4 @@ - 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. +- Finished Sass variable generation for `navigation` module in flavors page. diff --git a/docs/v3/flavors.html b/docs/v3/flavors.html index 132b1e0..9219ccd 100644 --- a/docs/v3/flavors.html +++ b/docs/v3/flavors.html @@ -370,8 +370,8 @@
Header
- - + +

Height for header elements, relative to root

@@ -1036,7 +1036,7 @@ aLinkColor: document.getElementById('aLinkColor').value, aVisitedColor: document.getElementById('aVisitedColor').value, mobileBreakpoint: document.getElementById('mobileBreakpoint').value, - largeScreenBreakpoint: document.getElementById('largeScreenBreakpoint').value, + largeScreenBreakpoint: document.getElementById('largeScreenBreakpoint').value }, layout : { enabled: document.getElementById('layoutEnabled').checked, @@ -1046,6 +1046,30 @@ }, navigation : { enabled: document.getElementById('navigationEnabled').checked, + headerHeight: document.getElementById('headerHeight').value, + headerBackColor: document.getElementById('headerBackColor').value, + headerHoverBackColor: document.getElementById('headerHoverBackColor').value, + headerForeColor: document.getElementById('headerForeColor').value, + headerBorderColor: document.getElementById('headerBorderColor').value, + navBackColor: document.getElementById('navBackColor').value, + navHoverBackColor: document.getElementById('navHoverBackColor').value, + navForeColor: document.getElementById('navForeColor').value, + navBorderColor: document.getElementById('navBorderColor').value, + navLinkColor: document.getElementById('navLinkColor').value, + footerForeColor: document.getElementById('footerForeColor').value, + footerBackColor: document.getElementById('footerBackColor').value, + footerBorderColor: document.getElementById('footerBorderColor').value, + footerLinkColor: document.getElementById('footerLinkColor').value, + drawerBackColor: document.getElementById('drawerBackColor').value, + drawerBorderColor: document.getElementById('drawerBorderColor').value, + drawerHoverBackColor: document.getElementById('drawerHoverBackColor').value, + drawerCloseColor: document.getElementById('drawerCloseColor').value, + headerLogoFontSize: document.getElementById('headerLogoFontSize').value, + navSublinkDepth: document.getElementById('navSublinkDepth').value, + footerFontSize: document.getElementById('footerFontSize').value, + drawerToggleFontSize: document.getElementById('drawerToggleFontSize').value, + drawerWidth: document.getElementById('drawerWidth').value, + drawerCloseSize: document.getElementById('drawerCloseSize').value }, table : { enabled: document.getElementById('tableEnabled').checked, @@ -1060,7 +1084,7 @@ tdBackColor: document.getElementById('tdBackColor').value, tdForeColor: document.getElementById('tdForeColor').value, tdAltBackColor: document.getElementById('tdAltBackColor').value, - tdHoverBackColor: document.getElementById('tdHoverBackColor').value, + tdHoverBackColor: document.getElementById('tdHoverBackColor').value }, contextual : { enabled: document.getElementById('contextualEnabled').checked, @@ -1137,7 +1161,31 @@ flavorFile +='\n'; } if(flavorData.navigation.enabled){ - + flavorFile +='$header-height: '+flavorData.navigation.headerHeight+'rem; // Height of the header element.\n'; + flavorFile +='$header-back-color: '+flavorData.navigation.headerBackColor+'; // Background color for the header element.\n'; + flavorFile +='$header-hover-back-color: '+flavorData.navigation.headerHoverBackColor+'; // Background color for the header element (hover).\n'; + flavorFile +='$header-fore-color: '+flavorData.navigation.headerForeColor+'; // Text color for the header element.\n'; + flavorFile +='$header-border-color: '+flavorData.navigation.headerBorderColor+'; // Border color for the header element.\n'; + flavorFile +='$nav-back-color: '+flavorData.navigation.navBackColor+'; // Background color for the nav element.\n'; + flavorFile +='$nav-hover-back-color: '+flavorData.navigation.navHoverBackColor+'; // Background color for the nav element (hover).\n'; + flavorFile +='$nav-fore-color: '+flavorData.navigation.navForeColor+'; // Text color for the nav element.\n'; + flavorFile +='$nav-border-color: '+flavorData.navigation.navBorderColor+'; // Border color for the nav element.\n'; + flavorFile +='$nav-link-color: '+flavorData.navigation.navLinkColor+'; / Color for link in the nav element.\n'; + flavorFile +='$footer-fore-color: '+flavorData.navigation.footerForeColor+'; // Text color for the footer element.\n'; + flavorFile +='$footer-back-color: '+flavorData.navigation.footerBackColor+'; // Background color for footer nav element.\n'; + flavorFile +='$footer-border-color: '+flavorData.navigation.footerBorderColor+'; // Border color for the footer element.\n'; + flavorFile +='$footer-link-color: '+flavorData.navigation.footerLinkColor+'; // Color for link in the footer element.\n'; + flavorFile +='$drawer-back-color: '+flavorData.navigation.drawerBackColor+'; // Background color for the drawer component.\n'; + flavorFile +='$drawer-border-color: '+flavorData.navigation.drawerBorderColor+'; // Border color for the drawer component.\n'; + flavorFile +='$drawer-hover-back-color: '+flavorData.navigation.drawerHoverBackColor+'; // Background color for the drawer component\'s close (hover).\n'; + flavorFile +='$drawer-close-color: '+flavorData.navigation.drawerCloseColor+'; // Color of the close element for the drawer component.\n'; + flavorFile +='$header-logo-font-size: '+flavorData.navigation.headerLogoFontSize+'rem; // Font size for the header logo element.\n'; + flavorFile +='$nav-sublink-depth: '+flavorData.navigation.navSublinkDepth+'; // Amount of subcategory classes to add.\n'; + flavorFile +='$footer-font-size: '+flavorData.navigation.footerFontSize+'rem; // Font size for text in footer element.\n'; + flavorFile +='$drawer-toggle-font-size: '+flavorData.navigation.drawerToggleFontSize+'em; // Font size for the drawer component\'s toggle. (prefer em units)\n'; + flavorFile +='$drawer-width: '+flavorData.navigation.drawerWidth+'px; // Width of the drawer component.\n'; + flavorFile +='$drawer-close-size: '+flavorData.navigation.drawerCloseSize+'rem; // Size of the close element for the drawer component.\n'; + flavorFile +='$drawer-mobile-breakpoint: $mobile-breakpoint; // Mobile breakpoint for the drawer component.\n'; flavorFile +='\n'; flavorFile +='@import \'../mini/navigation\';\n'; flavorFile +='\n'; diff --git a/src/mini/_navigation.scss b/src/mini/_navigation.scss index 8bcaea2..630176c 100644 --- a/src/mini/_navigation.scss +++ b/src/mini/_navigation.scss @@ -38,7 +38,6 @@ $drawer-persistent-name: 'persistent' !default; // Class name for the persisten $drawer-width: 320px !default; // Width of the drawer component. $drawer-close-name: 'drawer-close' !default; // Class name of the close element for the drawer component. $drawer-close-size: 2rem !default; // Size of the close element for the drawer component. -$drawer-icons-color: #212121 !default; // Color for the icons used in the drawer component. // CSS variable name definitions [exercise caution if modifying these] $header-fore-color-var: '--header-fore-color' !default; $header-back-color-var: '--header-back-color' !default;