@n8n/design-system 2.33.3 → 2.34.0

package/dist/css/popover.scss

@@ -0,0 +1,42 @@
+@use 'mixins/mixins';
+@use './common/var';
+@use './popper';
+
+@include mixins.b(popover) {
+	position: absolute;
+	background: var.$popover-background-color;
+	min-width: 150px;
+	border-radius: 4px;
+	border: 1px solid var.$popover-border-color;
+	padding: var.$popover-padding;
+	z-index: var.$index-popper;
+	color: var(--color--text--shade-1);
+	line-height: 1.4;
+	text-align: justify;
+	font-size: var.$popover-font-size;
+	box-shadow: var.$box-shadow-light;
+	word-break: break-all;
+
+	@include mixins.m(plain) {
+		padding: var.$popover-padding-large;
+	}
+
+	@include mixins.e(title) {
+		color: var.$popover-title-font-color;
+		font-size: var.$popover-title-font-size;
+		line-height: 1;
+		margin-bottom: 12px;
+	}
+
+	@include mixins.e(reference) {
+		&:focus:not(.focusing),
+		&:focus:hover {
+			outline-width: 0;
+		}
+	}
+
+	&:focus:active,
+	&:focus {
+		outline-width: 0;
+	}
+}

package/dist/css/popper.scss

@@ -0,0 +1,156 @@
+@use 'mixins/mixins';
+@use './common/var';
+
+@include mixins.b(popper) {
+	position: absolute;
+	z-index: 2000;
+	min-width: 10px;
+	word-wrap: break-word;
+	visibility: visible;
+
+	&:not(.el-popover) {
+		max-width: 420px;
+	}
+
+	img {
+		max-width: 100%;
+	}
+
+	.el-select-dropdown,
+	.el-dropdown-menu {
+		position: relative;
+		margin: 0;
+	}
+
+	&:not(.el-select__popper):not(.el-dropdown__popper):not(.el-picker__popper) {
+		padding: var.$tooltip-padding;
+		font-size: var.$tooltip-font-size;
+		border-radius: 4px;
+	}
+
+	.el-popper__arrow {
+		position: absolute;
+		display: block;
+		width: 0;
+		height: 0;
+		z-index: 1010;
+		border-color: transparent;
+		border-style: solid;
+		border-width: var.$popover-arrow-size;
+		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
+	}
+
+	.el-popper__arrow::after {
+		display: block;
+		position: absolute;
+		width: 0;
+		height: 0;
+		border-color: transparent;
+		border-style: solid;
+		content: ' ';
+		border-width: var.$popover-arrow-size;
+	}
+
+	&[data-popper-placement^='top'] .el-popper__arrow {
+		bottom: -(var.$popover-arrow-size);
+		left: 50%;
+		margin: 0 #{var.$tooltip-arrow-size * 0.5};
+		border-top-color: var.$popover-border-color;
+		border-bottom-width: 0;
+
+		&::after {
+			bottom: 1px;
+			margin-left: -(var.$popover-arrow-size);
+			border-top-color: var.$popover-background-color;
+			border-bottom-width: 0;
+		}
+	}
+
+	&[data-popper-placement^='bottom'] .el-popper__arrow {
+		top: -(var.$popover-arrow-size);
+		left: 50%;
+		margin: 0 #{var.$tooltip-arrow-size * 0.5};
+		border-top-width: 0;
+		border-bottom-color: var.$popover-border-color;
+
+		&::after {
+			top: 1px;
+			margin-left: -(var.$popover-arrow-size);
+			border-top-width: 0;
+			border-bottom-color: var.$popover-background-color;
+		}
+	}
+
+	&[data-popper-placement^='right'] .el-popper__arrow {
+		top: 50%;
+		left: -(var.$popover-arrow-size);
+		margin: #{var.$tooltip-arrow-size * 0.5} 0;
+		border-right-color: var.$popover-border-color;
+		border-left-width: 0;
+
+		&::after {
+			bottom: -(var.$popover-arrow-size);
+			left: 1px;
+			border-right-color: var.$popover-background-color;
+			border-left-width: 0;
+		}
+	}
+
+	&[data-popper-placement^='left'] .el-popper__arrow {
+		top: 50%;
+		right: -(var.$popover-arrow-size);
+		margin: #{var.$tooltip-arrow-size * 0.5} 0;
+		border-right-width: 0;
+		border-left-color: var.$popover-border-color;
+
+		&::after {
+			right: 1px;
+			bottom: -(var.$popover-arrow-size);
+			margin-left: -(var.$popover-arrow-size);
+			border-right-width: 0;
+			border-left-color: var.$popover-background-color;
+		}
+	}
+
+	@include mixins.when(dark) {
+		background: var.$tooltip-fill;
+		color: var.$tooltip-color;
+
+		&[data-popper-placement^='top'] .el-popper__arrow {
+			border-top-color: transparent;
+
+			&::after {
+				border-top-color: var.$tooltip-border-color;
+			}
+		}
+
+		&[data-popper-placement^='bottom'] .el-popper__arrow {
+			border-bottom-color: transparent;
+
+			&::after {
+				border-bottom-color: var.$tooltip-border-color;
+			}
+		}
+
+		&[data-popper-placement^='right'] .el-popper__arrow {
+			border-right-color: transparent;
+
+			&::after {
+				border-right-color: var.$tooltip-border-color;
+			}
+		}
+
+		&[data-popper-placement^='left'] .el-popper__arrow {
+			border-left-color: transparent;
+
+			&::after {
+				border-left-color: var.$tooltip-border-color;
+			}
+		}
+	}
+}
+
+.el-popper.n8n-tooltip {
+	max-width: 180px;
+	line-height: var(--line-height--md) !important;
+}

