mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-01-17 21:08:13 +01:00
Styled progress bar base
This commit is contained in:
Angelos Chalaris
parent
85eea9a6b7
commit
442e42233e
@ -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.
|
||||
@ -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>
|
||||
@ -130,17 +130,27 @@ progress {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
margin: 1px auto;
|
||||
height: 10px;
|
||||
background: yellow; }
|
||||
progress[value]::-webkit-progress-value {
|
||||
background: red; }
|
||||
progress[value]::-webkit-progress-bar {
|
||||
background: yellow; }
|
||||
progress[value]::-moz-progress-bar {
|
||||
background: red; }
|
||||
border: 0;
|
||||
border-radius: 1px;
|
||||
margin: 1px auto;
|
||||
background: #f5f5f5;
|
||||
color: #01579b; }
|
||||
progress::-webkit-progress-value {
|
||||
background: #01579b;
|
||||
border-top-left-radius: 1px;
|
||||
border-bottom-left-radius: 1px; }
|
||||
progress::-webkit-progress-bar {
|
||||
background: #f5f5f5; }
|
||||
progress::-moz-progress-bar {
|
||||
background: #01579b;
|
||||
border-top-left-radius: 1px;
|
||||
border-bottom-left-radius: 1px; }
|
||||
progress[value="100"]::-webkit-progress-value {
|
||||
border-radius: 1px; }
|
||||
progress[value="100"]::-moz-progress-bar {
|
||||
border-radius: 1px; }
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers (opinionated).
|
||||
|
||||
2
flavors/v2/mini-default.min.css
vendored
2
flavors/v2/mini-default.min.css
vendored
@ -1 +1 @@
|
||||
*,html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;color:#212121;background:#fafafa}article,aside,figcaption,figure,footer,header,main,nav,section{display:block}abbr[title]{border-bottom:none;text-decoration:underline}audio,video{display:inline-block}svg:not(:root){overflow:hidden}h1,h2,h3,h4,h5,h6{line-height:1.2em;margin:.7em 8px;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#424242;display:block;margin-top:-.35em;font-size:45%}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.85em}h6{font-size:.75em}p{margin:1px 10px}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;overflow:visible;line-height:1.2em;margin:.5em 4px;height:1px;background:-webkit-linear-gradient(to right,#bdbdbd,#616161,#bdbdbd);background:linear-gradient(to right,#bdbdbd,#616161,#bdbdbd)}code,kbd,pre,samp{font-family:monospace,monospace}code{border-radius:2px;background:#e0e0e0;padding:2px 4px}pre{overflow:auto;border-radius:0 2px 2px 0;background:#e0e0e0;padding:12px;margin:1px 10px;border-left:3px solid #1565c0}kbd{border-radius:2px;background:#212121;color:#fafafa;padding:2px 4px}small,sub,sup{font-size:75%}sup{top:-.5em}sub{bottom:-.25em}sub,sup{line-height:0;position:relative;vertical-align:baseline}a{color:#0277bd;text-decoration:underline;opacity:1;transition:all .3s ease 0s}a:visited{color:#01579b}a:active,a:focus,a:hover{opacity:.75}mark{background:#0277bd;color:#fafafa;font-size:95%;line-height:1;padding:1px}progress{display:block;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;width:100%;margin:1px auto;height:10px;background:#ff0}progress[value]::-webkit-progress-value{background:red}progress[value]::-webkit-progress-bar{background:#ff0}progress[value]::-moz-progress-bar{background:red}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}mark.secondary{background:#f44336}mark.tertiary{background:#558b2f}mark.tag{display:inline-block;border-radius:2px;padding:2px}mark.bubble{display:inline-block;border-radius:200px;padding:3px 5px}
|
||||
*,html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;color:#212121;background:#fafafa}article,aside,figcaption,figure,footer,header,main,nav,section{display:block}abbr[title]{border-bottom:none;text-decoration:underline}audio,video{display:inline-block}svg:not(:root){overflow:hidden}h1,h2,h3,h4,h5,h6{line-height:1.2em;margin:.7em 8px;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#424242;display:block;margin-top:-.35em;font-size:45%}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.85em}h6{font-size:.75em}p{margin:1px 10px}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;overflow:visible;line-height:1.2em;margin:.5em 4px;height:1px;background:-webkit-linear-gradient(to right,#bdbdbd,#616161,#bdbdbd);background:linear-gradient(to right,#bdbdbd,#616161,#bdbdbd)}code,kbd,pre,samp{font-family:monospace,monospace}code{border-radius:2px;background:#e0e0e0;padding:2px 4px}pre{overflow:auto;border-radius:0 2px 2px 0;background:#e0e0e0;padding:12px;margin:1px 10px;border-left:3px solid #1565c0}kbd{border-radius:2px;background:#212121;color:#fafafa;padding:2px 4px}small,sub,sup{font-size:75%}sup{top:-.5em}sub{bottom:-.25em}sub,sup{line-height:0;position:relative;vertical-align:baseline}a{color:#0277bd;text-decoration:underline;opacity:1;transition:all .3s ease 0s}a:visited{color:#01579b}a:active,a:focus,a:hover{opacity:.75}mark{background:#0277bd;color:#fafafa;font-size:95%;line-height:1;padding:1px}progress{display:block;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:10px;border:0;border-radius:1px;margin:1px auto;background:#f5f5f5;color:#01579b}progress::-webkit-progress-value{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress::-webkit-progress-bar{background:#f5f5f5}progress::-moz-progress-bar{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress[value="100"]::-webkit-progress-value{border-radius:1px}progress[value="100"]::-moz-progress-bar{border-radius:1px}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}mark.secondary{background:#f44336}mark.tertiary{background:#558b2f}mark.tag{display:inline-block;border-radius:2px;padding:2px}mark.bubble{display:inline-block;border-radius:200px;padding:3px 5px}
|
||||
@ -76,6 +76,15 @@ $sup-font-size: 75%; // Font size for <sup> elements
|
||||
$sub-font-size: 75%; // Font size for <sub> elements
|
||||
$sup-top: -0.5em; // <sup> top
|
||||
$sub-bottom: -0.25em; // <sub> bottom
|
||||
$link-fore-color: #0277bd; // Text color for <a>
|
||||
$link-visited-fore-color: #01579b; // Text color for visited <a>
|
||||
$link-font-weight: 500; // Font weight for <a>
|
||||
$apply-link-underline: true; // Should an underline be applied to all <a>
|
||||
// elements? (`true`/`false`) [8]
|
||||
$apply-link-hover-fade: true; // Should the :hover and :focus state of <a>
|
||||
// elements use fade-out instead of a different
|
||||
// color (`true`/`false`) [9]
|
||||
//$link-hover-fore-color: #0288d1; // Text color for <a> when hovered or focused
|
||||
$mark-back-color: #0277bd; // Background color for <mark>
|
||||
$mark-fore-color: $back-color; // Text color for <mark>
|
||||
$mark-font-size: 95%; // Font size for <mark>
|
||||
@ -92,15 +101,12 @@ $mark-style1-padding: 2px; // Padding for <mark> style 1
|
||||
$mark-style2-name: 'bubble'; // Class name for <mark> style 2
|
||||
$mark-style2-border-radius: 200px; // Border radius for <mark> style 2
|
||||
$mark-style2-padding: 3px 5px; // Padding for <mark> style 2
|
||||
$link-fore-color: #0277bd; // Text color for <a>
|
||||
$link-visited-fore-color: #01579b; // Text color for visited <a>
|
||||
$link-font-weight: 500; // Font weight for <a>
|
||||
$apply-link-underline: true; // Should an underline be applied to all <a>
|
||||
// elements? (`true`/`false`) [8]
|
||||
$apply-link-hover-fade: true; // Should the :hover and :focus state of <a>
|
||||
// elements use fade-out instead of a different
|
||||
// color (`true`/`false`) [9]
|
||||
//$link-hover-fore-color: #0288d1; // Text color for <a> when hovered or focused
|
||||
$progress-back-color: #f5f5f5; // Background color for <progress>
|
||||
$progress-fore-color: #01579b; // Progress bar color for <progress>
|
||||
$progress-height: 10px; // Height of <progress>
|
||||
$progress-border-style: 0; // Border style for <progress>
|
||||
$progress-border-radius: 1px; // Border radius for the <progress> container
|
||||
$progress-margin: 1px auto; // Margin for <progress>
|
||||
// Enable base
|
||||
@import '../../scss/v2/core';
|
||||
// Use mixins frm base
|
||||
|
||||
@ -7,18 +7,42 @@ progress {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
margin: 1px auto;
|
||||
height: 10px;
|
||||
background: yellow;
|
||||
&[value]::-webkit-progress-value {
|
||||
background: red;
|
||||
height: $progress-height;
|
||||
border: $progress-border-style;
|
||||
@if $progress-border-radius != 0 {
|
||||
border-radius: $progress-border-radius;
|
||||
}
|
||||
margin: $progress-margin;
|
||||
background: $progress-back-color; // Background color of the element (IE 10+ and Firefox).
|
||||
color: $progress-fore-color; // Foreground of the element (IE 10+).
|
||||
&::-webkit-progress-value { // Foreground of the element (webkit browsers).
|
||||
background: $progress-fore-color;
|
||||
@if $progress-border-radius != 0 {
|
||||
border-top-left-radius: $progress-border-radius;
|
||||
border-bottom-left-radius: $progress-border-radius;
|
||||
}
|
||||
}
|
||||
&::-webkit-progress-bar { // Background of the element (webkit browsers).
|
||||
background: $progress-back-color;
|
||||
}
|
||||
&::-moz-progress-bar { // Foreground of the element (Firefox).
|
||||
background: $progress-fore-color;
|
||||
@if $progress-border-radius != 0 {
|
||||
border-top-left-radius: $progress-border-radius;
|
||||
border-bottom-left-radius: $progress-border-radius;
|
||||
}
|
||||
}
|
||||
&[value="100"] {
|
||||
&::-webkit-progress-value {
|
||||
@if $progress-border-radius != 0 {
|
||||
border-radius: $progress-border-radius;
|
||||
}
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
@if $progress-border-radius != 0 {
|
||||
border-radius: $progress-border-radius;
|
||||
}
|
||||
&[value]::-webkit-progress-bar {
|
||||
background: yellow;
|
||||
}
|
||||
&[value]::-moz-progress-bar {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user