updated styles
This commit is contained in:
parent
7505417478
commit
0925edb4ff
|
@ -5,12 +5,7 @@ export const calculateTop = (boundingRect, outerHeight) => {
|
|||
return bottomOverflow < 0 ? boundingRect.top - Math.abs(bottomOverflow) : boundingRect.top;
|
||||
};
|
||||
|
||||
export const createArrowStyles = (boundingRect, top) => `.sidebar-sub-level-items::before { transform: translate3d(0, ${boundingRect.top - top}px, 0); }`;
|
||||
|
||||
export default () => {
|
||||
const style = document.createElement('style');
|
||||
document.head.appendChild(style);
|
||||
|
||||
$('.sidebar-top-level-items > li:not(.active)').on('mouseover', (e) => {
|
||||
const $this = e.currentTarget;
|
||||
const $subitems = $('.sidebar-sub-level-items', $this).show();
|
||||
|
@ -22,14 +17,6 @@ export default () => {
|
|||
$subitems.css({
|
||||
transform: `translate3d(0, ${top}px, 0)`,
|
||||
});
|
||||
|
||||
style.sheet.insertRule(createArrowStyles(boundingRect, top), 0);
|
||||
}
|
||||
}).on('mouseout', (e) => {
|
||||
$('.sidebar-sub-level-items', e.currentTarget).hide();
|
||||
|
||||
if (style.sheet.rules.length) {
|
||||
style.sheet.deleteRule(0);
|
||||
}
|
||||
});
|
||||
}).on('mouseout', e => $('.sidebar-sub-level-items', e.currentTarget).hide());
|
||||
};
|
||||
|
|
|
@ -151,6 +151,12 @@ $new-sidebar-width: 220px;
|
|||
|
||||
.sidebar-top-level-items {
|
||||
> li {
|
||||
> a {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.active) {
|
||||
.sidebar-sub-level-items {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
|
@ -158,43 +164,26 @@ $new-sidebar-width: 220px;
|
|||
top: 0;
|
||||
left: 220px;
|
||||
width: 150px;
|
||||
margin-left: -1px;
|
||||
padding-bottom: 0;
|
||||
background-color: $white-light;
|
||||
background-color: $hover-background;
|
||||
box-shadow: 2px 1px 3px $dropdown-shadow-color;
|
||||
border: 1px solid $dropdown-border-color;
|
||||
border-left: 0;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 21px 12px;
|
||||
border-color: transparent transparent transparent $hover-background;
|
||||
pointer-events: none;
|
||||
}
|
||||
border-radius: 0 3px 3px 0;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 44px;
|
||||
left: -20px;
|
||||
left: -30px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 11px 16px 11px 24px;
|
||||
color: $white-light;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: transparent;
|
||||
font-weight: 600;
|
||||
background-color: darken($hover-background, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { calculateTop, createArrowStyles } from '~/fly_out_nav';
|
||||
import { calculateTop } from '~/fly_out_nav';
|
||||
|
||||
describe('Fly out sidebar navigation', () => {
|
||||
describe('calculateTop', () => {
|
||||
|
@ -22,16 +22,4 @@ describe('Fly out sidebar navigation', () => {
|
|||
).toBe(window.innerHeight - 100);
|
||||
});
|
||||
});
|
||||
|
||||
describe('createArrowStyles', () => {
|
||||
it('returns translate3d styles', () => {
|
||||
const boundingRect = {
|
||||
top: 100,
|
||||
};
|
||||
|
||||
expect(
|
||||
createArrowStyles(boundingRect, 50),
|
||||
).toContain('translate3d(0, 50px, 0)');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue