@n8n/design-system 2.33.4 → 2.34.0

package/dist/css/scrollbar.scss

@@ -0,0 +1,64 @@
+@use 'mixins/mixins';
+@use './common/var';
+
+@include mixins.b(scrollbar) {
+	overflow: hidden;
+	position: relative;
+
+	&:hover,
+	&:active,
+	&:focus {
+		> .el-scrollbar__bar {
+			opacity: 1;
+			transition: opacity 340ms ease-out;
+		}
+	}
+
+	@include mixins.e(wrap) {
+		overflow: auto;
+		height: 100%;
+	}
+
+	@include mixins.e(thumb) {
+		position: relative;
+		display: block;
+		width: 0;
+		height: 0;
+		cursor: pointer;
+		border-radius: inherit;
+		background-color: var.$scrollbar-background-color;
+		transition: 0.3s background-color;
+
+		&:hover {
+			background-color: var.$scrollbar-hover-background-color;
+		}
+	}
+
+	@include mixins.e(bar) {
+		position: absolute;
+		right: 2px;
+		bottom: 2px;
+		z-index: 1;
+		border-radius: 4px;
+		opacity: 0;
+		transition: opacity 120ms ease-out;
+
+		@include mixins.when(vertical) {
+			width: 6px;
+			top: 2px;
+
+			> div {
+				width: 100%;
+			}
+		}
+
+		@include mixins.when(horizontal) {
+			height: 6px;
+			left: 2px;
+
+			> div {
+				height: 100%;
+			}
+		}
+	}
+}

package/dist/css/select-dropdown.scss

@@ -0,0 +1,60 @@
+@use 'mixins/mixins';
+@use './common/var';
+@use './popper';
+
+@include mixins.b(select-dropdown) {
+	position: absolute;
+	z-index: #{var.$index-top + 1};
+	border: var.$select-dropdown-border;
+	border-radius: var(--radius);
+	background-color: var.$select-dropdown-background;
+	box-shadow: var.$select-dropdown-shadow;
+	box-sizing: border-box;
+	margin: 5px 0;
+	max-width: var(--select--dropdown--max-width);
+
+	@include mixins.when(multiple) {
+		& .el-select-dropdown__item.selected {
+			color: var.$select-option-selected-font-color;
+			background-color: var.$select-dropdown-background;
+
+			&.hover {
+				background-color: var.$select-option-hover-background;
+			}
+
+			&::after {
+				position: absolute;
+				right: 20px;
+				font-family: 'element-icons';
+				content: '\e6da';
+				font-size: 12px;
+				font-weight: var(--font-weight--bold);
+				-webkit-font-smoothing: antialiased;
+				-moz-osx-font-smoothing: grayscale;
+			}
+		}
+	}
+
+	.el-scrollbar.is-empty .el-select-dropdown__list {
+		padding: 0;
+	}
+}
+
+@include mixins.b(select-dropdown__empty) {
+	padding: var.$select-dropdown-empty-padding;
+	margin: 0;
+	text-align: center;
+	color: var.$select-dropdown-empty-color;
+	font-size: var.$select-font-size;
+}
+
+@include mixins.b(select-dropdown__wrap) {
+	max-height: var.$select-dropdown-max-height;
+}
+
+@include mixins.b(select-dropdown__list) {
+	list-style: none;
+	padding: var.$select-dropdown-padding;
+	margin: 0;
+	box-sizing: border-box;
+}

package/dist/css/select.scss

