added color options (currently grey and blue)

javascript/src/Droplet.js

@@ -17,7 +17,7 @@ var QfqNS = QfqNS || {};
 
 (function (n) {
 
-    n.Droplet = function (url) {
+    n.Droplet = function (url, color) {
         this._$trigger = {};
         this.position = {};
         this._$container = {};
@@ -26,6 +26,7 @@ var QfqNS = QfqNS || {};
         this.content = {};
         this.forms = [];
         this.url = url;
+        this.color = color;
     };
 
     n.Droplet.prototype.on = n.EventEmitter.onMixin;
@@ -75,7 +76,7 @@ var QfqNS = QfqNS || {};
             this._$trigger.offset().top + this._$trigger.outerHeight()
         );
         var $container = $("<div />", {
-            class: "qfq-droplet-container"
+            class: "qfq-droplet-container qfq-droplet-" + this.color
         });
         $container.css({
             position: 'absolute',

javascript/src/DropletController.js

@@ -25,10 +25,14 @@ var QfqNS = QfqNS || {};
 
         $(".qfq-droplet").each(function() {
             var url = false;
+            var color = "grey";
             if ($(this).data("content")) {
                 url = $(this).data("content");
             }
-            var droplet = new QfqNS.Droplet(url);
+            if ($(this).data("color")) {
+                color = $(this).data("color");
+            }
+            var droplet = new QfqNS.Droplet(url, color);
             droplet.setTrigger($(this));
             droplet.setContainer(droplet.createContainerBellowTrigger());
 

less/qfq-bs.css.less

@@ -499,10 +499,8 @@ select.qfq-locked:invalid {
 
 .qfq-droplet-container {
   position: absolute;
-  border: 2px solid #25adf1;
   border-radius: 6px;
   padding: 15px;
-  background-image: linear-gradient(to bottom,#d9edf7 0,#b9def0 100%);
 }
 
 .qfq-droplet-container:before {
@@ -511,7 +509,6 @@ select.qfq-locked:invalid {
   left: 10px;
   top: -10px;
   border: 5px solid;
-  border-color: transparent #25adf1 #25adf1 transparent;
 }
 
 .qfq-droplet-container:after {
@@ -520,5 +517,31 @@ select.qfq-locked:invalid {
   left: 20px;
   top: -10px;
   border: 5px solid;
+}
+
+.qfq-droplet-grey {
+  border: 2px solid #ccc;
+  background-image: linear-gradient(to bottom,#f0f0f0 0,#e0e0e0 100%);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
+}
+
+.qfq-droplet-container.qfq-droplet-grey:after {
+  border-color: transparent transparent #ccc #ccc;
+}
+
+.qfq-droplet-container.qfq-droplet-grey:before {
+  border-color: transparent #ccc #ccc transparent;
+}
+
+.qfq-droplet-blue {
+  border: 2px solid #25adf1;
+  background-image: linear-gradient(to bottom,#d9edf7 0,#b9def0 100%);
+}
+
+.qfq-droplet-container.qfq-droplet-blue:after {
   border-color: transparent transparent #25adf1 #25adf1;
 }
+
+.qfq-droplet-container.qfq-droplet-blue:before {
+  border-color: transparent #25adf1 #25adf1 transparent;
+}
\ No newline at end of file

mockup/droplet.html

@@ -53,10 +53,10 @@
             </button>
             <button
                     id="i344"
-                    class="btn btn-primary qfq-droplet"
+                    class="btn btn-default qfq-droplet"
                     style="position: relative; left: 30px; top: 90px;"
                     data-content="mockData/checkboxlist.json"
-                    data-color="blue"
+                    data-color="grey"
             >
                 Test
             </button>

mockup/imageCutFabric.html

@@ -36,6 +36,7 @@
         </div>
     </div>
 
+
     <div class="row">
         <div class="col-md-4">
             <div class="fabric"