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";
@import "node_modules/codemirror/lib/codemirror";
@import "node_modules/frappe-datatable/dist/frappe-datatable";
// @import "node_modules/octicons/build/build.css";

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

@import "./indicators.scss";

$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;
}

.hide {
	display: none !important;
}

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

	.page-nav {
		padding: $spacer-2 $spacer-3;
		background-color: $gray-100;
		border-bottom: 1px solid $gray-300;

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

	.page-title {
		font-weight: bold;
		padding: $spacer-4;
		padding-bottom: 0;
	}

	.page-links {
		padding: $spacer-3 $spacer-4;
	}

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

.form-body {
	padding: $spacer-3 $spacer-4;

	.form-check {
		margin-bottom: $spacer-2;

		.form-check-input {
			margin-top: $spacer-1;
		}
		.form-check-label {
			margin-left: $spacer-1;
		}
	}

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

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

.form-inline {
	.form-group {
		margin-right: $spacer-3;
		margin-bottom: $spacer-3;
	}
}

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

.list-body {
	.list-row {
		padding: $spacer-2 $spacer-4;
		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;
}

.bottom-right-float {
	position: fixed;
	margin-bottom: 0px;
	bottom: $spacer-3;
	right: $spacer-3;
	max-width: 200px;
	padding: $spacer-2 $spacer-3;
}

.desk-menu {
	background-color: $gray-200;

	.list-row {
		border-bottom: 1px solid $gray-200;
	}

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

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

.print-page {
	padding: $spacer-5;
	line-height: 1.8;

	td, th {
		padding: $spacer-2;
	}
}

.table-page-wrapper {
	width: 100%;
	padding: $spacer-3 $spacer-4;
}

.filter-toolbar {
	padding: $spacer-3 $spacer-4;
}

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

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

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

		tr:first-child {
			.data-table-col {
				border-top: 0px !important;
			}
		}
	}

	thead td {
		background-color: $gray-200 !important;
	}

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

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

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

.CodeMirror {
	font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
	border: 1px solid $gray-300;
	border-radius: 0.25rem;
	padding: $spacer-2;
}

.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;
}

.align-right {
	text-align: right;
}

.align-center {
	text-align: center;
}

.btn-sm {
	margin: $spacer-1;
}

.vertical-margin {
	margin: $spacer-3 0px;
}

.tree {
	padding: 15px;
}

.tree li {
	list-style: none;
	margin: 2px 0px;
}

ul.tree-children {
	padding-left: 20px;
}

.tree-link {
	cursor: pointer;
	display: inline-block;
	padding: 1px;
}

.tree-link .node-parent {
	color: $gray-600;
	font-size: 14px;
	width: 10px;
	text-align: center;
}

.tree-link .node-leaf {
	color: $gray-400;
}

.tree-link .node-parent, .tree-link .node-leaf {
	margin-right: 5px;
    margin-left: 2px;
    margin-top: 3px;
}

.tree-link.active {
	svg {
		color: $blue;
	}

	a {
		color: $gray-600;
	}
}

.tree-hover {
	background-color: $gray-200;
	min-height: 20px;
	border: 1px solid $gray-600;
}

.tree-node-toolbar {
	display: inline-block;
	padding: 0px 5px;
	margin-left: 15px;
	margin-bottom: -4px;
	margin-top: -8px;
}

// @media (max-width: @screen-xs) {
// 	ul.tree-children {
// 		padding-left: 10px;
// 	}
// }

// decoration
// .tree, .tree-node {
.tree.with-skeleton, .tree.with-skeleton .tree-node {
	position: relative;

	&.opened::before, &:last-child::after {
		content: '';
		position: absolute;
		top: 12px;
		left: 7px;
		height: calc(100% - 23px);
		width: 1px;
		background: $gray-400;
		z-index: -1;
	}

	&:last-child::after {
		top: 11px;
		left: -13px;
		height: calc(100% - 15px);
		width: 3px;
		background: #fff;
	}

	&.opened > .tree-children > .tree-node > .tree-link::before {
		content: '';
		position: absolute;
		width: 18px;
		height: 1px;
		top: 10px;
		left: -12px;
		z-index: -1;
		background: $gray-400;
	}
}

.tree.with-skeleton.opened::before {
	left: 22px;
	top: 33px;
	height: calc(100% - 67px);
}

.tree-link.active ~ .balance-area {
	color: $gray-600 !important;
}

// just for accounting

.setup-container {
	margin: 40px auto;
	padding: 20px 0px;
	width: 450px;

	border: 1px solid $gray-300;
	border-radius: 4px;

	h3 {
		text-align: center;
	}

	.form-section {
		display: none;
	}

	.form-section.active {
		display: block;
	}

	.setup-link-area {
		margin: $spacer-1 $spacer-4;
	}
}

// File Input

input[type=file] {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.was-validated input[type=file]:invalid + button {
	border-color: $red;
}