beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Flavor generation for navigation

Browse source
This commit is contained in:
Angelos Chalaris 2018-05-19 11:15:19 +03:00
parent 9f345bbf16
commit 3ed78963c0
4 changed files with 107 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
docs/doc-fragments/buildYourOwnFlavor.js
View file

@ -346,8 +346,8 @@ module.exports = {
<fieldset>
<legend id="header">Header</legend>
<div class="input-group vertical">
<label for="headerheight">Header height (rem):</label>
<input type="number" id="headerheight" style="width:calc(100% - 0.5rem);" value="3.1875" min="0.0001" step="0.0001" autocomplete="off"/>
<label for="headerHeight">Header height (rem):</label>
<input type="number" id="headerHeight" style="width:calc(100% - 0.5rem);" value="3.1875" min="0.0001" step="0.0001" autocomplete="off"/>
<p><small>Height for header elements, relative to root</small></p>
</div>
<div class="input-group vertical">
@ -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';

1
docs/v3/DEVLOG.md
View file

@ -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.

58
docs/v3/flavors.html
View file

@ -370,8 +370,8 @@
<fieldset>
<legend id="header">Header</legend>
<div class="input-group vertical">
<label for="headerheight">Header height (rem):</label>
<input type="number" id="headerheight" style="width:calc(100% - 0.5rem);" value="3.1875" min="0.0001" step="0.0001" autocomplete="off"/>
<label for="headerHeight">Header height (rem):</label>
<input type="number" id="headerHeight" style="width:calc(100% - 0.5rem);" value="3.1875" min="0.0001" step="0.0001" autocomplete="off"/>
<p><small>Height for header elements, relative to root</small></p>
</div>
<div class="input-group vertical">
@ -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';

1
src/mini/_navigation.scss
View file

@ -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;