diff --git a/docs/doc-fragments/buildYourOwnFlavor.js b/docs/doc-fragments/buildYourOwnFlavor.js index a6f7a61..0911d6f 100644 --- a/docs/doc-fragments/buildYourOwnFlavor.js +++ b/docs/doc-fragments/buildYourOwnFlavor.js @@ -315,13 +315,13 @@ module.exports = { -

Background color for buttons

+

Background color for buttons on hover

-

Border color for buttons

+

Border color for buttons on hover

@@ -331,6 +331,242 @@ module.exports = {
+

Navigation module

+

The Navigation module contains styling rules for headers, footers, navigation bars and menu drawers. This module is not always enabled, but it's recommended that you enable it, as it contains functionality that is useful for most designs and layouts.

+ +

Table module

+

The Table module contains styling rules for tables. This module is not always enabled and it's recommended to enable it only if you're planning to use tables for displaying data.

+
+
+ + +
+
+ Tables +
+ + +

Table max height, in pixels

+
+
+ + +

Font size of table captions, relative to root

+
+
+ + +

Attribute name for tables' mobile card labels

+
+
+ + +

Font weight for tables' mobile card labels (400 is normal, 700 is bold)

+
+
+ + + +

Border color for tables

+
+
+ + + +

Separator border color for tables

+
+
+ + + +

Foreground color for table headings

+
+
+ + + +

Background color for table headings

+
+
+ + + +

Foreground color for table data

+
+
+ + + +

Background color for table data

+
+
+ + + +

Alternative background color for table data

+
+
+ + + +

Background color for table data on hover

+
+
+

Icons module

The Icons module contains styling rules for icons. This module is not always enabled and it's recommended to enable it only if you're planning to use the icon set provided.

@@ -395,6 +631,7 @@ module.exports = { document.getElementById('headerForeColor').addEventListener('input', function(e){ updateColorPreview('headerForeColorPreview', e.target.value) }); document.getElementById('headerBackColor').addEventListener('input', function(e){ updateColorPreview('headerBackColorPreview', e.target.value) }); document.getElementById('headerBorderColor').addEventListener('input', function(e){ updateColorPreview('headerBorderColorPreview', e.target.value) }); + document.getElementById('headerHoverBackColor').addEventListener('input', function(e){ updateColorPreview('headerHoverBackColorPreview', e.target.value) }); document.getElementById('navForeColor').addEventListener('input', function(e){ updateColorPreview('navForeColorPreview', e.target.value) }); document.getElementById('navBackColor').addEventListener('input', function(e){ updateColorPreview('navBackColorPreview', e.target.value) }); document.getElementById('navHoverBackColor').addEventListener('input', function(e){ updateColorPreview('navHoverBackColorPreview', e.target.value) }); @@ -414,8 +651,8 @@ module.exports = { document.getElementById('thBackColor').addEventListener('input', function(e){ updateColorPreview('thBackColorPreview', e.target.value) }); document.getElementById('tdForeColor').addEventListener('input', function(e){ updateColorPreview('tdForeColorPreview', e.target.value) }); document.getElementById('tdBackColor').addEventListener('input', function(e){ updateColorPreview('tdBackColorPreview', e.target.value) }); - document.getElementById('tdAltForeColor').addEventListener('input', function(e){ updateColorPreview('tdAltForeColorPreview', e.target.value) }); document.getElementById('tdAltBackColor').addEventListener('input', function(e){ updateColorPreview('tdAltBackColorPreview', e.target.value) }); + document.getElementById('tdHoverBackColor').addEventListener('input', function(e){ updateColorPreview('tdHoverBackColorPreview', e.target.value) }); document.getElementById('markForeColor').addEventListener('input', function(e){ updateColorPreview('markForeColorPreview', e.target.value) }); document.getElementById('markBackColor').addEventListener('input', function(e){ updateColorPreview('markBackColorPreview', e.target.value) }); document.getElementById('toastForeColor').addEventListener('input', function(e){ updateColorPreview('toastForeColorPreview', e.target.value) }); diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index 435bfe6..7f47a36 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -325,3 +325,9 @@ - Coded the `input_control` module's inputs for the flavors page. - Coded the `icons` module's inputs for the flavors page. - Coded the `utility` module's inputs for the flavors page. + +## 20180505 + +- Hooked up all color-based events for the flavors page. +- Coded the `navigation` module's inputs for the flavors page. +- Coded the `table` module's inputs for the flavors page. diff --git a/docs/v3/flavors.html b/docs/v3/flavors.html index 2c40bf9..f2645e2 100644 --- a/docs/v3/flavors.html +++ b/docs/v3/flavors.html @@ -339,13 +339,13 @@ -

Background color for buttons

+

Background color for buttons on hover

-

Border color for buttons

+

Border color for buttons on hover

@@ -355,6 +355,242 @@
+

Navigation module

+

The Navigation module contains styling rules for headers, footers, navigation bars and menu drawers. This module is not always enabled, but it's recommended that you enable it, as it contains functionality that is useful for most designs and layouts.

+ +

Table module

+

The Table module contains styling rules for tables. This module is not always enabled and it's recommended to enable it only if you're planning to use tables for displaying data.

+
+
+ + +
+
+ Tables +
+ + +

Table max height, in pixels

+
+
+ + +

Font size of table captions, relative to root

+
+
+ + +

Attribute name for tables' mobile card labels

+
+
+ + +

Font weight for tables' mobile card labels (400 is normal, 700 is bold)

+
+
+ + + +

Border color for tables

+
+
+ + + +

Separator border color for tables

+
+
+ + + +

Foreground color for table headings

+
+
+ + + +

Background color for table headings

+
+
+ + + +

Foreground color for table data

+
+
+ + + +

Background color for table data

+
+
+ + + +

Alternative background color for table data

+
+
+ + + +

Background color for table data on hover

+
+
+

Icons module

The Icons module contains styling rules for icons. This module is not always enabled and it's recommended to enable it only if you're planning to use the icon set provided.

@@ -416,6 +652,51 @@ document.getElementById('buttonHoverBackColor').addEventListener('input', function(e){ updateColorPreview('buttonHoverBackColorPreview', e.target.value) }); document.getElementById('buttonHoverBorderColor').addEventListener('input', function(e){ updateColorPreview('buttonHoverBorderColorPreview', e.target.value) }); document.getElementById('buttonGroupBorderColor').addEventListener('input', function(e){ updateColorPreview('buttonGroupBorderColorPreview', e.target.value) }); + document.getElementById('headerForeColor').addEventListener('input', function(e){ updateColorPreview('headerForeColorPreview', e.target.value) }); + document.getElementById('headerBackColor').addEventListener('input', function(e){ updateColorPreview('headerBackColorPreview', e.target.value) }); + document.getElementById('headerBorderColor').addEventListener('input', function(e){ updateColorPreview('headerBorderColorPreview', e.target.value) }); + document.getElementById('headerHoverBackColor').addEventListener('input', function(e){ updateColorPreview('headerHoverBackColorPreview', e.target.value) }); + document.getElementById('navForeColor').addEventListener('input', function(e){ updateColorPreview('navForeColorPreview', e.target.value) }); + document.getElementById('navBackColor').addEventListener('input', function(e){ updateColorPreview('navBackColorPreview', e.target.value) }); + document.getElementById('navHoverBackColor').addEventListener('input', function(e){ updateColorPreview('navHoverBackColorPreview', e.target.value) }); + document.getElementById('navBorderColor').addEventListener('input', function(e){ updateColorPreview('navBorderColorPreview', e.target.value) }); + document.getElementById('navLinkColor').addEventListener('input', function(e){ updateColorPreview('navLinkColorPreview', e.target.value) }); + document.getElementById('footerForeColor').addEventListener('input', function(e){ updateColorPreview('footerForeColorPreview', e.target.value) }); + document.getElementById('footerBackColor').addEventListener('input', function(e){ updateColorPreview('footerBackColorPreview', e.target.value) }); + document.getElementById('footerBorderColor').addEventListener('input', function(e){ updateColorPreview('footerBorderColorPreview', e.target.value) }); + document.getElementById('footerLinkColor').addEventListener('input', function(e){ updateColorPreview('footerLinkColorPreview', e.target.value) }); + document.getElementById('drawerForeColor').addEventListener('input', function(e){ updateColorPreview('drawerForeColorPreview', e.target.value) }); + document.getElementById('drawerBackColor').addEventListener('input', function(e){ updateColorPreview('drawerBackColorPreview', e.target.value) }); + document.getElementById('drawerHoverBackColor').addEventListener('input', function(e){ updateColorPreview('drawerHoverBackColorPreview', e.target.value) }); + document.getElementById('drawerCloseColor').addEventListener('input', function(e){ updateColorPreview('drawerCloseColorPreview', e.target.value) }); + document.getElementById('tableBorderColor').addEventListener('input', function(e){ updateColorPreview('tableBorderColorPreview', e.target.value) }); + document.getElementById('tableBorderSeparatorColor').addEventListener('input', function(e){ updateColorPreview('tableBorderSeparatorColorPreview', e.target.value) }); + document.getElementById('thForeColor').addEventListener('input', function(e){ updateColorPreview('thForeColorPreview', e.target.value) }); + document.getElementById('thBackColor').addEventListener('input', function(e){ updateColorPreview('thBackColorPreview', e.target.value) }); + document.getElementById('tdForeColor').addEventListener('input', function(e){ updateColorPreview('tdForeColorPreview', e.target.value) }); + document.getElementById('tdBackColor').addEventListener('input', function(e){ updateColorPreview('tdBackColorPreview', e.target.value) }); + document.getElementById('tdAltBackColor').addEventListener('input', function(e){ updateColorPreview('tdAltBackColorPreview', e.target.value) }); + document.getElementById('tdHoverBackColor').addEventListener('input', function(e){ updateColorPreview('tdHoverBackColorPreview', e.target.value) }); + document.getElementById('markForeColor').addEventListener('input', function(e){ updateColorPreview('markForeColorPreview', e.target.value) }); + document.getElementById('markBackColor').addEventListener('input', function(e){ updateColorPreview('markBackColorPreview', e.target.value) }); + document.getElementById('toastForeColor').addEventListener('input', function(e){ updateColorPreview('toastForeColorPreview', e.target.value) }); + document.getElementById('toastBackColor').addEventListener('input', function(e){ updateColorPreview('toastBackColorPreview', e.target.value) }); + document.getElementById('tooltipForeColor').addEventListener('input', function(e){ updateColorPreview('tooltipForeColorPreview', e.target.value) }); + document.getElementById('tooltipBackColor').addEventListener('input', function(e){ updateColorPreview('tooltipBackColorPreview', e.target.value) }); + document.getElementById('modalOverlayColor').addEventListener('input', function(e){ updateColorPreview('modalOverlayColorPreview', e.target.value) }); + document.getElementById('modalCloseColor').addEventListener('input', function(e){ updateColorPreview('modalClosekColorPreview', e.target.value) }); + document.getElementById('modalHoverBackColor').addEventListener('input', function(e){ updateColorPreview('modalHoverBackColorPreview', e.target.value) }); + document.getElementById('collapseContentBackColor').addEventListener('input', function(e){ updateColorPreview('collapseContentBackColorPreview', e.target.value) }); + document.getElementById('collapseLabelForeColor').addEventListener('input', function(e){ updateColorPreview('collapseLabelForeColorPreview', e.target.value) }); + document.getElementById('collapseLabelBackColor').addEventListener('input', function(e){ updateColorPreview('collapseLabelBackColorPreview', e.target.value) }); + document.getElementById('collapseLabelHoverBackColor').addEventListener('input', function(e){ updateColorPreview('collapseLabelHoverBackColorPreview', e.target.value) }); + document.getElementById('collapseSelectedLabelBackColor').addEventListener('input', function(e){ updateColorPreview('collapseSelectedLabelBackColorPreview', e.target.value) }); + document.getElementById('collapseBorderColor').addEventListener('input', function(e){ updateColorPreview('collapseBorderColorPreview', e.target.value) }); + document.getElementById('collapseSelectedLabelBorderColor').addEventListener('input', function(e){ updateColorPreview('collapseSelectedLabelBorderColorPreview', e.target.value) }); + document.getElementById('progressForeColor').addEventListener('input', function(e){ updateColorPreview('progressForeColorPreview', e.target.value) }); + document.getElementById('progressBackColor').addEventListener('input', function(e){ updateColorPreview('progressBackColorPreview', e.target.value) }); + document.getElementById('spinnerDonutForeColor').addEventListener('input', function(e){ updateColorPreview('spinnerDonutForeColorPreview', e.target.value) }); + document.getElementById('spinnerDonutBackColor').addEventListener('input', function(e){ updateColorPreview('spinnerDonutBackColorPreview', e.target.value) }); document.getElementById('genericBorderColor').addEventListener('input', function(e){ updateColorPreview('genericBorderColorPreview', e.target.value) }); document.getElementById('genericBoxShadowColor').addEventListener('input', function(e){ updateColorPreview('genericBoxShadowColorPreview', e.target.value) }); }