package/dist/css/radio.scss

@@ -0,0 +1,200 @@
+@use 'mixins/mixins';
+@use 'mixins/utils';
+@use 'mixins/button';
+@use './common/var';
+
+@include mixins.b(radio) {
+	color: var.$radio-font-color;
+	font-weight: var.$radio-font-weight;
+	line-height: 1;
+	position: relative;
+	cursor: pointer;
+	display: inline-block;
+	white-space: nowrap;
+	outline: none;
+	font-size: var.$font-size-base;
+	margin-right: 30px;
+	@include utils.utils-user-select(none);
+
+	@include mixins.when(bordered) {
+		padding: var.$radio-bordered-padding;
+		border-radius: var(--radius);
+		border: var(--border);
+		box-sizing: border-box;
+		height: var.$radio-bordered-height;
+
+		&.is-checked {
+			border-color: var(--color--primary);
+		}
+
+		&.is-disabled {
+			cursor: not-allowed;
+			border-color: var(--border-color--light);
+		}
+
+		& + .el-radio.is-bordered {
+			margin-left: 10px;
+		}
+	}
+
+	@include mixins.m(medium) {
+		&.is-bordered {
+			padding: var.$radio-bordered-medium-padding;
+			border-radius: var.$button-medium-border-radius;
+			height: var.$radio-bordered-medium-height;
+			.el-radio__label {
+				font-size: var.$button-medium-font-size;
+			}
+			.el-radio__inner {
+				height: var.$radio-bordered-medium-input-height;
+				width: var.$radio-bordered-medium-input-width;
+			}
+		}
+	}
+	@include mixins.m(small) {
+		&.is-bordered {
+			padding: var.$radio-bordered-small-padding;
+			border-radius: var.$button-small-border-radius;
+			height: var.$radio-bordered-small-height;
+			.el-radio__label {
+				font-size: var.$button-small-font-size;
+			}
+			.el-radio__inner {
+				height: var.$radio-bordered-small-input-height;
+				width: var.$radio-bordered-small-input-width;
+			}
+		}
+	}
+	@include mixins.m(mini) {
+		&.is-bordered {
+			padding: var.$radio-bordered-mini-padding;
+			border-radius: var.$button-mini-border-radius;
+			height: var.$radio-bordered-mini-height;
+			.el-radio__label {
+				font-size: var.$button-mini-font-size;
+			}
+			.el-radio__inner {
+				height: var.$radio-bordered-mini-input-height;
+				width: var.$radio-bordered-mini-input-width;
+			}
+		}
+	}
+
+	&:last-child {
+		margin-right: 0;
+	}
+
+	@include mixins.e(input) {
+		white-space: nowrap;
+		cursor: pointer;
+		outline: none;
+		display: inline-block;
+		line-height: 1;
+		position: relative;
+		vertical-align: middle;
+
+		@include mixins.when(disabled) {
+			.el-radio__inner {
+				background-color: var.$radio-disabled-input-fill;
+				border-color: var.$radio-disabled-input-border-color;
+				cursor: not-allowed;
+
+				&::after {
+					cursor: not-allowed;
+					background-color: var.$radio-disabled-icon-color;
+				}
+
+				& + .el-radio__label {
+					cursor: not-allowed;
+				}
+			}
+			&.is-checked {
+				.el-radio__inner {
+					background-color: var.$radio-disabled-checked-input-fill;
+					border-color: var.$radio-disabled-checked-input-border-color;
+
+					&::after {
+						background-color: var.$radio-disabled-checked-icon-color;
+					}
+				}
+			}
+			& + span.el-radio__label {
+				color: var(--color--text--tint-2);
+				cursor: not-allowed;
+			}
+		}
+
+		@include mixins.when(checked) {
+			.el-radio__inner {
+				border-color: var.$radio-checked-input-border-color;
+				background: var.$radio-checked-icon-color;
+
+				&::after {
+					transform: translate(-50%, -50%) scale(1);
+				}
+			}
+
+			& + .el-radio__label {
+				color: var.$radio-checked-font-color;
+			}
+		}
+
+		@include mixins.when(focus) {
+			.el-radio__inner {
+				border-color: var.$radio-input-border-color-hover;
+			}
+		}
+	}
+	@include mixins.e(inner) {
+		border: var.$radio-input-border;
+		border-radius: var.$radio-input-border-radius;
+		width: var.$radio-input-width;
+		height: var.$radio-input-height;
+		background-color: var.$radio-input-background-color;
+		position: relative;
+		cursor: pointer;
+		display: inline-block;
+		box-sizing: border-box;
+
+		&:hover {
+			border-color: var.$radio-input-border-color-hover;
+		}
+
+		&::after {
+			width: 4px;
+			height: 4px;
+			border-radius: var.$radio-input-border-radius;
+			background-color: var.$color-white;
+			content: '';
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, -50%) scale(0);
+			transition: transform 0.15s ease-in;
+		}
+	}
+
+	@include mixins.e(original) {
+		opacity: 0;
+		outline: none;
+		position: absolute;
+		z-index: -1;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		margin: 0;
+	}
+
+	&:focus:not(.is-focus):not(:active):not(.is-disabled) {
+		/*获得焦点时 样式提醒*/
+		.el-radio__inner {
+			box-shadow: 0 0 2px 2px var.$radio-input-border-color-hover;
+		}
+	}
+
+	@include mixins.e(label) {
+		font-size: var.$radio-font-size;
+		padding-left: 10px;
+	}
+}

