responsive.dataTables.scss

//
// Variables
//

$control-button-top: 9px !default;
$control-button-size: 1em !default;
$control-button-color: white !default;
$open-button-background: #31b131 !default;
$close-button-background: #d33333 !default;


//
// Mixins
//
@mixin control() {
	display: inline-block;
	color: rgba(0, 0, 0, 0.5);
}

@mixin control-open() {
	content: "►";
}

@mixin control-close() {
	content: "▼";
}


//
// Table styles
//
table.dataTable {
	// Styling for the `inline` type
	&.dtr-inline.collapsed > tbody {
		> tr {
			> td.child,
			> th.child,
			> td.dataTables_empty {
				cursor: default !important;

				&:before {
					display: none !important;
				}
			}
		}

		> tr > td.dtr-control,
		> tr > th.dtr-control {
			cursor: pointer;

			&:before {
				margin-right: 0.5em;

				@include control;
				@include control-open;
			}

			&.arrow-right::before {
				content: "◄";
			}
		}

		> tr.parent {
			> td.dtr-control:before,
			> th.dtr-control:before {
				@include control-close;
			}
		}
	}

	// DataTables' `compact` styling
	&.dtr-inline.collapsed.compact > tbody {
		> tr > td.dtr-control,
		> tr > th.dtr-control {
			padding-left: 0.333em;
		}
	}


	// Styling for the `column` type
	&.dtr-column > tbody {
		> tr > td.dtr-control,
		> tr > th.dtr-control,
		> tr > td.control,
		> tr > th.control {
			cursor: pointer;

			&:before {
				@include control;
				@include control-open;
			}

			&.arrow-right::before {
				content: "◄";
			}
		}

		> tr.parent {
			td.dtr-control:before,
			th.dtr-control:before,
			td.control:before,
			th.control:before {
				@include control-close;
			}
		}
	}


	// Child row styling
	> tbody > tr.child {
		padding: 0.5em 1em;

		&:hover {
			background: transparent !important;
		}

		ul.dtr-details {
			display: inline-block;
			list-style-type: none;
			margin: 0;
			padding: 0;

			> li {
				border-bottom: 1px solid #efefef;
				padding: 0.5em 0;

				&:first-child {
					padding-top: 0;
				}

				&:last-child {
					padding-bottom: 0;
					border-bottom: none;
				}
			}
		}

		span.dtr-title {
			display: inline-block;
			min-width: 75px;
			font-weight: bold;
		}
	}
}


div.dtr-modal {
	position: fixed;
	box-sizing: border-box;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;

	z-index: 100;
	padding: 10em 1em;

	div.dtr-modal-display {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 50%;
		height: fit-content;
		max-height: 75%;
		overflow: auto;
		margin: auto;
		z-index: 102;
		overflow: auto;
		background-color: #f5f5f7;
		border: 1px solid black;
		border-radius: 0.5em;
		box-shadow: 0 12px 30px rgba(0,0,0,0.6);
	}

	div.dtr-modal-content {
		position: relative;
		padding: 2.5em;

		h2 {
			margin-top: 0;
		}
	}

	div.dtr-modal-close {
		position: absolute;
		top: 6px;
		right: 6px;
		width: 22px;
		height: 22px;
		text-align: center;
		border-radius: 3px;
		cursor: pointer;
		z-index: 12;
	}

	div.dtr-modal-background {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 101;

		background: rgba(0,0,0,0.6);
	}
}


@media screen and (max-width: 767px) {
	div.dtr-modal div.dtr-modal-display {
		width: 95%;
	}
}


html.dark {
	table.dataTable > tbody {
		> tr > td.dtr-control {
			&:before {
				color: rgba(255, 255, 255, 0.5) !important;
			}
		}

		> tr.child {
			ul.dtr-details {
				> li {
					border-bottom-color: rgb(64, 67, 70);
				}
			}
		}
	}

	div.dtr-modal {
		div.dtr-modal-display {
			background-color: rgb(33, 37, 41);
			border: 1px solid rgba(255, 255, 255, 0.15);
		}
	}
}