Working on progress bars (unstable and unfinished)
This commit is contained in:
Angelos Chalaris
parent
936e32048d
commit
85eea9a6b7
|
|
@ -114,3 +114,9 @@
|
|||
- Moved fix for `svg` in IE at the top.
|
||||
- Added `TODO`s for other fixes.
|
||||
- Updated index page, probably broke the live version for a while.
|
||||
|
||||
## 20161020
|
||||
|
||||
- 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`.
|
||||
|
|
|
|||
|
|
@ -46,5 +46,6 @@
|
|||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -68,8 +68,8 @@ hr {
|
|||
line-height: 1.2em;
|
||||
margin: 0.5em 4px;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, #bdbdbd, #616161, #bdbdbd);
|
||||
background: -webkit-linear-gradient(to right, #bdbdbd, #616161, #bdbdbd); }
|
||||
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; }
|
||||
|
|
@ -124,6 +124,24 @@ mark {
|
|||
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: yellow; }
|
||||
progress[value]::-webkit-progress-value {
|
||||
background: red; }
|
||||
progress[value]::-webkit-progress-bar {
|
||||
background: yellow; }
|
||||
progress[value]::-moz-progress-bar {
|
||||
background: red; }
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers (opinionated).
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
|
|
@ -219,12 +237,6 @@ legend {
|
|||
white-space: normal;
|
||||
/* 1 */ }
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
progress {
|
||||
vertical-align: baseline; }
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE.
|
||||
*/
|
||||
|
|
|
|||
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:linear-gradient(to right,#bdbdbd,#616161,#bdbdbd);background:-webkit-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}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}progress{vertical-align:baseline}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;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}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
// SECTION: Browsers resets and base typography
|
||||
// SECTION: Browsers resets and base typography.
|
||||
//===================================================
|
||||
$apply-defaults-to-all: true !default;
|
||||
@if $apply-defaults-to-all {
|
||||
|
|
@ -114,8 +114,8 @@ hr {
|
|||
$horizontal-rule-fancy-style: false !default;
|
||||
@if $horizontal-rule-fancy-style {
|
||||
height: 1px;
|
||||
background: linear-gradient(#{$horizontal-rule-fancy-gradient});
|
||||
background: -webkit-linear-gradient(#{$horizontal-rule-fancy-gradient});
|
||||
background: linear-gradient(#{$horizontal-rule-fancy-gradient});
|
||||
}
|
||||
@else {
|
||||
height: 0;
|
||||
|
|
@ -338,8 +338,9 @@ a{
|
|||
//===================================================
|
||||
// SECTION: External files.
|
||||
//===================================================
|
||||
// Contextual background elements.
|
||||
// You can comment out modules you do not want to use.
|
||||
@import 'mini-core/contextual';
|
||||
@import 'mini-core/progress';
|
||||
|
||||
// TODO: Move to forms and buttons respectively
|
||||
|
||||
|
|
@ -441,16 +442,6 @@ legend {
|
|||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
// TODO: Move to progress module
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE.
|
||||
*/
|
||||
|
|
|
|||
24
scss/v2/mini-core/_progress.scss
Normal file
24
scss/v2/mini-core/_progress.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
// Definitions for progress elements.
|
||||
// Progress elements use the progress element as their base.
|
||||
// Default styling for progress. Use mixins for alternate styles.
|
||||
progress {
|
||||
display: block;
|
||||
vertical-align: baseline; // Correct vertical alignment in certain browsers.
|
||||
-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;
|
||||
}
|
||||
&[value]::-webkit-progress-bar {
|
||||
background: yellow;
|
||||
}
|
||||
&[value]::-moz-progress-bar {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue