SASS implementation (#350)

* rename pre-existing *.less files to *.scss

* Added gulp-sass npm package.

* updated to latest generators

* Updated NPM packages

* Changed config.less to config.sass

* Updated variable declarations & references to support sass

* Changed @imports to use relative paths

* Changed gulpfile.js to use elixir's sass task

* Made various fixes and optimizations to the landing page styles

Author: hackur

angular/app/components/forgot-password/forgot-password.less renamed to angular/app/components/forgot-password/forgot-password.scss

@@ -1,24 +1,24 @@
-@import "./angular/material/project";
+@import "../../../material/project";
 
 .Footer{
     text-align: center;
-    background-color: @background;
-    border-top: 1px solid @border;
+    background-color: $background;
+    border-top: 1px solid $border;
     padding-top: 40px;
     padding-bottom: 40px;
-    color: @grey;
+    color: $grey;
     font-weight: 300;
 }
 
 .Footer-text{
     padding-top: 10px;
     opacity: 0.8;
-    color: @grey;
+    color: $grey;
 }
 
 .Footer-link{
     text-decoration: none;
-    color: @grey !important;
+    color: $grey !important;
     font-weight: 400;
 }
 

angular/app/components/login-form/login-form.less renamed to angular/app/components/login-form/login-form.scss

@@ -1,4 +1,4 @@
-@import "./angular/material/project";
+@import "../../../material/project";
 
 .DemoHeader {
     height: 64px;
@@ -22,15 +22,15 @@
 
 .DemoHeader-link{
     text-decoration: none;
-    color: @black !important;
+    color: $black !important;
     padding: 0 20px;
     display: inline-block;
     transition: 250ms background-color;
     line-height: 64px;
 }
 
 .DemoHeader-link:hover{
-    background-color: @background;
+    background-color: $background;
 }
 
 .DemoHeader-github{

angular/app/components/register-form/register-form.less renamed to angular/app/components/register-form/register-form.scss

@@ -1,18 +1,16 @@
-@import "./angular/material/project";
+@import "../../../material/project";
 
 body{
-    font-family: 'Lato';
+    font-family: 'Lato', sans-serif;
 }
 
 .Landing{
     height: 100%;
 }
 
 .Landing-cover{
-    background-image: url('/img/cover.jpg');
     background-size: cover;
-    background-attachment: fixed;
-    background-position: center;
+    background: url('/img/cover.jpg') fixed center;
     width: 100%;
     height: 700px;
 }
@@ -42,9 +40,9 @@ body{
 .Landing-getStarted{
     padding: 12px 30px;
     font-weight: bold;
-    color: @black !important;
+    color: $black !important;
     border-radius: 4px;
-    text-transform: box-shadow 250ms;
+    transition: box-shadow 250ms;
 }
 
 .Landing-getStarted:hover{
@@ -59,7 +57,7 @@ body{
 
 .Landing-ampersand{
     font-size: 50px;
-    color: @brand;
+    color: $brand;
     position: absolute;
     top: 70px;
     left: 0;
@@ -69,27 +67,27 @@ body{
 }
 
 .Landing-angular{
-    background-color: @background;
-    border-left: 1px solid @border;
+    background-color: $background;
+    border-left: 1px solid $border;
 }
 
 .Landing-laravel,
 .Landing-angular{
     text-align: center;
-    color: @navy;
-    border-bottom: 1px solid @border;
+    color: $navy;
+    border-bottom: 1px solid $border;
 }
 
 .Landing-laravelAngular-title{
     padding-top: 30px;
     margin-bottom: 15px;
     font-weight: 300;
     letter-spacing: -1px;
-    color: @navy;
+    color: $navy;
 }
 
 .Landing-laravelAngular-subtitle{
-    color: @black;
+    color: $black;
     padding-left: 30px;
     padding-right: 30px;
     font-weight: 300;
@@ -98,7 +96,7 @@ body{
 .DemoCode{
     font-family: "Lucida Console", Monaco, monospace;
     overflow: auto !important;
-    padding: 10px;
+    padding: 10px 10px 10px 20px;
     line-height: 1.428571429;
     color: #333333;
     word-break: break-all;
@@ -109,7 +107,6 @@ body{
     width: 80%;
     margin: 30px auto 100px;
     text-align: left;
-    padding-left: 20px;
     font-size: 14px;
 }
 
@@ -118,11 +115,11 @@ body{
 }
 
 .DemoCode-comment{
-    color: @grey;
+    color: $grey;
 }
 
 .DemoCode-operator{
-    color: @grey;
+    color: $grey;
 }
 
 .DemoCode-string{
@@ -142,13 +139,13 @@ body{
     font-weight: 300;
     letter-spacing: -1px;
     margin-bottom: 15px;
-    color: @navy;
+    color: $navy;
 }
 
 .Landing-featuresMainDescription{
     width: 70%;
     margin: 0 auto 30px;
-    color: @black;
+    color: $black;
     font-weight: 300;
 }
 
@@ -164,7 +161,7 @@ body{
 }
 
 .Landing-featuresTitle{
-    color: @navy;
+    color: $navy;
     letter-spacing: -1px;
     margin-top: 40px;
 }
@@ -174,11 +171,11 @@ body{
     padding-left: 50px;
     padding-right: 50px;
     font-weight: 300;
-    color: @black;
+    color: $black;
 }
 
 .Landing-featuresEntry--restful{
-    background-color: @brand;
+    background-color: $brand;
 }
 
 .Landing-featuresEntry--jwt{

angular/app/components/reset-password/reset-password.less renamed to angular/app/components/reset-password/reset-password.scss

@@ -0,0 +1,6 @@
+$brand: #00A4C6;
+$black: #535362;
+$grey: #888888;
+$navy: #21455B;
+$border: #E9F0F3;
+$background: #F6F9FA;

angular/app/pages/footer/footer.less renamed to angular/app/pages/footer/footer.scss

@@ -9,7 +9,7 @@
         "laravel/framework": "5.2.*",
         "tymon/jwt-auth": "0.5.*",
         "barryvdh/laravel-cors": "0.7.x",
-        "laravelangular/generators": "2.5.x",
+        "laravelangular/generators": "2.6.x",
         "dingo/api": "1.0.x@dev"
     },
     "require-dev": {

angular/app/pages/forgot-password/forgot-password.less renamed to angular/app/pages/forgot-password/forgot-password.scss

@@ -4,7 +4,7 @@
     },
     "css": {
         "outputFolder": "public/css",
-        "less": {
+        "sass": {
             "folder": "../../angular/"
         }
     }

angular/app/pages/header/header.less renamed to angular/app/pages/header/header.scss

@@ -37,7 +37,7 @@ elixir(function(mix) {
         .bower()
         .angular('./angular/')
         .ngHtml2Js('./angular/**/*.html')
-        .less('./angular/**/*.less', 'public/css')
+        .sass('./angular/**/*.scss', 'public/css')
         .version(assets)
         .browserSync({
             proxy: 'localhost:8000'

angular/app/pages/landing/landing.less renamed to angular/app/pages/landing/landing.scss

@@ -18,23 +18,18 @@
     "vinyl-source-stream": "~1.0.0"
   },
   "dependencies": {
-    "gulp-add-src": "^0.2.0",
-    "gulp-concat": "^2.6.0",
-    "gulp-sourcemaps": "^1",
-    "gulp-uglify": "^1",
-    "gulp-util": "^3.0.3",
     "babel": "^4.0.2",
     "babel-core": "^6.4.5",
     "babel-loader": "^6.2.1",
     "babel-preset-es2015": "^6.3.13",
     "babelify": "^5.0.3",
     "browserify": "~8.1.3",
-    "gulp": "^3.8.8",
-    "webpack": "^1.12.11",
-    "webpack-dev-server": "^1.14.1",
-    "webpack-stream": "^3.1.0",
     "eslint": "^1.10.3",
     "eslint-plugin-angular": "^0.15.0",
+    "gulp": "^3.9.1",
+    "gulp-sass": "^2.3.2",
+    "gulp-add-src": "^0.2.0",
+    "gulp-concat": "^2.6.0",
     "gulp-concat-sourcemap": "^1.3.1",
     "gulp-cssnano": "^2.1.1",
     "gulp-eslint": "^1.1.1",
@@ -44,9 +39,15 @@
     "gulp-ng-annotate": "^1",
     "gulp-ng-html2js": "^0.2.0",
     "gulp-notify": "^2.0.0",
-    "laravel-elixir": "^4.2.1",
+    "gulp-sourcemaps": "^1",
+    "gulp-uglify": "^1",
+    "gulp-util": "^3.0.3",
+    "laravel-elixir": "^5.0.0",
     "main-bower-files": "^2.1.0",
-    "underscore": "^1.8.3"
+    "underscore": "^1.8.3",
+    "webpack": "^1.12.11",
+    "webpack-dev-server": "^1.14.1",
+    "webpack-stream": "^3.1.0"
   },
   "engines": {
     "npm": ">=3"