@import "variables.scss";

// Style conversion file, bulma to tabulator

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

//header theming
$headerBackgroundColor:$table-head-background-color !default; //border to tabulator
$headerTextColor:$table-head-cell-color !default; //header text color
$headerBorderColor:#aaa !default;  //header border color
$headerSeparatorColor:#999 !default; //header bottom separator color
$headerMargin:4px !default; //padding round header

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

//row theming
$rowBackgroundColor:$table-body-background-color !default; //table row background color
$rowAltBackgroundColor:$table-striped-row-even-background-color !default; //table row background color
$rowBorderColor:#aaa !default; //table border color
$rowTextColor:$table-color !default; //table text color
$rowHoverBackground:$table-row-hover-background-color !default; //row background color on hover

$rowSelectedBackground: $table-row-active-background-color !default; //row background color when selected
// $rowSelectedBackgroundHover: #769BCC !default;//row background color when selected and hovered

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

//footer theming
$footerBackgroundColor:$table-foot-background-color !default; //border to tabulator
$footerTextColor:$table-foot-cell-color !default; //footer text color
$footerBorderColor:$grey-lighter !default; //footer border color
// $footerSeparatorColor:#999 !default; //footer bottom separator color
// $footerActiveColor:#d00 !default; //footer bottom active text color

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

.tabulator{
	border:none;
	
	.tabulator-header{
		border:$table-cell-border;
		border-width:$table-head-cell-border-width;
		
		.tabulator-col{
			border-right:none;
			
			&.tabulator-moving{
				border:none;
			}
			
			.tabulator-col-content{
				padding:$table-cell-padding;
				
				.tabulator-col-sorter{
					right:0px;
				}
			}
			
			.tabulator-header-filter{
				input{
					border:$button-border-width solid $button-border-color;
				}
			}
		}
		
		.tabulator-calcs-holder{
			.tabulator-row{
				.tabulator-cell{
					border-bottom-width:0;
				}
			}
			
			border:$table-cell-border;
			border-width:$table-foot-cell-border-width;
		}
	}
	
	.tabulator-tableholder{
		.tabulator-table{
			.tabulator-row{
				&.tabulator-calcs{
					&.tabulator-calcs-top{
						border:$table-cell-border;
						border-width:$table-head-cell-border-width;
					}
					
					&.tabulator-calcs-bottom{
						border:$table-cell-border;
						border-width:$table-foot-cell-border-width;
					}
					
					.tabulator-cell{
						border-bottom-width:0;
					}
				}
			}
		}
	}
	
	.tabulator-footer{
		padding:$table-cell-padding;
		border:$table-cell-border;
		border-width:$table-foot-cell-border-width;
		
		.tabulator-calcs-holder{
			margin:-5px -10px 10px -10px;
			
			border:$table-cell-border;
			border-width:$table-head-cell-border-width;
			
			.tabulator-row{
				.tabulator-cell{
					border-bottom-width:0;
				}
			}
		}
		
		.tabulator-page{
			margin:0 0.1875em;
			padding:$button-padding-vertical $button-padding-horizontal;
			
			border:$button-border-width solid $button-border-color;
			
			font-size: $textSize;
			
			&.active{
				border-color:$button-active-border-color;
				color:$button-active-color;
				font-weight:bold;
			}
			
			&:not(.disabled){
				&:hover{
					cursor:pointer;
					border-color:$button-hover-border-color;
					background:inherit;
					color:inherit;
				}
			}
		}
	}
	
	//Bulma theming classes
	
	&.is-striped{
		.tabulator-row{
			&:nth-child(even){
				background-color: $rowAltBackgroundColor;
			}
		}
	}
	
	&.is-bordered{
		border:$table-cell-border;
		
		.tabulator-header{
			.tabulator-col{
				border-right:$table-cell-border;
			}
		}
		
		.tabulator-tableholder{
			.tabulator-table{
				.tabulator-row{
					.tabulator-cell{
						border-right:$table-cell-border;
					}
				}
			}
		}
	}
	
	&.is-narrow{
		.tabulator-header{
			.tabulator-col{
				.tabulator-col-content{
					padding: 0.25em 0.5em
				}
			}
		}
		
		.tabulator-tableholder{
			.tabulator-table{
				.tabulator-row{
					.tabulator-cell{
						padding: 0.25em 0.5em
					}
				}
			}
		}
	}
}

.tabulator-row{
	min-height:14px + ($headerMargin * 2);
	
	&.tabulator-row-even{
		background-color: inherit;
	}
	
	&.tabulator-selected{
		background-color:$rowSelectedBackground !important;
	}
	
	&.tabulator-selected:hover{
		background-color:darken($rowSelectedBackground, 10%) !important;
	}
	
	.tabulator-cell{
		padding:$table-cell-padding;
		border:$table-cell-border;
		border-width:$table-cell-border-width;
	}
	
	&.tabulator-group{
		border-bottom:1px solid #999;
		border-right:none;
		border-top:1px solid #999;
		color:$table-cell-heading-color;
	}
}

.tabulator-print-table{
	.tabulator-print-table-group{
		box-sizing:border-box;
		border-bottom:1px solid #999;
		border-right:none;
		border-top:1px solid #999;
		color:$table-cell-heading-color;
	}
}

.tabulator-popup-container{
	background: $backgroundColor,
}

.tabulator-edit-list{
	.tabulator-edit-list-item{
		&.active{
			color:$backgroundColor;
		}

		&:hover{
			color:$backgroundColor;
		}
	}
}