mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-11 21:07:28 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Testing a couple of styles.

Browse source
This commit is contained in:
Giulio Andreini 2024-11-19 11:46:06 +01:00
parent 6cf0abab5b
commit a48184c67d
1 changed files with 59 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
packages/editor-ui/src/components/MainHeader/MainHeader.vue
View file

@ -197,6 +197,9 @@ async function navigateToExecutionsView(openInNewTab: boolean) {
> >
Star Star
</GithubButton> </GithubButton>
<div class="github-button__close">
<n8n-icon icon="times" color="text-light" class="mr-5xs" />
</div>
</div> </div>
</div> </div>
</template> </template>
@ -237,5 +240,61 @@ async function navigateToExecutionsView(openInNewTab: boolean) {
background-color: var(--color-background-xlight); background-color: var(--color-background-xlight);
border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base); border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
border-left: var(--border-width-base) var(--border-style-base) var(--color-foreground-base); border-left: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
/* // Style 1
&:hover {
.github-button__close {
display: block;
}
}
&__close {
position: absolute;
top: 3px;
right: 3px;
display: none;
cursor: pointer;
// color: white;
// background-color: red;
.n8n-text {
font-size: var(--font-size-2xs);
}
&:hover .n8n-text {
color: var(--color-primary);
}
} */
// Style 2
&:hover {
.github-button__close {
display: block;
}
}
&__close {
position: absolute;
top: 11px;
right: 11px;
display: none;
cursor: pointer;
.n8n-text {
display: flex;
justify-items: center;
align-items: center;
width: 14px;
height: 14px;
color: white;
font-size: var(--font-size-3xs);
background-color: var(--color-foreground-xdark);
border-radius: 7px;
}
&:hover .n8n-text {
background-color: var(--color-primary);
}
}
} }
</style> </style>