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

Inline progress mixin and houskeeping

Browse Source
This commit is contained in:
Angelos Chalaris
2016-10-20 12:34:51 +03:00
parent 442e42233e
commit 7f49777519
6 changed files with 32 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/v2/DEVLOG.md
View File

@@ -125,4 +125,8 @@
- `progress` foreground set to `#01579b` (dark blue from material palette).
- `progress` element tweak added to work in IE 10+. Older browsers will probably default to their original display for the element. This is on intentional (Opera Mini is also not supported).
- Changed conditions for `progress` styling, as the `[value]` attribute did not make a huge difference. Progress elements that do not have a `[value]` attribute will almost always cause trouble on some browsers, no matter what. Thus, it is suggested to set a `value="0"` if possible. Otherwise, Javascript shall be used.
- Opened [question on StackOverflow](http://stackoverflow.com/questions/40149311/transition-for-progress-element-on-value-change) about transitions for progress bars.
- Opened [question on StackOverflow](http://stackoverflow.com/questions/40149311/transition-for-progress-element-on-value-change) about transitions for progress bars.
- 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.

3
docs/v2/index.html
View File

@@ -49,6 +49,7 @@
<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</button>
<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>
</body>
</html>