mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-03-14 01:09:38 +01:00
Progress module complete
This commit is contained in:
Angelos Chalaris
parent
7f49777519
commit
f6ee8d2cfe
@ -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.
|
||||
|
||||
@ -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>
|
||||
@ -321,3 +321,32 @@ progress.inline {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 20em; }
|
||||
|
||||
progress.secondary {
|
||||
color: #e53935; }
|
||||
progress.secondary::-webkit-progress-value {
|
||||
background: #e53935; }
|
||||
progress.secondary::-moz-progress-bar {
|
||||
background: #e53935; }
|
||||
|
||||
progress.tertiary {
|
||||
color: #689f38; }
|
||||
progress.tertiary::-webkit-progress-value {
|
||||
background: #689f38; }
|
||||
progress.tertiary::-moz-progress-bar {
|
||||
background: #689f38; }
|
||||
|
||||
progress.nano {
|
||||
height: 2px;
|
||||
margin: 0 auto 1px;
|
||||
border-radius: 0; }
|
||||
progress.nano::-webkit-progress-value {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0; }
|
||||
progress.nano::-moz-progress-bar {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0; }
|
||||
progress.nano[value="100"]::-webkit-progress-value {
|
||||
border-radius: 0; }
|
||||
progress.nano[value="100"]::-moz-progress-bar {
|
||||
border-radius: 0; }
|
||||
|
||||
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;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}progress.inline{display:inline-block;vertical-align:middle;width:20em}
|
||||
*,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}progress.inline{display:inline-block;vertical-align:middle;width:20em}progress.secondary{color:#e53935}progress.secondary::-webkit-progress-value{background:#e53935}progress.secondary::-moz-progress-bar{background:#e53935}progress.tertiary{color:#689f38}progress.tertiary::-webkit-progress-value{background:#689f38}progress.tertiary::-moz-progress-bar{background:#689f38}progress.nano{height:2px;margin:0 auto 1px;border-radius:0}progress.nano::-webkit-progress-value{border-top-left-radius:0;border-bottom-left-radius:0}progress.nano::-moz-progress-bar{border-top-left-radius:0;border-bottom-left-radius:0}progress.nano[value="100"]::-webkit-progress-value{border-radius:0}progress.nano[value="100"]::-moz-progress-bar{border-radius:0}
|
||||
@ -109,6 +109,15 @@ $progress-border-radius: 1px; // Border radius for the <progress> con
|
||||
$progress-margin: 1px auto; // Margin for <progress>
|
||||
$progress-inline-name: 'inline'; // Class name for inline <progress>
|
||||
$progress-inline-width: 20em; // Width for inline <progress>
|
||||
$progress-variant1-name: 'secondary'; // Class name for <progress> variant 1
|
||||
$progress-variant1-fore-color: #e53935; // Progress bar color for <progress> variant 1
|
||||
$progress-variant2-name: 'tertiary'; // Class name for <progress> variant 2
|
||||
$progress-variant2-fore-color: #689f38; // Progress bar color for <progress> variant 2
|
||||
$progress-style1-name: 'nano'; // Class name for <progress> style 1
|
||||
$progress-style1-height: 2px; // Height for <progress> style 1
|
||||
$progress-style1-margin: 0 auto 1px; // Margin for <progress> style 1
|
||||
$progress-style1-border-style: 0; // Border style for <progress> style 1
|
||||
$progress-style1-border-radius: 0; // Border radius for <progress> style 1
|
||||
// Enable base
|
||||
@import '../../scss/v2/core';
|
||||
// Use mixins for contextuals
|
||||
@ -118,6 +127,10 @@ $progress-inline-width: 20em; // Width for inline <progress>
|
||||
@include make-mark-alt-style($mark-style2-name, $mark-style2-border-radius, $mark-style2-padding);
|
||||
// Use mixins for progress
|
||||
@include make-progress-inline($progress-inline-name, $progress-inline-width);
|
||||
@include make-progress-alt-color($progress-variant1-name, $progress-variant1-fore-color);
|
||||
@include make-progress-alt-color($progress-variant2-name, $progress-variant2-fore-color);
|
||||
@include make-progress-alt-style($progress-style1-name, $progress-style1-height,
|
||||
$progress-style1-margin, $progress-style1-border-style, $progress-style1-border-radius)
|
||||
// Notes:
|
||||
// [1] - It is recommended to set the value of $apply-defaults-to-all to `true`, unless you want to apply extra styling
|
||||
// to elements manually.
|
||||
|
||||
@ -13,7 +13,9 @@ progress {
|
||||
@if $progress-border-radius != 0 {
|
||||
border-radius: $progress-border-radius;
|
||||
}
|
||||
@if $progress-margin != 0 {
|
||||
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).
|
||||
@ -50,7 +52,7 @@ progress {
|
||||
// Variables:
|
||||
// - $progress-inline-name : The name of the class used for the inline progress.
|
||||
// - $progress-inline-width : The width of the inline progress.
|
||||
@mixin make-progress-inline($progress-inline-name, $progress-inline-width){
|
||||
@mixin make-progress-inline ($progress-inline-name, $progress-inline-width) {
|
||||
progress.#{$progress-inline-name} {
|
||||
display: inline-block;
|
||||
vertical-align: middle; // Align progress bar vertically to look better with text next to it.
|
||||
@ -58,4 +60,69 @@ progress.#{$progress-inline-name} {
|
||||
width: $progress-inline-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate progress (progress color variants).
|
||||
// Variables:
|
||||
// - $progress-alt-name : The name of the class used for the alternate progress.
|
||||
// - $progress-alt-fore-color : The progress bar color of the alternate progress.
|
||||
// - $progress-alt-back-color : (Optional) The background color of the alternate progress. Defaults to the background color of the progress.
|
||||
@mixin make-progress-alt-color ($progress-alt-name, $progress-alt-fore-color, $progress-alt-back-color: $progress-back-color) {
|
||||
progress.#{$progress-alt-name} {
|
||||
@if $progress-alt-back-color != $progress-back-color {
|
||||
background: $progress-alt-back-color; // Background color of the element (IE 10+ and Firefox).
|
||||
&::-webkit-progress-bar { // Background of the element (webkit browsers).
|
||||
background: $progress-alt-back-color;
|
||||
}
|
||||
}
|
||||
@if $progress-alt-fore-color != $progress-fore-color {
|
||||
color: $progress-alt-fore-color; // Foreground of the element (IE 10+).
|
||||
&::-webkit-progress-value { // Foreground of the element (webkit browsers).
|
||||
background: $progress-alt-fore-color;
|
||||
}
|
||||
&::-moz-progress-bar { // Foreground of the element (Firefox).
|
||||
background: $progress-alt-fore-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate progress styles.
|
||||
// Variables:
|
||||
// - $progress-alt-name : The name of the class used for the alternate progress style.
|
||||
// - $progress-alt-height : The height of the alternate progress style.
|
||||
// - $progress-alt-margin : (Optional) The margin of the alternate progress style. Defaults to the margin of the progress.
|
||||
// - $progress-alt-border-style : (Optional) The border style of the alternate progress style. Defaults to the border style of the progress.
|
||||
// - $progress-alt-border-radius : (Optional) The border radius of the alternate progress style. Defaults to the border radius of the progress.
|
||||
@mixin make-progress-alt-style ($progress-alt-name, $progress-alt-height,
|
||||
$progress-alt-margin: $progress-margin, $progress-alt-border-style: $progress-border-style,
|
||||
$progress-alt-border-radius: $progress-border-radius) {
|
||||
progress.#{$progress-alt-name} {
|
||||
@if $progress-alt-height != $progress-height {
|
||||
height: $progress-alt-height;
|
||||
}
|
||||
@if $progress-alt-margin != $progress-margin {
|
||||
margin: $progress-alt-margin;
|
||||
}
|
||||
@if $progress-alt-border-style != $progress-border-style {
|
||||
border: $progress-alt-border-style;
|
||||
}
|
||||
@if progress-alt-border-radius != $progress-border-radius {
|
||||
border-radius: $progress-alt-border-radius;
|
||||
&::-webkit-progress-value {
|
||||
border-top-left-radius: $progress-alt-border-radius;
|
||||
border-bottom-left-radius: $progress-alt-border-radius;
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
border-top-left-radius: $progress-alt-border-radius;
|
||||
border-bottom-left-radius: $progress-alt-border-radius;
|
||||
}
|
||||
&[value="100"] {
|
||||
&::-webkit-progress-value {
|
||||
border-radius: $progress-alt-border-radius;
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
border-radius: $progress-alt-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user