FIX: Don't outline buttons when menu is in slide out

This commit is contained in:
Robin Ward 2015-08-31 15:30:51 -04:00
parent 989c915a02
commit e2b7b2f2cf
2 changed files with 26 additions and 21 deletions

View file

@ -37,11 +37,13 @@ export default Ember.Component.extend({
contentHeight = fullHeight - (offsetTop - scrollTop) - PANEL_BODY_MARGIN; contentHeight = fullHeight - (offsetTop - scrollTop) - PANEL_BODY_MARGIN;
} }
$panelBody.height(contentHeight); $panelBody.height(contentHeight);
$('body').addClass('drop-down-visible');
} else { } else {
$panelBody.height('auto'); $panelBody.height('auto');
const $header = $('header.d-header'); const $header = $('header.d-header');
const headerHeight = parseInt($header.height() + $header.offset().top - $(window).scrollTop() + 3); const headerHeight = parseInt($header.height() + $header.offset().top - $(window).scrollTop() + 3);
this.$().css({ left: "auto", top: headerHeight + "px" }); this.$().css({ left: "auto", top: headerHeight + "px" });
$('body').removeClass('drop-down-visible');
} }
}, },
@ -76,6 +78,7 @@ export default Ember.Component.extend({
$('html').off('click.close-menu-panel'); $('html').off('click.close-menu-panel');
$(window).off('scroll.discourse-menu-panel'); $(window).off('scroll.discourse-menu-panel');
this._stopWatchingSize(); this._stopWatchingSize();
$('body').removeClass('drop-down-visible');
} }
}, },

View file

@ -82,27 +82,29 @@
background-color: dark-light-diff($primary, $secondary, 90%, -60%); background-color: dark-light-diff($primary, $secondary, 90%, -60%);
} }
} }
.active .icon { .drop-down-visible & {
position: relative; .active .icon {
color: #7b7b7b; position: relative;
background-color: $secondary; color: #7b7b7b;
cursor: default; background-color: $secondary;
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); cursor: default;
border-left: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-right: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); border-left: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
&:after { border-right: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
display: block; &:after {
position: absolute; display: block;
top: 100%; position: absolute;
left: 0; top: 100%;
z-index: 1101; left: 0;
width: 100%; z-index: 1101;
height: 0; width: 100%;
content: ""; height: 0;
border-top: 1px solid $secondary; content: "";
} border-top: 1px solid $secondary;
&:hover { }
border-bottom: none; &:hover {
border-bottom: none;
}
} }
} }
[class^="fa fa-"] { [class^="fa fa-"] {