Progress module tweaks

dist/mini-default.css

@@ -1148,11 +1148,11 @@ progress {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  width: 100%;
   height: 14px;
+  width: 100%;
   border: 0;
   border-radius: 1px;
-  margin: 2px 10px;
+  margin: 2px auto;
   box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
   background: #eeeeee;
   color: #01579b; }
@@ -1171,6 +1171,11 @@ progress {
   progress[value="1000"]::-moz-progress-bar {
     border-radius: 1px; }
 
+@supports (width: calc(100% - 2*10px)) or (width: -webkit-calc(100% - 2*10px)) {
+  progress {
+    width: -webkit-calc(100% - 2*10px);
+    width: calc(100% - 2*10px);
+    margin: 2px 10px; } }
 @-webkit-keyframes spinner-donut-anim {
   0% {
     -webkit-transform: rotate(0deg); }
@@ -1373,7 +1378,8 @@ progress.tertiary {
 
 progress.nano {
   height: 2px;
-  margin: 0 auto 1px;
+  width: 100%;
+  margin: 0 auto;
   border-radius: 0; }
   progress.nano::-webkit-progress-value {
     border-top-left-radius: 0;

docs/v2/DEVLOG.md

@@ -536,3 +536,7 @@
 - Made some minor tweaks to the `progress` module and component.
 - Opened a question on SO about the `progress` element's `margin-right`: http://stackoverflow.com/questions/40795218/progress-element-does-not-respect-right-margin
 - Wrote the basic information for the `progress` module on the doc page.
+
+## 20161125
+
+- Added high-tech feature queries for `progress` elements and variants, `margin` and `width` should now work properly. Tested in Firefox and Chrome.

src/flavors/mini-default.scss

@@ -387,7 +387,8 @@ $progress-height:				14px;											// Height of <progress>
 $progress-max-value:			1000;											// Arithmetic max value of <progress>
 $progress-border-style:			0;												// Border style for <progress>
 $progress-border-radius:		1px;											// Border radius for the <progress> container
-$progress-margin:				2px 10px;										// Margin for <progress>
+$progress-top-bottom-margin:	2px;											// Top and bottom margin for <progress>
+$progress-left-right-margin:	10px;											// Left and right margin for <progress>
 $progress-box-shadow:															// Box shadow for <progress>
 	0 0.5px 1px rgba(0,0,0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
 $progress-inline-name:			'inline';										// Class name for inline <progress>
@@ -398,7 +399,10 @@ $progress-variant2-name:		'tertiary';										// Class name for <progress> vari
 $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-top-bottom-margin:												// Top and bottom margin for <progress> style 1
+								0;
+$progress-style1-left-right-margin:												// Left and right margin for <progress> style 1
+								auto;								
 $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
@@ -486,7 +490,7 @@ $center-block-name:				'center-block';									// Class name for center block
 @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);
+	$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-variant2-name, $spinner-donut-variant2-back-color, 
 	$spinner-donut-variant2-fore-color);
 @include make-spinner-donut-alt-style ($spinner-donut-style1-name, $spinner-donut-style1-size, 

src/mini/_progress.scss

@@ -7,15 +7,16 @@ progress {
 	vertical-align: baseline;	// Correct vertical alignment in certain browsers.	
 	-webkit-appearance: none;
 	   -moz-appearance: none;
-			appearance: none;
+			appearance: none;	
-	width: 100%;
 	height: $progress-height;
+	width: 100%;
 	border: $progress-border-style;
 	@if $progress-border-radius != 0 {
 		border-radius: $progress-border-radius;
 	}	
-	@if $progress-margin != 0 {
+	@if $progress-top-bottom-margin != 0 {
-		margin: $progress-margin;	
+		margin: $progress-top-bottom-margin auto;
+		// Check somewhere below for the feature query that allows left and right margins to display properly on newer browsers.
 	}
 	@if $progress-box-shadow != none {
 		box-shadow: $progress-box-shadow;
@@ -52,6 +53,16 @@ progress {
 		}
 	}
 }
+// Feature query that checks if the left and right margins can be applied properly.
+@if $progress-left-right-margin != 0 and $progress-left-right-margin != auto {
+	@supports (width: calc(100% - 2*#{$progress-left-right-margin})) or (width: -webkit-calc(100% - 2*#{$progress-left-right-margin})) {
+		progress {
+			width: 	-webkit-calc(100% - 2*#{$progress-left-right-margin});
+			width: 			calc(100% - 2*#{$progress-left-right-margin});
+			margin: $progress-top-bottom-margin $progress-left-right-margin;
+		}
+	}
+}
 // Mixin for inline progress.
 // Variables:
 // - $progress-inline-name : The name of the class used for the inline progress.
@@ -93,18 +104,20 @@ progress {
 // 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-top-bottom-margin : (Optional) The top and bottom margin of the alternate progress style. Defaults to the margin of the progress.
+// - $progress-alt-left-right-margin : (Optional) The left and right 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-top-bottom-margin: $progress-top-bottom-margin, $progress-alt-left-right-margin: $progress-left-right-margin, 
-	$progress-alt-border-radius: $progress-border-radius) {
+	$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 {
+		width: 100%;
-			margin: $progress-alt-margin;
+		@if $progress-alt-top-bottom-margin != $progress-top-bottom-margin {
+			margin: $progress-alt-top-bottom-margin auto;
 		}
 		@if $progress-alt-border-style != $progress-border-style {
 			border: $progress-alt-border-style;
@@ -129,6 +142,16 @@ progress {
 			}
 		}
 	}
+// Feature query that checks if the left and right margins can be applied properly.
+	@if $progress-alt-left-right-margin != $progress-left-right-margin and $progress-alt-left-right-margin != auto {
+		@supports (width: calc(100% - 2*#{$progress-alt-left-right-margin})) or (width: -webkit-calc(100% - 2*#{$progress-alt-left-right-margin})) {
+			progress.#{$progress-alt-name} {
+				width: 	-webkit-calc(100% - 2*#{$progress-alt-left-right-margin});
+				width: 			calc(100% - 2*#{$progress-alt-left-right-margin});
+				margin: $progress-alt-top-bottom-margin $progress-alt-left-right-margin;
+			}
+		}
+	}
 }
 // Animation definition for donut spinner
 @-webkit-keyframes spinner-donut-anim { 0% { 	-webkit-transform: rotate(0deg);} 100% { 	-webkit-transform: rotate(360deg);} }