feature/scss linting (#403)

Lint SCSS/CSS files

Author: mahboob-awan

package.json

@@ -5,11 +5,12 @@
   "scripts": {
     "test": "./node_modules/karma/bin/karma start",
     "test:ci:unit": "./node_modules/karma/bin/karma start --browsers PhantomJS --single-run; npm run test:ci:lint",
-    "test:ci:functional": "node ./nightwatch.js -c ./nightwatch.json -e production",
-    "test:ci:lint": "eslint ./src/**/*.js",
     "test:dev:unit": "./node_modules/karma/bin/karma start",
+    "test:ci:functional": "node ./nightwatch.js -c ./nightwatch.json -e production",
     "test:dev:functional": "node ./nightwatch.js -c ./nightwatch.json",
+    "test:ci:lint": "eslint ./src/**/*.js",
     "test:dev:lint": "eslint ./src/scripts/**/*.js",
+    "test:stylelint": "stylelint './src/**/*.scss' --config webpack/.stylelintrc",
     "dev": "node webpack/dev-server.js & PORT=8000 node start.js",
     "start": "NODE_PATH=\"./src\" node ./start",
     "build": "node ./node_modules/webpack/bin/webpack.js --config webpack/prod.config.js",
@@ -139,6 +140,7 @@
     "path": "^0.11.14",
     "phantomjs-polyfill": "0.0.1",
     "piping": "^0.3.0",
+    "pre-commit": "^1.1.3",
     "react-addons-test-utils": "^0.14.7",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.1",
@@ -149,11 +151,11 @@
     "selenium-server": "^2.48.2",
     "sinon": "^1.15.3",
     "sinon-chai": "^2.8.0",
+    "stylelint-webpack-plugin": "^0.2.0",
     "webpack-dev-server": "^1.6.5"
   },
   "pre-commit": [
-    "lint",
-    "validate",
-    "test"
+    "test:dev:lint",
+    "test:stylelint"
   ]
 }

src/components/Ayah/style.scss

@@ -91,7 +91,7 @@
 
   b{
     float: right;
-    border-color:: transparent;
+    border-color: transparent;
     border-width: 0px 0px 1px 0px;
     border-style: solid;
     &.active {

src/styles/fonts/_fonts.scss

@@ -1,4 +1,3 @@
-//@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Montserrat);
 @font-face{
   font-family: 'Montserrat';
   src: url('./static/fonts/montserrat/Montserrat-Regular.otf');

src/styles/main.scss

@@ -1,6 +1,4 @@
-//@import 'bootstrap';
 $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
-//@import '~bootstrap-sass/assets/stylesheets/bootstrap';
 
 @import 'mixins/center';
 @import 'components/SurahNav';
@@ -44,38 +42,6 @@ a:hover{
       display: none;
     }
   }
-  .right-side{
-    padding-top: 190px;
-    width: 83.33333333%;
-    float: right;
-    display: block;
-    position: relative;
-    background-color: #fff;
-    transition: width 0.5s;
-    min-height: 100vh;
-    z-index: 9999;
-
-    .navbar-brand{
-      display: none;
-    }
-
-    @media (max-width: $screen-sm-max) {
-      width: 100%;
-      padding-top: 150px;
-
-      .navbar-brand{
-        display: block;
-      }
-    }
-
-    &.active{
-      width: 99%;
-
-      .navbar{
-        width: 99; // This is almost like `noop` to get the css working
-      }
-    }
-  }
 }
 
 .form-control:focus{

src/styles/partials/_navbar-brand.scss

@@ -18,7 +18,6 @@
   }
   img {
     display: inline !important;
-    height: 100%;
     &.logo{
       height: 80%;
       vertical-align: top;

webpack/.stylelintrc

@@ -0,0 +1,7 @@
+{
+  "rules": {
+					"unit-no-unknown": true,
+					"no-duplicate-selectors": true,
+					"block-no-empty": true
+				}
+}