From 03a1109bdd5c46a257901a8d0d9cfb30756aca18 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Tue, 15 May 2018 19:06:44 +0300
Subject: [PATCH] Inputs for the progress module flavor controls

---
 docs/doc-fragments/buildYourOwnFlavor.js | 65 +++++++++++++++++++++++-
 docs/v3/DEVLOG.md                        |  1 +
 docs/v3/flavors.html                     | 65 +++++++++++++++++++++++-
 3 files changed, 129 insertions(+), 2 deletions(-)

diff --git a/docs/doc-fragments/buildYourOwnFlavor.js b/docs/doc-fragments/buildYourOwnFlavor.js
index 1b846cc..556db7b 100644
--- a/docs/doc-fragments/buildYourOwnFlavor.js
+++ b/docs/doc-fragments/buildYourOwnFlavor.js
@@ -742,6 +742,69 @@ module.exports = {
         </div>
       </fieldset>
     </form>
+    <h3>Progress module</h3>
+    <p>The <strong>Progress</strong> module contains styling rules for progress bars and donut spinners. 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.</p>
+    <form id="progress">
+      <div class="input-group">
+        <label for="progressEnabled">Module enabled?</label>
+        <input type="checkbox" autocomplete="off" checked id="progressEnabled"/>
+      </div>
+      <fieldset>
+        <legend id="progress-bars">Progress bars</legend>
+        <div class="input-group vertical">
+          <label for="progressHeight">Progress bar height (rem):</label>
+          <input type="number" id="progressHeight" style="width:calc(100% - 0.5rem);" value="0.75" min="0.001" step="0.001"/>
+          <p><small>Height of progress bars, relative to root</small></p>
+        </div>
+        <div class="input-group vertical">
+          <label for="progressForeColor">Progress bar foreground color:</label>
+          <input type="text" id="progressForeColor" value="#555" autocomplete="off"/>
+          <span id="progressForeColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#555; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
+          <p style="margin-top: -1rem"><small>Foreground color for progress bars</small></p>
+        </div>
+        <div class="input-group vertical">
+          <label for="progressBackColor">Progress bar background color:</label>
+          <input type="text" id="progressBackColor" value="#ddd" autocomplete="off"/>
+          <span id="progressBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#ddd; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
+          <p style="margin-top: -1rem"><small>Background color for progress bars</small></p>
+        </div>
+        <div class="input-group vertical">
+          <label for="progressMaxValue">Progress bar maximum value:</label>
+          <input type="number" id="progressMaxValue" style="width:calc(100% - 0.5rem);" value="1000" min="2"/>
+          <p><small>Maximum value for progress bars</small></p>
+        </div>
+        <div class="input-group vertical">
+          <label for="progressInlineWidth">Progress bar inline width (%):</label>
+          <input type="number" id="progressInlineWidth" style="width:calc(100% - 0.5rem);" value="60" min="0.01" step="0.001"/>
+          <p><small>Width for inline progress bars, in percentage</small></p>
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend id="donut-spinner">Donut spinners</legend>
+        <div class="input-group vertical">
+          <label for="spinnerDonutSize">Donut spinner size (rem):</label>
+          <input type="number" id="spinnerDonutSize" style="width:calc(100% - 0.5rem);" value="1.25" min="0.001" step="0.001"/>
+          <p><small>Size of donut spinners, relative to root</small></p>
+        </div>
+        <div class="input-group vertical">
+          <label for="spinnerDonutBorderThickness">Donut spinner thickness (rem):</label>
+          <input type="number" id="spinnerDonutBorderThickness" style="width:calc(100% - 0.5rem);" value="0.25" min="0.001" step="0.001"/>
+          <p><small>Thickness of donut spinners, relative to root</small></p>
+        </div>
+        <div class="input-group vertical">
+          <label for="spinnerDonutForeColor">Donut spinner foreground color:</label>
+          <input type="text" id="spinnerDonutForeColor" value="#555" autocomplete="off"/>
+          <span id="spinnerDonutForeColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#555; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
+          <p style="margin-top: -1rem"><small>Foreground color for donut spinners</small></p>
+        </div>
+        <div class="input-group vertical">
+          <label for="spinnerDonutBackColor">Donut spinner background color:</label>
+          <input type="text" id="spinnerDonutBackColor" value="#ddd" autocomplete="off"/>
+          <span id="spinnerDonutBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#ddd; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
+          <p style="margin-top: -1rem"><small>Background color for donut spinners</small></p>
+        </div>
+      </fieldset>
+    </form>
   </div>
   <script>
     window.onload = function(){
@@ -840,7 +903,7 @@ module.exports = {
       {id: 'tooltips', title: 'Tooltips'},
       {id: 'modals', title: 'Modal dialogs'},
       {id: 'collapse', title: 'Spoilers &amp accordions'},
-    {id: 'progress', title: 'Progress bars'},
+    {id: 'progress-bars', title: 'Progress bars'},
     {id: 'donut-spinner', title: 'Donut spinners'},
       {id: 'icons', title: 'Icons'},
     {id: 'utility', title: 'Utilities'}
diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md
index 1d79cd0..52f16c6 100644
--- a/docs/v3/DEVLOG.md
+++ b/docs/v3/DEVLOG.md
@@ -335,3 +335,4 @@
 ## 20180515
 
 - Coded the `contextual` module's inputs for the flavors page.
+- Coded the `progress` module's inputs for the flavors page.
diff --git a/docs/v3/flavors.html b/docs/v3/flavors.html
index e6fa5d9..f534d66 100644
--- a/docs/v3/flavors.html
+++ b/docs/v3/flavors.html
@@ -22,7 +22,7 @@
 </header>
 <div class="row" id="doc-wrapper">
     <input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
-<nav class="col-md-4 col-lg-3" id="nav-drawer"><h3>Menu</h3><label for="doc-drawer-checkbox" class="button drawer-close"></label><a href="#prebuilt-flavors" id="link-to-prebuilt-flavors">Prebuilt flavors</a><hr style="padding:0;"/><a href="#textual-content" id="link-to-textual-content">Textual content</a><a href="#color-palette" id="link-to-color-palette">Color palette</a><a href="#universal-styles" id="link-to-universal-styles">Universal styles</a><a href="#grid" id="link-to-grid">Grid</a><a href="#cards" id="link-to-cards">Cards</a><a href="#forms-and-input" id="link-to-forms-and-input">Forms &amp; input</a><a href="#buttons" id="link-to-buttons">Buttons</a><a href="#header" id="link-to-header">Header</a><a href="#navbar" id="link-to-navbar">Navigation bar</a><a href="#footer" id="link-to-footer">Footer</a><a href="#menu-drawer" id="link-to-menu-drawer">Menu drawer</a><a href="#tables" id="link-to-tables">Tables</a><a href="#text-highlighting" id="link-to-text-highlighting">Text highlighting</a><a href="#toasts" id="link-to-toasts">Toasts</a><a href="#tooltips" id="link-to-tooltips">Tooltips</a><a href="#modals" id="link-to-modals">Modal dialogs</a><a href="#collapse" id="link-to-collapse">Spoilers &amp accordions</a><a href="#progress" id="link-to-progress">Progress bars</a><a href="#donut-spinner" id="link-to-donut-spinner">Donut spinners</a><a href="#icons" id="link-to-icons">Icons</a><a href="#utility" id="link-to-utility">Utilities</a></nav>
+<nav class="col-md-4 col-lg-3" id="nav-drawer"><h3>Menu</h3><label for="doc-drawer-checkbox" class="button drawer-close"></label><a href="#prebuilt-flavors" id="link-to-prebuilt-flavors">Prebuilt flavors</a><hr style="padding:0;"/><a href="#textual-content" id="link-to-textual-content">Textual content</a><a href="#color-palette" id="link-to-color-palette">Color palette</a><a href="#universal-styles" id="link-to-universal-styles">Universal styles</a><a href="#grid" id="link-to-grid">Grid</a><a href="#cards" id="link-to-cards">Cards</a><a href="#forms-and-input" id="link-to-forms-and-input">Forms &amp; input</a><a href="#buttons" id="link-to-buttons">Buttons</a><a href="#header" id="link-to-header">Header</a><a href="#navbar" id="link-to-navbar">Navigation bar</a><a href="#footer" id="link-to-footer">Footer</a><a href="#menu-drawer" id="link-to-menu-drawer">Menu drawer</a><a href="#tables" id="link-to-tables">Tables</a><a href="#text-highlighting" id="link-to-text-highlighting">Text highlighting</a><a href="#toasts" id="link-to-toasts">Toasts</a><a href="#tooltips" id="link-to-tooltips">Tooltips</a><a href="#modals" id="link-to-modals">Modal dialogs</a><a href="#collapse" id="link-to-collapse">Spoilers &amp accordions</a><a href="#progress-bars" id="link-to-progress-bars">Progress bars</a><a href="#donut-spinner" id="link-to-donut-spinner">Donut spinners</a><a href="#icons" id="link-to-icons">Icons</a><a href="#utility" id="link-to-utility">Utilities</a></nav>
     <main class="col-sm-12 col-md-8 col-lg-9" id="doc-content"><div id="prebuilt-flavors" class="card fluid">
   <h2 class="section double-padded">Prebuilt flavors</h2><p>We have some prebuilt flavors:</p><ul><li>Default</li><li>Dark</li></ul>
 </div><br/><div id="build-your-own-flavor" class="card fluid">
@@ -766,6 +766,69 @@
         </div>
       </fieldset>
     </form>
+    <h3>Progress module</h3>
+    <p>The <strong>Progress</strong> module contains styling rules for progress bars and donut spinners. 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.</p>
+    <form id="progress">
+      <div class="input-group">
+        <label for="progressEnabled">Module enabled?</label>
+        <input type="checkbox" autocomplete="off" checked id="progressEnabled"/>
+      </div>
+      <fieldset>
+        <legend id="progress-bars">Progress bars</legend>
+        <div class="input-group vertical">
+          <label for="progressHeight">Progress bar height (rem):</label>
+          <input type="number" id="progressHeight" style="width:calc(100% - 0.5rem);" value="0.75" min="0.001" step="0.001"/>
+          <p><small>Height of progress bars, relative to root</small></p>
+        </div>
+        <div class="input-group vertical">
+          <label for="progressForeColor">Progress bar foreground color:</label>
+          <input type="text" id="progressForeColor" value="#555" autocomplete="off"/>
+          <span id="progressForeColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#555; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
+          <p style="margin-top: -1rem"><small>Foreground color for progress bars</small></p>
+        </div>
+        <div class="input-group vertical">
+          <label for="progressBackColor">Progress bar background color:</label>
+          <input type="text" id="progressBackColor" value="#ddd" autocomplete="off"/>
+          <span id="progressBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#ddd; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
+          <p style="margin-top: -1rem"><small>Background color for progress bars</small></p>
+        </div>
+        <div class="input-group vertical">
+          <label for="progressMaxValue">Progress bar maximum value:</label>
+          <input type="number" id="progressMaxValue" style="width:calc(100% - 0.5rem);" value="1000" min="2"/>
+          <p><small>Maximum value for progress bars</small></p>
+        </div>
+        <div class="input-group vertical">
+          <label for="progressInlineWidth">Progress bar inline width (%):</label>
+          <input type="number" id="progressInlineWidth" style="width:calc(100% - 0.5rem);" value="60" min="0.01" step="0.001"/>
+          <p><small>Width for inline progress bars, in percentage</small></p>
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend id="donut-spinner">Donut spinners</legend>
+        <div class="input-group vertical">
+          <label for="spinnerDonutSize">Donut spinner size (rem):</label>
+          <input type="number" id="spinnerDonutSize" style="width:calc(100% - 0.5rem);" value="1.25" min="0.001" step="0.001"/>
+          <p><small>Size of donut spinners, relative to root</small></p>
+        </div>
+        <div class="input-group vertical">
+          <label for="spinnerDonutBorderThickness">Donut spinner thickness (rem):</label>
+          <input type="number" id="spinnerDonutBorderThickness" style="width:calc(100% - 0.5rem);" value="0.25" min="0.001" step="0.001"/>
+          <p><small>Thickness of donut spinners, relative to root</small></p>
+        </div>
+        <div class="input-group vertical">
+          <label for="spinnerDonutForeColor">Donut spinner foreground color:</label>
+          <input type="text" id="spinnerDonutForeColor" value="#555" autocomplete="off"/>
+          <span id="spinnerDonutForeColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#555; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
+          <p style="margin-top: -1rem"><small>Foreground color for donut spinners</small></p>
+        </div>
+        <div class="input-group vertical">
+          <label for="spinnerDonutBackColor">Donut spinner background color:</label>
+          <input type="text" id="spinnerDonutBackColor" value="#ddd" autocomplete="off"/>
+          <span id="spinnerDonutBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#ddd; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
+          <p style="margin-top: -1rem"><small>Background color for donut spinners</small></p>
+        </div>
+      </fieldset>
+    </form>
   </div>
   <script>
     window.onload = function(){