package/dist/css/reset.scss

@@ -0,0 +1,249 @@
+@use 'mixins/function';
+@use 'common/var';
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+html,
+body,
+div,
+span,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+abbr,
+address,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+samp,
+small,
+strong,
+sub,
+sup,
+var,
+b,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	background: transparent;
+}
+
+html {
+	height: 100%;
+	width: 100%;
+}
+
+body {
+	height: 100%;
+	width: 100%;
+	overscroll-behavior: none;
+	line-height: 1;
+	font-size: var(--font-size--md);
+	font-weight: var(--font-weight--regular);
+	color: var(--color--text--shade-1);
+	background-color: var(--color--background--light-2);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+body,
+button,
+input,
+textarea {
+	font-family: var(--font-family);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+input {
+	font-weight: var(--font-weight--regular);
+}
+
+button {
+	font-weight: var(--font-weight--bold);
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+	display: block;
+}
+
+nav ul {
+	list-style: none;
+}
+
+blockquote,
+q {
+	quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+	content: '';
+	content: none;
+}
+
+a {
+	margin: 0;
+	padding: 0;
+	text-decoration: none;
+	font-size: 100%;
+	vertical-align: baseline;
+	background: transparent;
+	cursor: pointer;
+	color: var(--color--primary);
+
+	&:active {
+		color: function.saturation(
+			--color--primary--h,
+			--color--primary--s,
+			--color--primary--l,
+			-(30%)
+		);
+	}
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	color: var(--color--text--shade-1);
+	font-weight: inherit;
+
+	&:first-child {
+		margin-top: 0;
+	}
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+
+h4,
+h5,
+h6,
+p {
+	font-size: inherit;
+}
+
+p {
+	line-height: 1.8;
+
+	&:first-child {
+		margin-top: 0;
+	}
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+
+ins {
+	background-color: var(--color--success);
+	color: var(--color--text--shade-1);
+	text-decoration: none;
+}
+
+mark {
+	background-color: var(--text-highlight--color--background);
+	color: var(--color--text--shade-1);
+	font-style: italic;
+	font-weight: var(--font-weight--bold);
+}
+
+del {
+	text-decoration: line-through;
+}
+
+abbr[title],
+dfn[title] {
+	border-bottom: 1px dotted;
+	cursor: help;
+}
+
+hr {
+	display: block;
+	height: 1px;
+	border: 0;
+	border-top: 1px solid var(--color--foreground--tint-1);
+	margin: 0;
+	padding: 0;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+input,
+select {
+	vertical-align: middle;
+}

package/dist/css/row.scss

@@ -0,0 +1,37 @@
+@use './common/var';
+@use 'mixins/mixins';
+@use 'mixins/utils';
+
+@include mixins.b(row) {
+	position: relative;
+	box-sizing: border-box;
+	@include utils.utils-clearfix;
+
+	@include mixins.m(flex) {
+		display: flex;
+		&:before,
+		&:after {
+			display: none;
+		}
+
+		@include mixins.when(justify-center) {
+			justify-content: center;
+		}
+		@include mixins.when(justify-end) {
+			justify-content: flex-end;
+		}
+		@include mixins.when(justify-space-between) {
+			justify-content: space-between;
+		}
+		@include mixins.when(justify-space-around) {
+			justify-content: space-around;
+		}
+
+		@include mixins.when(align-middle) {
+			align-items: center;
+		}
+		@include mixins.when(align-bottom) {
+			align-items: flex-end;
+		}
+	}
+}