Tooltip and nano progress bar updates

dist/mini-default.css

@@ -1442,12 +1442,12 @@ mark {
     -webkit-transition: all 0.3s ease 0s;
     transition: all 0.3s ease 0s;
     z-index: 1010; }
+  .tooltip:before, .tooltip:after {
+    left: 50%; }
   .tooltip:not(.bottom):before, .tooltip:not(.bottom):after {
-    bottom: 100%;
+    bottom: 100%; }
-    left: 50%; }
   .tooltip.bottom:before, .tooltip.bottom:after {
-    top: 100%;
+    top: 100%; }
-    left: 50%; }
   .tooltip:hover:before, .tooltip:hover:after, .tooltip:active:before, .tooltip:active:after, .tooltip:focus:before, .tooltip:focus:after {
     opacity: 1;
     clip: auto;
@@ -1456,8 +1456,7 @@ mark {
   .tooltip:before {
     content: '';
     background: transparent;
-    border: 6px solid transparent;
+    border: 6px solid transparent; }
-    left: calc(50% - 6px); }
   .tooltip:not(.bottom):before {
     border-top-color: #212121; }
   .tooltip.bottom:before {
@@ -1477,6 +1476,10 @@ mark {
   .tooltip.bottom:after {
     margin-top: 12px; }
 
+@supports (left: calc(50% - 6px)) or (left: -webkit-calc(50% - 6px)) {
+  .tooltip:before {
+    left: -webkit-calc(50% - 6px);
+    left: calc(50% - 6px); } }
 /*
 	Custom contextual background elements and alerts.
 */
@@ -1603,11 +1606,6 @@ progress.nano {
   progress.nano[value="1000"]::-moz-progress-bar {
     border-radius: 0; }
 
-@supports (width: calc(100% - 2*0)) or (width: -webkit-calc(100% - 2*0)) {
-  progress.nano {
-    width: -webkit-calc(100% - 2*0);
-    width: calc(100% - 2*0);
-    margin: 0 0; } }
 .spinner-donut.secondary {
   border: 4px solid #ffebee;
   border-left: 4px solid #c62828; }

docs/v2/DEVLOG.md

@@ -806,3 +806,6 @@
 - Tweaked the `input` styling to make sure all `button`-type `input`s are properly styled.
 - Added `:hover` and `:disabled` selectors to `input` elements, making sure as many states as possible are covered now.
 - Cleaned `:focus:invalid:focus` selector, as I could not find any test cases for it. Size is now `6.75KB`.
+- Added safeguard for the `progress` element's `.nano` variant's case with `margin` of `0`. Should now behave properly.
+- Added `@supports` statement to help `tooltip` component place itself whenever possible. Changed a few of the selectors in `tooltip` to be as specific as needed and work as required.
+- Updated `tooltip` mixin to reflect the above changes.

src/mini/_contextual.scss

@@ -206,13 +206,14 @@ $tooltip-bottom-name:		'bottom' !default;					// Bottom tooltip class name
 			// Remember to keep this index a lower value than the one used for stickies.
 			z-index: 1010;	// Deals with certain problems when combined with cards and tables.
 		}
+		&:before, &:after {
+			left: 50%;
+		}
 		&:not(.#{$tooltip-bottom-name}):before, &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
 			bottom: 100%;
-			left: 50%;
 		}
 		&.#{$tooltip-bottom-name}:before, &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
 			top: 100%;
-			left: 50%;
 		}
 		&:hover, &:active, &:focus {
 			&:before, &:after {
@@ -226,7 +227,6 @@ $tooltip-bottom-name:		'bottom' !default;					// Bottom tooltip class name
 			content: '';
 			background: transparent;
 			border: $tooltip-tail-size solid transparent;
-			left: calc(50% - #{$tooltip-tail-size});
 		}
 		&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
 			border-top-color: $tooltip-back-color;
@@ -260,6 +260,12 @@ $tooltip-bottom-name:		'bottom' !default;					// Bottom tooltip class name
 			margin-top: 2 * $tooltip-tail-size;
 		}
 	}
+	@supports (left: calc(50% - #{$tooltip-tail-size})) or (left: -webkit-calc(50% - #{$tooltip-tail-size})){
+		.#{$tooltip-name}:before {
+			left: 	-webkit-calc(50% - #{$tooltip-tail-size});
+			left: 			calc(50% - #{$tooltip-tail-size});
+		}
+	}
 }
 // Mixin for alternate tooltip (tooltip color variants).
 // Variables:
@@ -299,7 +305,6 @@ $tooltip-bottom-name:		'bottom' !default;					// Bottom tooltip class name
 		@if $tooltip-alt-tail-size != $tooltip-tail-size {
 			&:before {
 				border-width: $tooltip-alt-tail-size;
-				left: calc(50% - #{$tooltip-alt-tail-size});
 			}
 			&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
 				margin-bottom: 2 * $tooltip-alt-tail-size;
@@ -321,4 +326,12 @@ $tooltip-bottom-name:		'bottom' !default;					// Bottom tooltip class name
 			}
 		}
 	}
+	@if $tooltip-alt-tail-size != $tooltip-tail-size {
+		@supports (left: calc(50% - #{$tooltip-tail-size})) or (left: -webkit-calc(50% - #{$tooltip-tail-size})){
+			.#{$tooltip-name}.#{$tooltip-alt-name}:before {
+				left: 	-webkit-calc(50% - #{$tooltip-alt-tail-size});
+				left: 			calc(50% - #{$tooltip-alt-tail-size});
+			}
+		}
+	}
 }

src/mini/_progress.scss

@@ -150,7 +150,7 @@ 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 {
+	@if $progress-alt-left-right-margin != $progress-left-right-margin and $progress-alt-left-right-margin != auto and $progress-alt-left-right-margin != 0 {
 		@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});