chore(docs): autoprefix docs stylesheet (#9800)

* Uses the shared autoprefixer from the gulp utils to autoprefix the docs CSS (instead of always doing it manually as in #9786)

> Kept a few special properties like (`-webkit-font-smoothing` because those can't be autoprefixed)

Closes #9785

Author: devversion

docs/app/css/layout-demo.css

@@ -76,7 +76,6 @@ demo-include {
 }
 [ng-panel] {
   transition: 0.45s cubic-bezier(0.35, 0, 0.25, 1);
-  -webkit-transition: 0.45s cubic-bezier(0.35, 0, 0.25, 1);
   position: absolute;
   left: 0;
   top: 0;

docs/app/css/style.css

@@ -37,11 +37,6 @@ body.docs-body {
   position: fixed !important;
 
   transform: scale(0);
-
-  /* Manually prefix because the docs won't be prefixed. See #9785 */
-  -webkit-transition: transform 0.2s;
-  -moz-transition: transform 0.2s;
-  -o-transition: transform 0.2s;
   transition: transform 0.2s;
 }
 
@@ -70,7 +65,7 @@ body.docs-body {
 }
 
 .training_info {
-  opacity:0.4;
+  opacity: 0.4;
   text-transform: none;
 }
 /***************
@@ -79,10 +74,6 @@ body.docs-body {
 a {
   text-decoration: none;
   font-weight: 400;
-  -webkit-transition: border-bottom 0.35s;
-  -moz-transition: border-bottom 0.35s;
-  -ms-transition: border-bottom 0.35s;
-  -o-transition: border-bottom 0.35s;
   transition: border-bottom 0.35s;
 }
 h1, h2, h3, h4, h5, h6 {
@@ -184,8 +175,6 @@ ul.skip-links li a {
   text-decoration: none;
   top: 0;
   width: 92%;
-  -webkit-transition: opacity   0.15s linear;
-  -moz-transition: opacity  0.15s linear;
   transition: opacity   0.15s linear;
 }
 ul.skip-links li a:focus {
@@ -362,19 +351,10 @@ body[dir=rtl] .menu-heading {
   text-align: right;
 }
 
-
-.docs-menu li.parentActive,
-.docs-menu li.parentActive .menu-toggle-list {
-  /*background-color: #2C80D2 !important;*/
-}
 .menu-toggle-list {
   overflow: hidden;
   position: relative;
   z-index: 1;
-  -webkit-transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1);
-  -webkit-transition-property: height;
-  -moz-transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1);
-  -moz-transition-property: height;
   transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1);
   transition-property: height;
 }
@@ -398,13 +378,10 @@ body[dir=rtl] .menu-heading {
   speak: none;
   vertical-align: middle;
   transform: rotate(180deg);
-  -webkit-transform: rotate(180deg);
   transition: transform 0.3s ease-in-out;
-  -webkit-transition: -webkit-transform 0.3s ease-in-out;
 }
 .md-button-toggle .md-toggle-icon.toggled {
   transform: rotate(0deg);
-  -webkit-transform: rotate(0deg);
 }
 
 /* End Docs Menu */
