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

Demo page update for progress bars

Browse source
This commit is contained in:
Angelos Chalaris 2016-10-21 23:42:36 +03:00
parent 3c005b8f05
commit 2edf1f3f32
2 changed files with 32 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
docs/v2/DEVLOG.md
View file

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

29
docs/v2/index.html
View file

@ -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">
@ -69,7 +69,7 @@
<div class="row">
<div class="col-xs">
<div>
<hr>
<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>
@ -191,6 +191,31 @@
</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>&lt;progress&gt;</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>
</html>