@n8n/design-system 2.33.3 → 2.34.0

package/dist/css/index.scss

@@ -0,0 +1,36 @@
+@use './primitives.scss';
+@use './tokens.scss';
+@use './reset.scss';
+@use './base.scss';
+@use './fonts.scss';
+@use './markdown.scss';
+@use './pagination.scss';
+@use './dialog.scss';
+@use './dropdown.scss';
+@use './menu.scss';
+@use './input.scss';
+@use './input-number.scss';
+@use './radio.scss';
+@use './checkbox.scss';
+@use './switch.scss';
+@use './slider.scss';
+@use './select.scss';
+@use './skeleton.scss';
+@use './table.scss';
+@use './table-column.scss';
+@use './date-picker.scss';
+@use './popover.scss';
+@use './tooltip.scss';
+@use './message-box.scss';
+@use './tabs.scss';
+@use './tag.scss';
+@use './tree.scss';
+@use './notification.scss';
+@use './loading.scss';
+@use './row.scss';
+@use './col.scss';
+@use './scrollbar.scss';
+@use './color-picker.scss';
+@use './drawer.scss';
+@use './popper.scss';
+@use './utilities/index.scss';

package/dist/css/input-number.scss

@@ -0,0 +1,191 @@
+@use 'mixins/mixins';
+@use './common/var';
+@use 'input';
+
+@include mixins.b(input-number) {
+	position: relative;
+	display: inline-block;
+	line-height: #{var.$input-height - 2};
+	width: 100%;
+
+	/* Chrome, Safari, Edge, Opera */
+	input::-webkit-outer-spin-button,
+	input::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
+	/* Firefox */
+	input[type='number'] {
+		-moz-appearance: textfield !important;
+	}
+
+	.el-input {
+		display: block;
+
+		&__inner {
+			-webkit-appearance: none;
+			padding-left: #{var.$input-height + 10};
+			padding-right: #{var.$input-height + 10};
+			text-align: center;
+		}
+	}
+
+	@include mixins.e((increase, decrease)) {
+		--input--color--disabled: var(--color--text--tint-1);
+		position: absolute;
+		z-index: 1;
+		top: 1px;
+		bottom: 1px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var.$input-height;
+		height: auto;
+		background: var.$background-color-base;
+		color: var(--color--text--shade-1);
+		cursor: pointer;
+		font-size: 13px;
+
+		&:hover {
+			color: var(--color--primary);
+
+			&:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
+				border-color: var.$input-focus-border;
+			}
+		}
+
+		&.is-disabled {
+			color: var.$disabled-color-base;
+			cursor: not-allowed;
+		}
+	}
+
+	@include mixins.e(increase) {
+		right: 1px;
+		border-radius: 0 var.$input-number-control-border-radius var.$input-number-control-border-radius
+			0;
+		border-left: var(--border);
+	}
+
+	@include mixins.e(decrease) {
+		left: 1px;
+		border-radius: var.$input-number-control-border-radius 0 0
+			var.$input-number-control-border-radius;
+		border-right: var(--border);
+	}
+
+	@include mixins.when(disabled) {
+		@include mixins.e((increase, decrease)) {
+			border-color: var.$disabled-border-base;
+			color: var.$disabled-border-base;
+
+			&:hover {
+				color: var.$disabled-border-base;
+				cursor: not-allowed;
+			}
+		}
+	}
+
+	@include mixins.m(medium) {
+		line-height: #{var.$input-medium-height - 4};
+
+		@include mixins.e((increase, decrease)) {
+			width: var.$input-medium-height;
+			font-size: var.$input-medium-font-size;
+		}
+
+		.el-input__inner {
+			padding-left: #{var.$input-medium-height + 7};
+			padding-right: #{var.$input-medium-height + 7};
+		}
+	}
+
+	@include mixins.m(small) {
+		line-height: #{var.$input-small-height - 4};
+
+		@include mixins.e((increase, decrease)) {
+			width: var.$input-small-height;
+			font-size: var.$input-small-font-size;
+
+			[class*='el-icon'] {
+				transform: scale(0.9);
+			}
+		}
+
+		.el-input__inner {
+			padding-left: #{var.$input-small-height + 7};
+			padding-right: #{var.$input-small-height + 7};
+		}
+	}
+
+	@include mixins.m(mini) {
+		line-height: #{var.$input-mini-height - 4};
+
+		@include mixins.e((increase, decrease)) {
+			width: var.$input-mini-height;
+			font-size: var.$input-mini-font-size;
+
+			[class*='el-icon'] {
+				transform: scale(0.8);
+			}
+		}
+
+		.el-input__inner {
+			padding-left: #{var.$input-mini-height + 7};
+			padding-right: #{var.$input-mini-height + 7};
+		}
+	}
+
+	@include mixins.when(without-controls) {
+		.el-input__inner {
+			text-align: left;
+			padding-left: var(--spacing--2xs);
+			padding-right: var(--spacing--2xs);
+		}
+	}
+
+	@include mixins.when(controls-right) {
+		.el-input__inner {
+			padding-left: var(--spacing--2xs);
+			padding-right: #{var.$input-height + 4};
+		}
+
+		&.el-input-number--medium .el-input__inner {
+			padding-right: #{var.$input-medium-height + 4};
+		}
+
+		&.el-input-number--small .el-input__inner {
+			padding-right: #{var.$input-small-height + 4};
+		}
+
+		&.el-input-number--mini .el-input__inner {
+			padding-left: var(--spacing--4xs);
+			padding-right: #{var.$input-mini-height + 4};
+		}
+
+		@include mixins.e((increase, decrease)) {
+			height: calc((100% - 1px) / 2);
+			bottom: auto;
+
+			[class*='el-icon'] {
+				transform: scale(0.8);
+			}
+		}
+
+		@include mixins.e(increase) {
+			border-radius: 0 var.$input-number-control-border-radius 0 0;
+			border-bottom: var(--border);
+		}
+
+		@include mixins.e(decrease) {
+			right: 1px;
+			bottom: 1px;
+			top: auto;
+			left: auto;
+			border-right: none;
+			border-left: var(--border);
+			border-radius: 0 0 var.$input-number-control-border-radius 0;
+		}
+	}
+}

