[#922] Add css autoprefixer for compatibility with browsers

with @tayanefernandes

6 files changed, 7 insertions, 22 deletions

diff --git a/web-ui/config/loaders-webpack.js b/web-ui/config/loaders-webpack.js
index 21e9a572..f5237dff 100644
--- a/web-ui/config/loaders-webpack.js
+++ b/web-ui/config/loaders-webpack.js
@@ -7,7 +7,7 @@ module.exports = [
     },
     {
       test: /\.scss|css$/,
-      loader: "style-loader!css-loader!sass-loader"
+      loader: "style-loader!css-loader!postcss-loader!sass-loader"
     },
     {
       test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
diff --git a/web-ui/package.json b/web-ui/package.json
index c9229270..4f7c1bc5 100644
--- a/web-ui/package.json
+++ b/web-ui/package.json
@@ -55,6 +55,7 @@
     "modernizr": "^3.3.1",
     "node-sass": "^4.5.0",
     "nyc": "^10.1.2",
+    "postcss-loader": "^1.2.2",
     "quoted-printable": "^1.0.1",
     "react": "^15.4.2",
     "react-a11y": "^0.3.3",
@@ -78,11 +79,9 @@
     "test:karma": "karma start --single-run $GRUNT_OPTS",
     "test:watch:mocha": "npm run test:mocha -- --watch",
     "test:watch:karma": "karma start",
-
     "lint": "npm run lint:jshint && npm run lint:eslint",
     "lint:jshint": "jshint --config=.jshintrc app test",
     "lint:eslint": "eslint src test/unit",
-
     "build": "npm run build:statics && npm run build:js",
     "build:debug": "npm run build && karma start --browsers Chrome $GRUNT_OPTS",
     "build:statics": "npm run clean && npm run build:handlebars && npm run add_git_version && npm run build:compass",
@@ -90,12 +89,10 @@
     "build:js": "webpack --colors --progress",
     "build:compass": "compass compile",
     "build:handlebars": "mkdir -p app/js/generated/hbs/ && handlebars app/templates/**/*.hbs > app/js/generated/hbs/templates.js --namespace=window.Pixelated --root .",
-
     "watch": "npm run watch:compass & npm run watch:handlebars & npm run watch:js",
     "watch:handlebars": "watch 'npm run build:handlebars' app/templates",
     "watch:compass": "compass watch",
     "watch:js": "webpack --colors --progress --watch",
-
     "clean": "rm -rf dist/ app/js/generated/hbs/* app/css/*",
     "imagemin": "node config/imagemin.js",
     "package": "PIXELATED_BUILD='package' npm run build:prod && npm run imagemin",
diff --git a/web-ui/postcss.config.js b/web-ui/postcss.config.js
new file mode 100644
index 00000000..88752c6c
--- /dev/null
+++ b/web-ui/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')
+  ]
+}
diff --git a/web-ui/src/account_recovery/page.scss b/web-ui/src/account_recovery/page.scss
index c928d815..619d1105 100644
--- a/web-ui/src/account_recovery/page.scss
+++ b/web-ui/src/account_recovery/page.scss
@@ -65,18 +65,13 @@ a {
   width: 84%;
   margin: 3% auto;
   padding: 6% 5%;
-
-  -webkit-display: flex;
   display: flex;
-  -webkit-align-items: flex-start;
   align-items: flex-start;
-  -webkit-flex-direction: column;
   flex-direction: column;
 }
 
 img {
   width: 50%;
-  -webkit-align-self: center;
   align-self: center;
 }
 
@@ -87,13 +82,10 @@ img {
 
   form {
     display: flex;
-    -webkit-display: flex;
-    -webkit-flex-direction: column;
     flex-direction: column;
 
     div {
       width: 70%;
-      -webkit-align-self: center;
       align-self: center;
     }
   }
@@ -103,9 +95,7 @@ img {
   .container{
     width: 60%;
     padding: 3%;
-    -webkit-align-items: flex-start;
     align-items: flex-start;
-    -webkit-flex-direction: row;
     flex-direction: row;
     max-width: 700px;
   }
@@ -115,7 +105,6 @@ img {
 
     div {
       width: 300px;
-      -webkit-align-self: flex-start;
       align-self: flex-start;
     }
   }
diff --git a/web-ui/src/common/input_field/input-field.scss b/web-ui/src/common/input_field/input-field.scss
index 6ec827ab..dd8e8927 100644
--- a/web-ui/src/common/input_field/input-field.scss
+++ b/web-ui/src/common/input_field/input-field.scss
@@ -33,8 +33,6 @@
   left: 6px;
   top:10px;
   transition:0.2s ease all;
-  -moz-transition:0.2s ease all;
-  -webkit-transition:0.2s ease all;
 }
 
 .input-field {
@@ -61,7 +59,6 @@
 @media only screen and (min-width : 500px) {
   .input-field-group {
     width: 70%;
-    -webkit-align-self: center;
     align-self: center;
   }
 }
@@ -69,7 +66,6 @@
 @media only screen and (min-width : 960px) {
   .input-field-group {
     width: 300px;
-    -webkit-align-self: flex-start;
     align-self: flex-start;
     margin-top: 3em;
     font-size: 1em;
diff --git a/web-ui/src/common/submit_button/submit-button.scss b/web-ui/src/common/submit_button/submit-button.scss
index ccd0bef4..13cb7607 100644
--- a/web-ui/src/common/submit_button/submit-button.scss
+++ b/web-ui/src/common/submit_button/submit-button.scss
@@ -32,7 +32,6 @@
 @media only screen and (min-width : 500px) {
   .submit-button {
     width: 70%;
-    -webkit-align-self: center;
     align-self: center;
   }
 }
@@ -40,7 +39,6 @@
 @media only screen and (min-width : 960px) {
   .submit-button {
     width: 300px;
-    -webkit-align-self: flex-start;
     align-self: flex-start;
     font-size: 0.8em;
     margin-bottom: 1em;