Commit 2448205a authored by mahogony's avatar mahogony
Browse files

Add backdrop to the dom and some interactions

parent 2c1bcb9b
......@@ -21,6 +21,16 @@
width: 10.9375em;
height: 7.8125em;
}
.ipick-backdrop {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
background-color: rgba(0,0,0);
opacity: 0;
}
.ipick-is-open #ipick-button img:hover {
filter: none;
}
......@@ -72,12 +82,31 @@
.ipick-open .ipick-menu {
max-width: 18.75em;
}
.ipick-open .ipick-backdrop {
display: block;
animation-name: back;
animation-duration: 300ms;
opacity: 0.25;
z-index: 999;
}
@keyframes back {
from {
opacity: 0;
}
to {
opacity: 0.25;
}
}
`;
// add styles
var styleDom = document.createElement("style");
styleDom.innerHTML = style;
document.body.appendChild(styleDom);
// create backdrop
var backdrop = document.createElement("div")
backdrop.className = "ipick-backdrop";
// create menu
var menu = document.createElement("div");
menu.className = "ipick-menu";
......@@ -107,6 +136,7 @@
// add menu to the dom
document.body.appendChild(menu);
document.body.appendChild(backdrop);
/**
* Open the menu
......@@ -132,6 +162,12 @@
menu.dispatchEvent(event)
}
/**
* Add a backdrop
*/
backdrop.onclick = function() {
toggle.click();
}
if (!document.cookie.match(/ipick-blinked/)) {
setTimeout(function(){document.body.classList.add("ipick-appear")}, 300);
......
Markdown is supported
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