pixel-react 1.10.10-2 → 1.10.10-4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/ComponentProps/TreeNodeProps.d.ts +3 -0
- package/lib/components/AppHeader/types.d.ts +1 -0
- package/lib/components/ConnectingBranch/types.d.ts +2 -0
- package/lib/components/TableTree/Components/AddModule/AddModule.d.ts +2 -1
- package/lib/components/TableTree/Components/TableBody.d.ts +1 -1
- package/lib/components/TableTree/Components/TableCell.d.ts +2 -2
- package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
- package/lib/components/TableTree/TableTree.d.ts +2 -2
- package/lib/components/TableTree/Utils/addNewRow.d.ts +1 -0
- package/lib/components/TableTree/data.d.ts +34 -0
- package/lib/components/TableTree/types.d.ts +12 -12
- package/lib/index.d.ts +15 -8
- package/lib/index.esm.js +237 -134
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +237 -134
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/ComponentProps/TreeNodeProps.ts +3 -0
- package/src/assets/icons/spinner.svg +42 -0
- package/src/components/AppHeader/AppHeader.scss +7 -1
- package/src/components/AppHeader/AppHeader.stories.tsx +1 -0
- package/src/components/AppHeader/AppHeader.tsx +8 -1
- package/src/components/AppHeader/types.ts +1 -0
- package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +36 -27
- package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +10 -0
- package/src/components/ConnectingBranch/ConnectingBranch.tsx +36 -23
- package/src/components/ConnectingBranch/types.ts +2 -0
- package/src/components/Select/Select.stories.tsx +34 -10
- package/src/components/Select/Select.tsx +1 -0
- package/src/components/Select/components/Dropdown.tsx +24 -21
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +19 -14
- package/src/components/TableTree/Components/AddModule/AddModule.scss +73 -1
- package/src/components/TableTree/Components/AddModule/AddModule.tsx +50 -14
- package/src/components/TableTree/Components/TableBody.tsx +2 -0
- package/src/components/TableTree/Components/TableCell.tsx +125 -75
- package/src/components/TableTree/Components/TableRow.tsx +2 -0
- package/src/components/TableTree/TableTree.scss +14 -2
- package/src/components/TableTree/TableTree.stories.tsx +26 -7
- package/src/components/TableTree/TableTree.tsx +31 -5
- package/src/components/TableTree/Utils/addNewRow.ts +3 -1
- package/src/components/TableTree/data.ts +5 -1
- package/src/components/TableTree/types.ts +13 -12
package/package.json
CHANGED
@@ -0,0 +1,42 @@
|
|
1
|
+
<svg width="12" height="12" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
2
|
+
<style>
|
3
|
+
.spinner_DupU {
|
4
|
+
animation: spinner_sM3D 1.2s infinite;
|
5
|
+
fill: #71347b;
|
6
|
+
}
|
7
|
+
.spinner_GWtZ { animation-delay: .1s; }
|
8
|
+
.spinner_dwN6 { animation-delay: .2s; }
|
9
|
+
.spinner_46QP { animation-delay: .3s; }
|
10
|
+
.spinner_PD82 { animation-delay: .4s; }
|
11
|
+
.spinner_eUgh { animation-delay: .5s; }
|
12
|
+
.spinner_eUaP { animation-delay: .6s; }
|
13
|
+
.spinner_j38H { animation-delay: .7s; }
|
14
|
+
.spinner_tVmX { animation-delay: .8s; }
|
15
|
+
.spinner_DQhX { animation-delay: .9s; }
|
16
|
+
.spinner_GIL4 { animation-delay: 1s; }
|
17
|
+
.spinner_n0Yb { animation-delay: 1.1s; }
|
18
|
+
|
19
|
+
@keyframes spinner_sM3D {
|
20
|
+
0%, 50% {
|
21
|
+
animation-timing-function: cubic-bezier(0, 1, 0, 1);
|
22
|
+
r: 0;
|
23
|
+
}
|
24
|
+
10% {
|
25
|
+
animation-timing-function: cubic-bezier(.53, 0, .61, .73);
|
26
|
+
r: 2px;
|
27
|
+
}
|
28
|
+
}
|
29
|
+
</style>
|
30
|
+
<circle class="spinner_DupU" cx="12" cy="3" r="0" />
|
31
|
+
<circle class="spinner_DupU spinner_GWtZ" cx="16.50" cy="4.21" r="0" />
|
32
|
+
<circle class="spinner_DupU spinner_n0Yb" cx="7.50" cy="4.21" r="0" />
|
33
|
+
<circle class="spinner_DupU spinner_dwN6" cx="19.79" cy="7.50" r="0" />
|
34
|
+
<circle class="spinner_DupU spinner_GIL4" cx="4.21" cy="7.50" r="0" />
|
35
|
+
<circle class="spinner_DupU spinner_46QP" cx="21.00" cy="12.00" r="0" />
|
36
|
+
<circle class="spinner_DupU spinner_DQhX" cx="3.00" cy="12.00" r="0" />
|
37
|
+
<circle class="spinner_DupU spinner_PD82" cx="19.79" cy="16.50" r="0" />
|
38
|
+
<circle class="spinner_DupU spinner_tVmX" cx="4.21" cy="16.50" r="0" />
|
39
|
+
<circle class="spinner_DupU spinner_eUgh" cx="16.50" cy="19.79" r="0" />
|
40
|
+
<circle class="spinner_DupU spinner_j38H" cx="7.50" cy="19.79" r="0" />
|
41
|
+
<circle class="spinner_DupU spinner_eUaP" cx="12" cy="21" r="0" />
|
42
|
+
</svg>
|
@@ -160,6 +160,7 @@
|
|
160
160
|
}
|
161
161
|
.more-menu {
|
162
162
|
width: 40px;
|
163
|
+
margin-left: 8px;
|
163
164
|
display: flex;
|
164
165
|
justify-content: center;
|
165
166
|
.ff-app-header-more-icon {
|
@@ -171,6 +172,11 @@
|
|
171
172
|
}
|
172
173
|
}
|
173
174
|
}
|
175
|
+
.more-menu .ff-menuicon-container {
|
176
|
+
width: 40px !important;
|
177
|
+
height: 32px !important;
|
178
|
+
border-radius: 16px !important;
|
179
|
+
}
|
174
180
|
}
|
175
181
|
.ff-app-header-left-content,
|
176
182
|
.ff-app-header-right-content {
|
@@ -216,4 +222,4 @@
|
|
216
222
|
max-height: 0;
|
217
223
|
opacity: 0;
|
218
224
|
}
|
219
|
-
}
|
225
|
+
}
|
@@ -12,6 +12,7 @@ import React, { useRef } from 'react';
|
|
12
12
|
const AppHeader: React.FC<AppHeaderProps> = ({
|
13
13
|
logoIconName = 'fireflink_icon',
|
14
14
|
width,
|
15
|
+
borderRadius,
|
15
16
|
leftContent,
|
16
17
|
rightContent,
|
17
18
|
projectsList,
|
@@ -31,7 +32,13 @@ const AppHeader: React.FC<AppHeaderProps> = ({
|
|
31
32
|
const hiddenMenuref = useRef<HTMLDivElement>(null);
|
32
33
|
return (
|
33
34
|
<div className="ff-app-header-main">
|
34
|
-
<div
|
35
|
+
<div
|
36
|
+
className="ff-app-header"
|
37
|
+
style={{
|
38
|
+
borderStartStartRadius: borderRadius,
|
39
|
+
borderStartEndRadius: borderRadius,
|
40
|
+
}}
|
41
|
+
>
|
35
42
|
<div className="ff-app-header-left-container">
|
36
43
|
<div className="ff-app-header-logo-icon">
|
37
44
|
<Icon color="" name={logoIconName} height={24} width={21} />
|
@@ -16,24 +16,29 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
|
|
16
16
|
curveHeights,
|
17
17
|
itemRefs,
|
18
18
|
datasetRef,
|
19
|
+
isReadOnlyMode,
|
19
20
|
}) => {
|
20
21
|
return (
|
21
22
|
<>
|
22
23
|
{parentNodeData?.machineInstances?.length === 0 ? (
|
23
24
|
<>
|
24
|
-
|
25
|
-
|
26
|
-
<div className="ff-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
25
|
+
{!isReadOnlyMode && (
|
26
|
+
<>
|
27
|
+
<div className="ff-selectedMachines-connecting-line">
|
28
|
+
<div className="ff-line">
|
29
|
+
<div className="ff-left-icon"></div>
|
30
|
+
<div className="ff-right-icon"></div>
|
31
|
+
</div>
|
32
|
+
</div>
|
33
|
+
<div className="ff-machine-instance ff-machine-env-button">
|
34
|
+
{getChildNodeComponent({
|
35
|
+
isButton: true,
|
36
|
+
parentNodeData,
|
37
|
+
parentNodeIndex,
|
38
|
+
})}
|
39
|
+
</div>
|
40
|
+
</>
|
41
|
+
)}
|
37
42
|
</>
|
38
43
|
) : (
|
39
44
|
parentNodeData?.machineInstances?.map(
|
@@ -129,21 +134,25 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
|
|
129
134
|
{childNodeIndex ===
|
130
135
|
parentNodeData.machineInstances.length - 1 && (
|
131
136
|
<>
|
132
|
-
|
133
|
-
|
134
|
-
<div className="ff-
|
135
|
-
|
136
|
-
|
137
|
-
|
137
|
+
{!isReadOnlyMode && (
|
138
|
+
<>
|
139
|
+
<div className="ff-selectedMachines-connecting-line ff-second-line">
|
140
|
+
<div className="ff-line">
|
141
|
+
<div className="ff-left-icon"></div>
|
142
|
+
<div className="ff-right-icon"></div>
|
143
|
+
</div>
|
144
|
+
</div>
|
138
145
|
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
146
|
+
<div className="ff-machine-instance ff-machine-env-button">
|
147
|
+
{getChildNodeComponent({
|
148
|
+
isButton: true,
|
149
|
+
parentNodeData,
|
150
|
+
parentNodeIndex,
|
151
|
+
childNodeIndex: childNodeIndex + 1,
|
152
|
+
})}
|
153
|
+
</div>
|
154
|
+
</>
|
155
|
+
)}
|
147
156
|
</>
|
148
157
|
)}
|
149
158
|
</div>
|
@@ -52,3 +52,13 @@ export const Default: Story = {
|
|
52
52
|
getChildNodeComponent,
|
53
53
|
},
|
54
54
|
};
|
55
|
+
|
56
|
+
export const readOnly: Story = {
|
57
|
+
args: {
|
58
|
+
data: machineData,
|
59
|
+
getParentNodeComponent,
|
60
|
+
getParentNodeComponentActionItems,
|
61
|
+
getChildNodeComponent,
|
62
|
+
isReadOnlyMode: true,
|
63
|
+
},
|
64
|
+
};
|
@@ -17,21 +17,31 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
|
|
17
17
|
getParentNodeComponent,
|
18
18
|
getParentNodeComponentActionItems,
|
19
19
|
childNodeCurveHeight = 1.28,
|
20
|
+
isReadOnlyMode = false,
|
20
21
|
}) => {
|
21
22
|
const datasetRef = useRef<HTMLDivElement | null>(null);
|
22
23
|
const [datasetHeight, setDatasetHeight] = useState<number>(0);
|
23
24
|
const [curveHeights, setCurveHeights] = useState<number[]>([]);
|
24
25
|
const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
|
25
|
-
|
26
26
|
const calculateVerticalLineHeight = (
|
27
27
|
machineInstances: MachineInstance[],
|
28
28
|
datasetHeight: number,
|
29
29
|
gap: number
|
30
30
|
): number => {
|
31
|
-
|
32
|
-
return
|
33
|
-
}
|
34
|
-
|
31
|
+
if (machineInstances.length === 1 && isReadOnlyMode) {
|
32
|
+
return 0;
|
33
|
+
}
|
34
|
+
|
35
|
+
const totalDataSets = machineInstances.reduce(
|
36
|
+
(acc, instance, index) =>
|
37
|
+
acc +
|
38
|
+
(index !== machineInstances.length - 1 || !isReadOnlyMode
|
39
|
+
? instance.runLevelExecutionDataSets?.length || 0
|
40
|
+
: 0),
|
41
|
+
0
|
42
|
+
);
|
43
|
+
|
44
|
+
return totalDataSets * (datasetHeight + gap);
|
35
45
|
};
|
36
46
|
|
37
47
|
useEffect(() => {
|
@@ -165,6 +175,7 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
|
|
165
175
|
itemRefs={itemRefs}
|
166
176
|
datasetRef={datasetRef}
|
167
177
|
getChildNodeComponent={getChildNodeComponent}
|
178
|
+
isReadOnlyMode={isReadOnlyMode}
|
168
179
|
/>
|
169
180
|
</div>
|
170
181
|
</React.Fragment>
|
@@ -172,25 +183,27 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
|
|
172
183
|
}
|
173
184
|
)}
|
174
185
|
{/* Select Machine Input */}
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
<ArcherElement
|
182
|
-
id="lastNode"
|
183
|
-
relations={[
|
184
|
-
{
|
185
|
-
targetId: 'rootNode',
|
186
|
-
targetAnchor: 'left',
|
187
|
-
sourceAnchor: 'left',
|
188
|
-
},
|
189
|
-
]}
|
186
|
+
{!isReadOnlyMode && (
|
187
|
+
<div
|
188
|
+
className="ff-select-machine-input"
|
189
|
+
style={{
|
190
|
+
gridRow: `${currentRow}`,
|
191
|
+
}}
|
190
192
|
>
|
191
|
-
<
|
192
|
-
|
193
|
-
|
193
|
+
<ArcherElement
|
194
|
+
id="lastNode"
|
195
|
+
relations={[
|
196
|
+
{
|
197
|
+
targetId: 'rootNode',
|
198
|
+
targetAnchor: 'left',
|
199
|
+
sourceAnchor: 'left',
|
200
|
+
},
|
201
|
+
]}
|
202
|
+
>
|
203
|
+
<div>{getParentNodeComponent({ isMultiSelect: true })}</div>
|
204
|
+
</ArcherElement>
|
205
|
+
</div>
|
206
|
+
)}
|
194
207
|
</div>
|
195
208
|
</ArcherContainer>
|
196
209
|
</div>
|
@@ -19,6 +19,7 @@ export interface MachineInstancesProps {
|
|
19
19
|
itemRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
|
20
20
|
datasetRef: React.RefObject<HTMLDivElement>;
|
21
21
|
getChildNodeComponent: FC<ConnectingNodeConfig>;
|
22
|
+
isReadOnlyMode?: boolean;
|
22
23
|
}
|
23
24
|
|
24
25
|
export type indexType = number;
|
@@ -48,4 +49,5 @@ export interface ConnectBranchProps {
|
|
48
49
|
nodeArgs: ConnectingNodeConfig
|
49
50
|
) => ReactElement;
|
50
51
|
getChildNodeComponent: (nodeArgs: ConnectingNodeConfig) => ReactElement;
|
52
|
+
isReadOnlyMode?: boolean;
|
51
53
|
}
|
@@ -423,38 +423,62 @@ export const SelectWithToolTip: Story = {
|
|
423
423
|
const optionsList = [
|
424
424
|
{
|
425
425
|
label: 'fire-flink-LIC4900-onPrem',
|
426
|
-
value:
|
426
|
+
value: {
|
427
|
+
clientId: 'fire-flink-LIC4900-onPrem',
|
428
|
+
},
|
429
|
+
name: 'fire-flink-LIC4900-onPrem',
|
427
430
|
},
|
428
431
|
{
|
429
432
|
label: 'fire-flink-LIC3179',
|
430
|
-
value:
|
433
|
+
value: {
|
434
|
+
clientId: 'fire-flink-LIC4900-onPrem',
|
435
|
+
},
|
436
|
+
name: 'fire-flink-LIC3179',
|
431
437
|
},
|
432
438
|
{
|
433
439
|
label: 'fire-flink-LIC4937',
|
434
|
-
value:
|
440
|
+
value: {
|
441
|
+
clientId: 'fire-flink-LIC4900-onPrem',
|
442
|
+
},
|
443
|
+
name: 'fire-flink-LIC4937',
|
435
444
|
},
|
436
445
|
{
|
437
446
|
label: 'fire-flink-LIC5937',
|
438
|
-
value:
|
447
|
+
value: {
|
448
|
+
clientId: 'fire-flink-LIC4900-onPrem',
|
449
|
+
},
|
450
|
+
name: 'fire-flink-LIC5937',
|
439
451
|
},
|
440
452
|
{
|
441
453
|
label: 'fire-flink-LIC6937',
|
442
|
-
value:
|
454
|
+
value: {
|
455
|
+
clientId: 'fire-flink-LIC4900-onPrem',
|
456
|
+
},
|
457
|
+
name: 'fire-flink-LIC6937',
|
443
458
|
},
|
444
459
|
{
|
445
460
|
label: 'fire-flink-LIC7937',
|
446
|
-
value:
|
461
|
+
value: {
|
462
|
+
clientId: 'fire-flink-LIC4900-onPrem',
|
463
|
+
},
|
464
|
+
name: 'fire-flink-LIC7937',
|
447
465
|
},
|
448
466
|
{
|
449
467
|
label: 'fire-flink-LIC4999',
|
450
|
-
value:
|
468
|
+
value: {
|
469
|
+
clientId: 'fire-flink-LIC4900-onPrem',
|
470
|
+
},
|
471
|
+
name: 'fire-flink-LIC4999',
|
451
472
|
recurrence: true,
|
452
|
-
},
|
473
|
+
},
|
453
474
|
];
|
454
475
|
|
455
476
|
const [selectedOption, setSelectedOption] = useState<Option>({
|
456
477
|
label: '',
|
457
|
-
value:
|
478
|
+
value: {
|
479
|
+
clientId: '',
|
480
|
+
},
|
481
|
+
name: '',
|
458
482
|
});
|
459
483
|
|
460
484
|
const handleChange = (option: Option) => {
|
@@ -466,7 +490,6 @@ export const SelectWithToolTip: Story = {
|
|
466
490
|
<h1>Test Mini Modal</h1>
|
467
491
|
</>
|
468
492
|
);
|
469
|
-
|
470
493
|
return (
|
471
494
|
<Select
|
472
495
|
optionsList={optionsList}
|
@@ -475,6 +498,7 @@ export const SelectWithToolTip: Story = {
|
|
475
498
|
label="Select Option"
|
476
499
|
showToolTip={true}
|
477
500
|
modalJSXProps={getMiniModalJSX()}
|
501
|
+
valueAccessor="name"
|
478
502
|
recurrence
|
479
503
|
/>
|
480
504
|
);
|
@@ -6,7 +6,10 @@ import Typography from '../../Typography';
|
|
6
6
|
import { ffid } from '../../../utils/ffID/ffid';
|
7
7
|
import { ThemeContext } from '../../ThemeProvider/ThemeProvider';
|
8
8
|
import classNames from 'classnames';
|
9
|
-
import {
|
9
|
+
import {
|
10
|
+
getLabel,
|
11
|
+
getValue,
|
12
|
+
} from '../../../utils/getSelectOptionValue/getSelectOptionValue';
|
10
13
|
import useClickOutside from '../../../hooks/useClickOutside';
|
11
14
|
import Icon from '../../Icon';
|
12
15
|
import Tooltip from '../../Tooltip';
|
@@ -133,26 +136,26 @@ const Dropdown: FC<DropdownProps> = ({
|
|
133
136
|
>
|
134
137
|
{!checkEmpty(options) ? (
|
135
138
|
options.map((option) => (
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
139
|
+
<div
|
140
|
+
className={classNames(
|
141
|
+
'ff-select-dropdown-option',
|
142
|
+
{
|
143
|
+
'ff-select-dropdown-option__selected':
|
144
|
+
getValue(option, valueAccessor) === selectedOption,
|
145
|
+
},
|
146
|
+
currentTheme
|
147
|
+
)}
|
148
|
+
key={ffid()}
|
149
|
+
onClick={() => {
|
150
|
+
if ('disable' in option && option['disable']) return;
|
151
|
+
onSelectOptionSelector(option);
|
152
|
+
}}
|
153
|
+
>
|
154
|
+
{getOptionLabel(
|
155
|
+
getLabel(option, labelAccessor),
|
156
|
+
'iconName' in option && option['iconName']
|
157
|
+
)}
|
158
|
+
</div>
|
156
159
|
))
|
157
160
|
) : (
|
158
161
|
<Typography
|
@@ -31,8 +31,9 @@ const Branches = ({
|
|
31
31
|
readOnly,
|
32
32
|
}: BranchesProps) => {
|
33
33
|
const evenRow = rowIndex % 2 === 0;
|
34
|
+
const getLastIndex = readOnly ? 0 : 1;
|
34
35
|
const lastMachineInstance = checkEmpty(
|
35
|
-
machineInstances[machineColumnCount -
|
36
|
+
machineInstances[machineColumnCount - getLastIndex]
|
36
37
|
);
|
37
38
|
|
38
39
|
const getBorderStyle = (
|
@@ -263,19 +264,23 @@ const Branches = ({
|
|
263
264
|
</Typography>
|
264
265
|
</div>
|
265
266
|
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
267
|
+
{!readOnly && (
|
268
|
+
<>
|
269
|
+
<Icon
|
270
|
+
name="plus_icon"
|
271
|
+
className="ff-connecting-icon"
|
272
|
+
onClick={() => onAddRunBrowser(machineInstanceId)}
|
273
|
+
color="var(--ff-connecting-branch-color)"
|
274
|
+
hoverEffect
|
275
|
+
/>
|
276
|
+
<Typography
|
277
|
+
className="ff-connecting-text"
|
278
|
+
color="var(--ff-connecting-branch-color)"
|
279
|
+
>
|
280
|
+
Run
|
281
|
+
</Typography>
|
282
|
+
</>
|
283
|
+
)}
|
279
284
|
</>
|
280
285
|
)}
|
281
286
|
{!readOnly && (
|
@@ -1,6 +1,78 @@
|
|
1
|
+
@use '../../../../assets/styles/fonts';
|
2
|
+
|
1
3
|
.add-module-container {
|
2
4
|
display: flex;
|
5
|
+
|
3
6
|
.icons {
|
4
7
|
cursor: pointer;
|
5
8
|
}
|
6
|
-
|
9
|
+
|
10
|
+
.ff-add-module-input-container {
|
11
|
+
display: flex;
|
12
|
+
flex-direction: column;
|
13
|
+
position: relative;
|
14
|
+
|
15
|
+
.ff-add-module-label-container {
|
16
|
+
display: flex;
|
17
|
+
gap: 2px;
|
18
|
+
position: absolute;
|
19
|
+
border: none;
|
20
|
+
outline: none;
|
21
|
+
line-height: 18px;
|
22
|
+
margin-top: 1px;
|
23
|
+
padding: 4px 6px;
|
24
|
+
transition: all 0.3s ease-in-out;
|
25
|
+
|
26
|
+
.ff-add-module-label {
|
27
|
+
color: var(--input-default-label-color);
|
28
|
+
}
|
29
|
+
}
|
30
|
+
|
31
|
+
.add-module-input {
|
32
|
+
height: 24px;
|
33
|
+
padding: 0px 6px;
|
34
|
+
width: 430px;
|
35
|
+
border: 0.5px solid var(--nlp-color);
|
36
|
+
border-radius: 4px;
|
37
|
+
outline: none;
|
38
|
+
line-height: 18px;
|
39
|
+
color: var(--nlp-color);
|
40
|
+
}
|
41
|
+
|
42
|
+
&:focus-within {
|
43
|
+
.ff-add-module-label-container {
|
44
|
+
top: -9px;
|
45
|
+
@extend .fontXs;
|
46
|
+
background-color: var(--input-label-bg-color);
|
47
|
+
line-height: 15px;
|
48
|
+
padding: 0px 2px;
|
49
|
+
margin-left: 10px;
|
50
|
+
|
51
|
+
.ff-add-module-label {
|
52
|
+
color: var(--nlp-color);
|
53
|
+
}
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
&--float {
|
58
|
+
.ff-add-module-label-container {
|
59
|
+
top: -9px;
|
60
|
+
@extend .fontXs;
|
61
|
+
background-color: var(--input-label-bg-color);
|
62
|
+
line-height: 15px;
|
63
|
+
padding: 0px 2px;
|
64
|
+
margin-left: 10px;
|
65
|
+
|
66
|
+
.ff-add-module-label {
|
67
|
+
color: var(--nlp-color);
|
68
|
+
}
|
69
|
+
}
|
70
|
+
}
|
71
|
+
}
|
72
|
+
|
73
|
+
.ff-module-icon-container {
|
74
|
+
display: flex;
|
75
|
+
gap: 8px;
|
76
|
+
align-items: center;
|
77
|
+
}
|
78
|
+
}
|