feat: more precise sidebar position when float and hidden

This commit is contained in:
EnixCoda 2021-05-24 22:37:42 +08:00
parent 659fa2122b
commit 87f40565f0
No known key found for this signature in database
GPG key ID: 0C1A07377913A1DD
2 changed files with 8 additions and 7 deletions

View file

@ -108,7 +108,7 @@ export function SideBar() {
</Portal>
<SideBarBodyWrapper
className={cx(`toggle-mode-${sidebarToggleMode}`, {
hidden: error || !shouldShow,
collapsed: error || !shouldShow,
})}
baseSize={baseSize}
>

View file

@ -264,6 +264,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
color: var(--gitako-text-link);
}
$resizeHandlerWidth: 1px;
.#{$name}-side-bar-body-wrapper {
position: fixed;
top: 0;
@ -273,16 +274,16 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
display: flex;
&.toggle-mode-persistent {
&.hidden {
&.collapsed {
@extend %hidden;
}
}
&.toggle-mode-float {
left: 0%;
transition: all 0.3s ease;
&.hidden {
left: -100%;
left: 0;
transition: all 0.25s cubic-bezier(0.55, 0.06, 0.68, 0.19); // values from Chrome devtools
&.collapsed {
left: calc(0px - #{$resizeHandlerWidth} - var(--gitako-width));
}
}
@ -297,7 +298,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
user-select: none;
width: 0;
background: var(--gitako-bg-tertiary);
border-right: 1px solid var(--gitako-border-tertiary);
border-right: $resizeHandlerWidth solid var(--gitako-border-tertiary);
overflow: hidden;
box-sizing: content-box;
&:hover,