mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 18:12:04 +00:00
feat(editor): Add input panel to NDV (#3204)
* refactor tabs out * refactor execute button * refactor header * add more views * fix error view * fix workflow rename bug * rename component * fix small screen bug * move items, fix positions * add hover state * show selector on empty state * add empty run state * fix binary view * 1 item * add vjs styles * show empty row for every item * refactor tabs * add branch names * fix spacing * fix up spacing * add run selector * fix positioning * clean up * increase width of selector * fix up spacing * fix copy button * fix branch naming; type issues * fix docs in custom nodes * add type * hide items when run selector is shown * increase selector size * add select prepend * clean up a bit * Add pagination * add stale icon * enable stale data in execution run * Revert "enable stale data in execution run" 8edb68dbffa0aa0d8189117e1a53381cb2c27608 * move metadata to its own state * fix smaller size * add scroll buttons * update tabs on resize * update stale data on rename * remove metadata on delete * hide x * change title colors * binary data classes * remove duplicate css * add colors * delete unused keys * use event bus * refactor header out * support different nodes * update selector * add immediate input * add branch overrides * split output input run index * clean up unnessary data * add missing keys * update key names * remove unnessary css/js * fix outputs panel * set max width on input selector * fix selector to show parent nodes * fix bug when switching between nodes * add linking and refactor * add linking * fix minor issues * hide linking when cannot link * fix type * fix error state * clean up import * fix linking edge cases * hide input panel for triggers * disable for start node * format file * refactor output panel * add empty input hint * update too much data view * update slot, message under branch * no input data view * add node not run/no output data views * add tooltip support on execute prev * fix spacing in view * address output views * fix run node hint view * fix spinner * center button * update message to use node name * update title of no output data message * implement loading states * fix sizes * fix sizes * update spinner * add wire me up image * update link * update panels design * fix unclickable area bug * revert change * fix clickable bg * fix up positioning * ensure bg is clickable * fix up borders * fix height * move border to wrapper * set box shadow * set box shadow * add drag button * add dragging for main panel * set max width of panels * set min width in js * keep showing drag while dragging * fix dragging leaving modal * update trigger position of main panel * move main panel position into store * clear metadata after changing workflow * center grid correctly * add drag arrows * add dragging hover * fix cursor behavior * update no output state * show last run on open * always set to latest run * fix padding * add I wish this node would * clean up unsued data * inject run info into run * refactor out drag button * fix dragging issue * fix arrow bug * increase width of panel * change run logic * set label font sizes * update radiobutton pos * address header issues * fix prev spacing bug * fix input order * set package lock * add close modal event * complete close modal event * add input change event * add dragging event * add event on view change * add page size event * rename event * add event on page change * add link click event * add linking event * rename var * add run change event * add button events * add branch event * add structure for open event * add input type * set session id * set sessionid/source for expression events * add params to expression events * make display modes global * add display mode to tracking * add more event tracking * add has_mapping param * make main panel position global * dedupe list * fix cursor while dragging * address feedback * reduce bottom scrim * remove empty option hint * add hint tooltip * add tritary button * update param names * update parameter buttons * center empty states * move feature request message * increase max width for inputs selector * fix error dispaly padding * remove immediate * refactor search logic to return object * fix console errors * fix console errors * add node distance * refactor how input nodes listed * remove console log * set package lock * refactor recursive logic * handle overrides * handle default case without inputs * fix bug width link * fix tabs arrow bug * handle binary data case * update node execution * fix merge logic * remove console log * delete func * update package lock * add hover area * switch first input node * keep recursive order * make breadth first traversal * fix overflow bug, add pluralization * update docs url * update drop shadow * set background color for button * update input * fix truncation * update index of input dropdown * fix binary background * update telemetry * fix binary data switching * check all parent connections for executed node * check current state for executing node * fix executing states * update loading states * use pluralization for items * rename modal * update pluralization * update package lock * update empty messagE * format file * refactor out dragging logic * refactor out dragging * add back panel position * add telemetry params * add survey url as const * remove extra space, add dot * rename tabs, update telemetery, fix telemetry bug * update execute prev button * rename workflow func * rename workflow func * delete unnessary component * fix build issue * add tests for workflow search * format + add tests * remove todo comment * update iconnection type to match workflows * Revert "update iconnection type to match workflows" 3772487d985f226acab7144c7672b5696deabb55 * update func comment * fix formatting issues * add tertiary story * add spinner story * remove todo comment * remove eslint check * update empty messagE
This commit is contained in:
Mutasem Aldmour
524
packages/editor-ui/src/components/NodeDetailsView.vue
Normal file
524
packages/editor-ui/src/components/NodeDetailsView.vue
Normal file
@@ -0,0 +1,524 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:visible="(!!activeNode || renaming) && !isActiveStickyNode"
|
||||
:before-close="close"
|
||||
:show-close="false"
|
||||
custom-class="data-display-wrapper"
|
||||
class="ndv-wrapper"
|
||||
width="auto"
|
||||
append-to-body
|
||||
>
|
||||
<n8n-tooltip
|
||||
placement="bottom-start"
|
||||
:value="showTriggerWaitingWarning"
|
||||
:disabled="!showTriggerWaitingWarning"
|
||||
:manual="true"
|
||||
>
|
||||
<div slot="content" :class="$style.triggerWarning">
|
||||
{{ $locale.baseText('ndv.backToCanvas.waitingForTriggerWarning') }}
|
||||
</div>
|
||||
<div :class="$style.backToCanvas" @click="close">
|
||||
<n8n-icon icon="arrow-left" color="text-xlight" size="medium" />
|
||||
<n8n-text color="text-xlight" size="medium" :bold="true">
|
||||
{{ $locale.baseText('ndv.backToCanvas') }}
|
||||
</n8n-text>
|
||||
</div>
|
||||
</n8n-tooltip>
|
||||
|
||||
<div class="data-display" v-if="activeNode">
|
||||
<div @click="close" :class="$style.modalBackground"></div>
|
||||
<NDVDraggablePanels :isTriggerNode="isTriggerNode" @close="close" @init="onPanelsInit" @dragstart="onDragStart" @dragend="onDragEnd">
|
||||
<template #input>
|
||||
<InputPanel
|
||||
:workflow="workflow"
|
||||
:canLinkRuns="canLinkRuns"
|
||||
:runIndex="inputRun"
|
||||
:linkedRuns="linked"
|
||||
:currentNodeName="inputNodeName"
|
||||
:sessionId="sessionId"
|
||||
@linkRun="onLinkRunToInput"
|
||||
@unlinkRun="() => onUnlinkRun('input')"
|
||||
@runChange="onRunInputIndexChange"
|
||||
@openSettings="openSettings"
|
||||
@select="onInputSelect"
|
||||
@execute="onNodeExecute"
|
||||
/>
|
||||
</template>
|
||||
<template #output>
|
||||
<OutputPanel
|
||||
:canLinkRuns="canLinkRuns"
|
||||
:runIndex="outputRun"
|
||||
:linkedRuns="linked"
|
||||
:sessionId="sessionId"
|
||||
@linkRun="onLinkRunToOutput"
|
||||
@unlinkRun="() => onUnlinkRun('output')"
|
||||
@runChange="onRunOutputIndexChange"
|
||||
@openSettings="openSettings"
|
||||
/>
|
||||
</template>
|
||||
<template #main>
|
||||
<NodeSettings
|
||||
:eventBus="settingsEventBus"
|
||||
:dragging="isDragging"
|
||||
:sessionId="sessionId"
|
||||
@valueChanged="valueChanged"
|
||||
@execute="onNodeExecute"
|
||||
/>
|
||||
<a
|
||||
v-if="featureRequestUrl"
|
||||
@click="onFeatureRequestClick"
|
||||
:class="$style.featureRequest"
|
||||
target="_blank"
|
||||
>
|
||||
<font-awesome-icon icon="lightbulb" />
|
||||
{{ $locale.baseText('ndv.featureRequest') }}
|
||||
</a>
|
||||
</template>
|
||||
</NDVDraggablePanels>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
INodeConnections,
|
||||
INodeTypeDescription,
|
||||
IRunData,
|
||||
IRunExecutionData,
|
||||
Workflow,
|
||||
} from 'n8n-workflow';
|
||||
import { IExecutionResponse, INodeUi, IUpdateInformation } from '../Interface';
|
||||
|
||||
import { externalHooks } from '@/components/mixins/externalHooks';
|
||||
import { nodeHelpers } from '@/components/mixins/nodeHelpers';
|
||||
import { workflowHelpers } from '@/components/mixins/workflowHelpers';
|
||||
|
||||
import NodeSettings from '@/components/NodeSettings.vue';
|
||||
import NDVDraggablePanels from './NDVDraggablePanels.vue';
|
||||
|
||||
import mixins from 'vue-typed-mixins';
|
||||
import Vue from 'vue';
|
||||
import OutputPanel from './OutputPanel.vue';
|
||||
import InputPanel from './InputPanel.vue';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { BASE_NODE_SURVEY_URL, START_NODE_TYPE, STICKY_NODE_TYPE } from '@/constants';
|
||||
import { editor } from 'monaco-editor';
|
||||
|
||||
export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
|
||||
name: 'NodeDetailsView',
|
||||
components: {
|
||||
NodeSettings,
|
||||
InputPanel,
|
||||
OutputPanel,
|
||||
NDVDraggablePanels,
|
||||
},
|
||||
props: {
|
||||
renaming: {
|
||||
type: Boolean,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
settingsEventBus: new Vue(),
|
||||
runInputIndex: -1,
|
||||
runOutputIndex: -1,
|
||||
isLinkingEnabled: true,
|
||||
selectedInput: undefined as string | undefined,
|
||||
triggerWaitingWarningEnabled: false,
|
||||
isDragging: false,
|
||||
mainPanelPosition: 0,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$store.commit('ui/setNDVSessionId');
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['executionWaitingForWebhook']),
|
||||
sessionId(): string {
|
||||
return this.$store.getters['ui/ndvSessionId'];
|
||||
},
|
||||
workflowRunning(): boolean {
|
||||
return this.$store.getters.isActionActive('workflowRunning');
|
||||
},
|
||||
showTriggerWaitingWarning(): boolean {
|
||||
return (
|
||||
this.triggerWaitingWarningEnabled &&
|
||||
!!this.activeNodeType &&
|
||||
!this.activeNodeType.group.includes('trigger') &&
|
||||
this.workflowRunning &&
|
||||
this.executionWaitingForWebhook
|
||||
);
|
||||
},
|
||||
activeNode(): INodeUi {
|
||||
return this.$store.getters.activeNode;
|
||||
},
|
||||
inputNodeName(): string | undefined {
|
||||
return this.selectedInput || this.parentNode;
|
||||
},
|
||||
inputNode(): INodeUi | null {
|
||||
if (this.inputNodeName) {
|
||||
return this.$store.getters.getNodeByName(this.inputNodeName);
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
activeNodeType(): INodeTypeDescription | null {
|
||||
if (this.activeNode) {
|
||||
return this.$store.getters.nodeType(this.activeNode.type, this.activeNode.typeVersion);
|
||||
}
|
||||
return null;
|
||||
},
|
||||
workflow(): Workflow {
|
||||
return this.getWorkflow();
|
||||
},
|
||||
parentNodes(): string[] {
|
||||
if (this.activeNode) {
|
||||
return (
|
||||
this.workflow.getParentNodesByDepth(this.activeNode.name, 1).map(({ name }) => name) || []
|
||||
);
|
||||
}
|
||||
|
||||
return [];
|
||||
},
|
||||
parentNode(): string | undefined {
|
||||
return this.parentNodes[0];
|
||||
},
|
||||
isTriggerNode(): boolean {
|
||||
return (
|
||||
!!this.activeNodeType &&
|
||||
(this.activeNodeType.group.includes('trigger') ||
|
||||
this.activeNodeType.name === START_NODE_TYPE)
|
||||
);
|
||||
},
|
||||
isActiveStickyNode(): boolean {
|
||||
return (
|
||||
!!this.$store.getters.activeNode && this.$store.getters.activeNode.type === STICKY_NODE_TYPE
|
||||
);
|
||||
},
|
||||
workflowExecution(): IExecutionResponse | null {
|
||||
return this.$store.getters.getWorkflowExecution;
|
||||
},
|
||||
workflowRunData(): IRunData | null {
|
||||
if (this.workflowExecution === null) {
|
||||
return null;
|
||||
}
|
||||
const executionData: IRunExecutionData = this.workflowExecution.data;
|
||||
if (executionData && executionData.resultData) {
|
||||
return executionData.resultData.runData;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
maxOutputRun(): number {
|
||||
if (this.activeNode === null) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const runData: IRunData | null = this.workflowRunData;
|
||||
|
||||
if (runData === null || !runData.hasOwnProperty(this.activeNode.name)) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
if (runData[this.activeNode.name].length) {
|
||||
return runData[this.activeNode.name].length - 1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
},
|
||||
outputRun(): number {
|
||||
if (this.runOutputIndex === -1) {
|
||||
return this.maxOutputRun;
|
||||
}
|
||||
|
||||
return Math.min(this.runOutputIndex, this.maxOutputRun);
|
||||
},
|
||||
maxInputRun(): number {
|
||||
if (this.inputNode === null) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const runData: IRunData | null = this.workflowRunData;
|
||||
|
||||
if (runData === null || !runData.hasOwnProperty(this.inputNode.name)) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
if (runData[this.inputNode.name].length) {
|
||||
return runData[this.inputNode.name].length - 1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
},
|
||||
inputRun(): number {
|
||||
if (this.isLinkingEnabled && this.maxOutputRun === this.maxInputRun) {
|
||||
return this.outputRun;
|
||||
}
|
||||
if (this.runInputIndex === -1) {
|
||||
return this.maxInputRun;
|
||||
}
|
||||
|
||||
return Math.min(this.runInputIndex, this.maxInputRun);
|
||||
},
|
||||
canLinkRuns(): boolean {
|
||||
return this.maxOutputRun > 0 && this.maxOutputRun === this.maxInputRun;
|
||||
},
|
||||
linked(): boolean {
|
||||
return this.isLinkingEnabled && this.canLinkRuns;
|
||||
},
|
||||
inputPanelMargin(): number {
|
||||
return this.isTriggerNode ? 0 : 80;
|
||||
},
|
||||
featureRequestUrl(): string {
|
||||
if (!this.activeNodeType) {
|
||||
return '';
|
||||
}
|
||||
return `${BASE_NODE_SURVEY_URL}${this.activeNodeType.name}`;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
activeNode(node, oldNode) {
|
||||
if (node && !oldNode && !this.isActiveStickyNode) {
|
||||
this.runInputIndex = -1;
|
||||
this.runOutputIndex = -1;
|
||||
this.isLinkingEnabled = true;
|
||||
this.selectedInput = undefined;
|
||||
this.triggerWaitingWarningEnabled = false;
|
||||
|
||||
this.$store.commit('ui/setNDVSessionId');
|
||||
this.$externalHooks().run('dataDisplay.nodeTypeChanged', {
|
||||
nodeSubtitle: this.getNodeSubtitle(node, this.activeNodeType, this.getWorkflow()),
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
const outogingConnections = this.$store.getters.outgoingConnectionsByNodeName(
|
||||
this.activeNode.name,
|
||||
) as INodeConnections;
|
||||
|
||||
this.$telemetry.track('User opened node modal', {
|
||||
node_type: this.activeNodeType ? this.activeNodeType.name : '',
|
||||
workflow_id: this.$store.getters.workflowId,
|
||||
session_id: this.sessionId,
|
||||
parameters_pane_position: this.mainPanelPosition,
|
||||
input_first_connector_runs: this.maxInputRun,
|
||||
output_first_connector_runs: this.maxOutputRun,
|
||||
selected_view_inputs: this.isTriggerNode
|
||||
? 'trigger'
|
||||
: this.$store.getters['ui/inputPanelDispalyMode'],
|
||||
selected_view_outputs: this.$store.getters['ui/outputPanelDispalyMode'],
|
||||
input_connectors: this.parentNodes.length,
|
||||
output_connectors:
|
||||
outogingConnections && outogingConnections.main && outogingConnections.main.length,
|
||||
input_displayed_run_index: this.inputRun,
|
||||
output_displayed_run_index: this.outputRun,
|
||||
});
|
||||
}, 0); // wait for display mode to be set correctly
|
||||
}
|
||||
if (window.top && !this.isActiveStickyNode) {
|
||||
window.top.postMessage(JSON.stringify({ command: node ? 'openNDV' : 'closeNDV' }), '*');
|
||||
}
|
||||
},
|
||||
maxOutputRun() {
|
||||
this.runOutputIndex = -1;
|
||||
},
|
||||
maxInputRun() {
|
||||
this.runInputIndex = -1;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onFeatureRequestClick() {
|
||||
window.open(this.featureRequestUrl, '_blank');
|
||||
this.$telemetry.track('User clicked ndv link', {
|
||||
node_type: this.activeNode.type,
|
||||
workflow_id: this.$store.getters.workflowId,
|
||||
session_id: this.sessionId,
|
||||
pane: 'main',
|
||||
type: 'i-wish-this-node-would',
|
||||
});
|
||||
},
|
||||
onPanelsInit(e: { position: number }) {
|
||||
this.mainPanelPosition = e.position;
|
||||
},
|
||||
onDragStart(e: { position: number }) {
|
||||
this.isDragging = true;
|
||||
this.mainPanelPosition = e.position;
|
||||
},
|
||||
onDragEnd(e: { windowWidth: number, position: number }) {
|
||||
this.isDragging = false;
|
||||
this.$telemetry.track('User moved parameters pane', {
|
||||
window_width: e.windowWidth,
|
||||
start_position: this.mainPanelPosition,
|
||||
end_position: e.position,
|
||||
node_type: this.activeNodeType ? this.activeNodeType.name : '',
|
||||
session_id: this.sessionId,
|
||||
workflow_id: this.$store.getters.workflowId,
|
||||
});
|
||||
this.mainPanelPosition = e.position;
|
||||
},
|
||||
onLinkRunToInput() {
|
||||
this.runOutputIndex = this.runInputIndex;
|
||||
this.isLinkingEnabled = true;
|
||||
this.trackLinking('input');
|
||||
},
|
||||
onLinkRunToOutput() {
|
||||
this.isLinkingEnabled = true;
|
||||
this.trackLinking('output');
|
||||
},
|
||||
onUnlinkRun(pane: string) {
|
||||
this.runInputIndex = this.runOutputIndex;
|
||||
this.isLinkingEnabled = false;
|
||||
this.trackLinking(pane);
|
||||
},
|
||||
trackLinking(pane: string) {
|
||||
this.$telemetry.track('User changed ndv run linking', {
|
||||
node_type: this.activeNodeType ? this.activeNodeType.name : '',
|
||||
session_id: this.sessionId,
|
||||
linked: this.linked,
|
||||
pane,
|
||||
});
|
||||
},
|
||||
onNodeExecute() {
|
||||
setTimeout(() => {
|
||||
if (!this.activeNode || !this.workflowRunning) {
|
||||
return;
|
||||
}
|
||||
this.triggerWaitingWarningEnabled = true;
|
||||
}, 1000);
|
||||
},
|
||||
openSettings() {
|
||||
this.settingsEventBus.$emit('openSettings');
|
||||
},
|
||||
valueChanged(parameterData: IUpdateInformation) {
|
||||
this.$emit('valueChanged', parameterData);
|
||||
},
|
||||
nodeTypeSelected(nodeTypeName: string) {
|
||||
this.$emit('nodeTypeSelected', nodeTypeName);
|
||||
},
|
||||
close() {
|
||||
if (this.isDragging) {
|
||||
return;
|
||||
}
|
||||
this.$externalHooks().run('dataDisplay.nodeEditingFinished');
|
||||
this.$telemetry.track('User closed node modal', {
|
||||
node_type: this.activeNodeType ? this.activeNodeType.name : '',
|
||||
session_id: this.sessionId,
|
||||
workflow_id: this.$store.getters.workflowId,
|
||||
});
|
||||
this.triggerWaitingWarningEnabled = false;
|
||||
this.$store.commit('setActiveNode', null);
|
||||
this.$store.commit('ui/resetNDVSessionId');
|
||||
},
|
||||
onRunOutputIndexChange(run: number) {
|
||||
this.runOutputIndex = run;
|
||||
this.trackRunChange(run, 'output');
|
||||
},
|
||||
onRunInputIndexChange(run: number) {
|
||||
this.runInputIndex = run;
|
||||
if (this.linked) {
|
||||
this.runOutputIndex = run;
|
||||
}
|
||||
this.trackRunChange(run, 'input');
|
||||
},
|
||||
trackRunChange(run: number, pane: string) {
|
||||
this.$telemetry.track('User changed ndv run dropdown', {
|
||||
session_id: this.sessionId,
|
||||
run_index: run,
|
||||
node_type: this.activeNodeType ? this.activeNodeType.name : '',
|
||||
pane,
|
||||
});
|
||||
},
|
||||
onInputSelect(value: string, index: number) {
|
||||
this.runInputIndex = -1;
|
||||
this.isLinkingEnabled = true;
|
||||
this.selectedInput = value;
|
||||
|
||||
this.$telemetry.track('User changed ndv input dropdown', {
|
||||
node_type: this.activeNode ? this.activeNode.type : '',
|
||||
session_id: this.sessionId,
|
||||
workflow_id: this.$store.getters.workflowId,
|
||||
selection_value: index,
|
||||
input_node_type: this.inputNode ? this.inputNode.type : '',
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.ndv-wrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.data-display-wrapper {
|
||||
height: 93%;
|
||||
width: 100%;
|
||||
margin-top: var(--spacing-xl) !important;
|
||||
background: none;
|
||||
border: none;
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 0 !important;
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.data-display {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="scss" module>
|
||||
$--main-panel-width: 360px;
|
||||
|
||||
.modalBackground {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.triggerWarning {
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
.backToCanvas {
|
||||
position: fixed;
|
||||
top: var(--spacing-xs);
|
||||
left: var(--spacing-l);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
> * {
|
||||
margin-right: var(--spacing-3xs);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $--breakpoint-lg) {
|
||||
.backToCanvas {
|
||||
top: var(--spacing-xs);
|
||||
left: var(--spacing-m);
|
||||
}
|
||||
}
|
||||
|
||||
.featureRequest {
|
||||
position: absolute;
|
||||
bottom: var(--spacing-4xs);
|
||||
left: calc(100% + var(--spacing-s));
|
||||
color: var(--color-text-xlight);
|
||||
font-size: var(--font-size-2xs);
|
||||
white-space: nowrap;
|
||||
|
||||
* {
|
||||
margin-right: var(--spacing-3xs);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user