package/dist/css/input.scss

@@ -0,0 +1,378 @@
+@use 'mixins/mixins';
+@use './common/var';
+
+@include mixins.b(textarea) {
+	position: relative;
+	display: inline-block;
+	width: 100%;
+	vertical-align: bottom;
+	font-size: var.$font-size-base;
+
+	@include mixins.e(inner) {
+		display: block;
+		resize: vertical;
+		padding: 8px 12px 5px;
+		line-height: 1.5;
+		box-sizing: border-box;
+		width: 100%;
+		font-size: inherit;
+		color: var.$input-font-color;
+		background-color: var.$input-background-color;
+		background-image: none;
+		border-radius: var.$input-border-radius;
+		border-top-left-radius: var.$input-border-top-left-radius;
+		border-top-right-radius: var.$input-border-top-right-radius;
+		border-bottom-left-radius: var.$input-border-bottom-left-radius;
+		border-bottom-right-radius: var.$input-border-bottom-right-radius;
+
+		transition: var.$border-transition-base;
+
+		&,
+		&:hover {
+			border: var.$input-border;
+		}
+
+		&::placeholder {
+			color: var.$input-placeholder-color;
+		}
+
+		&:focus {
+			outline: none;
+			border-color: var.$input-focus-border;
+		}
+	}
+
+	& .el-input__count {
+		color: var(--color--info);
+		background: var.$color-white;
+		position: absolute;
+		font-size: 12px;
+		bottom: 5px;
+		right: 10px;
+	}
+
+	@include mixins.when(disabled) {
+		.el-textarea__inner {
+			background-color: var.$input-disabled-fill;
+			border-color: var.$input-disabled-border;
+			color: var.$input-disabled-color;
+			cursor: not-allowed;
+
+			&::placeholder {
+				color: var.$input-disabled-placeholder-color;
+			}
+		}
+	}
+
+	@include mixins.when(exceed) {
+		.el-textarea__inner {
+			border-color: var(--color--danger);
+		}
+
+		.el-input__count {
+			color: var(--color--danger);
+		}
+	}
+}
+
+@include mixins.b(input) {
+	position: relative;
+	font-size: var.$input-font-size;
+	display: inline-block;
+	width: 100%;
+	@include mixins.scroll-bar;
+
+	& .el-input__clear {
+		color: var.$input-clear-color;
+		font-size: var.$input-font-size;
+		cursor: pointer;
+		transition: var.$color-transition-base;
+
+		&:hover {
+			color: var.$input-clear-hover-color;
+		}
+	}
+
+	& .el-input__count {
+		height: 100%;
+		display: inline-flex;
+		align-items: center;
+		color: var(--color--info);
+		font-size: 12px;
+
+		.el-input__count-inner {
+			background: var.$color-white;
+			line-height: initial;
+			display: inline-block;
+			padding: 0 5px;
+		}
+	}
+
+	@include mixins.e(inner) {
+		-webkit-appearance: none;
+		background-color: var.$input-background-color;
+		background-image: none;
+		border-radius: var.$input-border-radius;
+		border-top-left-radius: var.$input-border-top-left-radius;
+		border-top-right-radius: var.$input-border-top-right-radius;
+		border-bottom-left-radius: var.$input-border-bottom-left-radius;
+		border-bottom-right-radius: var.$input-border-bottom-right-radius;
+		border: var.$input-border;
+		border-right-color: var.$input-border-right-color;
+		border-bottom-color: var.$input-border-bottom-color;
+		box-sizing: border-box;
+		color: var.$input-font-color;
+		display: inline-block;
+		font-size: inherit;
+		height: var.$input-height;
+		min-height: var.$input-height;
+		line-height: var.$input-height;
+		outline: none;
+		padding: 0 0 0 var(--spacing--2xs);
+		transition: var.$border-transition-base;
+		width: 100%;
+
+		&::placeholder {
+			color: var.$input-placeholder-color;
+		}
+
+		&:focus {
+			outline: none;
+			border-color: var.$input-focus-border;
+		}
+	}
+
+	@include mixins.e(suffix) {
+		position: absolute;
+		height: 100%;
+		right: var(--spacing--2xs);
+		top: 0;
+		text-align: center;
+		color: var(--color--text--tint-1);
+		transition: all 0.3s;
+		pointer-events: none;
+		display: flex;
+		align-items: center;
+	}
+
+	@include mixins.e(suffix-inner) {
+		display: inline-flex;
+		pointer-events: all;
+	}
+
+	@include mixins.e(prefix) {
+		position: absolute;
+		height: 100%;
+		left: 14px;
+		top: 0;
+		text-align: center;
+		color: var.$input-icon-color;
+		transition: all 0.3s;
+		display: flex;
+		align-items: center;
+	}
+
+	@include mixins.e(icon) {
+		height: 100%;
+		text-align: center;
+		transition: all 0.3s;
+		line-height: var.$input-height;
+
+		&:after {
+			content: '';
+			height: 100%;
+			width: 0;
+			display: inline-block;
+			vertical-align: middle;
+		}
+	}
+
+	@include mixins.e(validateIcon) {
+		pointer-events: none;
+	}
+
+	@include mixins.when(active) {
+		.el-input__inner {
+			outline: none;
+			border-color: var.$input-focus-border;
+		}
+	}
+
+	@include mixins.when(disabled) {
+		.el-input__inner {
+			background-color: var.$input-disabled-fill;
+			border-color: var.$input-disabled-border;
+			color: var.$input-disabled-color;
+			cursor: not-allowed;
+
+			&::placeholder {
+				color: var.$input-disabled-placeholder-color;
+			}
+		}
+
+		.el-input__icon {
+			cursor: not-allowed;
+		}
+	}
+
+	@include mixins.when(exceed) {
+		.el-input__inner {
+			border-color: var(--color--danger);
+		}
+
+		.el-input__suffix {
+			.el-input__count {
+				color: var(--color--danger);
+			}
+		}
+	}
+
+	@include mixins.m(suffix) {
+		.el-input__inner {
+			padding-right: 30px;
+		}
+	}
+
+	@include mixins.m(prefix) {
+		.el-input__inner {
+			padding-left: 37px;
+		}
+	}
+
+	@include mixins.m(medium) {
+		font-size: var.$input-medium-font-size;
+
+		@include mixins.e(inner) {
+			height: var.$input-medium-height;
+			min-height: var.$input-medium-height;
+			line-height: var.$input-medium-height;
+		}
+
+		.el-input__icon {
+			line-height: var.$input-medium-height;
+		}
+	}
+	@include mixins.m(small) {
+		font-size: var.$input-small-font-size;
+
+		@include mixins.e(inner) {
+			height: var.$input-small-height;
+			min-height: var.$input-small-height;
+			line-height: var.$input-small-height;
+		}
+
+		.el-input__icon {
+			line-height: var.$input-small-height;
+		}
+	}
+	@include mixins.m(mini) {
+		font-size: var.$input-mini-font-size;
+
+		@include mixins.e(inner) {
+			height: var.$input-mini-height;
+			min-height: var.$input-mini-height;
+			line-height: var.$input-mini-height;
+		}
+
+		.el-input__icon {
+			line-height: var.$input-mini-height;
+		}
+	}
+}
+
+@include mixins.b(input-group) {
+	line-height: normal;
+	display: inline-table;
+	width: 100%;
+	border-collapse: separate;
+	border-spacing: 0;
+
+	> .el-input__inner {
+		vertical-align: middle;
+		display: table-cell;
+	}
+
+	@include mixins.e((append, prepend)) {
+		background-color: var.$background-color-base;
+		color: var(--color--info);
+		vertical-align: middle;
+		display: table-cell;
+		position: relative;
+		border: var.$input-border;
+		border-radius: var.$input-border-radius;
+		border-top-left-radius: var.$input-border-top-left-radius;
+		border-top-right-radius: var.$input-border-top-right-radius;
+		border-bottom-left-radius: var.$input-border-bottom-left-radius;
+		border-bottom-right-radius: var.$input-border-bottom-right-radius;
+		border-right-color: var.$input-border-right-color;
+		border-bottom-color: var.$input-border-bottom-color;
+		padding: 0 10px;
+		width: 1px;
+		white-space: nowrap;
+		font-weight: var(--font-weight--regular);
+
+		&:focus {
+			outline: none;
+		}
+
+		.el-select,
+		.el-button {
+			display: inline-block;
+			margin: -10px -20px;
+		}
+
+		button.el-button,
+		div.el-select .el-input__inner,
+		div.el-select:hover .el-input__inner {
+			border-color: transparent;
+			background-color: transparent;
+			color: inherit;
+			border-top: 0;
+			border-bottom: 0;
+		}
+
+		.el-button,
+		.el-input {
+			font-size: inherit;
+		}
+	}
+
+	@include mixins.e(prepend) {
+		border-right: 0;
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+
+	@include mixins.e(append) {
+		border-left: 0;
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+
+	@include mixins.m(prepend) {
+		.el-input__inner {
+			border-top-left-radius: 0;
+			border-bottom-left-radius: 0;
+		}
+		.el-select .el-input.is-focus .el-input__inner {
+			border-color: transparent;
+		}
+	}
+
+	@include mixins.m(append) {
+		.el-input__inner {
+			border-top-right-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+		.el-select .el-input.is-focus .el-input__inner {
+			border-color: transparent;
+		}
+	}
+}
+
+/** disalbe default clear on IE */
+.el-input__inner::-ms-clear {
+	display: none;
+	width: 0;
+	height: 0;
+}

package/dist/css/loading.scss

@@ -0,0 +1,102 @@
+@use 'mixins/mixins';
+@use './common/var';
+
+@include mixins.b(loading-parent) {
+	@include mixins.m(relative) {
+		position: relative !important;
+	}
+
+	@include mixins.m(hidden) {
+		overflow: hidden !important;
+	}
+}
+
+@include mixins.b(loading-mask) {
+	position: absolute;
+	z-index: 2000;
+	background-color: rgba(255, 255, 255, 0.9);
+	margin: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	transition: opacity 0.3s;
+
+	@include mixins.when(fullscreen) {
+		position: fixed;
+
+		.el-loading-spinner {
+			transform: translateY(-50%);
+			display: block;
+
+			.circular {
+				height: var.$loading-fullscreen-spinner-size;
+				width: var.$loading-fullscreen-spinner-size;
+			}
+		}
+	}
+}
+
+@include mixins.b(loading-spinner) {
+	top: 50%;
+	transform: translateY(-50%);
+	width: 100%;
+	text-align: center;
+	position: absolute;
+	max-height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	.el-loading-text {
+		color: var(--color--primary);
+		margin: 3px 0;
+		font-size: 14px;
+	}
+
+	.circular {
+		max-height: 100%;
+		height: var.$loading-spinner-size;
+		width: var.$loading-spinner-size;
+		animation: loading-rotate 2s linear infinite;
+	}
+
+	.path {
+		animation: loading-dash 1.5s ease-in-out infinite;
+		stroke-dasharray: 90, 150;
+		stroke-dashoffset: 0;
+		stroke-width: 2;
+		stroke: var(--color--primary);
+		stroke-linecap: round;
+	}
+
+	i {
+		color: var(--color--primary);
+	}
+}
+
+.el-loading-fade-enter-from,
+.el-loading-fade-leave-active {
+	opacity: 0;
+}
+
+@keyframes loading-rotate {
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes loading-dash {
+	0% {
+		stroke-dasharray: 1, 200;
+		stroke-dashoffset: 0;
+	}
+	50% {
+		stroke-dasharray: 90, 150;
+		stroke-dashoffset: -40px;
+	}
+	100% {
+		stroke-dasharray: 90, 150;
+		stroke-dashoffset: -120px;
+	}
+}