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

Inputs for the progress module flavor controls

Browse source
This commit is contained in:
Angelos Chalaris 2018-05-15 19:06:44 +03:00
parent 8b556a3483
commit 03a1109bdd
3 changed files with 129 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -742,6 +742,69 @@ module.exports = {
</div> </div>
</fieldset> </fieldset>
</form> </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> </div>
<script> <script>
window.onload = function(){ window.onload = function(){
@ -840,7 +903,7 @@ module.exports = {
{id: 'tooltips', title: 'Tooltips'}, {id: 'tooltips', title: 'Tooltips'},
{id: 'modals', title: 'Modal dialogs'}, {id: 'modals', title: 'Modal dialogs'},
{id: 'collapse', title: 'Spoilers &amp accordions'}, {id: 'collapse', title: 'Spoilers &amp accordions'},
{id: 'progress', title: 'Progress bars'}, {id: 'progress-bars', title: 'Progress bars'},
{id: 'donut-spinner', title: 'Donut spinners'}, {id: 'donut-spinner', title: 'Donut spinners'},
{id: 'icons', title: 'Icons'}, {id: 'icons', title: 'Icons'},
{id: 'utility', title: 'Utilities'} {id: 'utility', title: 'Utilities'}

1
docs/v3/DEVLOG.md
View file

@ -335,3 +335,4 @@
## 20180515 ## 20180515
- Coded the `contextual` module's inputs for the flavors page. - Coded the `contextual` module's inputs for the flavors page.
- Coded the `progress` module's inputs for the flavors page.

65
docs/v3/flavors.html
View file

@ -22,7 +22,7 @@
</header> </header>
<div class="row" id="doc-wrapper"> <div class="row" id="doc-wrapper">
<input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox"> <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"> <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> <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"> </div><br/><div id="build-your-own-flavor" class="card fluid">
@ -766,6 +766,69 @@
</div> </div>
</fieldset> </fieldset>
</form> </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> </div>
<script> <script>
window.onload = function(){ window.onload = function(){