kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

updated styles

This commit is contained in:
Phil Hughes 2017-07-19 16:57:00 +01:00
parent 7505417478
commit 0925edb4ff
3 changed files with 13 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/assets/javascripts/fly_out_nav.js
View File

@ -5,12 +5,7 @@ export const calculateTop = (boundingRect, outerHeight) => {
return bottomOverflow < 0 ? boundingRect.top - Math.abs(bottomOverflow) : boundingRect.top; 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 () => { export default () => {
const style = document.createElement('style');
document.head.appendChild(style);
$('.sidebar-top-level-items > li:not(.active)').on('mouseover', (e) => { $('.sidebar-top-level-items > li:not(.active)').on('mouseover', (e) => {
const $this = e.currentTarget; const $this = e.currentTarget;
const $subitems = $('.sidebar-sub-level-items', $this).show(); const $subitems = $('.sidebar-sub-level-items', $this).show();
@ -22,14 +17,6 @@ export default () => {
$subitems.css({ $subitems.css({
transform: `translate3d(0, ${top}px, 0)`, transform: `translate3d(0, ${top}px, 0)`,
}); });
style.sheet.insertRule(createArrowStyles(boundingRect, top), 0);
} }
}).on('mouseout', (e) => { }).on('mouseout', e => $('.sidebar-sub-level-items', e.currentTarget).hide());
$('.sidebar-sub-level-items', e.currentTarget).hide();
if (style.sheet.rules.length) {
style.sheet.deleteRule(0);
}
});
}; };

33
app/assets/stylesheets/new_sidebar.scss
View File

@ -151,6 +151,12 @@ $new-sidebar-width: 220px;
.sidebar-top-level-items { .sidebar-top-level-items {
> li { > li {
> a {
@media (min-width: $screen-sm-min) {
margin-right: 2px;
}
}
&:not(.active) { &:not(.active) {
.sidebar-sub-level-items { .sidebar-sub-level-items {
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
@ -158,43 +164,26 @@ $new-sidebar-width: 220px;
top: 0; top: 0;
left: 220px; left: 220px;
width: 150px; width: 150px;
margin-left: -1px; background-color: $hover-background;
padding-bottom: 0;
background-color: $white-light;
box-shadow: 2px 1px 3px $dropdown-shadow-color; box-shadow: 2px 1px 3px $dropdown-shadow-color;
border: 1px solid $dropdown-border-color; border-radius: 0 3px 3px 0;
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;
}
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 44px; top: 44px;
left: -20px; left: -30px;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: -1; z-index: -1;
} }
a { a {
padding: 11px 16px 11px 24px; color: $white-light;
&:hover, &:hover,
&:focus { &:focus {
background: transparent; background-color: darken($hover-background, 10%);
font-weight: 600;
} }
} }
} }

14
spec/javascripts/fly_out_nav_spec.js
View File

@ -1,4 +1,4 @@
import { calculateTop, createArrowStyles } from '~/fly_out_nav'; import { calculateTop } from '~/fly_out_nav';
describe('Fly out sidebar navigation', () => { describe('Fly out sidebar navigation', () => {
describe('calculateTop', () => { describe('calculateTop', () => {
@ -22,16 +22,4 @@ describe('Fly out sidebar navigation', () => {
).toBe(window.innerHeight - 100); ).toBe(window.innerHeight - 100);
}); });
}); });
describe('createArrowStyles', () => {
it('returns translate3d styles', () => {
const boundingRect = {
top: 100,
};
expect(
createArrowStyles(boundingRect, 50),
).toContain('translate3d(0, 50px, 0)');
});
});
}); });