datatable/src/style.scss

/* variables */

$border-color: #d1d8dd;
$primary-color: rgb(82, 146, 247);
$light-bg: #f5f7fa;
$light-red: #FD8B8B;

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

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

/* styling */

.data-table * {
	outline: none;
}

.data-table {
	width: 100%;
	position: relative;
	overflow: auto;

	table {
		border-collapse: collapse;
	}

	table td {
		padding: 0;
		border: 1px solid $border-color;
	}

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

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

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

	.trash-container {
		position: absolute;
		bottom: 0;
		left: 30%;
		right: 30%;
		height: 70px;
		background: palevioletred;
		opacity: 0.5;
	}
}

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

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

.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: 4px;
		height: 100%;
		background-color: $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: 3px;
		box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
		padding-bottom: 0.5rem;
		padding-top: 0.5rem;

		&> div {
			padding: 5px 10px;

			&:hover {
				background-color: $light-bg;
			}
		}
	}

	.data-table-col.remove-column {
		background-color: $light-red;
		transition: 300ms background-color ease-in-out;
	}

	.data-table-col.sortable-chosen {
		background-color: $light-bg;
	}
}

.data-table-col {
	position: relative;

	.content {
		padding: 8px;
		border: 2px solid transparent;

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

	.edit-cell {
		display: none;
		// position: absolute;
		padding: 8px;
		background: #fff;
		z-index: 1;
		height: 100%;

		input {
			outline: none;
			width: 100%;
			border: none;
			height: 1em;
		}
	}

	&.selected .content {
		border: 2px solid $primary-color;
	}

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

		.edit-cell {
			border: 2px solid $primary-color;
			display: block;
		}
	}

	&.highlight {
		background-color: $light-bg;
	}

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

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

.data-table-row {
  &.row-highlight {
    background-color: $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;
}