Initial SASS support

sass/koala-config.json

@@ -0,0 +1,24 @@
+// Default project settings, you can edit it and set custom settings.
+{
+	// The mappings of source directory and output directory
+	"mappings": [
+		 {	
+		 	//"src": "path/to/source",
+		 	"dest": "../css"
+		 }
+	],
+
+	// Add the ignore rules that Koala will not search them.
+	// e.g. ["*.json", "*.txt", "test", "path/libs"]
+	"ignores": ["partials", "*.css"],
+
+	// Options of Compilers.
+	"options": {
+		// "key": "val",
+		// "key2": "val2"
+		// ...
+	},
+
+	// An array of filesystem paths which should be searched for js/LESS/Sass templates imported with the @import/@append/@prepend directive.
+	"includePaths": ["/", "partials"]
+}

sass/multi-select.scss

@@ -0,0 +1,84 @@
+@import "partials/variables";
+@import "partials/mixins";
+
+.ms-container{
+  background: transparent url('#{$image-switch}') no-repeat 50% 50%;
+  width: $container-width;
+
+    &:after {
+        content: ".";
+        display: block;
+        height: 0;
+        line-height: 0;
+        font-size: 0;
+        clear: both;
+        min-height: 0;
+        visibility: hidden;
+    }
+
+    .ms-selectable, .ms-selection {
+        background: $list-bg-color;
+        color: $list-color;
+        float: left;
+        width: $list-width;
+
+        li {
+            &.disabled {
+                @include li-disabled();
+            }
+
+            &.ms-hover {
+                @include li-hover();
+            }
+        }
+    }
+
+    .ms-selectable {
+        &.ms-elem-selectable {
+            @include li-select();
+        }
+    }
+
+    .ms-selection {
+        float: right;
+
+        &.ms-elem-selection {
+            @include li-select();
+        }
+    }
+
+    .ms-list {
+        @include shadow();
+        @include list-transition();
+        @include list-radius($list-radius);
+        border: 1px solid $list-border-color;
+        position: relative;
+        height: $list-height;
+        padding: 0;
+        overflow-y: auto;
+
+        .ms-focus {
+            border-color: $focus-color;
+            @include shadowfocus();
+            outline: 0;
+            outline: thin dotted $outline-ref-value;
+        }
+    }
+
+    ul {
+        margin: 0;
+        list-style-type: none;
+        padding: 0;
+    }
+
+    .ms-optgroup-container  {
+        width: 100%;
+    }
+
+    .ms-optgroup-label {
+      margin: 0;
+      padding: $optgroup-padding 0 0 $optgroup-padding;
+      cursor: pointer;
+      color: $optgroup-label-color;
+    }
+}

sass/partials/_mixins.scss

@@ -0,0 +1,45 @@
+@mixin list-transition() {
+    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+    -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
+    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
+    transition: border linear 0.2s, box-shadow linear 0.2s;
+}
+
+@mixin list-radius($radius) {
+    -webkit-border-radius: $radius;
+    -moz-border-radius: $radius;
+    border-radius: $radius;
+}
+
+@mixin li-disabled() {
+    background-color: $disabled-bg-color;
+    color: $disabled-color;
+    cursor: text;
+}
+
+@mixin li-hover() {
+    cursor: pointer;
+    color: $hover-color;
+    text-decoration: none;
+    background-color: $hover-bg-color;
+}
+
+@mixin li-select() {
+    border-bottom: 1px #eee solid;
+    padding: 2px 10px;
+    color: #555;
+    font-size: 14px;
+}
+
+@mixin shadowfocus() {
+    -webkit-box-shadow: inset 0 1px 1px $shadow-color, 0 0 8px $focus-color;
+    -moz-box-shadow: inset 0 1px 1px $shadow-color, 0 0 8px $focus-color;
+    box-shadow: inset 0 1px 1px $shadow-color, 0 0 8px $focus-color;
+}
+
+@mixin shadow() {
+    -webkit-box-shadow: inset 0 1px 1px $shadow-color;
+    -moz-box-shadow: inset 0 1px 1px $shadow-color;
+    box-shadow: inset 0 1px 1px $shadow-color;
+}

sass/partials/_variables.scss

@@ -0,0 +1,17 @@
+$outline-ref-value: \9;
+$image-switch: '../img/switch.png';
+$focus-color: rgba(82, 168, 236, 0.6);
+$hover-color: #fff;
+$hover-bg-color: #08c;
+$shadow-color: rgba(0, 0, 0, 0.075);
+$optgroup-label-color: #999;
+$disabled-bg-color: #eee;
+$disabled-color: #aaa;
+$list-color: #555555;
+$list-bg-color: #fff;
+$list-border-color: #ccc;
+$list-height: 200px;
+$list-radius: 3px;
+$list-width: 45%;
+$optgroup-padding: 5px;
+$container-width: 370px;