wbrawner/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

popover style for apps and user dropdown menus

Browse source
This commit is contained in:
Jan-Christoph Borchardt 2015-03-17 13:47:54 +01:00
parent dac4436807
commit 095197d1a7
2 changed files with 43 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
core/css/header.css
View file

@ -139,19 +139,39 @@
#navigation {
position: fixed;
top: 45px;
top: 55px;
left: 10px;
width: 265px;
max-height: 85%;
margin-top: 0;
padding-bottom: 10px;
background-color: rgba(36, 40, 47, .97);
border-bottom-right-radius: 7px;
box-shadow: 0 0 7px rgba(29,45,68,.97);
background-color: rgba(0, 0, 0, .97);
/*box-shadow: 0 0 7px rgba(30, 30, 30, .97);*/
border-radius: 5px;
display: none;
overflow-y: auto;
overflow-x: hidden;
/*overflow-y: auto;
overflow-x: hidden;*/
z-index: 2000;
}
/* arrow look */
#navigation:after, #expanddiv:after {
bottom: 100%;
left: 47%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: rgba(0, 0, 0, .97);
border-width: 10px;
margin-left: -10px;
}
#expanddiv:after {
left: 75%;
}
#navigation, #navigation * {
-moz-box-sizing:border-box;
box-sizing:border-box;
@ -182,15 +202,15 @@
/* icon opacity and hover effect */
#navigation a img,
#navigation a span {
/* 50% opacity when inactive */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
opacity: .7;
}
#navigation a:hover img, #navigation a:focus img,
#navigation a:hover span, #navigation a:focus span,
#navigation a:hover img,
#navigation a:focus img,
#navigation a:hover span,
#navigation a:focus span,
#navigation a.active img,
#navigation a.active span {
/* full opacity for the active app or when hovered/focused */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
opacity: 1;
}
@ -289,13 +309,13 @@
}
#expanddiv {
position: absolute;
right: 0;
top: 45px;
right: 10px;
top: 55px;
z-index: 2000;
display: none;
background-color: #383c43;
border-bottom-left-radius: 7px;
box-shadow: 0 0 7px rgb(29,45,68);
background-color: rgba(0, 0, 0, .97);
/*box-shadow: 0 0 7px rgba(30, 30, 30, .97);*/
border-radius: 5px;
-moz-box-sizing: border-box; box-sizing: border-box;
}
#expanddiv a {

12
core/js/js.js
View file

@ -477,7 +477,7 @@ var OC={
$menuEl.addClass('menu');
$toggle.on('click.menu', function(event) {
if ($menuEl.is(OC._currentMenu)) {
$menuEl.slideUp(OC.menuSpeed);
$menuEl.hide();
OC._currentMenu = null;
OC._currentMenuToggle = null;
return false;
@ -487,7 +487,7 @@ var OC={
// close it
OC._currentMenu.hide();
}
$menuEl.slideToggle(OC.menuSpeed);
$menuEl.toggle();
OC._currentMenu = $menuEl;
OC._currentMenuToggle = $toggle;
return false;
@ -500,7 +500,7 @@ var OC={
unregisterMenu: function($toggle, $menuEl) {
// close menu if opened
if ($menuEl.is(OC._currentMenu)) {
$menuEl.slideUp(OC.menuSpeed);
$menuEl.hide();
OC._currentMenu = null;
OC._currentMenuToggle = null;
}
@ -1128,7 +1128,7 @@ function initCore() {
}
});
$('#settings #expand').click(function(event) {
$('#settings #expanddiv').slideToggle(OC.menuSpeed);
$('#settings #expanddiv').toggle();
event.stopPropagation();
});
$('#settings #expanddiv').click(function(event){
@ -1136,7 +1136,7 @@ function initCore() {
});
//hide the user menu when clicking outside it
$(document).click(function(){
$('#settings #expanddiv').slideUp(OC.menuSpeed);
$('#settings #expanddiv').hide();
});
// all the tipsy stuff needs to be here (in reverse order) to work
@ -1159,7 +1159,7 @@ function initCore() {
return false;
}
if (OC._currentMenu) {
OC._currentMenu.slideUp(OC.menuSpeed);
OC._currentMenu.hide();
}
OC._currentMenu = null;
OC._currentMenuToggle = null;