feat(editor): Filter component + implement in If node (#7490)
New Filter component + implementation in If node (v2) <img width="3283" alt="image" src="https://github.com/n8n-io/n8n/assets/8850410/35c379ef-4b62-4d06-82e7-673d4edcd652"> --------- Co-authored-by: Giulio Andreini <andreini@netseven.it> Co-authored-by: Michael Kret <michael.k@radency.com>
This commit is contained in:
@@ -399,8 +399,16 @@ $input-placeholder-color: var(--input-placeholder-color, var(--color-text-light)
|
||||
$input-focus-border: var(--input-focus-border-color, var(--color-secondary));
|
||||
$input-border-color: var(--input-border-color, var(--border-color-base));
|
||||
$input-border-style: var(--input-border-style, var(--border-style-base));
|
||||
$input-border-width: var(--border-width-base);
|
||||
$input-border-width: var(--input-border-width, var(--border-width-base));
|
||||
$input-border: $input-border-color $input-border-style $input-border-width;
|
||||
$input-border-right-color: var(
|
||||
--input-border-right-color,
|
||||
var(--input-border-color, var(--border-color-base))
|
||||
);
|
||||
$input-border-bottom-color: var(
|
||||
--input-border-bottom-color,
|
||||
var(--input-border-color, var(--border-color-base))
|
||||
);
|
||||
|
||||
$input-font-size: var(--input-font-size, var(--font-size-s));
|
||||
/// color||Color|0
|
||||
@@ -411,6 +419,23 @@ $input-width: 140px;
|
||||
$input-height: 40px;
|
||||
/// borderRadius||Border|2
|
||||
$input-border-radius: var(--input-border-radius, var(--border-radius-base));
|
||||
$input-border-top-left-radius: var(
|
||||
--input-border-top-left-radius,
|
||||
var(--input-border-radius, var(--border-radius-base))
|
||||
);
|
||||
$input-border-top-right-radius: var(
|
||||
--input-border-top-right-radius,
|
||||
var(--input-border-radius, var(--border-radius-base)),
|
||||
);
|
||||
$input-border-bottom-left-radius: var(
|
||||
--input-border-bottom-left-radius,
|
||||
var(--input-border-radius, var(--border-radius-base)),
|
||||
);
|
||||
$input-border-bottom-right-radius: var(
|
||||
--input-border-bottom-right-radius,
|
||||
var(--input-border-radius, var(--border-radius-base)),
|
||||
);
|
||||
$input-border-radius: var(--input-border-radius, var(--border-radius-base));
|
||||
$input-border-color-hover: $border-color-hover;
|
||||
/// color||Color|0
|
||||
$input-background-color: var(--input-background-color, var(--color-foreground-xlight));
|
||||
|
||||
@@ -20,6 +20,11 @@
|
||||
background-color: var.$input-background-color;
|
||||
background-image: none;
|
||||
border-radius: var.$input-border-radius;
|
||||
border-top-left-radius: var.$input-border-top-left-radius;
|
||||
border-top-right-radius: var.$input-border-top-right-radius;
|
||||
border-bottom-left-radius: var.$input-border-bottom-left-radius;
|
||||
border-bottom-right-radius: var.$input-border-bottom-right-radius;
|
||||
|
||||
transition: var.$border-transition-base;
|
||||
|
||||
&,
|
||||
@@ -108,7 +113,13 @@
|
||||
background-color: var.$input-background-color;
|
||||
background-image: none;
|
||||
border-radius: var.$input-border-radius;
|
||||
border-top-left-radius: var.$input-border-top-left-radius;
|
||||
border-top-right-radius: var.$input-border-top-right-radius;
|
||||
border-bottom-left-radius: var.$input-border-bottom-left-radius;
|
||||
border-bottom-right-radius: var.$input-border-bottom-right-radius;
|
||||
border: var.$input-border;
|
||||
border-right-color: var.$input-border-right-color;
|
||||
border-bottom-color: var.$input-border-bottom-color;
|
||||
box-sizing: border-box;
|
||||
color: var.$input-font-color;
|
||||
display: inline-block;
|
||||
@@ -145,6 +156,7 @@
|
||||
}
|
||||
|
||||
@include mixins.e(suffix-inner) {
|
||||
display: inline-flex;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
@@ -286,8 +298,14 @@
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
border: var(--border-base);
|
||||
border: var.$input-border;
|
||||
border-radius: var.$input-border-radius;
|
||||
border-top-left-radius: var.$input-border-top-left-radius;
|
||||
border-top-right-radius: var.$input-border-top-right-radius;
|
||||
border-bottom-left-radius: var.$input-border-bottom-left-radius;
|
||||
border-bottom-right-radius: var.$input-border-bottom-right-radius;
|
||||
border-right-color: var.$input-border-right-color;
|
||||
border-bottom-color: var.$input-border-bottom-color;
|
||||
padding: 0 10px;
|
||||
width: 1px;
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -80,6 +80,14 @@
|
||||
&.is-focus .el-input__inner {
|
||||
border-color: var.$select-input-focus-border-color;
|
||||
}
|
||||
|
||||
&__prefix {
|
||||
left: var(--spacing-2xs);
|
||||
}
|
||||
|
||||
&--prefix .el-input__inner {
|
||||
padding-left: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
> .el-input {
|
||||
|
||||
Reference in New Issue
Block a user