n8n/packages/editor-ui/src/n8n-theme-variables.scss
Ben Hesseldieck 0470740737
Change the UI of the Nodes Panel (#1855)
* Add codex search properties to node types

* implement basic styles

* update header designs

* update node list designs

* add trigger icon

* refactor node creator list

* implement categories and subcategories

* fix up spacing

* add arrows

* implement navigatable list

* implement more of feature

* implement navigation

* add transitions

* fix lint issues

* fix overlay

*  Get and add codex categories

* fix up design

* update borders

* implement no-matches view

* fix preview bug

* add color to search

* clean up borders

* add comma

* Revert "Merge branch 'add-codex-data' of github.com:n8n-io/n8n into PROD-819-nodes-panel-redesign"

38b7d7ead1

* use new impl

* remove empty categories

* update scrolling, hide start node

* make scrollable

* remove text while subcategory panel is open

* fix up spacing

* fix lint issues

* update descriptions

* update path

* update images

* fix tags manager

* give min height to image

* gst

* update clear color

* update font size

* fix firefox spacing

* close on click outside

* add external link icon

* update iterator key

* add client side caching for images

* update caching header

* ️ Add properties to codex for nodes panel (#1854)

*  Get and add codex categories

*  Add parens to evaluation + destructuring

* 🔥 Remove non-existing class reference

*  Add alias to codex property

* move constants

* 🔨 Rename CodexCategories to CodexData

* ✏️ Update getCodex documentation

* refactor and move

* refactor no results view

* more refactoring

* refactor subcategory panel

* more refactoring

* update text

* update no results view

* add miscellaneous to end of list

* address design feedback

* reimplement node search

* fix up clear

* update placeholder color

* impl transition

* focus on tab

* update spacing

* fix transition bug on start

* fix up x

* fix position

* build

* safari fix

* remove input changes

* css bleed issue with image

* update css value

* clean up

* simplify impl

* rename again

* rename again

* rename all

* fix hover bug

* remove keep alive

* delete icon

* update interface type

* refactor components

* update scss to module

* clean up impl

* clean up colors as vars

* fix indentation

* clean up scss

* clean up scss

* clean up scss

* clean up scss

* Clean up files

* update logic to be more efficient

* fix search bug

* update type

* remove unused

* clean up js

* update scrollable, border impl, transition

* fix simicolon

* build

* update search

* address max's comments

* change icon border radius

* change margin

* update icon size

* update icon size

* update slide transition out

* add comma

* remove full

* update trigger icon size

* fix image size

* address design feedback

* update external link icons

* address codacy issues

* support custom nodes without codex file

* address jan's feedback

* address Ben's comments

* add subcategory index

* open/close categories with arrow keys

* add lint comment

* Address latest comments

*  Minor changes

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
Co-authored-by: Mutasem <mutdmour@gmail.com>
Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
2021-06-18 07:58:26 +02:00

86 lines
2.5 KiB
SCSS

// Primary Theme Color
$--color-primary: #ff6d5a;
$--color-primary-light: #fbebed;
// Dialog
$--custom-dialog-text-color: #666;
$--custom-dialog-background: #fff;
$--custom-font-black: #000;
$--custom-font-dark: #595e67;
$--custom-font-light: #777;
$--custom-font-very-light: #999;
$--custom-header-background: #384d5b;
$--custom-expression-text: #996688;
$--custom-expression-background: #f7f5ff;
$--custom-window-sidebar-top : #fff5f2;
$--custom-error-background : #ffe5e5;
$--custom-error-text : #eb2222;
$--custom-running-background : #ffffe5;
$--custom-running-text : #eb9422;
$--custom-success-background : #e3f0e4;
$--custom-success-text-light: #2f4;
$--custom-success-text : #40c351;
$--custom-warning-background : #ffffe5;
$--custom-warning-text : #eb9422;
$--custom-node-view-background : #faf9fe;
// Table
$--custom-table-background-main: $--custom-header-background;
$--custom-table-background-stripe-color: #f6f6f6;
$--custom-table-background-hover-color: #e9f0f4;
$--custom-input-background: #f0f0f0;
$--custom-input-background-disabled: #ccc;
$--custom-input-font: #333;
$--custom-input-border-color: #dcdfe6;
$--custom-input-font-disabled: #555;
$--custom-input-border-shadow: 1px solid $--custom-input-border-color;
$--header-height: 65px;
$--sidebar-width: 65px;
$--sidebar-expanded-width: 200px;
$--tags-manager-min-height: 300px;
// based on element.io breakpoints
$--breakpoint-xs: 768px;
$--breakpoint-sm: 992px;
$--breakpoint-md: 1200px;
$--breakpoint-lg: 1920px;
// scrollbars
$--scrollbar-thumb-color: lighten($--color-primary, 20%);
// tags
$--tag-background-color: #dce1e9;
$--tag-text-color: #3d3f46;
$--tag-close-background-color: #717782;
$--tag-close-background-hover-color: #3d3f46;
// Node creator
$--node-creator-width: 385px;
$--node-creator-text-color: #555;
$--node-creator-select-background-color: #f2f4f8;
$--node-creator-background-color: #fff;
$--node-creator-search-background-color: #fff;
$--node-creator-border-color: #dbdfe7;
$--node-creator-item-hover-border-color: #8d939c;
$--node-creator-arrow-color: #8d939c;
$--node-creator-no-results-background-color: #f8f9fb;
$--node-creator-close-button-color: #fff;
$--node-creator-search-clear-background-color: #8d939c;
$--node-creator-search-clear-background-color-hover: #3d3f46;
$--node-creator-search-placeholder-color: #909399;
$--node-creator-subcategory-panel-header-bacground-color: #f2f4f8;
$--node-creator-description-color: #7d7d87;
// trigger icon
$--trigger-icon-border-color: #dcdfe6;
$--trigger-icon-background-color: #fff;