admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-18 02:21:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): Update styling of embedded NDV (no-changelog) (#17366)

Browse Source
This commit is contained in:
Suguru Inoue
2025-07-22 11:39:14 +02:00
committed by GitHub
parent c1aae67a04
commit ee67e9e354
31 changed files with 623 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.vue
View File

@@ -10,12 +10,14 @@ interface TabsProps {
modelValue?: Value;
options?: Array<TabOptions<Value>>;
size?: 'small' | 'medium';
variant?: 'modern' | 'legacy';
}
withDefaults(defineProps<TabsProps>(), {
modelValue: undefined,
options: () => [],
size: 'medium',
variant: 'legacy',
});
const scrollPosition = ref(0);
@@ -69,7 +71,14 @@ const scrollRight = () => scroll(50);
</script>
<template>
<div :class="['n8n-tabs', $style.container, size === 'small' ? $style.small : '']">
<div
:class="[
'n8n-tabs',
$style.container,
size === 'small' ? $style.small : '',
variant === 'modern' ? $style.modern : '',
]"
>
<div v-if="scrollPosition > 0" :class="$style.back" @click="scrollLeft">
<N8nIcon icon="chevron-left" size="small" />
</div>
@@ -133,6 +142,11 @@ const scrollRight = () => scroll(50);
height: 24px;
min-height: 24px;
width: 100%;
&.modern {
height: 26px;
min-height: 26px;
}
}
.tabs {
@@ -158,11 +172,9 @@ const scrollRight = () => scroll(50);
--active-tab-border-width: 2px;
display: block;
padding: 0 var(--spacing-s);
padding-bottom: calc(
var(--spacing-bottom-tab, var(--spacing-2xs)) + var(--active-tab-border-width)
);
font-size: var(--font-size-tab, var(--font-size-s));
font-weight: var(--font-weight-tab, var(--font-weight-regular));
padding-bottom: calc(var(--spacing-2xs) + var(--active-tab-border-width));
font-size: var(--font-size-s);
cursor: pointer;
white-space: nowrap;
color: var(--color-text-base);
@@ -174,6 +186,12 @@ const scrollRight = () => scroll(50);
margin-left: var(--spacing-4xs);
}
.modern & {
padding-bottom: calc(var(--spacing-xs) + var(--active-tab-border-width));
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-bold);
}
.small & {
font-size: var(--font-size-2xs);
}
@@ -181,8 +199,12 @@ const scrollRight = () => scroll(50);
.activeTab {
color: var(--color-primary);
padding-bottom: var(--spacing-bottom-tab, var(--spacing-2xs));
padding-bottom: var(--spacing-2xs);
border-bottom: var(--color-primary) var(--active-tab-border-width) solid;
.modern & {
padding-bottom: var(--spacing-xs);
}
}
.alignRight:not(.alignRight + .alignRight) {