(css) Remove Compass dependency

UI/WebServerResources/Gruntfile.js

@@ -1,46 +1,13 @@
 module.exports = function(grunt) {
   grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
-    compass: {
-      dist: {
-        options: {
-          sassDir: 'scss',
-          cssDir: 'css',
-          specify: 'scss/styles.scss',
-          outputStyle: 'compact', // will be compressed by postcss
-          environment: 'production'
-        }
-      },
-      dev: {
-        options: {
-          force: true,
-          sassDir: 'scss',
-          cssDir: 'css',
-          importPath: [
-            'bower_components/compass-mixins/lib',
-            'bower_components/compass-breakpoint/stylesheets',
-            'bower_components/breakpoint-slicer/stylesheets',
-            'bower_components/breakpoint-slicer/stylesheets/breakpoint-slicer',
-            'bower_components/sassy-maps/sass'
-          ],
-          noLineComments: true,
-          sourcemap: true,
-          specify: 'scss/styles.scss',
-          raw: 'sass_options = {:cache => false\n}',
-          outputStyle: 'expanded'
-        }
-      }
-    },
     sass: {
       options: {
+        sourceMap: true,
         // require: 'SassyJSON',
         noCache: true,
-        loadPath: ['scss',
-                   'bower_components/compass-mixins/lib',
-                   'bower_components/compass-breakpoint/stylesheets',
-                   'bower_components/breakpoint-slicer/stylesheets',
-                   'bower_components/sassy-maps/sass',
-                   'node_modules/sassyjson/dist'
+        includePaths: ['scss/',
+                       'bower_components/breakpoint-sass/stylesheets/'
         ],
         style: 'expanded'
       },
@@ -76,8 +43,9 @@ module.exports = function(grunt) {
       }
     },
     watch: {
-      grunt: {files: ['Gruntfile.js']},
-
+      grunt: {
+        files: ['Gruntfile.js']
+      },
       sass: {
         files: 'scss/**/*.scss',
         tasks: ['sass']
@@ -85,10 +53,9 @@ module.exports = function(grunt) {
     }
   });
 
-  grunt.loadNpmTasks('grunt-contrib-sass');
+  grunt.loadNpmTasks('grunt-sass');
   grunt.loadNpmTasks('grunt-postcss');
   grunt.loadNpmTasks('grunt-contrib-watch');
-  grunt.loadNpmTasks('grunt-contrib-compass');
 
   grunt.task.registerTask('static', function() {
     var options = {
@@ -109,6 +76,7 @@ module.exports = function(grunt) {
       '<%= src %>/angular-recursion/angular-recursion{,.min}.js',
       '<%= src %>/angular-vs-repeat/src/angular-vs-repeat{,.min}.js',
       '<%= src %>/angular-file-upload/angular-file-upload{,.min}.js{,map}',
+      //'<%= src %>/ng-file-upload/ng-file-upload{,.min}.js{,map}',
       '<%= src %>/underscore/underscore-min.{js,map}'
     ];
     for (var j = 0; j < js.length; j++) {
@@ -152,7 +120,6 @@ module.exports = function(grunt) {
     */
   });
   grunt.task.registerTask('build', ['static', 'sass', 'postcss:dist']);
-  grunt.task.registerTask('default', ['build', 'watch']);
   grunt.task.registerTask('css', ['sass', 'postcss:dev']);
-  grunt.task.registerTask('sass-compass', ['compass:dev', 'postcss']);
+  grunt.task.registerTask('default', ['build', 'watch']);
 };

UI/WebServerResources/bower.json

@@ -14,7 +14,7 @@
     "material-design-iconic-font": "latest",
     "compass-mixins": "latest",
     "underscore": "latest",
-    "breakpoint-slicer": "~1.3.6"
+    "breakpoint-sass": ">=2.4.2"
   },
   "resolutions": {
     "angular": "1.3.x"

UI/WebServerResources/package.json

@@ -8,9 +8,9 @@
     "grunt": ">=0.4.1",
     "grunt-cli": ">=0.1.11",
     "grunt-contrib-compass": "^1.0.1",
-    "grunt-contrib-sass": ">=0.8.0",
     "grunt-contrib-watch": ">=0.5.3",
     "grunt-postcss": "^0.3.0",
+    "grunt-sass": ">=0.18.0",
     "kss": "^2.0.2",
     "sassyjson": "^1.1.8"
   }

UI/WebServerResources/scss/components/button/button.scss

@@ -135,7 +135,7 @@ md-toolbar .md-toolbar-tools .iconButton:last-child,
 
   // for transitions
   @include at(sm) {
-  margin-left: $iconButton-padding;
+    margin-left: $iconButton-padding;
   }
 }
 

UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss

@@ -1,4 +1,4 @@
-/// pseudo-input.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
+/// pseudo-input.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 
 /// Component: pseudo-input
 /// This component mimics the presentation of form fields according to Google's
@@ -32,7 +32,6 @@ $input-padding-top: 2px !default;
 .pseudo-input-container {
   display: block; // Should be (reset to ?) a plain block element
   padding: 0 2px;
-
 }
 .sg-search-field-container {
   margin-bottom: 12px;
@@ -94,13 +93,13 @@ $input-padding-top: 2px !default;
   }
 }
 
-input /deep/ #inner-editor {
+input #inner-editor {
   color: $colorGrayLight;
   line-height: inherit;
 }
 
