n8n/packages/design-system/theme/src/transfer.scss
Mutasem Aldmour 5bd8f7c93e
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 e91ace4e52.

*  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>
2021-08-29 13:36:17 +02:00

230 lines
4.3 KiB
SCSS

@use "mixins/mixins";
@use "mixins/utils";
@use "./common/var";
@use "input";
@use "button";
@use "checkbox";
@use "checkbox-group";
@include mixins.b(transfer) {
font-size: var.$font-size-base;
@include mixins.e(buttons) {
display: inline-block;
vertical-align: middle;
padding: 0 30px;
}
@include mixins.e(button) {
display: block;
margin: 0 auto;
padding: 10px;
border-radius: 50%;
color: var.$color-white;
background-color: var(--color-primary);
font-size: 0;
@include mixins.when(with-texts) {
border-radius: var(--border-radius-base);
}
@include mixins.when(disabled) {
border: var(--border-base);
background-color: var.$background-color-base;
color: var(--color-text-lighter);
&:hover {
border: var(--border-base);
background-color: var.$background-color-base;
color: var(--color-text-lighter);
}
}
&:first-child {
margin-bottom: 10px;
}
&:nth-child(2) {
margin: 0;
}
i,
span {
font-size: 14px;
}
& [class*='el-icon-'] + span {
margin-left: 0;
}
}
}
@include mixins.b(transfer-panel) {
border: 1px solid var.$transfer-border-color;
border-radius: var.$transfer-border-radius;
overflow: hidden;
background: var.$color-white;
display: inline-block;
vertical-align: middle;
width: var.$transfer-panel-width;
max-height: 100%;
box-sizing: border-box;
position: relative;
@include mixins.e(body) {
height: var.$transfer-panel-body-height;
@include mixins.when(with-footer) {
padding-bottom: var.$transfer-panel-footer-height;
}
}
@include mixins.e(list) {
margin: 0;
padding: 6px 0;
list-style: none;
height: var.$transfer-panel-body-height;
overflow: auto;
box-sizing: border-box;
@include mixins.when(filterable) {
height: #{var.$transfer-panel-body-height - var.$transfer-filter-height -
20px};
padding-top: 0;
}
}
@include mixins.e(item) {
height: var.$transfer-item-height;
line-height: var.$transfer-item-height;
padding-left: 15px;
display: block !important;
& + .el-transfer-panel__item {
margin-left: 0;
}
&.el-checkbox {
color: var(--color-text-dark);
}
&:hover {
color: var(--color-primary);
}
&.el-checkbox .el-checkbox__label {
width: 100%;
@include utils.utils-ellipsis;
display: block;
box-sizing: border-box;
padding-left: 24px;
line-height: var.$transfer-item-height;
}
.el-checkbox__input {
position: absolute;
top: 8px;
}
}
@include mixins.e(filter) {
text-align: center;
margin: 15px;
box-sizing: border-box;
display: block;
width: auto;
.el-input__inner {
height: var.$transfer-filter-height;
width: 100%;
font-size: 12px;
display: inline-block;
box-sizing: border-box;
border-radius: #{var.$transfer-filter-height * 0.5};
padding-right: 10px;
padding-left: 30px;
}
.el-input__icon {
margin-left: 5px;
}
.el-icon-circle-close {
cursor: pointer;
}
}
.el-transfer-panel__header {
height: var.$transfer-panel-header-height;
line-height: var.$transfer-panel-header-height;
background: var.$transfer-panel-header-background-color;
margin: 0;
padding-left: 15px;
border-bottom: 1px solid var.$transfer-border-color;
box-sizing: border-box;
color: var.$color-black;
.el-checkbox {
display: block;
line-height: 40px;
.el-checkbox__label {
font-size: 16px;
color: var(--color-text-dark);
font-weight: normal;
span {
position: absolute;
right: 15px;
color: var(--color-text-light);
font-size: 12px;
font-weight: normal;
}
}
}
}
.el-transfer-panel__footer {
height: var.$transfer-panel-footer-height;
background: var.$color-white;
margin: 0;
padding: 0;
border-top: 1px solid var.$transfer-border-color;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: var.$index-normal;
@include utils.utils-vertical-center;
.el-checkbox {
padding-left: 20px;
color: var(--color-text-dark);
}
}
.el-transfer-panel__empty {
margin: 0;
height: var.$transfer-item-height;
line-height: var.$transfer-item-height;
padding: 6px 15px 0;
color: var(--color-text-light);
text-align: center;
}
.el-checkbox__label {
padding-left: 8px;
}
.el-checkbox__inner {
height: 14px;
width: 14px;
border-radius: 3px;
&::after {
height: 6px;
width: 3px;
left: 4px;
}
}
}