@@ -500,14 +477,12 @@ docs-demo {
 .demo-container {
   border-radius: 4px;
   margin-bottom: 16px;
-  -webkit-transition: 0.02s padding cubic-bezier(0.35, 0, 0.25, 1);
   transition: 0.02s padding cubic-bezier(0.35, 0, 0.25, 1);
   position: relative;
   padding-bottom: 0;
 }
 .demo-source-tabs {
   z-index: 1;
-  -webkit-transition: all 0.45s cubic-bezier(0.35, 0, 0.25, 1);
   transition: all 0.45s cubic-bezier(0.35, 0, 0.25, 1);
   height: 448px;
   background: #fff;
@@ -542,12 +517,6 @@ md-tabs.demo-source-tabs .active md-tab-label {
 }
 .demo-content {
   position: relative;
-  overflow:hidden;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -moz-box;
-  display: -moz-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 .small-demo .demo-source-tabs:not(.ng-hide) {
@@ -558,19 +527,9 @@ md-tabs.demo-source-tabs .active md-tab-label {
 }
 
 .doc-content > * {
-  -webkit-box-flex: 1 1 auto;
-  -webkit-flex: 1 1 auto;
-  -moz-box-flex: 1 1 auto;
-  -moz-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
   flex: 1 1 auto;
 }
 .demo-content > * {
-  -webkit-box-flex: 1 1 0%;
-  -webkit-flex: 1 1 0%;
-  -moz-box-flex: 1 1 0%;
-  -moz-flex: 1 1 0%;
-  -ms-flex: 1 1 0%;
   flex: 1 1 0%;
 }
 
@@ -613,8 +572,6 @@ md-toolbar.demo-toolbar .md-button.active, md-toolbar.demo-toolbar .md-button.ac
 }
 
 md-toolbar.demo-toolbar .md-button {
-  -webkit-transition: all 0.3s linear;
-  -moz-transition: all 0.3s linear;
   transition: all 0.3s linear;
   color: #616161;
 }
@@ -669,7 +626,6 @@ ul.buckets li a {
   font-weight: 500;
   padding: 16px 0;
   text-decoration: none;
-  -webkit-transition: all 0.45s cubic-bezier(0.35, 0, 0.25, 1);
   background-color: #f6f6f6 !important;
   box-shadow: none !important;
   margin-right: 0;
@@ -719,9 +675,6 @@ header.api-profile-header > h2 {
   margin-right: 8px;
   text-align: center;
   margin-top: 14px;
-  -webkit-align-self: flex-start;
-  -moz-align-self: flex-start;
-  -ms-flex-item-align: start;
   align-self: flex-start;
 }
 .api-params-title {
@@ -739,8 +692,6 @@ ul.methods .method-function-syntax {
   font-weight: normal;
   font-size: 2.0rem;
   margin: 0;
-  -webkit-margin-before: 0;
-  -webkit-margin-after: 0;
 }
 
 h3 .method-function-syntax {
@@ -910,11 +861,7 @@ docs-demo .doc-demo-content {
 }
 
 .no-transition {
-  -webkit-transition: none !important;
-  -moz-transition:    none !important;
-  -ms-transition:     none !important;
-  -o-transition:      none !important;
-  transition:         none !important;
+  transition: none !important;
 }
 
 table.attributes, table.md-api-table {

docs/gulpfile.js

@@ -153,6 +153,7 @@ gulp.task('docs-css', ['docs-app', 'build', 'docs-css-dependencies'], function()
     'docs/app/css/style.css'
   ])
   .pipe(concat('docs.css'))
+  .pipe(utils.autoprefix())
   .pipe(gulp.dest('dist/docs'));
 });
 

gulp/util.js

@@ -8,7 +8,6 @@ var path = require('path');
 var rename = require('gulp-rename');
 var filter = require('gulp-filter');
 var concat = require('gulp-concat');
-var autoprefixer = require('gulp-autoprefixer');
 var series = require('stream-series');
 var lazypipe = require('lazypipe');
 var glob = require('glob').sync;
@@ -29,7 +28,7 @@ var ROOT = constants.ROOT;
 var utils = require('../scripts/gulp-utils.js');
 
 exports.buildJs = buildJs;
-exports.autoprefix = autoprefix;
+exports.autoprefix = utils.autoprefix;
 exports.buildModule = buildModule;
 exports.filterNonCodeFiles = filterNonCodeFiles;
 exports.readModuleArg = readModuleArg;
@@ -73,17 +72,6 @@ function buildJs () {
   }
 }
 
-function autoprefix () {
-
-  return autoprefixer({browsers: [
-    'last 2 versions',
-    'not ie <= 10',
-    'not ie_mob <= 10',
-    'last 4 Android versions',
-    'Safari >= 8'
-  ]});
-}
-
 function minifyCss(extraOptions) {
   var options = {
     autoprefixer: false,
@@ -190,7 +178,7 @@ function buildModule(module, opts) {
         .pipe(gulpif, /default-theme.scss/, concat(name + '-default-theme.scss'))
         .pipe(sass)
         .pipe(dedupeCss)
-        .pipe(autoprefix)
+        .pipe(utils.autoprefix)
     (); // Invoke the returning lazypipe function to create our new pipe.
   }
 

scripts/gulp-utils.js

@@ -3,6 +3,7 @@ var filter = require('gulp-filter');
 var through2 = require('through2');
 var lazypipe = require('lazypipe');
 var gutil = require('gulp-util');
+var autoprefixer = require('gulp-autoprefixer');
 var Buffer = require('buffer').Buffer;
 var fs = require('fs');
 
@@ -309,3 +310,14 @@ exports.cssToNgConstant = function(ngModule, factoryName) {
     next();
   });
 };
+
+exports.autoprefix = function() {
+
+  return autoprefixer({browsers: [
+    'last 2 versions',
+    'not ie <= 10',
+    'not ie_mob <= 10',
+    'last 4 Android versions',
+    'Safari >= 8'
+  ]});
+};