@@ -0,0 +1,180 @@
+@use 'mixins/mixins';
+@use 'mixins/utils';
+@use './common/var';
+@use 'select-dropdown';
+@use 'input';
+@use 'tag';
+@use 'option';
+@use 'option-group';
+@use 'scrollbar';
+
+@include mixins.b(select) {
+	display: inline-block;
+	position: relative;
+	width: 100%;
+
+	.el-select__tags {
+		overflow-x: scroll;
+		scrollbar-width: none;
+		-ms-overflow-style: none;
+		&::-webkit-scrollbar {
+			display: none;
+		}
+	}
+
+	.el-select__tags > span {
+		display: contents;
+	}
+
+	.el-select__tags + .el-input {
+		input {
+			box-sizing: border-box;
+			padding: 0 0 0 var(--spacing--2xs);
+			text-indent: 0;
+		}
+	}
+
+	.el-input__inner {
+		cursor: pointer;
+		padding-right: 35px;
+
+		&:focus {
+			border-color: var.$select-input-focus-border-color;
+		}
+	}
+
+	.el-input {
+		& .el-select__caret {
+			font-size: var.$select-input-font-size;
+			transition: transform 0.3s;
+			cursor: pointer;
+
+			@include mixins.when(reverse) {
+				transform: rotateZ(180deg);
+			}
+
+			@include mixins.when(show-close) {
+				font-size: var.$select-font-size;
+				text-align: center;
+				transform: rotateZ(180deg);
+				border-radius: var.$border-radius-circle;
+				color: var.$select-input-color;
+				transition: var.$color-transition-base;
+
+				&:hover {
+					color: var.$select-close-hover-color;
+				}
+			}
+		}
+
+		&.is-disabled {
+			& .el-input__inner {
+				cursor: not-allowed;
+
+				&:hover {
+					border-color: var.$select-disabled-border;
+				}
+			}
+		}
+
+		&.is-focus .el-input__inner {
+			border-color: var.$select-input-focus-border-color;
+		}
+
+		&__prefix {
+			left: var(--spacing--2xs);
+		}
+
+		&--prefix .el-input__inner {
+			padding-left: 26px;
+		}
+	}
+
+	> .el-input {
+		display: block;
+	}
+
+	@include mixins.e(input) {
+		border: none;
+		outline: none;
+		padding: 0;
+		margin-left: var(--spacing--2xs);
+		color: var.$select-multiple-input-color;
+		font-size: var.$select-font-size;
+		appearance: none;
+		height: 28px;
+		background-color: transparent;
+		@include mixins.when(mini) {
+			height: 14px;
+		}
+	}
+
+	@include mixins.e(close) {
+		cursor: pointer;
+		position: absolute;
+		top: 8px;
+		z-index: var.$index-top;
+		right: 25px;
+		color: var.$select-input-color;
+		line-height: 18px;
+		font-size: var.$select-input-font-size;
+
+		&:hover {
+			color: var.$select-close-hover-color;
+		}
+	}
+
+	@include mixins.e(tags) {
+		position: absolute;
+		line-height: normal;
+		white-space: normal;
+		z-index: var.$index-normal;
+		top: 50%;
+		transform: translateY(-50%);
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+
+	.el-tag__close {
+		margin-top: -2px;
+	}
+
+	.el-tag {
+		box-sizing: border-box;
+		margin: 2px 0 2px 6px;
+		border-color: var(--color--foreground);
+		background-color: var(--color--foreground);
+		color: var(--color--text--shade-1);
+		border-radius: 20px;
+		font-weight: var(--font-weight--regular);
+
+		&__close.el-icon-close {
+			background-color: var(--color--text--tint-1);
+			right: -7px;
+			top: 0;
+			color: var.$color-white;
+			margin-right: 6px;
+
+			&:hover {
+				background-color: var(--color--text);
+			}
+
+			&::before {
+				display: block;
+				transform: translate(0, 0.5px);
+			}
+		}
+	}
+
+	&--large {
+		.el-input__inner {
+			height: 42px;
+		}
+	}
+	&--default {
+		.el-tag {
+			padding: var(--spacing--5xs) var(--spacing--xs);
+		}
+	}
+}

package/dist/css/skeleton.scss

@@ -0,0 +1,101 @@
+.el-skeleton {
+	width: 100%;
+}
+
+.el-skeleton__item {
+	width: 100%;
+	height: 16px;
+	border-radius: var(--radius--lg);
+	background: var(--color--background--light-2);
+	display: inline-block;
+}
+
+.el-skeleton__button {
+	width: 162px;
+	height: 40px;
+	border-radius: 20px;
+}
+
+.el-skeleton__p {
+	width: 100%;
+	height: 16px;
+	margin-top: 16px;
+}
+
+.el-skeleton__h1 {
+	height: 20px;
+	margin-top: 14px;
+}
+
+.el-skeleton__circle {
+	width: 40px;
+	height: 40px;
+	border-radius: 50%;
+}
+
+.el-skeleton__image {
+	width: unset;
+	height: 500px !important;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	align-items: center;
+	-webkit-box-pack: center;
+	-ms-flex-pack: center;
+	justify-content: center;
+	border-radius: 8px !important;
+	color: var(--color--foreground--shade-1);
+}
+
+.el-skeleton__image svg {
+	width: 22%;
+	height: 22%;
+	fill: var(--color--info--tint-1);
+}
+
+.el-skeleton__first-line,
+.el-skeleton__paragraph {
+	background: var(--color--background);
+}
+
+.el-skeleton.is-animated .el-skeleton__item {
+	background: -webkit-gradient(
+		linear,
+		left top,
+		right top,
+		color-stop(25%, var(--color--background--light-1)),
+		color-stop(37%, var(--color--background--light-2)),
+		color-stop(63%, var(--color--background--light-1))
+	);
+	background: linear-gradient(
+		90deg,
+		var(--color--background--light-1) 25%,
+		var(--color--background--light-2) 37%,
+		var(--color--background--light-1) 63%
+	);
+	background-size: 400% 100%;
+	-webkit-animation: el-skeleton-loading 1.4s ease infinite;
+	animation: el-skeleton-loading 1.4s ease infinite;
+}
+
+@-webkit-keyframes el-skeleton-loading {
+	0% {
+		background-position: 100% 50%;
+	}
+
+	100% {
+		background-position: 0 50%;
+	}
+}
+
+@keyframes el-skeleton-loading {
+	0% {
+		background-position: 100% 50%;
+	}
+
+	100% {
+		background-position: 0 50%;
+	}
+}

package/dist/css/slider.scss

@@ -0,0 +1,7 @@
+// Pulls element-plus's default slider styles into the bundle. Without this
+// the runway, button, and bar render at 0px height because the el-slider
+// component CSS isn't auto-imported elsewhere in the design system.
+//
+// Component-level brand-token overrides (e.g. setting --el-slider-main-bg-color
+// to --color--primary) live wherever <ElSlider> is used.
+@use 'element-plus/theme-chalk/src/slider';

package/dist/css/switch.scss

@@ -0,0 +1,122 @@
+@use 'mixins/mixins';
+@use './common/var';
+
+@include mixins.b(switch) {
+	display: inline-flex;
+	align-items: center;
+	position: relative;
+	font-size: var.$switch-font-size;
+	line-height: var.$switch-height;
+	height: var.$switch-height;
+	vertical-align: middle;
+	& .el-loading-mask {
+		border-radius: 10px;
+	}
+	@include mixins.when(disabled) {
+		& .el-switch__core,
+		& .el-switch__label {
+			cursor: not-allowed;
+		}
+	}
+
+	@include mixins.e(label) {
+		transition: 0.2s;
+		height: var.$switch-height;
+		display: inline-block;
+		font-size: var.$switch-font-size;
+		font-weight: var(--font-weight--medium);
+		cursor: pointer;
+		vertical-align: middle;
+		color: var(--color--text--shade-1);
+
+		@include mixins.when(active) {
+			color: var(--color--primary);
+		}
+
+		@include mixins.m(left) {
+			margin-right: 10px;
+		}
+		@include mixins.m(right) {
+			margin-left: 10px;
+		}
+		& * {
+			line-height: 1;
+			font-size: var.$switch-font-size;
+			display: inline-block;
+		}
+	}
+
+	@include mixins.e(input) {
+		position: absolute;
+		width: 0;
+		height: 0;
+		opacity: 0;
+		margin: 0;
+	}
+
+	@include mixins.e(core) {
+		margin: 0;
+		display: inline-block;
+		position: relative;
+		width: var.$switch-width;
+		height: var.$switch-height;
+		border: 1px solid var.$switch-off-color;
+		outline: none;
+		border-radius: var.$switch-core-border-radius;
+		box-sizing: border-box;
+		background: var.$switch-off-color;
+		border: 1px solid var(--switch--border-color);
+		cursor: pointer;
+		transition:
+			border-color 0.1s,
+			background-color 0.1s;
+		vertical-align: middle;
+
+		&:after {
+			content: '';
+			position: absolute;
+			top: 1px;
+			left: 1px;
+			border-radius: var.$border-radius-circle;
+			transition: all 0.1s;
+			width: var.$switch-button-size;
+			height: var.$switch-button-size;
+			background-color: var.$switch-toggle-color;
+		}
+	}
+
+	@include mixins.when(checked) {
+		.el-switch__core {
+			border-color: var.$switch-on-color;
+			background-color: var.$switch-on-color;
+			&::after {
+				left: 100%;
+				margin-left: -(var.$switch-button-size) - 1px;
+			}
+		}
+	}
+
+	@include mixins.when(disabled) {
+		opacity: 0.6;
+	}
+
+	@include mixins.m(wide) {
+		.el-switch__label {
+			&.el-switch__label--left {
+				span {
+					left: 10px;
+				}
+			}
+			&.el-switch__label--right {
+				span {
+					right: 10px;
+				}
+			}
+		}
+	}
+
+	& .label-fade-enter-from,
+	& .label-fade-leave-active {
+		opacity: 0;
+	}
+}

package/dist/css/table-column.scss

@@ -0,0 +1,97 @@
+@use 'mixins/mixins';
+@use 'checkbox';
+@use 'tag';
+@use './common/var';
+
+@include mixins.b(table-column) {
+	@include mixins.m(selection) {
+		.cell {
+			padding-left: 14px;
+			padding-right: 14px;
+		}
+	}
+}
+
+@include mixins.b(table-filter) {
+	border: solid 1px var(--border-color--light);
+	border-radius: 2px;
+	background-color: var.$color-white;
+	box-shadow: var.$dropdown-menu-box-shadow;
+	box-sizing: border-box;
+	margin: 2px 0;
+
+	/** used for dropdown mode */
+	@include mixins.e(list) {
+		padding: 5px 0;
+		margin: 0;
+		list-style: none;
+		min-width: 100px;
+	}
+
+	@include mixins.e(list-item) {
+		line-height: 36px;
+		padding: 0 10px;
+		cursor: pointer;
+		font-size: var.$font-size-base;
+
+		&:hover {
+			background-color: var.$dropdown-menuItem-hover-fill;
+			color: var.$dropdown-menuItem-hover-color;
+		}
+
+		@include mixins.when(active) {
+			background-color: var(--color--primary);
+			color: var.$color-white;
+		}
+	}
+
+	@include mixins.e(content) {
+		min-width: 100px;
+	}
+
+	@include mixins.e(bottom) {
+		border-top: 1px solid var(--border-color--light);
+		padding: 8px;
+
+		button {
+			background: transparent;
+			border: none;
+			color: var(--color--text--shade-1);
+			cursor: pointer;
+			font-size: var.$font-size-small;
+			padding: 0 3px;
+
+			&:hover {
+				color: var(--color--primary);
+			}
+
+			&:focus {
+				outline: none;
+			}
+
+			&.is-disabled {
+				color: var.$disabled-color-base;
+				cursor: not-allowed;
+			}
+		}
+	}
+
+	@include mixins.e(wrap) {
+		max-height: 280px;
+	}
+
+	@include mixins.e(checkbox-group) {
+		padding: 10px;
+
+		label.el-checkbox {
+			display: block;
+			margin-right: 5px;
+			margin-bottom: 8px;
+			margin-left: 5px;
+		}
+
+		.el-checkbox:last-child {
+			margin-bottom: 0;
+		}
+	}
+}