datatable/src/style.css

/* This file is processed by postcss */
/* variables */

:root {
	--border-color: #d1d8dd;
	--primary-color: rgb(82, 146, 247);
	--light-bg: #f5f7fa;
	--light-red: #FD8B8B;
	--orange: rgb(255, 160, 10);
	--text-color: #000000;
	--text-light: #dfe2e5;

	--spacer-1: 0.25rem;
	--spacer-2: 0.5rem;
	--spacer-3: 1rem;

	--border-radius: 3px;
}

.data-table {
	/* resets */
	*, *::after, *::before {
		box-sizing: border-box;
	}

	button, input {
		overflow: visible;
		font-family: inherit;
		font-size: inherit;
		line-height: inherit;
		margin: 0;
		padding: 0;
	}

	.input-style {
		outline: none;
		width: 100%;
		border: none;
	}

	*, *:focus {
		outline: none;
		border-radius: 0px;
		box-shadow: none;
	}

	/* styling */
	position: relative;
	overflow: auto;

	table {
		border-collapse: collapse;
	}

	table td {
		padding: 0;
		border: 1px solid var(--border-color);
	}

	thead td {
		border-bottom-width: 1px;
	}

	.freeze-container {
		display: flex;
		justify-content: center;
		align-content: center;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: var(--light-bg);
		opacity: 0.5;
		font-size: 2em;

		span {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.hide {
		display: none;
	}

	.toast-message {
		position: absolute;
		bottom: var(--spacer-3);
		left: 50%;
		transform: translateX(-50%);

		span {
			display: inline-block;
			background-color: rgba(0, 0, 0, 0.8);
			color: var(--text-light);
			border-radius: var(--border-radius);
			padding: var(--spacer-2) var(--spacer-3);
		}
	}
}

.body-scrollable {
	max-height: 500px;
	overflow: auto;
	border-bottom: 1px solid var(--border-color);

	&.row-highlight-all .data-table-row:not(.row-unhighlight) {
		background-color: var(--light-bg);
	}

	.no-data td {
		text-align: center;
		padding: var(--spacer-2);
	}
}

.data-table-header {
	position: absolute;
	top: 0;
	left: 0;
	background-color: white;
	font-weight: bold;

	.content span:not(.column-resizer) {
		cursor: pointer;
	}

	.column-resizer {
		display: none;
		position: absolute;
		right: 0;
		top: 0;
		width: var(--spacer-1);
		height: 100%;
		background-color: var(--primary-color);
		cursor: col-resize;
	}

	.data-table-dropdown {
		position: absolute;
		right: 10px;
		display: inline-flex;
		vertical-align: top;
		text-align: left;

		&.is-active {
			.data-table-dropdown-list {
				display: block;
			}

			.data-table-dropdown-toggle {
				display: block;
			}
		}
	}

	.data-table-dropdown-toggle {
		display: none;
		background-color: transparent;
		border: none;
	}

	.data-table-dropdown-list {
		display: none;
		font-weight: normal;

		position: absolute;
		min-width: 8rem;
		top: 100%;
		right: 0;
		z-index: 1;
		background-color: white;
		border-radius: var(--border-radius);
		box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
		padding-bottom: var(--spacer-2);
		padding-top: var(--spacer-2);

		&> div {
			padding: var(--spacer-2) var(--spacer-3);

			&:hover {
				background-color: var(--light-bg);
			}
		}
	}

	.data-table-cell.remove-column {
		background-color: var(--light-red);
		transition: 300ms background-color ease-in-out;
	}

	.data-table-cell.sortable-chosen {
		background-color: var(--light-bg);
	}
}

.data-table-cell {
	position: relative;

	.content {
		padding: var(--spacer-2);
		border: 2px solid transparent;
		height: 100%;

		&.ellipsis {
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
	}

	.edit-cell {
		display: none;
		padding: var(--spacer-2);
		background-color: #fff;
		z-index: 1;
		height: 100%;
	}

	&.selected .content {
		border: 2px solid var(--primary-color);
	}

	&.editing {
		.content {
			display: none;
		}

		.edit-cell {
			border: 2px solid var(--orange);
			display: block;
		}
	}

	&.highlight {
		background-color: var(--light-bg);
	}

	&:hover .column-resizer {
		display: inline-block;
	}

	&:hover .data-table-dropdown-toggle {
		display: block;
	}

	.tree-node {
		display: inline-block;
		position: relative;
	}

	.toggle {
		display: inline-block;
		position: absolute;
		padding: 0 4px;
		cursor: pointer;
	}

	.toggle:before {
		content: '▼';
	}
}

.data-table-cell.tree-close {
	.toggle:before {
		content: '►';
	}
}

.data-table-row {
  &.row-highlight {
    background-color: var(--light-bg);
  }
}

.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

body.data-table-resize {
	cursor: col-resize;
}