Remove vendor prefix mixins in favor of autoprefixer

MediaMath · Nov 30, 2015 · 130356c · 130356c
1 parent 7718ea4
commit 130356c
Show file tree

Hide file tree

Showing 30 changed files with 140 additions and 125 deletions.
diff --git a/docs/docs.scss b/docs/docs.scss
@@ -149,9 +149,9 @@ section:last-child {
 }
 
 .docs-logo {
-	@include display(flex);
-	@include align-items(center);
-	@include justify-content(center);
+	display: flex;
+	align-items: center;
+	justify-content: center;
 	position: relative;
 	box-sizing: border-box;
 	height: 100%;
@@ -178,9 +178,9 @@ section:last-child {
 	height: 100%;
 
 	.footer-logo-box {
-		@include display(flex);
-		@include align-items(center);
-		@include justify-content(center);
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 
 	.powered-by,
@@ -307,8 +307,8 @@ table {
 /* -- -- -- -- -- -- -- -- -- -- -- -- -- */
 /* example styling */
 .example {
-	@include display(flex);
-	@include flex-direction(column);
+	display: flex;
+	flex-direction: column;
 	@include justify-content(flex-start);
 	box-sizing: border-box;
 	padding: 1.25em;
@@ -351,10 +351,10 @@ table {
 /* -- -- -- -- -- -- -- -- -- -- -- -- -- */
 /* intro specific styling */
 .hp-header {
-	@include display(flex);
-	@include align-items(center);
-	@include justify-content(space-between);
-	@include flex-direction(row);
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	flex-direction: row;
 	width: 100%;
 	background: $mainNavBg;
 
@@ -394,9 +394,9 @@ table {
 	}
 
 	.intro-content.top {
-		@include display(flex);
-		@include align-items(center);
-		@include flex-direction(row);
+		display: flex;
+		align-items: center;
+		flex-direction: row;
 		box-sizing: border-box;
 
 		.hero-image {
@@ -418,8 +418,8 @@ table {
 	}
 
 	.intro-content.bottom {
-		@include display(flex);
-		@include flex-direction(row);
+		display: flex;
+		flex-direction: row;
 		box-sizing: border-box;
 
 		.hero-block {
@@ -494,8 +494,8 @@ table {
 
 	.intro-block {
 		.intro-content.top {
-			@include align-items(flex-start);
-			@include flex-direction(column);
+			align-items: flex-start;
+			flex-direction: column;
 
 			.hero-image {
 				width: 50%;
@@ -521,7 +521,7 @@ table {
 		}
 
 		.intro-content.bottom {
-			@include flex-direction(column);
+			flex-direction: column;
 
 			.hero-block {
 				width: 100%;
@@ -541,7 +541,7 @@ table {
 
 	.docs-footer {
 		.footer-logo-box {
-			@include flex-direction(row);
+			flex-direction: row;
 		}
 	}
 }
@@ -557,9 +557,9 @@ table {
 	}
 
 	.hp-header {
-		@include align-items(flex-start);
-		@include justify-content(center);
-		@include flex-direction(column);
+		align-items: flex-start;
+		justify-content: center;
+		flex-direction: column;
 
 		.docs-logo {
 			display: none;
@@ -568,7 +568,7 @@ table {
 
 	.docs-footer {
 		.footer-logo-box {
-			@include flex-direction(column);
+			flex-direction: column;
 		}
 
 		.powered-by,

diff --git a/grunt/tasks/build.js b/grunt/tasks/build.js
@@ -68,6 +68,17 @@ module.exports = function(grunt) {
 			}
 		},
 
+		postcss: {
+			options: {
+				processors: [
+					require('autoprefixer')({browsers: 'last 2 versions'})
+				]
+			},
+			dist: {
+				src: '<%= build_dir %>/**/*.css'
+			}
+		},
+
 		uglify: {
 			dist: {
 				files: [{
@@ -324,6 +335,7 @@ module.exports = function(grunt) {
 			'clean:build',
 			'copy:build',
 			'sass:dist',
+			'postcss',
 			'cssUrlEmbed', 
 			'style:imports',
 			'hogan_static:fonts',
@@ -339,6 +351,7 @@ module.exports = function(grunt) {
 			'clean:build',
 			'copy:build',
 			'sass:dev',
+			'postcss',
 			'style:imports',
 			'hogan_static:fonts',
 			'hogan_static:index'

diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   ],
   "license": "BSD",
   "devDependencies": {
+    "autoprefixer": "^6.0.3",
     "grunt": "*",
     "grunt-banner": "^0.3.1",
     "grunt-bump": "^0.3.0",
@@ -27,6 +28,7 @@
     "grunt-github-changes": "0.0.6",
     "grunt-hogan-static": "0.3.0",
     "grunt-jsonlint": "^1.0.4",
+    "grunt-postcss": "^0.7.0",
     "grunt-sass": "*",
     "grunt-shell": "^1.1.2",
     "grunt-text-replace": "^0.4.0",

diff --git a/src/mm-action/mm-action.scss b/src/mm-action/mm-action.scss
@@ -24,8 +24,8 @@
 }
 
 .action {
-	@include display(inline-flex);
-	@include align-items(center);
+	display: inline-flex;
+	align-items: center;
 
 	color: inherit;
 	cursor: pointer;

diff --git a/src/mm-button/mm-button.scss b/src/mm-button/mm-button.scss
@@ -35,5 +35,5 @@
 
 .button.fit {
 	@include fitContent();
-	@include justify-content(center);
+	justify-content: center;
 }
diff --git a/src/mm-calendar/mm-calendar.scss b/src/mm-calendar/mm-calendar.scss
@@ -45,17 +45,17 @@
 }
 
 .month-year {
-	@include display(flex);
-	@include align-items(center);
-	@include justify-content(space-between);
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
 	margin-bottom: 4px;
 
 	.left-arrow, .right-arrow {
 		cursor: pointer;
 	}
 
 	.left-arrow {
-		@include transform(scaleX(-1));
+		transform: scaleX(-1);
 	}
 }
 
@@ -128,7 +128,7 @@
 	&.last.selected {
 		&::before {
 			@include pointerBg($color-D15);
-			@include transform(scaleX(-1));
+			transform: scaleX(-1);
 			left: -3px;
 		}
 	}
@@ -164,7 +164,7 @@
 	&.last.selected:hover {
 		&::before {
 			@include pointerBg($color-D21);
-			@include transform(scaleX(-1));
+			transform: scaleX(-1);
 			left: -3px;
 		}
 	}

diff --git a/src/mm-checkbox/mm-checkbox.scss b/src/mm-checkbox/mm-checkbox.scss
@@ -17,7 +17,7 @@
 	margin-right: 7px;
 	cursor: pointer;
 	white-space: nowrap;
-	@include user-select(none);
+	user-select: none;
 
 	.icon {
 		color: inherit;
@@ -40,13 +40,13 @@
 :host(:active) .checkbox {
 	border-color: $color-A17;
 	box-shadow: inset 1px 1px 0 $color-A18; 
-	@include background-image(linear-gradient(bottom, $color-A15 0%, $color-A16 100%));
+	background-image: linear-gradient(to top, $color-A15 0%, $color-A16 100%);
 
 	&.partial,
 	&.selected {
 		border-color: $color-D18;
 		box-shadow: inset 1px 1px 0 $color-D19;
-		@include background-image(linear-gradient(bottom, $color-D16 0%, $color-D17 100%));
+		background-image: linear-gradient(to top, $color-D16 0%, $color-D17 100%);
 	}
 }
 
@@ -63,7 +63,7 @@
 	border-radius: 3px;
 	background-color: $color-A14;
 	box-shadow: inset 0 1px 0 rgba(255,255,255,.27);
-	@include background-image(linear-gradient(bottom, $color-A9 0%, $color-F0 100%));
+	background-image: linear-gradient(to top, $color-A9 0%, $color-F0 100%);
 	width:16px;
 	height: 16px;
 	position: relative;
@@ -96,7 +96,7 @@
 	&.selected {
 		border-color: $color-D13;
 		box-shadow: inset 1px 1px 0 rgba(255,255,255,.2);
-		@include background-image(linear-gradient(bottom, $color-D14 0%, $color-D15 100%));
+		background-image: linear-gradient(to top, $color-D14 0%, $color-D15 100%);
 	}
 }
 

diff --git a/src/mm-docs-nav/mm-docs-nav.scss b/src/mm-docs-nav/mm-docs-nav.scss
@@ -20,19 +20,19 @@
 }
 
 #labelArea {
-	@include display(flex);
-	@include align-items(center);
-	@include justify-content(space-between);
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
 	box-sizing: border-box;
 	padding: 10px 20px;
 
 	& > ::content mm-header, mm-icon {
 		pointer-events: none;
-		@include user-select(none);
+		user-select: none;
 	}
 
 	mm-icon.opened {
-		@include transform(scaleY(-1));
+		transform: scaleY(-1);
 	}
 }
 

diff --git a/src/mm-docs-shell/mm-docs-shell.scss b/src/mm-docs-shell/mm-docs-shell.scss
@@ -44,8 +44,8 @@
 }
 
 .mobile-header-box {
-	@include display(flex);
-	@include align-items(center);
+	display: flex;
+	align-items: center;
 
 	position: absolute;
 	left: 0;

diff --git a/src/mm-drawer/mm-drawer.scss b/src/mm-drawer/mm-drawer.scss
@@ -31,7 +31,7 @@
 
 #container {
 	overflow: hidden;
-	@include transition(height 0.3s ease-in-out);
+	transition: height 0.3s ease-in-out;
 }
 
 #content {
@@ -40,10 +40,10 @@
 
 #toggle {
 	@include fontSmoothing();
-	@include user-select(none);
+	user-select: none;
 	position: absolute;
 	left: 50%;
-	@include transform(translateX(-50%));
+	transform: translateX(-50%);
 	padding: 5px 7px;
 	background: inherit;
 	border: inherit;
@@ -56,12 +56,12 @@
 	mm-icon {
 		color: #525252;
 		vertical-align: inherit;
-		@include transform(scaleY(-1));
+		transform: scaleY(-1);
 	}
 
 	&.expanded {
 		mm-icon {
-			@include transform(scaleY(1));
+			transform: scaleY(1);
 		}
 	}
 }
diff --git a/src/mm-footer/mm-footer.scss b/src/mm-footer/mm-footer.scss
@@ -18,9 +18,9 @@
 @include fit();
 
 ._mm_footer {
-	@include display(flex);
-	@include align-items(center);
-	@include justify-content(space-between);
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
 	box-sizing: border-box;
 	border-top: $color-A9 solid 1px;
 	background-color: $color-A12;