Removed nano progress bar
Removed the .nano progress bar, can be easily rebuilt using the provided mixins.
This commit is contained in:
Angelos Chalaris
parent
c6056870eb
commit
6104029454
9 changed files with 7 additions and 81 deletions
26
dist/mini-dark.css
vendored
26
dist/mini-dark.css
vendored
|
|
@ -1893,32 +1893,6 @@ progress.tertiary::-moz-progress-bar {
|
|||
background: #689f38;
|
||||
}
|
||||
|
||||
progress.nano {
|
||||
height: 0.125rem;
|
||||
width: calc(100% - 0);
|
||||
margin: 0 0;
|
||||
margin: 0 auto;
|
||||
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="1000"]::-webkit-progress-value {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
progress.nano[value="1000"]::-moz-progress-bar {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.spinner-donut.secondary {
|
||||
border: 0.25rem solid #39444a;
|
||||
border-left: 0.25rem solid #c62828;
|
||||
|
|
|
|||
2
dist/mini-dark.min.css
vendored
2
dist/mini-dark.min.css
vendored
File diff suppressed because one or more lines are too long
26
dist/mini-default.css
vendored
26
dist/mini-default.css
vendored
|
|
@ -1894,32 +1894,6 @@ progress.tertiary::-moz-progress-bar {
|
|||
background: #689f38;
|
||||
}
|
||||
|
||||
progress.nano {
|
||||
height: 0.125rem;
|
||||
width: calc(100% - 0);
|
||||
margin: 0 0;
|
||||
margin: 0 auto;
|
||||
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="1000"]::-webkit-progress-value {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
progress.nano[value="1000"]::-moz-progress-bar {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.spinner-donut.secondary {
|
||||
border: 0.25rem solid #ffebee;
|
||||
border-left: 0.25rem solid #c62828;
|
||||
|
|
|
|||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -139,15 +139,13 @@
|
|||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<p>Secondary process is 60% complete!</p> <progress class="secondary" value="600" max="1000"></progress>
|
||||
<p>Tertiary process is 30% complete!</p> <progress class="tertiary" value="300" max="1000"></progress>
|
||||
<p>Nano progress bar is 75% filled!</p> <progress class="nano" value="750" max="1000"></progress>
|
||||
<p>Inline progress bar:<progress class="inline" value="150" max="1000"></progress></p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p>Apart from the default style for the <code><progress></code> element, we have also included a couple of variants for it. First off, you can change the color of your progress bars, based on the context, using the <code>.secondary</code> or <code>.tertiary</code> class. You can also make a <code><progress></code> element tiny, using the <code>.nano</code> class. Finally, you can create inline progress bars, using the <code>.inline</code> class.</p>
|
||||
<p>Apart from the default style for the <code><progress></code> element, we have also included a couple of variants for it. As with many other elements, you can change the color of your progress bars, based on the context, using the <code>.secondary</code> or <code>.tertiary</code> class. You can also make a <code><progress></code> element display inline, using the <code>.inline</code> class.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><progress class="secondary" value="600" max="1000"></progress>
|
||||
<progress class="tertiary" value="300" max="1000"></progress>
|
||||
<progress class="nano" value="750" max="1000"></progress>
|
||||
<progress class="inline" value="150" max="1000"></progress></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -158,15 +156,13 @@
|
|||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><progress class="nano secondary" value="800" max="1000"></progress>
|
||||
<pre><progress class="inline secondary" value="800" max="1000"></progress>
|
||||
<span class="fore-tertiary"><!-- or --></span>
|
||||
<progress class="inline tertiary" value="650" max="1000"></progress></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> You can mix size and color classes for <code><progress></code> elements as needed.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||||
<pre><progress class="secondary teriary" value="450" max="1000"></progress>
|
||||
<span class="fore-secondary"><!-- or --></span>
|
||||
<progress class="inline nano" value="300" max="1000"></progress></pre>
|
||||
<pre><progress class="secondary teriary" value="450" max="1000"></progress></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid mixing two classes of the same type (i.e. two color classes or two size classes).</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1031,14 +1031,13 @@
|
|||
<h3>Progress bar variants <a href="https://codepen.io/chalarangelo/pen/MbLLwb" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><progress class="secondary" value="600" max="1000"></progress>
|
||||
<progress class="tertiary" value="300" max="1000"></progress>
|
||||
<progress class="nano" value="750" max="1000"></progress>
|
||||
<progress class="inline" value="150" max="1000"></progress></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Color variants available using the <code>.secondary</code> and <code>.tertiary</code> classes</li>
|
||||
<li>Size variants available using the <code>.nano</code> and <code>.inline</code> classes</li>
|
||||
<li>Inline variant available using the <code>.inline</code> class</li>
|
||||
<li>Mix color and size variants, but not multiple of the same type</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1108,3 +1108,4 @@
|
|||
- Added Per Harald Borgen to the list of contributors to show my gratitude.
|
||||
- Removed old classes produced using the generic shadow mixin in `utility`, replaced with `.shadowed` to let developers still have some generic shadow class. Updated docs as needed, codepens will be updated right before release.
|
||||
- Updated the definitions of the responsive visibility helpers to utilize `!important` properly. Size is now `6.34KB` which seems pretty good, based on the fact that some of the existing components that are being removed were unused by most devs to begin with.
|
||||
- Removed the `.nano` progress bar, as it served no real purpose. **Hugging cat** misses it already, but it had to go, don't judge. Size should be smaller but the tool I use (Refresh-SF) has crashed and I can't really check the gzipped size right now.
|
||||
|
|
|
|||
|
|
@ -450,12 +450,6 @@ $progress-variant1-name: 'secondary'; // Class name for <progress> variant
|
|||
$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: 0.125rem; // Height for <progress> style 1
|
||||
$progress-style1-top-bottom-margin: 0; // Top and bottom margin for <progress> style 1
|
||||
$progress-style1-left-right-margin: 0; // Left and right 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
|
||||
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
|
||||
$spinner-donut-border-thickness: 0.25rem; // Border thickness for donut spinner
|
||||
$spinner-donut-back-color: #39444a; // Background color for donut spinner
|
||||
|
|
@ -571,9 +565,6 @@ $include-center-block-name: false; // Should center block be included? (
|
|||
@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-top-bottom-margin, $progress-style1-left-right-margin,
|
||||
$progress-style1-border-style, $progress-style1-border-radius);
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant1-name, $spinner-donut-variant1-back-color,
|
||||
$spinner-donut-variant1-fore-color);
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant2-name, $spinner-donut-variant2-back-color,
|
||||
|
|
|
|||
|
|
@ -450,12 +450,6 @@ $progress-variant1-name: 'secondary'; // Class name for <progress> variant
|
|||
$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: 0.125rem; // Height for <progress> style 1
|
||||
$progress-style1-top-bottom-margin: 0; // Top and bottom margin for <progress> style 1
|
||||
$progress-style1-left-right-margin: 0; // Left and right 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
|
||||
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
|
||||
$spinner-donut-border-thickness: 0.25rem; // Border thickness for donut spinner
|
||||
$spinner-donut-back-color: #e3f2fd; // Background color for donut spinner
|
||||
|
|
@ -571,9 +565,6 @@ $include-center-block-name: false; // Should center block be included? (
|
|||
@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-top-bottom-margin, $progress-style1-left-right-margin,
|
||||
$progress-style1-border-style, $progress-style1-border-radius);
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant1-name, $spinner-donut-variant1-back-color,
|
||||
$spinner-donut-variant1-fore-color);
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant2-name, $spinner-donut-variant2-back-color,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue