From 2edf1f3f32367ffba800a2dfa9ac5e67931b87e6 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Fri, 21 Oct 2016 23:42:36 +0300
Subject: [PATCH] Demo page update for progress bars
---
docs/v2/DEVLOG.md | 1 +
docs/v2/index.html | 37 +++++++++++++++++++++++++++++++------
2 files changed, 32 insertions(+), 6 deletions(-)
diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md
index f3466ef..09efc82 100644
--- a/docs/v2/DEVLOG.md
+++ b/docs/v2/DEVLOG.md
@@ -157,3 +157,4 @@
- Updated the edges of the favicon.
- Added grid demo on live page.
- Deployed live demo.
+- Added demo docs for progress bars.
diff --git a/docs/v2/index.html b/docs/v2/index.html
index ffc491b..b0bc892 100644
--- a/docs/v2/index.html
+++ b/docs/v2/index.html
@@ -28,7 +28,7 @@
</style>
</head>
<body>
- <div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238);">
+ <div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 1px 3px rgba(0,0,0,0.35);">
<div class="row">
<div class="col-xs">
<div class="box-centered">
@@ -67,13 +67,13 @@
</div>
</div>
<div class="row">
- <div class="col-xs">
- <div>
- <hr>
- <p>Below you can see a showcase of the features and styles included in the <strong>default</strong> flavor of <strong>mini.css</strong>.</p>
+ <div class="col-xs">
+ <div>
+ <br><hr>
+ <p>Below you can see a showcase of the features and styles included in the <strong>default</strong> flavor of <strong>mini.css</strong>.</p>
+ </div>
</div>
</div>
- </div>
<div class="row">
<div class="col-xs">
<div>
@@ -189,7 +189,32 @@
</div>
</div>
</div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-xs">
+ <div>
+ <hr>
+ <h2>Common Elements <small>Styles for common HTML elements</small></h2>
</div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-xs">
+ <div>
+ <p><strong>mini.css</strong> adds modern styles for many of the HTML elements.</p>
+ <h3>Progress bars</h3>
+ <p>The <code><progress></code> element is used for progress bars. There are three color variants (default, <code>secondary</code> and <code>tertiary</code>), as well as an <code>inline</code> class that displays the progress bar as an inline block, along with a <code>nano</code> variant for tiny progress bars. Below are some examples:</p>
+ <br>
+ <progress value="45" max="100""></progress><br>
+ <progress value="20" max="100" class="secondary"></progress><br>
+ <progress value="60" max="100" class="tertiary"></progress><br>
+ <p>Inline progress: <progress value="85" max="100" class="inline"></progress></p>
+ <p>Nano progress:</p>
+ <progress class="nano" value="35" max="100"></progress>
+ <br>
+ </div>
+ </div>
</div>
</div>
</body>