✨ Implement design system (#2050)
* split up main, sass imports, import new nds * migrate most buttons * update sizes based on feedback * update copy buttons * update executions list * fix issues * force message box buttons * update warning color * update more buttons * wrap message box buttons * update last component * lint fixes * add build report step * breakout imports * set package.json * fix notification bug * clean up imports * use build directories directly * update imports * remove xl size * update number inputs * fix input width * update line height, fix icon bug * fix up editor * fix spacing between buttons * Reset line height * revert changes to this * revert changes * clean up button sizes * change to outline * update select height * update tooltip * remove build report step * clean up impl * remove regenerator runtime * add design system repo * apply editorconfig * apply editor config prettier * lint issue * switch to tabs * switch to single space * update eslintrc * remove git modules * update sass package * support dart sass * add build * update dependency * update contributing.md * set repo * update versions * add tslint step * update spacing to spaces, add dev step * add test step * add test step * update browser lint rc * remove .github * delete .gitignore * set comment for icons * remove preview link * update button interface * update types * set types * clean up intro * update intro * remove assets * move into preview * remove headline comment * reduce theme build * loading executions * match deps versions * match deps versions * fix lint issues * fix lint issues * update callback * disable codacy for docs.css * fix storybook issues * add design system to docker image * update spacing around delete sort button * set line height to stop juggling headline * update sizes * clean up vars * fix scss issues * update button vars * add shade color * fix button without click * fix buttons bug * fix bug with executions list * clean up theme * update link styling * fix typo * run prettier * 🎨 code format * 🎨 code format * 🔥 remove empty files * ✨ N8n 2284 new inputs (#2075) * implement inputs * prettier fixes * revert unnessary change * move input components and tooltip * remove form elements * move select * update input placements * update sizes * update credentails * clean up select size * fix caret issue * update inputs * clean up select * fix tags dropdown border * clean up tags input * fix workflow name bug * clean up select here * add sizes template * fix option caret * fix input sizes * update date input size * remove tags input override * update prop * update input size * center run data inputs * update disabled colors * update execution header * update scrollbar * update text area spacing * fix items in header * update run data tooltip * remove popover * update prefix positions * add filterable demo * address design issues * fix input issues, flip boolean input to text * update input sufffix colors * remove override * speed up switch, fix toggle spacing issue * update icon * remove icon classes * clean up inputs * clean up inputs with icons * update input spacing again * update suffix position * build * Add support for xlarge inputs * fix input issues * fix input issue * update listeners * update number inputs for settings * update append/prepend spacing * clean up inputs, set expression input as text * fix type errors * fix workflow number input * fix tags dropdown bug * fix bugs * fix menu item bug * remove font weight from link element * remove default * fix select option * fix contrast issues * allow overflow x for multi selects * fix icon * update options select * fix issue that resolves expression to null * update how actions are centered * fix up selects * update selects to support limiting size * update option styles * ⚡ Apply suggestions BHesseldieck Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com> * 🎨 code format Co-authored-by: Jan <janober@users.noreply.github.com> Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com> Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com> * ⏪ Revert "🔥 remove empty files" This reverts commit e91ace4e52403f4a6b00b7be68b86fc48b7d8fef. * ⚡ Remove private from n8n-design-system package * 🎨 Change to spaces to stay consistent with editorconfig & others package files * ⚡ Fix year in license Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com> Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com> Co-authored-by: Jan <janober@users.noreply.github.com> Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
This commit is contained in:
Mutasem Aldmour
GitHub
@@ -1,35 +1,9 @@
|
||||
// https://github.com/ElemeFE/element/blob/dev/packages/theme-chalk/src/table.scss
|
||||
|
||||
|
||||
@import "./n8n-theme-variables";
|
||||
|
||||
$--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||
|
||||
@import "~element-ui/packages/theme-chalk/src/index";
|
||||
@import "~element-ui/lib/theme-chalk/display.css";
|
||||
@import "~n8n-design-system/theme/dist/index.css";
|
||||
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background-color: $--custom-node-view-background;
|
||||
margin: 0;
|
||||
overscroll-behavior-x: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
button {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
@@ -159,8 +133,11 @@ h1, h2, h3, h4, h5, h6 {
|
||||
left: 60px;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: #fff0ef;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-menu--vertical {
|
||||
.el-menu-item {
|
||||
@@ -210,128 +187,6 @@ h1, h2, h3, h4, h5, h6 {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Select input
|
||||
.el-scrollbar {
|
||||
background-color: #fff;
|
||||
}
|
||||
.el-select-dropdown__item {
|
||||
font-size: 0.8em;
|
||||
color: #555;
|
||||
height: auto;
|
||||
line-height: 1.8em;
|
||||
margin: 0.25em 0;
|
||||
padding: 0.25em 1em;
|
||||
}
|
||||
.el-select-dropdown__item.selected {
|
||||
font-weight: normal;
|
||||
}
|
||||
.el-select-dropdown__item + .el-select-dropdown__item {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
.el-dropdown-menu__item {
|
||||
color: $--color-primary;
|
||||
}
|
||||
|
||||
|
||||
// Color-Picker
|
||||
.color-picker {
|
||||
.el-color-picker__trigger {
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 2px 0 0 4px;
|
||||
.el-color-picker__icon {
|
||||
color: $--color-primary;
|
||||
left: 14px;
|
||||
}
|
||||
}
|
||||
.el-color-picker__color {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: none;
|
||||
}
|
||||
.el-color-picker__color:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.el-color-picker__color-inner {
|
||||
border: none;
|
||||
border-radius: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Date selector
|
||||
.el-date-editor.el-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Select input
|
||||
.el-select {
|
||||
width: 100%;
|
||||
.el-tag {
|
||||
color: $--custom-input-font;
|
||||
|
||||
.el-tag__close.el-icon-close {
|
||||
background-color: $--custom-input-font;
|
||||
|
||||
&:hover {
|
||||
background-color: $--custom-input-font;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-switch__label {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
// Input
|
||||
.el-input__inner {
|
||||
border-radius: 20px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.el-input--small .el-input__inner {
|
||||
border-radius: 13px;
|
||||
}
|
||||
.el-input__inner,
|
||||
.el-input__inner:hover {
|
||||
background-color: $--custom-input-background;
|
||||
color: $--custom-input-font;
|
||||
border: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
// Number Input
|
||||
.el-input-number {
|
||||
background-color: $--custom-input-background;
|
||||
border-radius: 16px;
|
||||
width: calc(100% - 20px);
|
||||
|
||||
.el-input-number__decrease,
|
||||
.el-input-number__increase {
|
||||
border: none;
|
||||
color: #fff;
|
||||
background-color: $--custom-table-background-main;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
border-radius: 10px;
|
||||
margin: 3px;
|
||||
}
|
||||
.el-input-number__decrease:hover,
|
||||
.el-input-number__increase:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.el-input-number__decrease.is-disabled,
|
||||
.el-input-number__increase.is-disabled {
|
||||
background-color: $--custom-input-background-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
// Transfer list (nodes)
|
||||
.el-transfer {
|
||||
.el-transfer-panel {
|
||||
@@ -354,63 +209,6 @@ h1, h2, h3, h4, h5, h6 {
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.el-button,
|
||||
.el-button:active,
|
||||
.el-button:focus {
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
background-color: $--color-primary;
|
||||
|
||||
.next-icon-text {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.el-button.el-button--mini:not(.is-circle) {
|
||||
padding: 7px 10px;
|
||||
}
|
||||
.el-button:hover {
|
||||
background-color: $--color-primary;
|
||||
color: #fff;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.el-input.is-disabled .el-input__inner,
|
||||
.el-button.is-disabled,
|
||||
.el-button.is-disabled:hover,
|
||||
.el-button.is-disabled:focus {
|
||||
background-color: $--custom-input-background-disabled;
|
||||
border-color: #555;
|
||||
color: $--custom-input-font-disabled;
|
||||
}
|
||||
.el-button.is-plain,.el-button.is-plain:hover {
|
||||
color: $--color-primary;
|
||||
border: 1px solid $--color-primary;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
// Textarea
|
||||
.ql-editor,
|
||||
.el-textarea textarea,
|
||||
.el-textarea textarea:active,
|
||||
.el-textarea textarea:focus,
|
||||
.el-textarea textarea:hover {
|
||||
background-color: $--custom-input-background;
|
||||
color: $--custom-input-font;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
outline: 0;
|
||||
padding: 0.8em 1em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.el-textarea.is-disabled .el-textarea__inner {
|
||||
background-color: $--custom-input-background-disabled;
|
||||
color: $--custom-input-font-disabled;
|
||||
}
|
||||
|
||||
|
||||
// Tabs
|
||||
.type-selector:focus,
|
||||
.el-tabs__header:focus,
|
||||
@@ -450,14 +248,6 @@ h1, h2, h3, h4, h5, h6 {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
// Tooltip
|
||||
.el-tooltip__popper.is-light {
|
||||
border: none;
|
||||
-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
|
||||
-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
|
||||
box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
// Notification
|
||||
.el-notification {
|
||||
border-radius: 0;
|
||||
@@ -469,36 +259,6 @@ h1, h2, h3, h4, h5, h6 {
|
||||
}
|
||||
|
||||
|
||||
// Custom scrollbar
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
border-radius: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track:hover {
|
||||
background: #ddd;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 6px;
|
||||
background: $--scrollbar-thumb-color;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: $--color-primary;
|
||||
}
|
||||
|
||||
.el-dialog__wrapper {
|
||||
&::-webkit-scrollbar-track,
|
||||
&::-webkit-scrollbar-track:hover {
|
||||
background: #fff;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: $--color-primary;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-container {
|
||||
.el-tag {
|
||||
color: $--tag-text-color;
|
||||
|
||||
Reference in New Issue
Block a user