books/client/style/style.scss

@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/awesomplete/awesomplete";
@import "node_modules/flatpickr/dist/flatpickr";
@import "node_modules/flatpickr/dist/themes/airbnb";

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

$page-width: 500px;

html {
	font-size: 12px;
}

.desk-body {
	border-left: 1px solid $gray-300;
	min-height: 100vh;
}

.desk-center {
	border-left: 1px solid $gray-300;
}

.desk-menu {

	.list-group-item {
		padding: $spacer-2 $spacer-3;
		border: none;
	}
}

.hide {
	display: none !important;
}

.page {
	max-width: $page-width;
	padding-bottom: $spacer-4;

	.page-head {
		padding: $spacer-2 $spacer-3;
		background-color: $gray-800;
		color: $gray-100;

		.page-title {
			display: inline-block;
			margin-top: 0.3rem;
		}

		.btn {
			margin-left: $spacer-2;
		}
	}

	.page-error {
		text-align: center;
		padding: 200px 0px;
	}
}

.form-body {
	padding: $spacer-3;
	max-width: $page-width;

	.form-control.font-weight-bold {
		background-color: lightyellow;
	}

	.alert {
		margin-top: $spacer-3;
	}
}

.list-search {
	padding: $spacer-3;
}

.list-body {
	.list-row {
		padding: $spacer-2 15px;
		border-bottom: 1px solid $gray-200;
		cursor: pointer;

		.checkbox {
			margin-right: $spacer-2;
		}

		a, a:hover, a:visited, a:active {
			color: $gray-800;
		}
	}

	.list-row:hover {
		background-color: $gray-100;
	}

	.list-row.active {
		background-color: $gray-200;
	}
}


.dropdown-item {
	padding: $spacer-2 $spacer-3;
}

.awesomplete {
	display: block;

	> ul > li {
		padding: .75rem .375rem;
	}

	> ul > li:hover {
		background: $gray-300;
		color: $body-color;
	}

	> ul > li[aria-selected="true"] {
		background: $gray-300;
		color: $body-color;
	}

	> ul > li[aria-selected="true"]:hover {
		background: $gray-300;
		color: $body-color;
	}

	li[aria-selected="true"] mark, li[aria-selected="false"] mark {
		background: inherit;
		color: inherit;
		padding: 0px;
	}

}


mark {
	padding: none;
	background: inherit;
}


.table-wrapper {
	margin-top: $spacer-4;
	margin-bottom: $spacer-4;
}

.table-toolbar {
	margin-top: $spacer-2;
}

.data-table {
	.body-scrollable {
		border-bottom: 0px !important;
	}

	thead td {
		border-bottom: 0px !important;
		background-color: $gray-200 !important;
	}

	.data-table-col .edit-cell {
		padding: 0px !important;

		input, textarea {
			border-radius: none;
			margin: none;
			padding: $spacer-1;
		}

		.awesomplete > ul {
			position: fixed;
			left: auto;
			width: auto;
			min-width: 120px;
		}
	}
}