mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse source 
* 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
1 changed files with 7 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
packages/editor-ui/src/components/MainSidebar.vue
View file

@ -9,13 +9,12 @@
> >
<div <div
id="collapse-change-button" id="collapse-change-button"
:class="{ :class="['clickable', $style.sideMenuCollapseButton]"
['clickable']: true,
[$style.sideMenuCollapseButton]: true,
[$style.expandedButton]: !isCollapsed,
}"
@click="toggleCollapse" @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"> <n8n-menu :items="mainMenuItems" :collapsed="isCollapsed" @select="handleSelect">
<template #header> <template #header>
<div :class="$style.logo"> <div :class="$style.logo">
@ -546,39 +545,16 @@ export default mixins(
z-index: 999; z-index: 999;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: flex-end; align-items: center;
color: var(--color-text-base); color: var(--color-text-base);
background-color: var(--color-foreground-xlight); background-color: var(--color-foreground-xlight);
width: 20px; width: 20px;
height: 20px; height: 20px;
border: var(--border-width-base) var(--border-style-base) var(--color-foreground-base); border: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
text-align: center;
border-radius: 50%; 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 { &:hover {
&::before { color: var(--color-primary-shade-1);
color: var(--color-primary-shade-1);
}
} }
} }