Commit d7ec8d2d authored by bbaer's avatar bbaer
Browse files

added color options (currently grey and blue)

parent 33b63409
Pipeline #794 passed with stage
in 1 minute and 45 seconds
...@@ -17,7 +17,7 @@ var QfqNS = QfqNS || {}; ...@@ -17,7 +17,7 @@ var QfqNS = QfqNS || {};
(function (n) { (function (n) {
n.Droplet = function (url) { n.Droplet = function (url, color) {
this._$trigger = {}; this._$trigger = {};
this.position = {}; this.position = {};
this._$container = {}; this._$container = {};
...@@ -26,6 +26,7 @@ var QfqNS = QfqNS || {}; ...@@ -26,6 +26,7 @@ var QfqNS = QfqNS || {};
this.content = {}; this.content = {};
this.forms = []; this.forms = [];
this.url = url; this.url = url;
this.color = color;
}; };
n.Droplet.prototype.on = n.EventEmitter.onMixin; n.Droplet.prototype.on = n.EventEmitter.onMixin;
...@@ -75,7 +76,7 @@ var QfqNS = QfqNS || {}; ...@@ -75,7 +76,7 @@ var QfqNS = QfqNS || {};
this._$trigger.offset().top + this._$trigger.outerHeight() this._$trigger.offset().top + this._$trigger.outerHeight()
); );
var $container = $("<div />", { var $container = $("<div />", {
class: "qfq-droplet-container" class: "qfq-droplet-container qfq-droplet-" + this.color
}); });
$container.css({ $container.css({
position: 'absolute', position: 'absolute',
......
...@@ -25,10 +25,14 @@ var QfqNS = QfqNS || {}; ...@@ -25,10 +25,14 @@ var QfqNS = QfqNS || {};
$(".qfq-droplet").each(function() { $(".qfq-droplet").each(function() {
var url = false; var url = false;
var color = "grey";
if ($(this).data("content")) { if ($(this).data("content")) {
url = $(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.setTrigger($(this));
droplet.setContainer(droplet.createContainerBellowTrigger()); droplet.setContainer(droplet.createContainerBellowTrigger());
......
...@@ -499,10 +499,8 @@ select.qfq-locked:invalid { ...@@ -499,10 +499,8 @@ select.qfq-locked:invalid {
.qfq-droplet-container { .qfq-droplet-container {
position: absolute; position: absolute;
border: 2px solid #25adf1;
border-radius: 6px; border-radius: 6px;
padding: 15px; padding: 15px;
background-image: linear-gradient(to bottom,#d9edf7 0,#b9def0 100%);
} }
.qfq-droplet-container:before { .qfq-droplet-container:before {
...@@ -511,7 +509,6 @@ select.qfq-locked:invalid { ...@@ -511,7 +509,6 @@ select.qfq-locked:invalid {
left: 10px; left: 10px;
top: -10px; top: -10px;
border: 5px solid; border: 5px solid;
border-color: transparent #25adf1 #25adf1 transparent;
} }
.qfq-droplet-container:after { .qfq-droplet-container:after {
...@@ -520,5 +517,31 @@ select.qfq-locked:invalid { ...@@ -520,5 +517,31 @@ select.qfq-locked:invalid {
left: 20px; left: 20px;
top: -10px; top: -10px;
border: 5px solid; 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; 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
...@@ -53,10 +53,10 @@ ...@@ -53,10 +53,10 @@
</button> </button>
<button <button
id="i344" id="i344"
class="btn btn-primary qfq-droplet" class="btn btn-default qfq-droplet"
style="position: relative; left: 30px; top: 90px;" style="position: relative; left: 30px; top: 90px;"
data-content="mockData/checkboxlist.json" data-content="mockData/checkboxlist.json"
data-color="blue" data-color="grey"
> >
Test Test
</button> </button>
......
...@@ -36,6 +36,7 @@ ...@@ -36,6 +36,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<div class="fabric" <div class="fabric"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment