mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-28 08:10:23 +02:00
Code Issues Releases Wiki Activity

Progress module complete

Browse Source
This commit is contained in:
Angelos Chalaris
2016-10-20 13:17:08 +03:00
parent 7f49777519
commit f6ee8d2cfe
6 changed files with 124 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/v2/DEVLOG.md
View File

@@ -129,4 +129,10 @@
- Added mixin for `progress` bars that are inline `make-progress-inline` and used it to create `inline` class for `progress` elements.
- Opinionated `vertical-aling: middle` for said mixin and `display: inline-block` to make sure everything works according to what it should.
- `width` of said mixin's result is specified in `em` (`20em` specifically) to make sure it will work well on all screen and is dependent on text.
- Optimized inline `progress` mixin.
- Optimized inline `progress` mixin.
- Added condition for `progress` margin to optimize for `0`.
- Created mixin for color variants of `progress` (`make-progress-alt-color`) and added style imports for `secondary` and `tertiary` elements. Optimized.
- Used slightly different colors from `mark` variatns for `progress` color variants (all material).
- Created mixin `make-progress-alt-style` for style variants of `progress`.
- Created `nano` variant for `progress` (nanobar progress) using above mixin.
- Documented mixins for `progress`, optimized etc.

10
docs/v2/index.html
View File

@@ -46,10 +46,12 @@
<h3>I am a header with <mark class="bubble secondary">bubbles</mark> and <mark class="tag">tags</mark></h3>
<p>I am a paragraph and I have a <a href="https://github.com/Chalarangelo/mini.css">link to the Github repo</a>.</p>
<p>I have an <abbr title="Abra Kadabra Abbreviation Shazam!">Abra</abbr> to check the styling.</p>
<progress id="test-prog" value="25" max="100"></progress>
<progress></progress>
<br>
<button onclick="document.getElementById('test-prog').setAttribute('value',parseInt(document.getElementById('test-prog').getAttribute('value'))+5);">Click me to advance progress bar</button>
<p>I am a line of text with inline progress: <progress class="inline" value="15" max="100"></progress> Do you like me?</p>
<p>I am a line of text with inline progress: <progress class="inline" value="75" max="100"></progress> Do you like me?</p>
<progress id="test-prog" value="40" max="100"></progress>
<progress class="secondary" value="25" max="100"></progress>
<progress class="tertiary" value="60" max="100"></progress>
<br>
<progress class="nano" value="35" max="100" style="position: fixed; top:0; left:0;"></progress>
</body>
</html>