@import "variables.scss";

// Style conversion file, bootstrap to tabulator

//Main Theme Variables
$backgroundColor: #fff !default; //background color of tabulator
$borderColor:$table-border-color !default; //border to tabulator
$textSize:16px !default; //table text size

//header theming
$headerBackgroundColor:#fff !default; //border to tabulator
$headerSeparatorColor:$table-border-color !default; //header bottom separator color

$cellPadding:15px !default; //padding round header

//column header arrows
$sortArrowActive: #666 !default;
$sortArrowInactive: #bbb !default;

//row theming
$rowBackgroundColor:#fff !default; //table row background color
$rowAltBackgroundColor: $table-striped-color !default; //table row background color
$rowBorderColor:$table-border-color !default; //table border color
$rowHoverBackground:$table-striped-color !default; //row background color on hover

$rowSelectedBackground:$primary-color !default; //row background color when selected
$rowSelectedBackgroundHover: $primary-color !default;//row background color when selected and hovered

$editBoxColor:$primary-color !default; //border color for edit boxes
$errorColor:#dd0000 !default; //error indication

//footer theming
$footerBorderColor:$table-border-color !default; //footer border color
$footerSeparatorColor:$table-border-color !default; //footer bottom separator color
$footerActiveColor:$primary-color !default; //footer bottom active text color

//range selection
$rangeBorderColor: #{darken($primary-color, 10%)} !default; //range border color
$rangeHandleColor: $rangeBorderColor !default; //range handle color
$rangeHeaderSelectedBackground: $rangeBorderColor !default; //header background color when selected
$rangeHeaderSelectedTextColor: #FFFFFF !default; //header text color when selected


@import "../../tabulator.scss";

.tabulator{
	border:none;
	background-color: $backgroundColor;

	width: 100%;
	max-width: 100%;

	.tabulator-header{
		color:inherit;

		.tabulator-col{
			border-right:none;

			.tabulator-col-content{
				padding:$cellPadding;

				.tabulator-col-sorter{
					right:-10px;
				}
			}

			&.tabulator-col-group{
				.tabulator-col-group-cols{
					border-top:1px solid $borderColor;
				}
			}

			&.tabulator-sortable{
				.tabulator-col-title{
					padding-right:10px;
				}
			}
		}

		.tabulator-calcs-holder{
			width:100%;

			border-bottom:1px solid $headerSeparatorColor;
		}

		.tabulator-frozen-rows-holder{
			min-width:600%;

			&:empty{
				display: none;
			}
		}
	}

	.tabulator-tableholder{
		.tabulator-table{
			color:inherit;
		}
	}

	.tabulator-footer{
		background-color:transparent;
		color:inherit;

		.tabulator-spreadsheet-tabs{
			.tabulator-spreadsheet-tab{
				padding:8px 12px;

				font-weight: normal;

				&.tabulator-spreadsheet-tab-active{
					color:$footerActiveColor;
				}
			}
		}

		.tabulator-paginator{
			color:inherit;
		}

		.tabulator-page{
			margin:0;
			margin-top:5px;
			padding:8px 12px;

			border-radius:0;
			border-right:none;

			background:rgba(255,255,255,.2);

			&[data-page="next"], &:first-of-type {
				border-top-left-radius:4px;
				border-bottom-left-radius:4px;
			}

			&[data-page="prev"], &:last-of-type {
				border:1px solid $footerBorderColor;
				border-top-right-radius:4px;
				border-bottom-right-radius:4px;
			}

			&.active{
				color:$footerActiveColor;
			}
		}
	}

	//materialize theming classes
	&.striped{
		.tabulator-row{
			&:nth-child(even){
				background-color: $rowAltBackgroundColor;

				&.tabulator-selected{
					background-color:$rowSelectedBackground !important;
				}

				@media (hover:hover) and (pointer:fine){
					&.tabulator-selectable:hover{
						background-color:$rowHoverBackground;
						cursor: pointer;
					}

					&.tabulator-selected:hover{
						background-color:$rowSelectedBackgroundHover !important;
						cursor: pointer;
					}
				}
			}
		}
	}
}

//row element
.tabulator-row{
	min-height:$textSize + ($cellPadding * 2);
	border-bottom:1px solid $rowBorderColor;

	&.tabulator-row-even{
		background-color: $rowBackgroundColor;
	}

	.tabulator-cell{
		padding:$cellPadding;
		border-right:none;

		&:last-of-type{
			border-right: none;
		}

		&.tabulator-row-header{
			border-right:1px solid $borderColor;
			border-bottom:none;
			background:$headerBackgroundColor;
		}

		.tabulator-data-tree-control{
			border:1px solid #ccc;

			.tabulator-data-tree-control-collapse{
				&:after {
					background: #ccc;
				}
			}

			.tabulator-data-tree-control-expand{
				background: #ccc;

				&:after {
					background: #ccc;
				}
			}
		}
	}

	&.tabulator-group{
		background:#fafafa;

		span{
			margin-left:10px;
			color:#666;
		}
	}
}

.tabulator-edit-select-list{
	background:$headerBackgroundColor;

	.tabulator-edit-select-list-item{
		color:inherit;

		&.active{
			color:$headerBackgroundColor;

			&.focused{
				outline:1px solid rgba($headerBackgroundColor, .5);
			}
		}

		@media (hover:hover) and (pointer:fine){
			&:hover{
				color:$headerBackgroundColor;
			}
		}
	}

	.tabulator-edit-select-list-notice{
		color: inherit;
	}

	.tabulator-edit-select-list-group{
		color: inherit;
	}
}

.tabulator.tabulator-rtl{
	.tabulator-header {
		.tabulator-col{
			border-left:none;
			border-right:none;
		}
	}
}

.tabulator-print-table{
	.tabulator-print-table-group{
		background:#fafafa;

		span{
			margin-left:10px;
			color:#666;
		}
	}

	.tabulator-data-tree-control{
		border:1px solid #ccc;

		.tabulator-data-tree-control-collapse{
			&:after {
				background: #ccc;
			}
		}

		.tabulator-data-tree-control-expand{
			background: #ccc;

			&:after {
				background: #ccc;
			}
		}
	}
}