UNPKG

n8n-editor-ui

Version:

Workflow Editor UI for n8n

1,326 lines 27.6 kB
/* BEM support Func -------------------------- */ /* Transition -------------------------- */ /* Color -------------------------- */ /* Link -------------------------- */ /* Border -------------------------- */ /* Outline -------------------------- */ /* Box shadow -------------------------- */ /* Fill -------------------------- */ /* Typography -------------------------- */ /* z-index -------------------------- */ /* Disable base -------------------------- */ /* Icon -------------------------- */ /* Checkbox -------------------------- */ /* Radio -------------------------- */ /* Select -------------------------- */ /* Alert -------------------------- */ /* MessageBox -------------------------- */ /* Message -------------------------- */ /* Notification -------------------------- */ /* Input -------------------------- */ /* Cascader -------------------------- */ /* Group -------------------------- */ /* Tab -------------------------- */ /* Button -------------------------- */ /* cascader -------------------------- */ /* Switch -------------------------- */ /* Dialog -------------------------- */ /* Table -------------------------- */ /* Pagination -------------------------- */ /* Popup -------------------------- */ /* Popover -------------------------- */ /* Tooltip -------------------------- */ /* Tag -------------------------- */ /* Tree -------------------------- */ /* Dropdown -------------------------- */ /* Badge -------------------------- */ /* Card --------------------------*/ /* Slider --------------------------*/ /* Steps --------------------------*/ /* Menu --------------------------*/ /* Rate --------------------------*/ /* DatePicker --------------------------*/ /* Loading --------------------------*/ /* Scrollbar --------------------------*/ /* Carousel --------------------------*/ /* Collapse --------------------------*/ /* Transfer --------------------------*/ /* Header --------------------------*/ /* Footer --------------------------*/ /* Main --------------------------*/ /* Timeline --------------------------*/ /* Backtop --------------------------*/ /* Link --------------------------*/ /* Calendar --------------------------*/ /* Form -------------------------- */ /* Avatar --------------------------*/ /* Break-point --------------------------*/ /* Break-points -------------------------- */ /* Scrollbar -------------------------- */ /* Placeholder -------------------------- */ /* BEM -------------------------- */ ._container_cznfu_123 { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) translateY(50%); min-height: 30px; display: flex; padding: var(--spacing--5xs); background-color: var(--color--foreground); border-radius: var(--radius); transition: all 150ms ease-in-out; z-index: 1; } @media screen and (max-width: 430px) { ._container_cznfu_123 { flex-direction: column; } }/* BEM support Func -------------------------- */ /* Transition -------------------------- */ /* Color -------------------------- */ /* Link -------------------------- */ /* Border -------------------------- */ /* Outline -------------------------- */ /* Box shadow -------------------------- */ /* Fill -------------------------- */ /* Typography -------------------------- */ /* z-index -------------------------- */ /* Disable base -------------------------- */ /* Icon -------------------------- */ /* Checkbox -------------------------- */ /* Radio -------------------------- */ /* Select -------------------------- */ /* Alert -------------------------- */ /* MessageBox -------------------------- */ /* Message -------------------------- */ /* Notification -------------------------- */ /* Input -------------------------- */ /* Cascader -------------------------- */ /* Group -------------------------- */ /* Tab -------------------------- */ /* Button -------------------------- */ /* cascader -------------------------- */ /* Switch -------------------------- */ /* Dialog -------------------------- */ /* Table -------------------------- */ /* Pagination -------------------------- */ /* Popup -------------------------- */ /* Popover -------------------------- */ /* Tooltip -------------------------- */ /* Tag -------------------------- */ /* Tree -------------------------- */ /* Dropdown -------------------------- */ /* Badge -------------------------- */ /* Card --------------------------*/ /* Slider --------------------------*/ /* Steps --------------------------*/ /* Menu --------------------------*/ /* Rate --------------------------*/ /* DatePicker --------------------------*/ /* Loading --------------------------*/ /* Scrollbar --------------------------*/ /* Carousel --------------------------*/ /* Collapse --------------------------*/ /* Transfer --------------------------*/ /* Header --------------------------*/ /* Footer --------------------------*/ /* Main --------------------------*/ /* Timeline --------------------------*/ /* Backtop --------------------------*/ /* Link --------------------------*/ /* Calendar --------------------------*/ /* Form -------------------------- */ /* Avatar --------------------------*/ /* Break-point --------------------------*/ /* Break-points -------------------------- */ /* Scrollbar -------------------------- */ /* Placeholder -------------------------- */ /* BEM -------------------------- */ .tags-container[data-v-2e7ba899] { display: block; max-width: 300px; } .hideTag[data-v-2e7ba899] { visibility: hidden; } .tags[data-v-2e7ba899] { display: flex; gap: var(--spacing--4xs); } .count-container[data-v-2e7ba899] { position: absolute; max-width: 40px; text-overflow: ellipsis; overflow: hidden; }/* BEM support Func -------------------------- */ /* Transition -------------------------- */ /* Color -------------------------- */ /* Link -------------------------- */ /* Border -------------------------- */ /* Outline -------------------------- */ /* Box shadow -------------------------- */ /* Fill -------------------------- */ /* Typography -------------------------- */ /* z-index -------------------------- */ /* Disable base -------------------------- */ /* Icon -------------------------- */ /* Checkbox -------------------------- */ /* Radio -------------------------- */ /* Select -------------------------- */ /* Alert -------------------------- */ /* MessageBox -------------------------- */ /* Message -------------------------- */ /* Notification -------------------------- */ /* Input -------------------------- */ /* Cascader -------------------------- */ /* Group -------------------------- */ /* Tab -------------------------- */ /* Button -------------------------- */ /* cascader -------------------------- */ /* Switch -------------------------- */ /* Dialog -------------------------- */ /* Table -------------------------- */ /* Pagination -------------------------- */ /* Popup -------------------------- */ /* Popover -------------------------- */ /* Tooltip -------------------------- */ /* Tag -------------------------- */ /* Tree -------------------------- */ /* Dropdown -------------------------- */ /* Badge -------------------------- */ /* Card --------------------------*/ /* Slider --------------------------*/ /* Steps --------------------------*/ /* Menu --------------------------*/ /* Rate --------------------------*/ /* DatePicker --------------------------*/ /* Loading --------------------------*/ /* Scrollbar --------------------------*/ /* Carousel --------------------------*/ /* Collapse --------------------------*/ /* Transfer --------------------------*/ /* Header --------------------------*/ /* Footer --------------------------*/ /* Main --------------------------*/ /* Timeline --------------------------*/ /* Backtop --------------------------*/ /* Link --------------------------*/ /* Calendar --------------------------*/ /* Form -------------------------- */ /* Avatar --------------------------*/ /* Break-point --------------------------*/ /* Break-points -------------------------- */ /* Scrollbar -------------------------- */ /* Placeholder -------------------------- */ /* BEM -------------------------- */ ._container_dsr9f_123 { margin: 0 var(--spacing--4xs); }/* BEM support Func -------------------------- */ /* Transition -------------------------- */ /* Color -------------------------- */ /* Link -------------------------- */ /* Border -------------------------- */ /* Outline -------------------------- */ /* Box shadow -------------------------- */ /* Fill -------------------------- */ /* Typography -------------------------- */ /* z-index -------------------------- */ /* Disable base -------------------------- */ /* Icon -------------------------- */ /* Checkbox -------------------------- */ /* Radio -------------------------- */ /* Select -------------------------- */ /* Alert -------------------------- */ /* MessageBox -------------------------- */ /* Message -------------------------- */ /* Notification -------------------------- */ /* Input -------------------------- */ /* Cascader -------------------------- */ /* Group -------------------------- */ /* Tab -------------------------- */ /* Button -------------------------- */ /* cascader -------------------------- */ /* Switch -------------------------- */ /* Dialog -------------------------- */ /* Table -------------------------- */ /* Pagination -------------------------- */ /* Popup -------------------------- */ /* Popover -------------------------- */ /* Tooltip -------------------------- */ /* Tag -------------------------- */ /* Tree -------------------------- */ /* Dropdown -------------------------- */ /* Badge -------------------------- */ /* Card --------------------------*/ /* Slider --------------------------*/ /* Steps --------------------------*/ /* Menu --------------------------*/ /* Rate --------------------------*/ /* DatePicker --------------------------*/ /* Loading --------------------------*/ /* Scrollbar --------------------------*/ /* Carousel --------------------------*/ /* Collapse --------------------------*/ /* Transfer --------------------------*/ /* Header --------------------------*/ /* Footer --------------------------*/ /* Main --------------------------*/ /* Timeline --------------------------*/ /* Backtop --------------------------*/ /* Link --------------------------*/ /* Calendar --------------------------*/ /* Form -------------------------- */ /* Avatar --------------------------*/ /* Break-point --------------------------*/ /* Break-points -------------------------- */ /* Scrollbar -------------------------- */ /* Placeholder -------------------------- */ /* BEM -------------------------- */ ._deleteItem_ntqfl_123 { color: var(--color--danger); } ._group_ntqfl_127 { display: flex; gap: var(--spacing--xs); } ._hiddenInput_ntqfl_132 { display: none; }/* BEM support Func -------------------------- */ /* Transition -------------------------- */ /* Color -------------------------- */ /* Link -------------------------- */ /* Border -------------------------- */ /* Outline -------------------------- */ /* Box shadow -------------------------- */ /* Fill -------------------------- */ /* Typography -------------------------- */ /* z-index -------------------------- */ /* Disable base -------------------------- */ /* Icon -------------------------- */ /* Checkbox -------------------------- */ /* Radio -------------------------- */ /* Select -------------------------- */ /* Alert -------------------------- */ /* MessageBox -------------------------- */ /* Message -------------------------- */ /* Notification -------------------------- */ /* Input -------------------------- */ /* Cascader -------------------------- */ /* Group -------------------------- */ /* Tab -------------------------- */ /* Button -------------------------- */ /* cascader -------------------------- */ /* Switch -------------------------- */ /* Dialog -------------------------- */ /* Table -------------------------- */ /* Pagination -------------------------- */ /* Popup -------------------------- */ /* Popover -------------------------- */ /* Tooltip -------------------------- */ /* Tag -------------------------- */ /* Tree -------------------------- */ /* Dropdown -------------------------- */ /* Badge -------------------------- */ /* Card --------------------------*/ /* Slider --------------------------*/ /* Steps --------------------------*/ /* Menu --------------------------*/ /* Rate --------------------------*/ /* DatePicker --------------------------*/ /* Loading --------------------------*/ /* Scrollbar --------------------------*/ /* Carousel --------------------------*/ /* Collapse --------------------------*/ /* Transfer --------------------------*/ /* Header --------------------------*/ /* Footer --------------------------*/ /* Main --------------------------*/ /* Timeline --------------------------*/ /* Backtop --------------------------*/ /* Link --------------------------*/ /* Calendar --------------------------*/ /* Form -------------------------- */ /* Avatar --------------------------*/ /* Break-point --------------------------*/ /* Break-points -------------------------- */ /* Scrollbar -------------------------- */ /* Placeholder -------------------------- */ /* BEM -------------------------- */ ._container_uqc1z_123 { display: contents; } ._activator_uqc1z_127 { color: var(--color--text--shade-1); font-weight: var(--font-weight--regular); font-size: 13px; line-height: 24px; align-items: center; } ._activator_uqc1z_127 > span { margin-right: 5px; } ._group_uqc1z_138 { display: flex; gap: var(--spacing--xs); } ._disabledShareButton_uqc1z_143 { cursor: not-allowed; }/* BEM support Func -------------------------- */ /* Transition -------------------------- */ /* Color -------------------------- */ /* Link -------------------------- */ /* Border -------------------------- */ /* Outline -------------------------- */ /* Box shadow -------------------------- */ /* Fill -------------------------- */ /* Typography -------------------------- */ /* z-index -------------------------- */ /* Disable base -------------------------- */ /* Icon -------------------------- */ /* Checkbox -------------------------- */ /* Radio -------------------------- */ /* Select -------------------------- */ /* Alert -------------------------- */ /* MessageBox -------------------------- */ /* Message -------------------------- */ /* Notification -------------------------- */ /* Input -------------------------- */ /* Cascader -------------------------- */ /* Group -------------------------- */ /* Tab -------------------------- */ /* Button -------------------------- */ /* cascader -------------------------- */ /* Switch -------------------------- */ /* Dialog -------------------------- */ /* Table -------------------------- */ /* Pagination -------------------------- */ /* Popup -------------------------- */ /* Popover -------------------------- */ /* Tooltip -------------------------- */ /* Tag -------------------------- */ /* Tree -------------------------- */ /* Dropdown -------------------------- */ /* Badge -------------------------- */ /* Card --------------------------*/ /* Slider --------------------------*/ /* Steps --------------------------*/ /* Menu --------------------------*/ /* Rate --------------------------*/ /* DatePicker --------------------------*/ /* Loading --------------------------*/ /* Scrollbar --------------------------*/ /* Carousel --------------------------*/ /* Collapse --------------------------*/ /* Transfer --------------------------*/ /* Header --------------------------*/ /* Footer --------------------------*/ /* Main --------------------------*/ /* Timeline --------------------------*/ /* Backtop --------------------------*/ /* Link --------------------------*/ /* Calendar --------------------------*/ /* Form -------------------------- */ /* Avatar --------------------------*/ /* Break-point --------------------------*/ /* Break-points -------------------------- */ /* Scrollbar -------------------------- */ /* Placeholder -------------------------- */ /* BEM -------------------------- */ ._container_p6bf9_123 { display: contents; } ._activeVersionIndicator_p6bf9_127 { display: inline-flex; align-items: center; } ._activeVersionIndicator_p6bf9_127 ._icon_p6bf9_131:focus { outline: none; } ._publishButtonWrapper_p6bf9_135 { position: relative; display: inline-block; }/* BEM support Func -------------------------- */ /* Transition -------------------------- */ /* Color -------------------------- */ /* Link -------------------------- */ /* Border -------------------------- */ /* Outline -------------------------- */ /* Box shadow -------------------------- */ /* Fill -------------------------- */ /* Typography -------------------------- */ /* z-index -------------------------- */ /* Disable base -------------------------- */ /* Icon -------------------------- */ /* Checkbox -------------------------- */ /* Radio -------------------------- */ /* Select -------------------------- */ /* Alert -------------------------- */ /* MessageBox -------------------------- */ /* Message -------------------------- */ /* Notification -------------------------- */ /* Input -------------------------- */ /* Cascader -------------------------- */ /* Group -------------------------- */ /* Tab -------------------------- */ /* Button -------------------------- */ /* cascader -------------------------- */ /* Switch -------------------------- */ /* Dialog -------------------------- */ /* Table -------------------------- */ /* Pagination -------------------------- */ /* Popup -------------------------- */ /* Popover -------------------------- */ /* Tooltip -------------------------- */ /* Tag -------------------------- */ /* Tree -------------------------- */ /* Dropdown -------------------------- */ /* Badge -------------------------- */ /* Card --------------------------*/ /* Slider --------------------------*/ /* Steps --------------------------*/ /* Menu --------------------------*/ /* Rate --------------------------*/ /* DatePicker --------------------------*/ /* Loading --------------------------*/ /* Scrollbar --------------------------*/ /* Carousel --------------------------*/ /* Collapse --------------------------*/ /* Transfer --------------------------*/ /* Header --------------------------*/ /* Footer --------------------------*/ /* Main --------------------------*/ /* Timeline --------------------------*/ /* Backtop --------------------------*/ /* Link --------------------------*/ /* Calendar --------------------------*/ /* Form -------------------------- */ /* Avatar --------------------------*/ /* Break-point --------------------------*/ /* Break-points -------------------------- */ /* Scrollbar -------------------------- */ /* Placeholder -------------------------- */ /* BEM -------------------------- */ .name-container[data-v-22fed76c] { margin-right: var(--spacing--sm); } .name-container[data-v-22fed76c] .el-input { padding: 0; } .name[data-v-22fed76c] { color: var(--color--text--shade-1); font-size: var(--font-size--sm); padding: var(--spacing--3xs) var(--spacing--4xs) var(--spacing--4xs); } .add-tag[data-v-22fed76c] { font-size: 12px; padding: 20px 0; color: var(--color--text--tint-1); font-weight: var(--font-weight--bold); white-space: nowrap; } .add-tag[data-v-22fed76c]:hover { color: var(--color--primary); } .tags[data-v-22fed76c] { display: flex; align-items: center; width: 100%; flex: 1; margin-right: 20px; } .tags-edit[data-v-22fed76c] { min-width: 100px; width: 100%; max-width: 460px; } .actions[data-v-22fed76c] { display: flex; align-items: center; gap: var(--spacing--md); flex-wrap: nowrap; } @media screen and (max-width: 767px) { .name[data-v-22fed76c] input { min-width: 180px; } } @media (max-width: 1390px) { .name-container[data-v-22fed76c] { margin-right: var(--spacing--xs); } .actions[data-v-22fed76c] { gap: var(--spacing--xs); } } @media (max-width: 1350px) { .name-container[data-v-22fed76c] { margin-right: var(--spacing--2xs); } .actions[data-v-22fed76c] { gap: var(--spacing--2xs); } }/* BEM support Func -------------------------- */ /* Transition -------------------------- */ /* Color -------------------------- */ /* Link -------------------------- */ /* Border -------------------------- */ /* Outline -------------------------- */ /* Box shadow -------------------------- */ /* Fill -------------------------- */ /* Typography -------------------------- */ /* z-index -------------------------- */ /* Disable base -------------------------- */ /* Icon -------------------------- */ /* Checkbox -------------------------- */ /* Radio -------------------------- */ /* Select -------------------------- */ /* Alert -------------------------- */ /* MessageBox -------------------------- */ /* Message -------------------------- */ /* Notification -------------------------- */ /* Input -------------------------- */ /* Cascader -------------------------- */ /* Group -------------------------- */ /* Tab -------------------------- */ /* Button -------------------------- */ /* cascader -------------------------- */ /* Switch -------------------------- */ /* Dialog -------------------------- */ /* Table -------------------------- */ /* Pagination -------------------------- */ /* Popup -------------------------- */ /* Popover -------------------------- */ /* Tooltip -------------------------- */ /* Tag -------------------------- */ /* Tree -------------------------- */ /* Dropdown -------------------------- */ /* Badge -------------------------- */ /* Card --------------------------*/ /* Slider --------------------------*/ /* Steps --------------------------*/ /* Menu --------------------------*/ /* Rate --------------------------*/ /* DatePicker --------------------------*/ /* Loading --------------------------*/ /* Scrollbar --------------------------*/ /* Carousel --------------------------*/ /* Collapse --------------------------*/ /* Transfer --------------------------*/ /* Header --------------------------*/ /* Footer --------------------------*/ /* Main --------------------------*/ /* Timeline --------------------------*/ /* Backtop --------------------------*/ /* Link --------------------------*/ /* Calendar --------------------------*/ /* Form -------------------------- */ /* Avatar --------------------------*/ /* Break-point --------------------------*/ /* Break-points -------------------------- */ /* Scrollbar -------------------------- */ /* Placeholder -------------------------- */ /* BEM -------------------------- */ ._container_7bao3_123 { position: relative; width: 100%; padding: var(--spacing--xs) var(--spacing--md); display: flex; align-items: center; flex-wrap: nowrap; } ._path-separator_7bao3_132 { font-size: var(--font-size--xl); color: var(--color--foreground); padding: var(--spacing--3xs) var(--spacing--4xs) var(--spacing--4xs); } ._closeNodeViewDiscovery_7bao3_138 { position: absolute; right: var(--spacing--xs); top: var(--spacing--xs); cursor: pointer; } ._header-controls_7bao3_145 { display: flex; align-items: center; gap: var(--spacing--md); width: 100%; flex: 1; margin: 0 var(--spacing--md); }/* BEM support Func -------------------------- */ /* Transition -------------------------- */ /* Color -------------------------- */ /* Link -------------------------- */ /* Border -------------------------- */ /* Outline -------------------------- */ /* Box shadow -------------------------- */ /* Fill -------------------------- */ /* Typography -------------------------- */ /* z-index -------------------------- */ /* Disable base -------------------------- */ /* Icon -------------------------- */ /* Checkbox -------------------------- */ /* Radio -------------------------- */ /* Select -------------------------- */ /* Alert -------------------------- */ /* MessageBox -------------------------- */ /* Message -------------------------- */ /* Notification -------------------------- */ /* Input -------------------------- */ /* Cascader -------------------------- */ /* Group -------------------------- */ /* Tab -------------------------- */ /* Button -------------------------- */ /* cascader -------------------------- */ /* Switch -------------------------- */ /* Dialog -------------------------- */ /* Table -------------------------- */ /* Pagination -------------------------- */ /* Popup -------------------------- */ /* Popover -------------------------- */ /* Tooltip -------------------------- */ /* Tag -------------------------- */ /* Tree -------------------------- */ /* Dropdown -------------------------- */ /* Badge -------------------------- */ /* Card --------------------------*/ /* Slider --------------------------*/ /* Steps --------------------------*/ /* Menu --------------------------*/ /* Rate --------------------------*/ /* DatePicker --------------------------*/ /* Loading --------------------------*/ /* Scrollbar --------------------------*/ /* Carousel --------------------------*/ /* Collapse --------------------------*/ /* Transfer --------------------------*/ /* Header --------------------------*/ /* Footer --------------------------*/ /* Main --------------------------*/ /* Timeline --------------------------*/ /* Backtop --------------------------*/ /* Link --------------------------*/ /* Calendar --------------------------*/ /* Form -------------------------- */ /* Avatar --------------------------*/ /* Break-point --------------------------*/ /* Break-points -------------------------- */ /* Scrollbar -------------------------- */ /* Placeholder -------------------------- */ /* BEM -------------------------- */ ._container_4ekmy_123 { display: flex; position: relative; width: 100%; align-items: center; } ._main-header_4ekmy_130 { min-height: var(--navbar--height); background-color: var(--color--background--light-3); width: 100%; box-sizing: border-box; border-bottom: var(--border-width) var(--border-style) var(--color--foreground); } ._top-menu_4ekmy_138 { position: relative; display: flex; height: var(--navbar--height); align-items: center; font-size: 0.9em; font-weight: var(--font-weight--regular); overflow-x: auto; overflow-y: hidden; } ._github-button_4ekmy_149 { display: flex; align-items: center; align-self: stretch; padding: var(--spacing--5xs) var(--spacing--md); background-color: var(--color--background--light-3); border-left: var(--border-width) var(--border-style) var(--color--foreground); } ._close-github-button_4ekmy_158 { display: none; position: absolute; right: 0; top: 0; transform: translate(50%, -46%); color: var(--color--foreground--shade-2); background-color: var(--color--background--light-3); border-radius: 100%; cursor: pointer; } ._close-github-button_4ekmy_158:hover { color: var(--color--orange-400); } ._github-button-container_4ekmy_173 { position: relative; } ._github-button_4ekmy_149:hover ._close-github-button_4ekmy_158 { display: block; } @media (max-width: 1390px) { ._github-button_4ekmy_149 { padding: var(--spacing--5xs) var(--spacing--xs); } } @media (max-width: 1340px) { ._github-button_4ekmy_149 { border-left: 0; padding-left: 0; } } @media (max-width: 1290px) { ._github-button_4ekmy_149 { display: none; } }