n8n/packages/design-system/theme/src/table.scss

@use "mixins/mixins";
@use "checkbox";
@use "tag";
@use "tooltip";
@use "./common/var";

@include mixins.b(table) {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	flex: 1;
	width: 100%;
	max-width: 100%;
	background-color: var.$color-white;
	font-size: 14px;
	color: var.$table-font-color;

	// 数据为空
	@include mixins.e(empty-block) {
		min-height: 60px;
		text-align: center;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	@include mixins.e(empty-text) {
		// min-height doesn't work in IE10 and IE11 https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
		// set empty text line height up to contrainer min-height as workaround.
		line-height: 60px;
		width: 50%;
		color: var(--color-text-light);
	}

	// 展开行
	@include mixins.e(expand-column) {
		.cell {
			padding: 0;
			text-align: center;
		}
	}

	@include mixins.e(expand-icon) {
		position: relative;
		cursor: pointer;
		color: #666;
		font-size: 12px;
		transition: transform 0.2s ease-in-out;
		height: 20px;

		@include mixins.m(expanded) {
			transform: rotate(90deg);
		}

		> .el-icon {
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -5px;
			margin-top: -5px;
		}
	}

	@include mixins.e(expanded-cell) {
		background-color: var.$color-white;

		// 纯属为了增加权重
		&[class*='cell'] {
			padding: 20px 50px;
		}

		&:hover {
			background-color: transparent !important;
		}
	}

	@include mixins.e(placeholder) {
		display: inline-block;
		width: 20px;
	}

	@include mixins.e(append-wrapper) {
		// 避免外边距重合 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
		overflow: hidden;
	}

	@include mixins.m(fit) {
		border-right: 0;
		border-bottom: 0;

		th.gutter,
		td.gutter {
			border-right-width: 1px;
		}
	}

	@include mixins.m(scrollable-x) {
		.el-table__body-wrapper {
			overflow-x: auto;
		}
	}

	@include mixins.m(scrollable-y) {
		.el-table__body-wrapper {
			overflow-y: auto;
		}
	}

	thead {
		color: var.$table-header-font-color;
		font-weight: 500;

		&.is-group {
			th {
				background: var.$background-color-base;
			}
		}
	}

	th,
	td {
		padding: 12px 0;
		min-width: 0;
		box-sizing: border-box;
		text-overflow: ellipsis;
		vertical-align: middle;
		position: relative;
		text-align: left;

		@include mixins.when(center) {
			text-align: center;
		}

		@include mixins.when(right) {
			text-align: right;
		}

		&.gutter {
			width: 15px;
			border-right-width: 0;
			border-bottom-width: 0;
			padding: 0;
		}

		&.is-hidden {
			> * {
				visibility: hidden;
			}
		}
	}

	@include mixins.m(medium) {
		th,
		td {
			padding: 10px 0;
		}
	}

	@include mixins.m(small) {
		font-size: 12px;
		th,
		td {
			padding: 8px 0;
		}
	}

	@include mixins.m(mini) {
		font-size: 12px;
		th,
		td {
			padding: 6px 0;
		}
	}

	tr {
		background-color: var.$color-white;

		input[type='checkbox'] {
			margin: 0;
		}
	}

	th.is-leaf,
	td {
		border-bottom: var.$table-border;
	}

	th.is-sortable {
		cursor: pointer;
	}

	th {
		overflow: hidden;
		user-select: none;
		background-color: var.$table-header-background-color;

		> .cell {
			display: inline-block;
			box-sizing: border-box;
			position: relative;
			vertical-align: middle;
			padding-left: 10px;
			padding-right: 10px;
			width: 100%;

			&.highlight {
				color: var(--color-primary);
			}
		}

		&.required > div::before {
			display: inline-block;
			content: '';
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: #ff4d51;
			margin-right: 5px;
			vertical-align: middle;
		}
	}

	td {
		div {
			box-sizing: border-box;
		}

		&.gutter {
			width: 0;
		}
	}

	.cell {
		box-sizing: border-box;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		word-break: break-all;
		line-height: 23px;
		padding-left: 10px;
		padding-right: 10px;

		&.el-tooltip {
			white-space: nowrap;
			min-width: 50px;
		}
	}

	// 拥有多级表头
	@include mixins.m((group, border)) {
		border: var.$table-border;

		@include mixins.share-rule(border-pseudo) {
			content: '';
			position: absolute;
			background-color: var.$table-border-color;
			z-index: 1;
		}

		// 表格右部伪 border
		&::after {
			@include mixins.extend-rule(border-pseudo);
			top: 0;
			right: 0;
			width: 1px;
			height: 100%;
		}
	}

	// 表格底部伪 border，总是有的
	&::before {
		@include mixins.extend-rule(border-pseudo);
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
	}

	// table--border
	@include mixins.m(border) {
		border-right: none;
		border-bottom: none;

		&.el-loading-parent--relative {
			border-color: transparent;
		}

		th,
		td {
			border-right: var.$table-border;

			&:first-child .cell {
				padding-left: 10px;
			}
		}

		th.gutter:last-of-type {
			border-bottom: var.$table-border;
			border-bottom-width: 1px;
		}

		& th {
			border-bottom: var.$table-border;
		}
	}

	@include mixins.m(hidden) {
		visibility: hidden;
	}

	@include mixins.e((fixed, fixed-right)) {
		position: absolute;
		top: 0;
		left: 0;
		overflow-x: hidden;
		overflow-y: hidden;
		box-shadow: var.$table-fixed-box-shadow;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1px;
			background-color: var(--border-color-light);
			z-index: 4;
		}
	}

	@include mixins.e(fixed-right-patch) {
		position: absolute;
		top: -1px;
		right: 0;
		background-color: var.$color-white;
		border-bottom: var.$table-border;
	}

	@include mixins.e(fixed-right) {
		top: 0;
		left: auto;
		right: 0;

		.el-table__fixed-header-wrapper,
		.el-table__fixed-body-wrapper,
		.el-table__fixed-footer-wrapper {
			left: auto;
			right: 0;
		}
	}

	@include mixins.e(fixed-header-wrapper) {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 3;
	}

	@include mixins.e(fixed-footer-wrapper) {
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 3;

		& tbody td {
			border-top: var.$table-border;
			background-color: var.$table-row-hover-background-color;
			color: var.$table-font-color;
		}
	}

	@include mixins.e(fixed-body-wrapper) {
		position: absolute;
		left: 0;
		top: 37px;
		overflow: hidden;
		z-index: 3;
	}

	@include mixins.e((header-wrapper, body-wrapper, footer-wrapper)) {
		width: 100%;
	}

	@include mixins.e(footer-wrapper) {
		margin-top: -1px;
		td {
			border-top: var.$table-border;
		}
	}

	@include mixins.e((header, body, footer)) {
		table-layout: fixed;
		border-collapse: separate;
	}

	@include mixins.e((header-wrapper, footer-wrapper)) {
		overflow: hidden;

		& tbody td {
			background-color: var.$table-row-hover-background-color;
			color: var.$table-font-color;
		}
	}

	@include mixins.e(body-wrapper) {
		overflow: hidden;
		position: relative;

		@include mixins.when(scrolling-none) {
			~ .el-table__fixed,
			~ .el-table__fixed-right {
				box-shadow: none;
			}
		}

		@include mixins.when(scrolling-left) {
			~ .el-table__fixed {
				box-shadow: none;
			}
		}

		@include mixins.when(scrolling-right) {
			~ .el-table__fixed-right {
				box-shadow: none;
			}
		}

		.el-table--border {
			@include mixins.when(scrolling-right) {
				~ .el-table__fixed-right {
					border-left: var.$table-border;
				}
			}

			@include mixins.when(scrolling-left) {
				~ .el-table__fixed {
					border-right: var.$table-border;
				}
			}
		}
	}

	.caret-wrapper {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		height: 34px;
		width: 24px;
		vertical-align: middle;
		cursor: pointer;
		overflow: initial;
		position: relative;
	}

	.sort-caret {
		width: 0;
		height: 0;
		border: solid 5px transparent;
		position: absolute;
		left: 7px;

		&.ascending {
			border-bottom-color: var(--color-text-lighter);
			top: 5px;
		}

		&.descending {
			border-top-color: var(--color-text-lighter);
			bottom: 7px;
		}
	}

	.ascending .sort-caret.ascending {
		border-bottom-color: var(--color-primary);
	}

	.descending .sort-caret.descending {
		border-top-color: var(--color-primary);
	}

	.hidden-columns {
		visibility: hidden;
		position: absolute;
		z-index: -1;
	}

	@include mixins.m(striped) {
		& .el-table__body {
			& tr.el-table__row--striped {
				td {
					background: #fafafa;
				}

				&.current-row td {
					background-color: var.$table-current-row-background-color;
				}
			}
		}
	}

	@include mixins.e(body) {
		tr.hover-row {
			&,
			&.el-table__row--striped {
				&,
				&.current-row {
					> td {
						background-color: var.$table-row-hover-background-color;
					}
				}
			}
		}

		tr.current-row > td {
			background-color: var.$table-current-row-background-color;
		}
	}

	@include mixins.e(column-resize-proxy) {
		position: absolute;
		left: 200px;
		top: 0;
		bottom: 0;
		width: 0;
		border-left: var.$table-border;
		z-index: 10;
	}

	@include mixins.e(column-filter-trigger) {
		display: inline-block;
		line-height: 34px;
		cursor: pointer;

		& i {
			color: var(--color-info);
			font-size: 12px;
			transform: scale(0.75);
		}
	}

	@include mixins.m(enable-row-transition) {
		.el-table__body td {
			transition: background-color 0.25s ease;
		}
	}

	@include mixins.m(enable-row-hover) {
		.el-table__body tr:hover > td {
			background-color: var.$table-row-hover-background-color;
		}
	}

	@include mixins.m(fluid-height) {
		.el-table__fixed,
		.el-table__fixed-right {
			bottom: 0;
			overflow: hidden;
		}
	}

	[class*='el-table__row--level'] {
		.el-table__expand-icon {
			display: inline-block;
			width: 20px;
			line-height: 20px;
			height: 20px;
			text-align: center;
			margin-right: 3px;
		}
	}
}