(css) Remove Compass dependency

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