From 8e0230488fa6de448ba4493bb6d6aac600bf7562 Mon Sep 17 00:00:00 2001 From: Francis Lachapelle Date: Mon, 4 May 2015 13:36:04 -0400 Subject: [PATCH] (css) Remove Compass dependency --- UI/WebServerResources/Gruntfile.js | 51 ++++--------------- UI/WebServerResources/bower.json | 2 +- UI/WebServerResources/package.json | 2 +- .../scss/components/button/button.scss | 2 +- .../components/pseudo-input/pseudo-input.scss | 13 +++-- UI/WebServerResources/scss/core/mixins.scss | 30 ++++++++++- UI/WebServerResources/scss/styles.scss | 8 +-- 7 files changed, 48 insertions(+), 60 deletions(-) diff --git a/UI/WebServerResources/Gruntfile.js b/UI/WebServerResources/Gruntfile.js index 4c4d22c87..18b7ae26b 100644 --- a/UI/WebServerResources/Gruntfile.js +++ b/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']); }; diff --git a/UI/WebServerResources/bower.json b/UI/WebServerResources/bower.json index f93476ae5..a47470e47 100644 --- a/UI/WebServerResources/bower.json +++ b/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" diff --git a/UI/WebServerResources/package.json b/UI/WebServerResources/package.json index 7ed9a0464..92dfa1261 100644 --- a/UI/WebServerResources/package.json +++ b/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" } diff --git a/UI/WebServerResources/scss/components/button/button.scss b/UI/WebServerResources/scss/components/button/button.scss index 2e05ea32e..984ec3996 100644 --- a/UI/WebServerResources/scss/components/button/button.scss +++ b/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; } } diff --git a/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss b/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss index 8c5f76311..e917b3ba9 100644 --- a/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss +++ b/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; } diff --git a/UI/WebServerResources/scss/core/mixins.scss b/UI/WebServerResources/scss/core/mixins.scss index 2276b0d5b..0e8e6161a 100644 --- a/UI/WebServerResources/scss/core/mixins.scss +++ b/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; + } +} diff --git a/UI/WebServerResources/scss/styles.scss b/UI/WebServerResources/scss/styles.scss index d5d322c92..f46051ac0 100755 --- a/UI/WebServerResources/scss/styles.scss +++ b/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