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 || {};
(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',
......
......@@ -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());
......
......@@ -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
......@@ -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>
......
......@@ -36,6 +36,7 @@
</div>
</div>
<div class="row">
<div class="col-md-4">
<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