Removed nano progress bar

Removed the .nano progress bar, can be easily rebuilt using the provided mixins.

dist/mini-dark.css

@@ -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;

dist/mini-default.css

@@ -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;

docs/progress.html

@@ -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>&lt;progress&gt;</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>&lt;progress&gt;</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>&lt;progress&gt;</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>&lt;progress&gt;</code> element display inline, using the <code>.inline</code> class.</p>
                 <h3>Sample code</h3>
                 <pre>&lt;progress class=&quot;secondary&quot; value=&quot;600&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
 &lt;progress class=&quot;tertiary&quot; value=&quot;300&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
-&lt;progress class=&quot;nano&quot; value=&quot;750&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
 &lt;progress class=&quot;inline&quot; value=&quot;150&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;</pre>
               </div>
             </div>
@@ -158,15 +156,13 @@
               </ul><hr>
               <div class="row">
                 <div class="col-sm-12 col-md-6">
-                  <pre>&lt;progress class=&quot;nano secondary&quot; value=&quot;800&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
+                  <pre>&lt;progress class=&quot;inline secondary&quot; value=&quot;800&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
 <span class="fore-tertiary">&lt;!-- or --&gt;</span>
 &lt;progress class=&quot;inline tertiary&quot; value=&quot;650&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;</pre>
                   <p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can mix size and color classes for <code>&lt;progress&gt;</code> elements as needed.</p>
                 </div>
                 <div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
-                  <pre>&lt;progress class=&quot;secondary teriary&quot; value=&quot;450&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
+                  <pre>&lt;progress class=&quot;secondary teriary&quot; value=&quot;450&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;</pre>
-<span class="fore-secondary">&lt;!-- or --&gt;</span>
-&lt;progress class=&quot;inline nano&quot; value=&quot;300&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;</pre>
                   <p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid mixing two classes of the same type (i.e. two color classes or two size classes).</p>
                 </div>
               </div>

docs/quick_reference.html

@@ -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>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;progress class=&quot;secondary&quot; value=&quot;600&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
 &lt;progress class=&quot;tertiary&quot; value=&quot;300&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
-&lt;progress class=&quot;nano&quot; value=&quot;750&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
 &lt;progress class=&quot;inline&quot; value=&quot;150&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;</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>

docs/v2/DEVLOG.md

@@ -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.

src/flavors/mini-dark.scss

@@ -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,

src/flavors/mini-default.scss

@@ -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,