fix(editor): Fix sidebar button styling (#6138)

* fix(editor): Fix sidebar button styling
* Making offset equal for both button versions
This commit is contained in:
Milorad FIlipović 2023-04-28 16:46:53 +02:00 committed by GitHub
parent 71ae6c66ef
commit a72a5112f3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -9,13 +9,12 @@
>
<div
id="collapse-change-button"
:class="{
['clickable']: true,
[$style.sideMenuCollapseButton]: true,
[$style.expandedButton]: !isCollapsed,
}"
:class="['clickable', $style.sideMenuCollapseButton]"
@click="toggleCollapse"
></div>
>
<n8n-icon v-if="isCollapsed" icon="chevron-right" size="xsmall" class="ml-5xs" />
<n8n-icon v-else icon="chevron-left" size="xsmall" class="mr-5xs" />
</div>
<n8n-menu :items="mainMenuItems" :collapsed="isCollapsed" @select="handleSelect">
<template #header>
<div :class="$style.logo">
@ -546,39 +545,16 @@ export default mixins(
z-index: 999;
display: flex;
justify-content: center;
align-items: flex-end;
align-items: center;
color: var(--color-text-base);
background-color: var(--color-foreground-xlight);
width: 20px;
height: 20px;
border: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
text-align: center;
border-radius: 50%;
&::before {
display: block;
position: relative;
left: px;
top: -2.5px;
transform: rotate(270deg);
content: '\e6df';
font-family: element-icons;
font-size: var(--font-size-2xs);
font-weight: bold;
color: var(--color-text-base);
}
&.expandedButton {
&::before {
transform: rotate(90deg);
left: 0px;
}
}
&:hover {
&::before {
color: var(--color-primary-shade-1);
}
color: var(--color-primary-shade-1);
}
}