mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-22 13:33:03 +02:00
Code Issues Releases Wiki Activity

Styled progress bar base

Browse Source
This commit is contained in:
Angelos Chalaris
2016-10-20 12:09:29 +03:00
parent 85eea9a6b7
commit 442e42233e
6 changed files with 79 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/v2/DEVLOG.md
View File

@@ -120,3 +120,9 @@
- Added some more comments for enabling and disabling modules from core.
- Browser-specific prefixed properties will now precede unprefixed ones. Changes have been applied.
- Started styling `progress` bars in `mini-core/progess`.
- Since CSS3 transitions are supported unprefixed a lot and mostly older browsers use prefixes, no prefixed versions will be added. Apart from that, if the transitions do not play on older browsers, there will be no significant changes, meaning the experience will be less rich but functionally the same.
- `progress` background set to `#f5f5f5` to achieve a very pale shadow effect. Some users might not see that color difference but that's ok.
- `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.

5
docs/v2/index.html
View File

@@ -46,6 +46,9 @@
<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 value="25" max="100"></progress>
<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>
</body>
</html>