@n8n/design-system 2.33.4 → 2.34.0

package/dist/css/date-picker/picker.scss

@@ -0,0 +1,198 @@
+@use '../mixins/mixins';
+@use '../common/var';
+@use '../common/transition';
+
+@include mixins.b(date-editor) {
+	position: relative;
+	display: inline-block;
+	text-align: left;
+
+	&.el-input,
+	&.el-input__inner {
+		width: 100%;
+	}
+
+	@include mixins.m((monthrange)) {
+		&.el-input,
+		&.el-input__inner {
+			width: 300px;
+		}
+	}
+
+	@include mixins.m((daterange, timerange)) {
+		&.el-input,
+		&.el-input__inner {
+			width: 350px;
+		}
+	}
+
+	@include mixins.m(datetimerange) {
+		&.el-input,
+		&.el-input__inner {
+			width: 400px;
+		}
+	}
+
+	@include mixins.m(dates) {
+		.el-input__inner {
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+
+	.el-icon-circle-close {
+		cursor: pointer;
+	}
+
+	.el-range__icon {
+		font-size: 14px;
+		margin-left: -5px;
+		color: var(--color--text--tint-2);
+		float: left;
+		line-height: 32px;
+	}
+
+	.el-range-input {
+		appearance: none;
+		border: none;
+		outline: none;
+		display: inline-block;
+		height: 100%;
+		margin: 0;
+		padding: 0;
+		width: 39%;
+		text-align: center;
+		font-size: var.$font-size-base;
+		color: var(--color--text--shade-1);
+
+		&::placeholder {
+			color: var(--color--text--tint-2);
+		}
+	}
+
+	.el-range-separator {
+		display: inline-block;
+		height: 100%;
+		padding: 0 5px;
+		margin: 0;
+		text-align: center;
+		line-height: 32px;
+		font-size: 14px;
+		width: 5%;
+		color: var(--color--text--shade-1);
+	}
+
+	.el-range__close-icon {
+		font-size: 14px;
+		color: var(--color--text--tint-2);
+		width: 25px;
+		display: inline-block;
+		float: right;
+		line-height: 32px;
+	}
+}
+
+@include mixins.b(range-editor) {
+	&.el-input__inner {
+		display: inline-flex;
+		align-items: center;
+		padding: 3px 10px;
+	}
+
+	.el-range-input {
+		line-height: 1;
+	}
+
+	@include mixins.when(active) {
+		border-color: var(--color--primary);
+
+		&:hover {
+			border-color: var(--color--primary);
+		}
+	}
+
+	@include mixins.m(medium) {
+		&.el-input__inner {
+			height: var.$input-medium-height;
+		}
+
+		.el-range-separator {
+			line-height: 28px;
+			font-size: var.$input-medium-font-size;
+		}
+
+		.el-range-input {
+			font-size: var.$input-medium-font-size;
+		}
+
+		.el-range__icon,
+		.el-range__close-icon {
+			line-height: 28px;
+		}
+	}
+
+	@include mixins.m(small) {
+		&.el-input__inner {
+			height: var.$input-small-height;
+		}
+
+		.el-range-separator {
+			line-height: 24px;
+			font-size: var.$input-small-font-size;
+		}
+
+		.el-range-input {
+			font-size: var.$input-small-font-size;
+		}
+
+		.el-range__icon,
+		.el-range__close-icon {
+			line-height: 24px;
+		}
+	}
+
+	@include mixins.m(mini) {
+		&.el-input__inner {
+			height: var.$input-mini-height;
+		}
+
+		.el-range-separator {
+			line-height: 20px;
+			font-size: var.$input-mini-font-size;
+		}
+
+		.el-range-input {
+			font-size: var.$input-mini-font-size;
+		}
+
+		.el-range__icon,
+		.el-range__close-icon {
+			line-height: 20px;
+		}
+	}
+
+	@include mixins.when(disabled) {
+		background-color: var.$input-disabled-fill;
+		border-color: var.$input-disabled-border;
+		color: var.$input-disabled-color;
+		cursor: not-allowed;
+
+		&:hover,
+		&:focus {
+			border-color: var.$input-disabled-border;
+		}
+
+		input {
+			background-color: var.$input-disabled-fill;
+			color: var.$input-disabled-color;
+			cursor: not-allowed;
+			&::placeholder {
+				color: var.$input-disabled-placeholder-color;
+			}
+		}
+
+		.el-range-separator {
+			color: var.$input-disabled-color;
+		}
+	}
+}

package/dist/css/date-picker/time-picker.scss

@@ -0,0 +1,87 @@
+@use '../common/var';
+@use '../mixins/mixins';
+
+@include mixins.b(time-panel) {
+	margin: 5px 0;
+	border: solid 1px var.$datepicker-border-color;
+	background-color: var.$color-white;
+	box-shadow: var.$box-shadow-light;
+	border-radius: 2px;
+	position: absolute;
+	width: 180px;
+	left: 0;
+	z-index: var.$index-top;
+	user-select: none;
+	box-sizing: content-box;
+
+	@include mixins.e(content) {
+		font-size: 0;
+		position: relative;
+		overflow: hidden;
+
+		&::after,
+		&::before {
+			content: '';
+			top: 50%;
+			position: absolute;
+			margin-top: -15px;
+			height: 32px;
+			z-index: -1;
+			left: 0;
+			right: 0;
+			box-sizing: border-box;
+			padding-top: 6px;
+			text-align: left;
+			border-top: 1px solid var(--border-color);
+			border-bottom: 1px solid var(--border-color);
+		}
+
+		&::after {
+			left: 50%;
+			margin-left: 12%;
+			margin-right: 12%;
+		}
+
+		&::before {
+			padding-left: 50%;
+			margin-right: 12%;
+			margin-left: 12%;
+		}
+
+		&.has-seconds {
+			&::after {
+				left: calc(100% / 3 * 2);
+			}
+
+			&::before {
+				padding-left: calc(100% / 3);
+			}
+		}
+	}
+
+	@include mixins.e(footer) {
+		border-top: 1px solid var.$datepicker-inner-border-color;
+		padding: 4px;
+		height: 36px;
+		line-height: 25px;
+		text-align: right;
+		box-sizing: border-box;
+	}
+
+	@include mixins.e(btn) {
+		border: none;
+		line-height: 28px;
+		padding: 0 5px;
+		margin: 0 5px;
+		cursor: pointer;
+		background-color: transparent;
+		outline: none;
+		font-size: 12px;
+		color: var(--color--text--shade-1);
+
+		&.confirm {
+			font-weight: var(--font-weight--bold);
+			color: var.$datepicker-active-color;
+		}
+	}
+}

package/dist/css/date-picker/time-range-picker.scss

@@ -0,0 +1,32 @@
+@use '../common/var';
+@use '../mixins/mixins';
+
+@include mixins.b(time-range-picker) {
+	width: 354px;
+	overflow: visible;
+
+	@include mixins.e(content) {
+		position: relative;
+		text-align: center;
+		padding: 10px;
+	}
+
+	@include mixins.e(cell) {
+		box-sizing: border-box;
+		margin: 0;
+		padding: 4px 7px 7px;
+		width: 50%;
+		display: inline-block;
+	}
+
+	@include mixins.e(header) {
+		margin-bottom: 5px;
+		text-align: center;
+		font-size: 14px;
+	}
+
+	@include mixins.e(body) {
+		border-radius: 2px;
+		border: 1px solid var.$datepicker-border-color;
+	}
+}

package/dist/css/date-picker/time-spinner.scss

@@ -0,0 +1,110 @@
+@use '../common/var';
+@use '../mixins/mixins';
+
+@include mixins.b(time-spinner) {
+	&.has-seconds {
+		.el-time-spinner__wrapper {
+			width: 33.3%;
+		}
+	}
+
+	@include mixins.e(wrapper) {
+		max-height: 190px;
+		display: inline-block;
+		width: 50%;
+		vertical-align: top;
+		position: relative;
+
+		& .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
+			padding-bottom: 15px;
+		}
+
+		@include mixins.when(arrow) {
+			box-sizing: border-box;
+			text-align: center;
+			overflow: hidden;
+
+			.el-time-spinner__list {
+				transform: translateY(-32px);
+			}
+
+			.el-time-spinner__item:hover:not(.disabled):not(.active) {
+				background: var.$color-white;
+				cursor: default;
+			}
+		}
+	}
+
+	@include mixins.e(arrow) {
+		font-size: 12px;
+		color: var(--color--text--tint-1);
+		position: absolute;
+		left: 0;
+		width: 100%;
+		z-index: var.$index-normal;
+		text-align: center;
+		height: 30px;
+		line-height: 30px;
+		cursor: pointer;
+
+		&:hover {
+			color: var(--color--primary);
+		}
+
+		&.el-icon-arrow-up {
+			top: 10px;
+		}
+
+		&.el-icon-arrow-down {
+			bottom: 10px;
+		}
+	}
+
+	@include mixins.e(input) {
+		&.el-input {
+			width: 70%;
+
+			.el-input__inner {
+				padding: 0;
+				text-align: center;
+			}
+		}
+	}
+
+	@include mixins.e(list) {
+		padding: 0;
+		margin: 0;
+		list-style: none;
+		text-align: center;
+
+		&::after,
+		&::before {
+			content: '';
+			display: block;
+			width: 100%;
+			height: 80px;
+		}
+	}
+
+	@include mixins.e(item) {
+		height: 32px;
+		line-height: 32px;
+		font-size: 12px;
+		color: var(--color--text--shade-1);
+
+		&:hover:not(.disabled):not(.active) {
+			background: var.$background-color-base;
+			cursor: pointer;
+		}
+
+		&.active:not(.disabled) {
+			color: var(--color--text--shade-1);
+			font-weight: var(--font-weight--bold);
+		}
+
+		&.disabled {
+			color: var(--color--text--tint-2);
+			cursor: not-allowed;
+		}
+	}
+}

package/dist/css/date-picker/year-table.scss

@@ -0,0 +1,52 @@
+@use '../common/var';
+@use '../mixins/mixins';
+
+@include mixins.b(year-table) {
+	font-size: 12px;
+	margin: -1px;
+	border-collapse: collapse;
+
+	.el-icon {
+		color: var.$datepicker-icon-color;
+	}
+
+	td {
+		text-align: center;
+		padding: 20px 3px;
+		cursor: pointer;
+
+		&.today {
+			.cell {
+				color: var(--color--primary);
+				font-weight: var(--font-weight--bold);
+			}
+		}
+
+		&.disabled .cell {
+			background-color: var.$background-color-base;
+			cursor: not-allowed;
+			color: var(--color--text--tint-2);
+
+			&:hover {
+				color: var(--color--text--tint-2);
+			}
+		}
+
+		.cell {
+			width: 48px;
+			height: 32px;
+			display: block;
+			line-height: 32px;
+			color: var.$datepicker-font-color;
+			margin: 0 auto;
+
+			&:hover {
+				color: var.$datepicker-hover-font-color;
+			}
+		}
+
+		&.current:not(.disabled) .cell {
+			color: var.$datepicker-active-color;
+		}
+	}
+}

package/dist/css/date-picker.scss

@@ -0,0 +1,38 @@
+@use './date-picker/date-table.scss';
+@use './date-picker/month-table.scss';
+@use './date-picker/year-table.scss';
+@use './date-picker/time-spinner.scss';
+@use './date-picker/picker.scss';
+@use './date-picker/date-picker.scss';
+@use './date-picker/date-range-picker.scss';
+@use './date-picker/time-range-picker.scss';
+@use './date-picker/time-picker.scss';
+@use './input.scss';
+@use './scrollbar.scss';
+@use './popper';
+
+.el-picker-panel__footer {
+	.el-picker-panel__link-btn {
+		border: 1px;
+		border-radius: var(--radius--sm);
+		color: var(--text--color);
+
+		&:hover {
+			background-color: light-dark(var(--color--neutral-150), var(--color--neutral-800));
+		}
+		&:active {
+			background-color: light-dark(var(--color--neutral-200), var(--color--neutral-700));
+		}
+		&:last-child {
+			background: var(--color--orange-400);
+			color: var(--color--neutral-white);
+
+			&:hover {
+				background-color: var(--color--orange-500);
+			}
+			&:active {
+				background-color: var(--color--orange-600);
+			}
+		}
+	}
+}

package/dist/css/dialog.scss

@@ -0,0 +1,143 @@
+@use 'mixins/mixins';
+@use 'mixins/utils';
+@use './common/var';
+@use 'common/popup';
+
+@include mixins.b(overlay) {
+	width: 100%;
+	height: 100%;
+	display: block;
+	position: fixed;
+	top: 0;
+	left: 0;
+	background-color: hsla(247deg, 14%, 30%, 0.75);
+}
+
+@include mixins.b(overlay-dialog) {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	overflow-x: hidden;
+	overflow-y: auto;
+}
+
+@include mixins.b(overlay-message-box) {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+@include mixins.b(dialog) {
+	position: relative;
+	margin: 0 auto 50px;
+	background: var.$dialog-background-color;
+	border-radius: var(--radius--sm);
+	box-shadow: var.$dialog-box-shadow;
+	box-sizing: border-box;
+	width: var(#{utils.getCssVarName('dialog-width')}, 50%);
+
+	@include mixins.when(fullscreen) {
+		width: 100%;
+		margin-top: 0;
+		margin-bottom: 0;
+		height: 100%;
+		overflow: auto;
+	}
+
+	@include mixins.e(wrapper) {
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		overflow: auto;
+		margin: 0;
+	}
+
+	@include mixins.e(header) {
+		padding: var.$dialog-padding-primary;
+	}
+
+	@include mixins.e(headerbtn) {
+		position: absolute;
+		top: var.$dialog-close-top;
+		right: var.$dialog-padding-primary;
+		padding: 0;
+		background: transparent;
+		border: none;
+		outline: none;
+		cursor: pointer;
+		font-size: var.$message-close-size;
+		z-index: 2;
+
+		.el-dialog__close {
+			color: var(--color--info);
+		}
+
+		&:focus,
+		&:hover {
+			.el-dialog__close {
+				color: var(--color--primary);
+			}
+		}
+	}
+
+	@include mixins.e(title) {
+		line-height: var(--line-height--sm);
+		font-size: var(--font-size--xl);
+		color: var(--color--text--shade-1);
+		font-weight: var(--font-weight--regular);
+	}
+
+	@include mixins.e(body) {
+		padding: var.$dialog-padding-primary;
+		padding-top: 0;
+		color: var(--color--text);
+	}
+
+	@include mixins.e(footer) {
+		padding: var.$dialog-padding-primary;
+		padding-top: 10px;
+		text-align: right;
+		box-sizing: border-box;
+
+		.button + .button {
+			margin-left: var(--spacing--2xs);
+		}
+	}
+}
+
+.dialog-fade-enter-active {
+	animation: dialog-fade-in 0.3s;
+}
+
+.dialog-fade-leave-active {
+	animation: dialog-fade-out 0.3s;
+}
+
+@keyframes dialog-fade-in {
+	0% {
+		transform: translate3d(0, -20px, 0);
+		opacity: 0;
+	}
+	100% {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+
+@keyframes dialog-fade-out {
+	0% {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+	100% {
+		transform: translate3d(0, -20px, 0);
+		opacity: 0;
+	}
+}

package/dist/css/display.scss

@@ -0,0 +1,12 @@
+@use './common/var' as var;
+@use 'mixins/mixins';
+
+.hidden {
+	@each $break-point-name, $value in var.$breakpoints-spec {
+		&-#{$break-point-name} {
+			@include mixins.res($break-point-name, var.$breakpoints-spec) {
+				display: none !important;
+			}
+		}
+	}
+}