diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 23a0585..1dbbfb9 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -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. \ No newline at end of file +- 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. \ No newline at end of file diff --git a/docs/v2/index.html b/docs/v2/index.html index 2541d3a..40e0843 100644 --- a/docs/v2/index.html +++ b/docs/v2/index.html @@ -49,6 +49,7 @@
- + +

I am a line of text with inline progress: Do you like me?

\ No newline at end of file diff --git a/flavors/v2/mini-default.css b/flavors/v2/mini-default.css index 58716a0..3f4e355 100644 --- a/flavors/v2/mini-default.css +++ b/flavors/v2/mini-default.css @@ -316,3 +316,8 @@ mark.bubble { display: inline-block; border-radius: 200px; padding: 3px 5px; } + +progress.inline { + display: inline-block; + vertical-align: middle; + width: 20em; } diff --git a/flavors/v2/mini-default.min.css b/flavors/v2/mini-default.min.css index dc3b2b0..82814fe 100644 --- a/flavors/v2/mini-default.min.css +++ b/flavors/v2/mini-default.min.css @@ -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} \ No newline at end of file +*,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} \ No newline at end of file diff --git a/flavors/v2/mini-default.scss b/flavors/v2/mini-default.scss index 2dc7c6c..62ab06b 100644 --- a/flavors/v2/mini-default.scss +++ b/flavors/v2/mini-default.scss @@ -105,15 +105,19 @@ $progress-back-color: #f5f5f5; // Background color for $progress-fore-color: #01579b; // Progress bar color for $progress-height: 10px; // Height of $progress-border-style: 0; // Border style for -$progress-border-radius: 1px; // Border radius for the container +$progress-border-radius: 1px; // Border radius for the container $progress-margin: 1px auto; // Margin for +$progress-inline-name: 'inline'; // Class name for inline +$progress-inline-width: 20em; // Width for inline // Enable base @import '../../scss/v2/core'; -// Use mixins frm base +// Use mixins for contextuals @include make-mark-alt-color($mark-variant1-name, $mark-variant1-back-color); @include make-mark-alt-color($mark-variant2-name, $mark-variant2-back-color); @include make-mark-alt-style($mark-style1-name, $mark-style1-border-radius, $mark-style1-padding); @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); // 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. diff --git a/scss/v2/mini-core/_progress.scss b/scss/v2/mini-core/_progress.scss index 072eedb..f3d5a66 100644 --- a/scss/v2/mini-core/_progress.scss +++ b/scss/v2/mini-core/_progress.scss @@ -45,4 +45,17 @@ progress { } } } +} +// Mixin for inline 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){ +progress.#{$progress-inline-name} { + display: inline-block; + vertical-align: middle; // Align progress bar vertically to look better with text next to it. +@if $progress-inline-width != 100% { + width: $progress-inline-width; +} +} } \ No newline at end of file