refactor(css): Convert CSS to SCSS

Convert CSS files to SCSS in order to better structure the stylesheets
and remove duplicate code.

CONTRIBUTING.md

@@ -7,23 +7,24 @@ So you want to contribute to ngTagsInput... that's awesome! I really appreciate
 Before writing your killing feature you need to have a few things set up:
 
 1. Install Node.js (0.10.22 or higher)
-2. Install `grunt-cli` and `karma` globally
+2. Install `grunt-cli` and `karma-cli` globally
 
-        npm install -g grunt-cli karma
+        npm install -g grunt-cli karma-cli
 
-3. Clone your repository
+3. Install Ruby and the `sass` gem if you want to compile the SCSS files
+4. Clone your repository
 
         git clone https://github.com/<your_github_username>/ngTagsInput
         
-4. Go to the ngTagsInput directory
+5. Go to the ngTagsInput directory
 
         cd ngTagsInput
         
-5. Add the main ngTagsInput repo as an upstream remote
+6. Add the main ngTagsInput repo as an upstream remote
 
         git remote add upstream https://github.com/mbenford/ngTagsInput
 
-6. Install the development dependencies
+7. Install the development dependencies
 
         npm install
         
@@ -39,12 +40,15 @@ That performs all tasks needed to produce the final JavaScript and CSS files. Af
 
     ng-tags-input.js
     ng-tags-input.css
-    ng-tags-input.zip
-    ng-tags-input.min.zip
+    ng-tags-input.min.js
+    ng-tags-input.min.css
 
-While coding you can execute `grunt test` to run the tests or `grunt watch` to run them automatically every time the source code files change. You can use `karma start` as well, of course.
+In addition to `pack` there are other useful tasks you might want to use:
 
-You can also generate the code coverage report by running `grunt coverage`. This may help you be sure nothing is left untested.
+- `pack:js`: Generates only the Javascript files.
+- `test`: Runs all tests using PhantomJS (you can use `karma start` as well, of course).
+- `watch`: Runs all tests automatically every time the source code files change.
+- `coverage`: Generates the code coverage report. This may help you be sure nothing is left untested.
 
 # Guidelines
 

Gruntfile.js

@@ -26,7 +26,7 @@ module.exports = function(grunt) {
                 outMin: 'build/<%= pkg.name %>.min.js'
             },
             css: {
-                src: ['css/tags-input.css', 'css/autocomplete.css'],
+                src: 'scss/main.scss',
                 out: 'build/<%= pkg.name %>.css',
                 outMin: 'build/<%= pkg.name %>.min.css'
             },
@@ -129,11 +129,6 @@ module.exports = function(grunt) {
                 files: {
                     '<%= files.js.out %>': ['<%= files.js.src %>', '<%= files.html.out %>']
                 }
-            },
-            css: {
-                files: {
-                    '<%= files.css.out %>': ['<%= files.css.src %>']
-                }
             }
         },
         // Adds AngularJS dependency injection annotations
@@ -144,6 +139,17 @@ module.exports = function(grunt) {
                 }
             }
         },
+        sass: {
+            build: {
+                options: {
+                    style: 'expanded',
+                    noCache: true
+                },
+                files: {
+                    '<%= files.css.out %>': ['<%= files.css.src %>']
+                }
+            }
+        },
         // Minifies the JS file
         uglify: {
             build: {
@@ -280,20 +286,37 @@ module.exports = function(grunt) {
     grunt.registerTask('travis', ['test', 'coveralls']);
     grunt.registerTask('coverage', ['test', 'open:coverage']);
 
-    grunt.registerTask('pack', [
+    grunt.registerTask('javascript-only', [
         'test',
-        'clean',
         'ngtemplates',
         'concat',
         'ngAnnotate',
-        'uglify',
-        'cssmin',
-        'compress',
-        'clean:tmp'
+        'uglify'
+    ]);
+
+    grunt.registerTask('css-only', [
+        'sass',
+        'cssmin'
     ]);
 
+    grunt.registerTask('pack', function(output) {
+        var tasks = ['clean'];
+
+        if (!output || output === 'js') {
+            tasks.push('javascript-only');
+        }
+        if (!output || output === 'css') {
+            tasks.push('css-only');
+        }
+
+        tasks.push('clean:tmp');
+
+        grunt.task.run(tasks);
+    });
+
     grunt.registerTask('release', [
         'pack',
+        'compress',
         'changelog',
         'replace:changelog',
         'shell:git',

package.json

@@ -38,6 +38,7 @@
     "grunt-text-replace": "0.3.11",
     "grunt-shell": "0.6.4",
     "grunt-ngdocs": "0.2.1",
+    "grunt-contrib-sass": "0.7.3",
     "karma-coverage": "0.1.5",
     "karma-jasmine": "0.2.2",
     "karma-chrome-launcher": "0.1.2",

scss/auto-complete.scss

@@ -0,0 +1,46 @@
+@import "mixins";
+@import "variables";
+
+tags-input .autocomplete {
+  margin-top: 5px;
+  position: absolute;
+  padding: 5px 0;
+  z-index: $suggestion-box-z-index;
+  width: $suggestion-box-width;
+  background-color: $suggestion-box-color;
+  border: $suggestion-box-border;
+  @include box-shadow($suggestion-box-shadow);
+
+  .suggestion-list {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  .suggestion-item {
+    padding: 5px 10px;
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font: $suggestion-font;
+    color: $suggestion-color;
+    background-color: $suggestion-bgcolor;
+
+    &.selected {
+      color: $suggestion-color-selected;
+      background-color: $suggestion-bgcolor-selected;
+
+      em {
+        color: $suggestion-highlight-color-selected;
+        background-color: $suggestion-highlight-bgcolor-selected;
+      }
+    }
+
+    em {
+      font: $suggestion-highlight-font;
+      color: $suggestion-highlight-color;
+      background-color: $suggestion-highlight-bgcolor;
+    }
+  }
+}

scss/main.scss

@@ -0,0 +1,20 @@
+tags-input *, *:before, *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+tags-input {
+  .host {
+    position: relative;
+    margin-top: 5px;
+    margin-bottom: 5px;
+
+    &:active {
+      outline: none;
+    }
+  }
+}
+
+@import "tags-input";
+@import "auto-complete";

scss/mixins.scss

@@ -0,0 +1,10 @@
+@mixin gradient($steps...) {
+  background: -webkit-linear-gradient(top, $steps);
+  background: linear-gradient(to bottom, $steps);
+}
+
+@mixin box-shadow($args...) {
+  -webkit-box-shadow: $args;
+  -moz-box-shadow: $args;
+  box-shadow: $args;
+}