pretty menu selecting

This commit is contained in:
Devaev Maxim 2018-07-28 14:32:03 +03:00
parent 55da818b8e
commit 8bac7382bb
3 changed files with 10 additions and 3 deletions

View File

@ -51,10 +51,15 @@ ul#ctl li a.ctl-item {
ul#ctl li a.ctl-item:hover:not(.active) { ul#ctl li a.ctl-item:hover:not(.active) {
background-color: var(--bg-color-hovered); background-color: var(--bg-color-hovered);
} }
ul#ctl li a.ctl-item-selected {
box-shadow: 0 5px 0 var(--border-color-intensive) inset;
background-color: var(--bg-color-selected) !important;
}
div.ctl-dropdown-content { div.ctl-dropdown-content {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
border: var(--dark-border); border: var(--intensive-border);
border-top: none;
-webkit-border-radius: 0 0 8px 8px; -webkit-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;

View File

@ -9,6 +9,8 @@
--small-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); --small-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
--big-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4); --big-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
--border-color-intensive: #5b90bb;
--bg-color-normal: #36393f; --bg-color-normal: #36393f;
--bg-color-light: #484b51; --bg-color-light: #484b51;
--bg-color-gray: #3b3e43; --bg-color-gray: #3b3e43;

View File

@ -92,12 +92,12 @@ var ui = new function() {
__ctl_items.forEach(function(el_item) { __ctl_items.forEach(function(el_item) {
var el_menu = el_item.parentElement.querySelector(".ctl-dropdown-content"); var el_menu = el_item.parentElement.querySelector(".ctl-dropdown-content");
if (el_item === el_a && el_menu.style.display === "none") { if (el_item === el_a && el_menu.style.display === "none") {
el_item.classList.add("ctl-item-selected");
el_menu.style.display = "block"; el_menu.style.display = "block";
el_item.setAttribute("style", "background-color: var(--bg-color-selected)");
all_hidden &= false; all_hidden &= false;
} else { } else {
el_item.classList.remove("ctl-item-selected");
el_menu.style.display = "none"; el_menu.style.display = "none";
el_item.setAttribute("style", "background-color: default");
} }
}); });
if (all_hidden) { if (all_hidden) {