Updated module legacy support

Removed multiple legacy support features, most browsers now support the latest features, so no problems hopefully.

dist/mini-default.css

@@ -118,7 +118,6 @@ hr {
   line-height: 1.25em;
   margin: 0.5rem;
   height: 1px;
-  background: -webkit-linear-gradient(to right, #bdbdbd, #8c8c8c, #bdbdbd);
   background: linear-gradient(to right, #bdbdbd, #8c8c8c, #bdbdbd);
 }
 
@@ -191,8 +190,7 @@ a {
   color: #0277bd;
   text-decoration: underline;
   opacity: 1;
-  -webkit-transition: all 0.3s ease 0s;
+  transition: opacity 0.3s;
-  transition: all 0.3s ease 0s;
 }
 
 a:visited {
@@ -726,8 +724,7 @@ header .logo {
   font-size: 1.75rem;
   line-height: 1.3125em;
   margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem;
-  -webkit-transition: 0s opacity;
+  transition: opacity 0.3s;
-  transition: 0s opacity;
 }
 
 header button, header [type="button"],
@@ -983,8 +980,7 @@ a[role="button"], label[role="button"], [role="button"] {
   padding: 0.5rem 0.75rem;
   margin: 0.5rem;
   text-decoration: none;
-  -webkit-transition: all 0.3s ease 0s;
+  transition: background 0.3s;
-  transition: all 0.3s ease 0s;
   cursor: pointer;
 }
 
@@ -1560,8 +1556,7 @@ table.striped tr:nth-of-type(2n) > td {
   display: inline-block;
   height: 1.5rem;
   cursor: pointer;
-  -webkit-transition: background 0.3s ease 0s;
+  transition: background 0.3s;
-  transition: background 0.3s ease 0s;
   background: #e0e0e0;
   border: 1px solid #bdbdbd;
   padding: 0.75rem;
@@ -1593,8 +1588,7 @@ table.striped tr:nth-of-type(2n) > td {
   transform: scaleY(0);
   -webkit-transform-origin: top;
   transform-origin: top;
-  -webkit-transition: -webkit-transform 0.3s ease 0s,
+  transition: -webkit-transform 0.3s,
- transform 0.3s ease 0s;
  transform 0.3s;
 }
 
@@ -1752,8 +1746,7 @@ mark.inline-block {
   opacity: 0;
   clip: rect(0 0 0 0);
   -webkit-clip-path: inset(100%);
-  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
-  clip-path: inset(100%);
   transition: all 0.3s;
   z-index: 1010;
 }
@@ -1780,6 +1773,8 @@ mark.inline-block {
 .tooltip:before {
   content: '';
   background: transparent;
+  border: 0.5rem solid transparent;
+  left: 50%;
   left: calc(50% - 0.5rem);
 }
 
@@ -1809,13 +1804,6 @@ mark.inline-block {
 .tooltip.bottom:after {
   margin-top: 1rem;
 }
-}
-
-@supports (left: calc(50% - 0.5rem)) or (left: -webkit-calc(50% - 0.5rem)) {
-  .tooltip:before {
-    left: -webkit-calc(50% - 0.5rem);
-    left: calc(50% - 0.5rem);
-  }
 
 /*
 	Custom contextual background elements and alerts.
@@ -1865,10 +1853,11 @@ progress {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  appearance: none;
+  height: 1rem;
+  width: 90%;
+  width: calc(100% - 1rem);
   margin: 0.5rem 0.5rem;
   border: 0;
-  border: 0;
   border-radius: 2px;
   background: #e0e0e0;
   color: #0277bd;
@@ -1897,14 +1886,6 @@ progress[value="1000"]::-moz-progress-bar {
 progress[value="1000"]::-moz-progress-bar {
   border-radius: 2px;
 }
-}
-
-@supports (width: calc(100% - 2*0.5rem)) or (width: -webkit-calc(100% - 2*0.5rem)) {
-  progress {
-    width: -webkit-calc(100% - 2*0.5rem);
-    width: calc(100% - 2*0.5rem);
-    margin: 0.5rem 0.5rem;
-  }
 
 @-webkit-keyframes spinner-donut-anim {
   0% {
@@ -1969,7 +1950,8 @@ progress.tertiary::-moz-progress-bar {
 }
 
 progress.nano {
-progress.nano {
+  height: 0.125rem;
+  width: calc(100% - 0);
   margin: 0 0;
   margin: 0 auto;
   border-radius: 0;
@@ -2096,8 +2078,7 @@ ul.breadcrumbs li:last-child:after {
   text-overflow: clip;
   background: rgba(224, 224, 224, 0);
   vertical-align: top;
-  vertical-align: top;
+  cursor: pointer;
-  cursor: pointer;
   transition: background 0.3s;
 }
 

docs/v2/DEVLOG.md

@@ -1036,3 +1036,9 @@
 - Changed `.tooltip` `top` and `bottom` to `75%` from `100%`, in order to bring it closer to the text.
 - After full internal testing, removed the `demo.html` file.
 - Developed `mini-dark`, some tweaks might be required, but overall color palette seems good.
+- Updated `.tooltip`, effectively breaking support for certain older browsers (some old version of Chrome mostly) and removing the `@supports` query, saving a little bit of space, as most browsers now do in fact support the `calc` directive. Also, added `left: 50%` for older browsers, allowing tooltips to work a little bit better on legacy systems.
+- Did pretty much the same for `progress`'s `width` property, cleaning up some space. The `width` will now default to `90%` so hopefully no trouble for older browsers as well.
+- Broke support of `hr` for older browsers, as the `-webkit` prefix is now representative of a tiny fraction of users.
+- Changed `transition` properties to not use `-webkit` prefix anymore. Also changed them, removing `ease` and `0s` for `transition-timing-function` and `transition-delay` repsectively, allowing the browser defaults to apply (which are the same, so nothing lost there).
+- Changed `transition` of `a` and `buttton` elements to `opacity` from `all` for higher specificity.
+- Tested aforementioned changes, everything seems to work ok. Size of `default` flavor is now `6.71KB` compared to a `6.89KB` in previous release. Pretty sweet reduction.

src/mini/_contextual.scss

@@ -114,8 +114,7 @@ mark {
 			clip: rect(0 0 0 0);
 			-webkit-clip-path: inset(100%);
 							clip-path: inset(100%);
-			-webkit-transition: all 0.3s ease 0s;
+			transition: all 0.3s;
-							transition: all 0.3s ease 0s;
 			// 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.
 		}
@@ -140,6 +139,10 @@ mark {
 			content: '';
 			background: transparent;
 			border: $tooltip-tail-size solid transparent;
+			// Older browsers will almost center the tooltip's tail
+			left: 50%;
+			// Newer browsers will center the tail properly
+			left: calc(50% - #{$tooltip-tail-size});
 		}
 		&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
 			border-top-color: $tooltip-back-color;
@@ -173,10 +176,4 @@ mark {
 			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});
-		}
-	}
 }

src/mini/_contextual_mixins.scss

@@ -142,6 +142,7 @@
 		@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;
@@ -163,12 +164,4 @@
 			}
 		}
 	}
-	@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/_core.scss

@@ -143,8 +143,7 @@ hr {
 	margin: $horizontal-rule-margin;
 	@if $horizontal-rule-fancy-style {
 		height: 1px;
-		background: -webkit-linear-gradient(#{$horizontal-rule-fancy-gradient});
+		background: linear-gradient(#{$horizontal-rule-fancy-gradient});
-		background:         linear-gradient(#{$horizontal-rule-fancy-gradient});
 	}
 	@else {
 		height: 0;
@@ -396,8 +395,7 @@ a{
 	}
 	@if $apply-link-hover-fade {
 		opacity: 1;
-		-webkit-transition: all 0.3s ease 0s;
+		transition: opacity 0.3s;
-				transition: all 0.3s ease 0s;
 	}
 	&:visited {
 		color: $link-visited-fore-color;

src/mini/_input_control.scss

@@ -211,7 +211,7 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
 }
 ::placeholder {
 	opacity: 1;
-	color: $input-placeholder-fore-color;	
+	color: $input-placeholder-fore-color;
 }
 // Definitions for the button and button-like elements.
 // Different elements are styled based on the same set of rules.
@@ -252,8 +252,7 @@ a[role="button"], label[role="button"], [role="button"] {
 	@if $apply-link-underline {		// Override for links if underline is enabled.
 		text-decoration: none;
 	}
-	-webkit-transition: all 0.3s ease 0s;
+	transition: background 0.3s;
-					transition: all 0.3s ease 0s;
 	cursor: pointer;
 	&:hover, &:active, &:focus {
 		background: rgba($button-back-color, $button-hover-back-opacity);

src/mini/_navigation.scss

@@ -66,8 +66,7 @@ header {
 			padding: $header-logo-padding;
 		}
 		@if $apply-link-hover-fade {
-			-webkit-transition: 0s opacity;
+			transition: opacity 0.3s ;
-							transition: 0s opacity;
 		}
 	}
 	// Link styling.

src/mini/_progress.scss

@@ -16,15 +16,15 @@ progress {
 	   -moz-appearance: none;
 			appearance: none;
 	height: $progress-height;
-	width: 100%;
+	// Older browsers will sort not display progress properly, but that's ok
+	width: 90%;
+	// Newer browsers will calculate the proper width
+	width: calc(100% - #{$progress-left-right-margin*2});
+	margin: $progress-top-bottom-margin $progress-left-right-margin;
 	border: $progress-border-style;
 	@if $progress-border-radius != 0 {
 		border-radius: $progress-border-radius;
 	}
-	@if $progress-top-bottom-margin != 0 {
-		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;
 	}
@@ -60,16 +60,6 @@ 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;
-		}
-	}
-}
 @if $include-spinner-donut {	// Turn off to disable spinner donuts.
 // Animation definition for donut spinner
 	@-webkit-keyframes spinner-donut-anim {
@@ -77,7 +67,7 @@ progress {
 		100% { 	-webkit-transform: rotate(360deg);}
 	}
 					@keyframes spinner-donut-anim {
-			0% {					transform: rotate(0deg);}
+			0% {					transform: rotate(0deg);	}
 		100% {					transform: rotate(360deg);}
 	}
 }

src/mini/_progress_mixins.scss

@@ -54,7 +54,12 @@
 		@if $progress-alt-height != $progress-height {
 			height: $progress-alt-height;
 		}
-		width: 100%;
+		@if $progress-alt-left-right-margin != $progress-left-right-margin {
+			width: calc(100% - #{$progress-alt-left-right-margin*2});
+		}
+		@if $progress-alt-left-right-margin != $progress-left-right-margin or $progress-alt-top-bottom-margin != $progress-top-bottom-margin {
+			margin: $progress-alt-top-bottom-margin $progress-alt-left-right-margin;
+		}
 		@if $progress-alt-top-bottom-margin != $progress-top-bottom-margin {
 			margin: $progress-alt-top-bottom-margin auto;
 		}
@@ -84,16 +89,6 @@
 			box-shadow: $progress-alt-box-shadow;
 		}
 	}
-	// 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 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});
-				width: 			calc(100% - 2*#{$progress-alt-left-right-margin});
-				margin: $progress-alt-top-bottom-margin $progress-alt-left-right-margin;
-			}
-		}
-	}
 }
 // Mixin for alternate donut spinner colors (spinner donut color variants).
 // Variables:

src/mini/_tab.scss

@@ -40,8 +40,7 @@ $fore-color:							black !default;						// [External variable - core] Foreground
 		display: inline-block;
 		height: $tab-label-height;
 		cursor: pointer;
-		-webkit-transition: background 0.3s ease 0s;
+		transition: background 0.3s;
-						transition: background 0.3s ease 0s;
 		@if $tab-label-back-color != $back-color {
 			background: $tab-label-back-color;
 		}
@@ -94,10 +93,8 @@ $fore-color:							black !default;						// [External variable - core] Foreground
 						transform: scaleY(0);
 		-webkit-transform-origin: top;
 						transform-origin: top;
-		-webkit-transition:	-webkit-transform 0.3s ease 0s,
+		transition: -webkit-transform 0.3s,
-																transform 0.3s ease 0s;
+												transform 0.3s;
-						transition: -webkit-transform 0.3s ease 0s,
-																transform 0.3s ease 0s;
 		// Style for tab labels except the first
 		@if $tab-border-style != 0 {
 			& + [type="radio"] + label {

src/mini/_table.scss

@@ -251,8 +251,8 @@ table {
 		   		// New syntax
 		   		-webkit-justify-content: space-between;
 									justify-content: space-between;
-				-webkit-flex: 1 0 0;
+					-webkit-flex: 1 0 0;
-								flex: 1 0 0;
+									flex: 1 0 0;
 		   	}
 		   	tr {
 		   		// Old syntax

src/mini/_utility.scss

@@ -117,8 +117,7 @@ $include-center-block:	false !default;							// Should center block be included?
 		background: rgba($close-icon-back-color,0);
 		vertical-align: top;
 		cursor: pointer;
-		-webkit-transition: all 0.3s ease 0s;
+		transition: background 0.3s;
-						transition: all 0.3s ease 0s;
 		&:hover, &:active, &:focus {
 			background: rgba($close-icon-back-color,1);
 		}