-:root /deep/ #placeholder,
-:root /deep/ [pseudo="-webkit-input-placeholder"] {
+:root #placeholder,
+:root [pseudo="-webkit-input-placeholder"] {
   padding: 0;
   height: $mg;
   color: $colorGrayLight;
@@ -109,12 +108,12 @@ input /deep/ #inner-editor {
 }
 
 input::-webkit-datetime-edit,
-:root /deep/ div#date-time-edit {
+:root div#date-time-edit {
   opacity: 0;
 }
 
 .md-input-focused input::-webkit-datetime-edit,
-.md-input-focused /deep/ div#date-time-edit,
+.md-input-focused div#date-time-edit,
 .md-input-has-value input::-webkit-datetime-edit {
   opacity: 1;
 }

UI/WebServerResources/scss/core/mixins.scss

@@ -1,5 +1,5 @@
-/// mixins.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
-@import '../angular-material/src/core/style/mixins.scss';
+/// mixins.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
+@import '../../angular-material/src/core/style/mixins.scss';
 
 @mixin margin-selectors($before:1em, $after:1em, $start:0px, $end:0px) {
   -webkit-margin-before: $before;
@@ -31,3 +31,29 @@
     }
   }
 }
+
+// Migration functions to mimic the
+// Compass extension "Breakpoint Slicer" (https://github.com/lolmaus/breakpoint-slicer)
+// using "Breakpoint" (https://github.com/at-import/breakpoint)
+@mixin at($breakpoint) {
+  $min_idx: index($slicer-breakpoint-names, $breakpoint);
+  $min: nth($slicer-breakpoints, $min_idx) + 1;
+  $max: nth($slicer-breakpoints, $min_idx + 1);
+  @include breakpoint($min $max) {
+    @content;
+  }
+}
+@mixin from($breakpoint) {
+  $min_idx: index($slicer-breakpoint-names, $breakpoint);
+  $min: nth($slicer-breakpoints, $min_idx) + 1;
+  @include breakpoint($min) {
+    @content;
+  }
+}
+@mixin to($breakpoint) {
+  $max_idx: index($slicer-breakpoint-names, $breakpoint);
+  $max: nth($slicer-breakpoints, $max_idx + 1);
+  @include breakpoint('max-width' $max) {
+    @content;
+  }
+}

UI/WebServerResources/scss/styles.scss

@@ -1,12 +1,8 @@
 /// styles.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 
-// Compass extension imports - comment-out if needed
+// Breakpoint (https://github.com/at-import/breakpoint)
 // ------------------------------------------------------------------------------
-@import '_breakpoint-slicer.sass';
-@import '_breakpoint.scss', '_sassy-maps.scss';
-// This is no longer required because we use grunt-contrib-compass (ruby required)
-//@import '_compass.scss';
-//@import 'SassyJSON';
+@import 'breakpoint';
 
 @import 'core/variables'; // Will be replace by a complete 'config file