mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-18 02:21:13 +00:00
fix(editor): Migrate from @import to @use for SCSS files to address deprecation warnings (#17858)
This commit is contained in:
Csaba Tuncsik
@@ -12,6 +12,8 @@
|
||||
"dev": "pnpm serve",
|
||||
"lint": "eslint src --quiet",
|
||||
"lint:fix": "eslint src --fix",
|
||||
"lint:styles": "stylelint \"src/**/*.{scss,sass,vue}\" --cache",
|
||||
"lint:styles:fix": "stylelint \"src/**/*.{scss,sass,vue}\" --fix --cache",
|
||||
"format": "biome format --write . && prettier --write . --ignore-path ../../../.prettierignore",
|
||||
"format:check": "biome ci . && prettier --check . --ignore-path ../../../.prettierignore",
|
||||
"serve": "cross-env VUE_APP_URL_BASE_API=http://localhost:5678/ vite --host 0.0.0.0 --port 8080 dev",
|
||||
@@ -107,6 +109,7 @@
|
||||
"@faker-js/faker": "^8.0.2",
|
||||
"@iconify/json": "^2.2.349",
|
||||
"@n8n/eslint-config": "workspace:*",
|
||||
"@n8n/stylelint-config": "workspace:*",
|
||||
"@n8n/typescript-config": "workspace:*",
|
||||
"@n8n/vitest-config": "workspace:*",
|
||||
"@pinia/testing": "^0.1.6",
|
||||
|
||||
@@ -163,7 +163,7 @@ function goToUpgradeApiKeyScopes() {
|
||||
}
|
||||
|
||||
.scopes-dropdown-container :global(.el-select-group__wrap:not(:last-of-type)) {
|
||||
padding: 0px;
|
||||
padding: 0;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
|
||||
@@ -32,7 +32,7 @@ const onDrop = (value: string) => {
|
||||
justify-content: center;
|
||||
font-size: var(--font-size-s);
|
||||
transition: border-color 0.1s ease-in;
|
||||
box-shadow: inset 0 0 0px 1.5px var(--color-background-xlight);
|
||||
box-shadow: inset 0 0 0 1.5px var(--color-background-xlight);
|
||||
|
||||
&:not(.active):hover {
|
||||
border-color: var(--color-ndv-droppable-parameter);
|
||||
|
||||
@@ -748,6 +748,7 @@ async function onAskAssistantClick() {
|
||||
&__button {
|
||||
margin-left: var(--spacing-s);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
margin-top: var(--spacing-xs);
|
||||
flex-direction: row-reverse;
|
||||
span {
|
||||
margin-right: var(--spacing-5xs);
|
||||
@@ -887,8 +888,4 @@ async function onAskAssistantClick() {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.node-error-view__button {
|
||||
margin-top: var(--spacing-xs);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -102,5 +102,3 @@ function getErrorTooltipUrl(column: TestTableColumn<T>, row: T): string | undefi
|
||||
</N8nBadge>
|
||||
</N8nTooltip>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@@ -12,5 +12,3 @@ export default {
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style lang="scss"></style>
|
||||
|
||||
@@ -83,6 +83,13 @@ onBeforeUnmount(() => {
|
||||
|
||||
.body {
|
||||
padding: var(--spacing-3xs);
|
||||
padding-top: 0;
|
||||
padding-left: var(--spacing-2xs);
|
||||
color: var(--color-text-dark);
|
||||
|
||||
&:first-child {
|
||||
padding-top: var(--spacing-2xs);
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
@@ -99,15 +106,5 @@ onBeforeUnmount(() => {
|
||||
padding: 0 var(--spacing-2xs);
|
||||
padding-top: var(--spacing-2xs);
|
||||
}
|
||||
|
||||
.body {
|
||||
padding-top: 0;
|
||||
padding-left: var(--spacing-2xs);
|
||||
color: var(--color-text-dark);
|
||||
|
||||
&:first-child {
|
||||
padding-top: var(--spacing-2xs);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -80,16 +80,16 @@ onMounted(() => {
|
||||
.authView {
|
||||
transform: scale(2);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.logo,
|
||||
.logoText {
|
||||
transform: scale(1.3) translateY(-2px);
|
||||
}
|
||||
.logo,
|
||||
.logoText {
|
||||
transform: scale(1.3) translateY(-2px);
|
||||
}
|
||||
|
||||
.logoText {
|
||||
margin-left: var(--spacing-xs);
|
||||
margin-right: var(--spacing-3xs);
|
||||
.logoText {
|
||||
margin-left: var(--spacing-xs);
|
||||
margin-right: var(--spacing-3xs);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebarExpanded .logo {
|
||||
|
||||
@@ -303,7 +303,7 @@ onMounted(async () => {
|
||||
}
|
||||
.textContainer {
|
||||
text-align: left;
|
||||
margin: 0px;
|
||||
margin: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
@@ -95,7 +95,7 @@ onBeforeUnmount(() => {
|
||||
<style lang="scss">
|
||||
.el-drawer__header {
|
||||
margin: 0;
|
||||
padding: 30px 30px 0 30px;
|
||||
padding: 30px 30px 0;
|
||||
}
|
||||
|
||||
.el-drawer__body {
|
||||
|
||||
@@ -238,7 +238,7 @@ const valueChanged = (parameterData: IUpdateInformation) => {
|
||||
font-size: var(--font-size-2xs);
|
||||
|
||||
:hover {
|
||||
color: #ff0000;
|
||||
color: #f00;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -456,7 +456,7 @@ function onDragEnd() {
|
||||
|
||||
&.dragging {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0px 6px 16px rgba(255, 74, 51, 0.15);
|
||||
box-shadow: 0 6px 16px rgba(255, 74, 51, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -163,9 +163,6 @@ defineExpose({
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
}
|
||||
.floatingNodes {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.nodesList {
|
||||
list-style: none;
|
||||
@@ -189,9 +186,11 @@ defineExpose({
|
||||
}
|
||||
&.outputSub {
|
||||
top: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
&.inputSub {
|
||||
bottom: 0;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
&.outputMain,
|
||||
&.inputMain {
|
||||
@@ -200,23 +199,12 @@ defineExpose({
|
||||
}
|
||||
&.outputMain {
|
||||
right: 0;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
&.inputMain {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.outputMain {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
&.outputSub {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
&.inputMain {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
&.inputSub {
|
||||
transform: translateY(50%);
|
||||
}
|
||||
}
|
||||
.connectedNode {
|
||||
border: var(--border-base);
|
||||
@@ -241,6 +229,7 @@ defineExpose({
|
||||
left: -15%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.outputMain &,
|
||||
.inputMain & {
|
||||
border-radius: var(--border-radius-large);
|
||||
@@ -248,6 +237,7 @@ defineExpose({
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.outputMain & {
|
||||
&:hover {
|
||||
transform: scale(1.2) translateX(-50%);
|
||||
@@ -268,29 +258,15 @@ defineExpose({
|
||||
transform: scale(1.2) translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.connectedNode {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
padding: var(--spacing-xs);
|
||||
.v2 .outputMain & {
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
// V2 styles override
|
||||
.v2 & {
|
||||
padding: var(--spacing-xs);
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.v2 .outputSub & {
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
.v2 .inputMain & {
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
.v2 .inputSub & {
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
@@ -30,5 +30,3 @@ const noticeStyles = computed(() => {
|
||||
{{ i18n.baseText('communityNodeUpdateInfo.available') }}
|
||||
</N8nNotice>
|
||||
</template>
|
||||
|
||||
<style lang="scss" module></style>
|
||||
|
||||
@@ -80,7 +80,7 @@ defineExpose({
|
||||
padding: 0 var(--spacing-xs);
|
||||
align-items: center;
|
||||
margin: var(--search-margin, var(--spacing-s));
|
||||
filter: drop-shadow(0px 2px 5px rgba(46, 46, 50, 0.04));
|
||||
filter: drop-shadow(0 2px 5px rgba(46, 46, 50, 0.04));
|
||||
|
||||
border: 1px solid $node-creator-border-color;
|
||||
background-color: $node-creator-search-background-color;
|
||||
|
||||
@@ -880,10 +880,13 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 0;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.column {
|
||||
@@ -917,14 +920,6 @@ onBeforeUnmount(() => {
|
||||
border-top-right-radius: var(--border-radius-large);
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.settings {
|
||||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
|
||||
@@ -70,7 +70,7 @@ const countNodesToBeSliced = (nodes: ITemplatesNode[]): number => {
|
||||
margin-left: var(--spacing-xs);
|
||||
}
|
||||
.button {
|
||||
top: 0px;
|
||||
top: 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@@ -892,7 +892,7 @@ function handleSelectAction(params: INodeParameters) {
|
||||
|
||||
&.dragging {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0px 6px 16px rgba(255, 74, 51, 0.15);
|
||||
box-shadow: 0 6px 16px rgba(255, 74, 51, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -32,7 +32,7 @@ const emit = defineEmits<{
|
||||
.overrideButton {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border: 0px;
|
||||
border: 0;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
background-color: var(--color-foreground-base);
|
||||
|
||||
@@ -58,8 +58,8 @@ const emit = defineEmits<{
|
||||
}
|
||||
|
||||
.overrideCloseButton {
|
||||
padding: 0px var(--spacing-2xs);
|
||||
border: 0px;
|
||||
padding: 0 var(--spacing-2xs);
|
||||
border: 0;
|
||||
color: var(--color-text-base);
|
||||
margin-left: auto;
|
||||
--button-hover-background-color: transparent;
|
||||
|
||||
@@ -1112,5 +1112,5 @@ function removeOverride() {
|
||||
</template>
|
||||
|
||||
<style lang="scss" module>
|
||||
@import './resourceLocator.scss';
|
||||
@use './resourceLocator.scss';
|
||||
</style>
|
||||
|
||||
@@ -2119,15 +2119,15 @@ defineExpose({ enterEditMode });
|
||||
}
|
||||
|
||||
.spinner {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--ndv-spacing);
|
||||
|
||||
* {
|
||||
color: var(--color-primary);
|
||||
min-height: 40px;
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--ndv-spacing);
|
||||
}
|
||||
|
||||
.editMode {
|
||||
|
||||
@@ -157,43 +157,41 @@ function onCopyToClipboard(object: IDataObject | IDataObject[]) {
|
||||
}
|
||||
|
||||
.markdown {
|
||||
& {
|
||||
white-space: pre-wrap;
|
||||
|
||||
h1 {
|
||||
font-size: var(--font-size-l);
|
||||
line-height: var(--font-line-height-xloose);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-m);
|
||||
line-height: var(--font-line-height-loose);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-s);
|
||||
line-height: var(--font-line-height-regular);
|
||||
}
|
||||
|
||||
pre {
|
||||
background: var(--chat--message--pre--background);
|
||||
border-radius: var(--border-radius-base);
|
||||
line-height: var(--font-line-height-xloose);
|
||||
padding: var(--spacing-s);
|
||||
font-size: var(--font-size-s);
|
||||
white-space: pre-wrap;
|
||||
|
||||
h1 {
|
||||
font-size: var(--font-size-l);
|
||||
.compact & {
|
||||
padding: var(--spacing-3xs);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
.compact & {
|
||||
line-height: var(--font-line-height-xloose);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-m);
|
||||
line-height: var(--font-line-height-loose);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-s);
|
||||
line-height: var(--font-line-height-regular);
|
||||
}
|
||||
|
||||
pre {
|
||||
background: var(--chat--message--pre--background);
|
||||
border-radius: var(--border-radius-base);
|
||||
line-height: var(--font-line-height-xloose);
|
||||
padding: var(--spacing-s);
|
||||
font-size: var(--font-size-s);
|
||||
white-space: pre-wrap;
|
||||
|
||||
.compact & {
|
||||
padding: var(--spacing-3xs);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
.compact & {
|
||||
line-height: var(--font-line-height-xloose);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -122,7 +122,7 @@ watch(
|
||||
</template>
|
||||
|
||||
<style lang="scss" module>
|
||||
@import '@/styles/variables';
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.ioSearch {
|
||||
transition: max-width 0.3s $ease-out-expo;
|
||||
|
||||
@@ -31,5 +31,3 @@ const onUserAction = (action: string) => {
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" module></style>
|
||||
|
||||
@@ -15,5 +15,3 @@ const formattedDate = computed(() =>
|
||||
<template>
|
||||
<span>{{ formattedDate }}</span>
|
||||
</template>
|
||||
|
||||
<style lang="scss" module></style>
|
||||
|
||||
@@ -188,5 +188,3 @@ const onRoleChange = ({ role, userId }: { role: string; userId: string }) => {
|
||||
</N8nDataTableServer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" module></style>
|
||||
|
||||
@@ -33,5 +33,3 @@ const i18n = useI18n();
|
||||
</template>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" module></style>
|
||||
|
||||
@@ -88,7 +88,7 @@ const i18n = useI18n();
|
||||
}
|
||||
|
||||
.description {
|
||||
padding: 0px 30px;
|
||||
padding: 0 30px;
|
||||
margin-block-start: 16px;
|
||||
margin-block-end: 30px;
|
||||
|
||||
@@ -97,7 +97,7 @@ const i18n = useI18n();
|
||||
line-height: 22px;
|
||||
color: $updates-panel-description-text-color;
|
||||
font-weight: var(--font-weight-regular);
|
||||
margin: 0 0 16px 0;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
div {
|
||||
@@ -105,7 +105,7 @@ const i18n = useI18n();
|
||||
}
|
||||
|
||||
.link {
|
||||
padding-left: 0px;
|
||||
padding-left: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
@@ -80,7 +80,7 @@ const nodeName = (node: VersionNode): string => {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 2px 10px $version-card-box-shadow-color;
|
||||
box-shadow: 0 2px 10px $version-card-box-shadow-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -112,7 +112,7 @@ const nodeName = (node: VersionNode): string => {
|
||||
.divider {
|
||||
border-bottom: $version-card-border;
|
||||
width: 100%;
|
||||
margin: 10px 0 15px 0;
|
||||
margin: 10px 0 15px;
|
||||
}
|
||||
|
||||
.description {
|
||||
|
||||
@@ -570,9 +570,6 @@ const onDragEnd = (el: HTMLElement) => {
|
||||
color: var(--color-text-base);
|
||||
font-size: var(--font-size-2xs);
|
||||
line-height: var(--font-line-height-loose);
|
||||
}
|
||||
|
||||
.notice {
|
||||
margin-left: calc(var(--spacing-l) * var(--schema-level));
|
||||
}
|
||||
|
||||
|
||||
@@ -425,5 +425,5 @@ const onAddResourceClicked = async () => {
|
||||
</template>
|
||||
|
||||
<style lang="scss" module>
|
||||
@import '@/components/ResourceLocator/resourceLocator.scss';
|
||||
@use '@/components/ResourceLocator/resourceLocator.scss';
|
||||
</style>
|
||||
|
||||
@@ -180,7 +180,7 @@ function onRetryMenuItemSelect(action: string): void {
|
||||
</template>
|
||||
|
||||
<style module lang="scss">
|
||||
@import '@/styles/variables';
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.WorkflowExecutionsCard {
|
||||
--execution-list-item-background: var(--execution-card-background);
|
||||
|
||||
@@ -790,9 +790,7 @@ defineExpose({
|
||||
input {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
@include mixins.breakpoint('sm-and-down') {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@@ -70,5 +70,3 @@ const chartData = computed<ChartData<'line'>>(() => {
|
||||
:plugins="[Filler]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="scss" module></style>
|
||||
|
||||
@@ -55,5 +55,3 @@ const chartData = computed<ChartData<'bar'>>(() => {
|
||||
<template>
|
||||
<Bar data-test-id="insights-chart-failed" :data="chartData" :options="chartOptions" />
|
||||
</template>
|
||||
|
||||
<style lang="scss" module></style>
|
||||
|
||||
@@ -58,5 +58,3 @@ const chartData = computed<ChartData<'bar'>>(() => {
|
||||
<template>
|
||||
<Bar data-test-id="insights-chart-failure-rate" :data="chartData" :options="chartOptions" />
|
||||
</template>
|
||||
|
||||
<style lang="scss" module></style>
|
||||
|
||||
@@ -79,5 +79,3 @@ const chartData = computed<ChartData<'line'>>(() => {
|
||||
:plugins="[Filler]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="scss" module></style>
|
||||
|
||||
@@ -55,5 +55,3 @@ const chartData = computed<ChartData<'bar'>>(() => {
|
||||
<template>
|
||||
<Bar data-test-id="insights-chart-total" :data="chartData" :options="chartOptions" />
|
||||
</template>
|
||||
|
||||
<style lang="scss" module></style>
|
||||
|
||||
@@ -362,13 +362,6 @@ async function copySessionId() {
|
||||
--chat--input--file--button--color: var(--color-button-secondary-font);
|
||||
--chat--input--file--button--color-hover: var(--color-primary);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
--chat--input--text-color: var(--input-font-color, var(--color-text-dark));
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--chat--input--text-color: var(--input-font-color, var(--color-text-dark));
|
||||
}
|
||||
|
||||
padding: var(--spacing-5xs);
|
||||
margin: 0 var(--chat--spacing) var(--chat--spacing);
|
||||
flex-grow: 1;
|
||||
@@ -380,6 +373,13 @@ async function copySessionId() {
|
||||
var(--input-border-style, var(--border-style-base))
|
||||
var(--input-border-width, var(--border-width-base));
|
||||
|
||||
[data-theme='dark'] & {
|
||||
--chat--input--text-color: var(--input-font-color, var(--color-text-dark));
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--chat--input--text-color: var(--input-font-color, var(--color-text-dark));
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
--input-border-color: #4538a3;
|
||||
}
|
||||
|
||||
@@ -218,7 +218,7 @@ watch(
|
||||
</template>
|
||||
|
||||
<style lang="scss" module>
|
||||
@import '@/styles/variables';
|
||||
@use '@/styles/variables' as vars;
|
||||
|
||||
.container {
|
||||
flex-grow: 1;
|
||||
@@ -263,6 +263,8 @@ watch(
|
||||
|
||||
.tree {
|
||||
padding: 0 var(--spacing-2xs) var(--spacing-2xs) var(--spacing-2xs);
|
||||
/* For programmatically triggered scroll in useVirtualList to animate, make it scroll smoothly */
|
||||
scroll-behavior: smooth;
|
||||
|
||||
.container:not(.staticScrollBar) & {
|
||||
scroll-padding-block: var(--spacing-3xs);
|
||||
@@ -286,9 +288,6 @@ watch(
|
||||
}
|
||||
}
|
||||
|
||||
/* For programmatically triggered scroll in useVirtualList to animate, make it scroll smoothly */
|
||||
scroll-behavior: smooth;
|
||||
|
||||
& :global(.el-icon) {
|
||||
display: none;
|
||||
}
|
||||
@@ -302,7 +301,7 @@ watch(
|
||||
margin: var(--spacing-4xs) var(--spacing-2xs);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s $ease-out-expo;
|
||||
transition: opacity 0.3s vars.$ease-out-expo;
|
||||
|
||||
.content:hover & {
|
||||
visibility: visible;
|
||||
|
||||
@@ -622,7 +622,7 @@ const modifiers = [
|
||||
}
|
||||
|
||||
.popper {
|
||||
box-shadow: 0px 6px 16px 0px rgba(68, 28, 23, 0.06);
|
||||
box-shadow: 0 6px 16px 0 rgba(68, 28, 23, 0.06);
|
||||
:global(.el-popper__arrow) {
|
||||
display: none;
|
||||
}
|
||||
@@ -666,8 +666,8 @@ const modifiers = [
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-bottom-left-radius: 6px;
|
||||
border-top-right-radius: 2px;
|
||||
color: var(--color-text-xlight);
|
||||
@@ -686,7 +686,7 @@ const modifiers = [
|
||||
&[data-node-type='n8n-nodes-base.manualTrigger'] {
|
||||
&::before {
|
||||
left: auto;
|
||||
right: 0px;
|
||||
right: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 2px;
|
||||
border-bottom-left-radius: 0;
|
||||
@@ -727,9 +727,6 @@ const modifiers = [
|
||||
:global(.canvas-node-handle-main-input .target) {
|
||||
background-color: var(--color-node-icon-green);
|
||||
}
|
||||
:global(.canvas-node-handle-main-input .target) {
|
||||
background-color: var(--color-node-icon-green);
|
||||
}
|
||||
}
|
||||
.equal {
|
||||
opacity: 0.5;
|
||||
|
||||
@@ -41,11 +41,11 @@ $header-height: calc(var(--header-height) * 1px);
|
||||
$sidebar-width: 65px;
|
||||
$sidebar-expanded-width: 200px;
|
||||
$sidebar-inactive-color: var(--color-foreground-xdark);
|
||||
$sidebar-active-color: $color-primary;
|
||||
$sidebar-active-color: var(--color-primary);
|
||||
|
||||
// gifts notification
|
||||
$gift-notification-active-color: $color-primary;
|
||||
$gift-notification-inner-color: $color-primary;
|
||||
$gift-notification-active-color: var(--color-primary);
|
||||
$gift-notification-inner-color: var(--color-primary);
|
||||
$gift-notification-outer-color: var(--color-text-xlight);
|
||||
|
||||
// based on element.io breakpoints
|
||||
@@ -87,7 +87,7 @@ $trigger-icon-background-color: var(--color-background-xlight);
|
||||
$drawer-background-color: var(--color-background-xlight);
|
||||
|
||||
// updates-panel
|
||||
$updates-panel-info-url-color: $color-primary;
|
||||
$updates-panel-info-url-color: var(--color-primary);
|
||||
$updates-panel-border: var(--border-base);
|
||||
$updates-panel-dark-background-color: var(--color-background-light);
|
||||
$updates-panel-description-text-color: var(--color-text-base);
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import '@n8n/chat/css';
|
||||
@import 'styles';
|
||||
@use '@n8n/design-system/css/mixins' as ds-mixins;
|
||||
@use '@n8n/chat/css';
|
||||
@use 'styles';
|
||||
|
||||
:root {
|
||||
// Using native css variable enables us to use this value in JS
|
||||
@@ -11,10 +12,10 @@
|
||||
cursor: pointer !important;
|
||||
}
|
||||
.primary-color {
|
||||
color: $color-primary;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.text-light {
|
||||
color: $custom-font-light;
|
||||
color: var(--color-text-lighter);
|
||||
font-weight: var(--font-weight-regular);
|
||||
}
|
||||
|
||||
@@ -29,7 +30,7 @@
|
||||
|
||||
.el-dialog {
|
||||
border: var(--border-base);
|
||||
box-shadow: 0px 6px 16px rgb(68 28 23 / 6%);
|
||||
box-shadow: 0 6px 16px rgb(68 28 23 / 6%);
|
||||
border-radius: 8px;
|
||||
|
||||
&.classic {
|
||||
@@ -59,26 +60,26 @@
|
||||
}
|
||||
}
|
||||
.el-dialog__body {
|
||||
color: $custom-dialog-text-color;
|
||||
padding: 0 20px 20px 20px;
|
||||
color: var(--color-text-dark);
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
.el-dialog__title {
|
||||
color: $custom-dialog-text-color;
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-message-box {
|
||||
background-color: $custom-dialog-background;
|
||||
background-color: var(--color-background-base);
|
||||
border: none;
|
||||
.el-message-box__headerbtn {
|
||||
.el-message-box__close {
|
||||
color: $custom-dialog-text-color;
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
}
|
||||
.el-message-box__content,
|
||||
.el-message-box__title {
|
||||
color: $custom-dialog-text-color;
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
.el-message-box-icon {
|
||||
width: var(--spacing-l);
|
||||
@@ -126,7 +127,7 @@
|
||||
|
||||
.el-tabs__content {
|
||||
border: 1px solid var(--color-foreground-base);
|
||||
border-radius: 0px var(--border-radius-base) var(--border-radius-base);
|
||||
border-radius: 0 var(--border-radius-base) var(--border-radius-base);
|
||||
}
|
||||
.el-tabs__header {
|
||||
border-bottom: 0 !important;
|
||||
@@ -208,7 +209,7 @@
|
||||
|
||||
.el-notification__closeBtn {
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
top: 0;
|
||||
right: var(--spacing-xs);
|
||||
}
|
||||
}
|
||||
@@ -238,7 +239,7 @@
|
||||
margin-left: var(--spacing-4xs);
|
||||
|
||||
&:hover {
|
||||
background-color: $tag-close-background-hover-color !important;
|
||||
background-color: var(--color-background-light) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'variables';
|
||||
@import 'plugins';
|
||||
@import 'global';
|
||||
@import 'animations';
|
||||
@use 'variables';
|
||||
@use 'plugins';
|
||||
@use 'global';
|
||||
@use 'animations';
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use '@n8n/design-system/css/mixins' as mixins;
|
||||
|
||||
/**
|
||||
* Resizer
|
||||
*/
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
@import 'codemirror';
|
||||
@import 'vueflow';
|
||||
@use 'codemirror';
|
||||
@use 'vueflow';
|
||||
|
||||
@@ -11,7 +11,7 @@ const locale = useI18n();
|
||||
|
||||
<template>
|
||||
<div class="entity-not-found-view">
|
||||
<N8nCard style="" class="entity-card">
|
||||
<N8nCard class="entity-card">
|
||||
<div class="text-center mb-l">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@@ -747,15 +747,13 @@ onMounted(async () => {
|
||||
|
||||
.enableFeatureContainer {
|
||||
margin-bottom: var(--spacing-1xl);
|
||||
}
|
||||
|
||||
.enableFeatureContainer > span {
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: var(--font-weight-bold);
|
||||
padding: 0;
|
||||
}
|
||||
> span {
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: var(--font-weight-bold);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.enableFeatureContainer {
|
||||
> * {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
@@ -428,10 +428,11 @@ onBeforeUnmount(() => {
|
||||
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
padding-bottom: 100px;
|
||||
|
||||
> * {
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
}
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.header {
|
||||
|
||||
@@ -284,7 +284,7 @@ const openCommunityRegisterModal = () => {
|
||||
</template>
|
||||
|
||||
<style lang="scss" module>
|
||||
@import '@/styles/variables';
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.center > div {
|
||||
justify-content: center;
|
||||
|
||||
@@ -511,7 +511,7 @@ async function onUpdateMfaEnforced(value: boolean) {
|
||||
|
||||
.settingsContainerInfo {
|
||||
display: flex;
|
||||
padding: 8px 0px;
|
||||
padding: 8px 0;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
|
||||
@@ -66,5 +66,3 @@ onMounted(async () => {
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" module></style>
|
||||
|
||||
3
packages/frontend/editor-ui/stylelint.config.mjs
Normal file
3
packages/frontend/editor-ui/stylelint.config.mjs
Normal file
@@ -0,0 +1,3 @@
|
||||
import { baseConfig } from '@n8n/stylelint-config/base';
|
||||
|
||||
export default baseConfig;
|
||||
Reference in New Issue
Block a user