tabulator-tables 5.1.8 → 5.2.0

package/src/scss/tabulator.scss

@@ -40,21 +40,21 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 //Tabulator Containing Element
 .tabulator{
 	position: relative;
-
+	
 	border: 1px solid $borderColor;
-
+	
 	background-color: $backgroundColor;
-
+	
 	font-size:$textSize;
 	text-align: left;
 	overflow:hidden;
-
+	
 	-webkit-transform: translatez(0);
 	-moz-transform: translatez(0);
 	-ms-transform: translatez(0);
 	-o-transform: translatez(0);
 	transform: translatez(0);
-
+	
 	&[tabulator-layout="fitDataFill"]{
 		.tabulator-tableholder{
 			.tabulator-table{
@@ -62,39 +62,39 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 			}
 		}
 	}
-
+	
 	&[tabulator-layout="fitDataTable"]{
 		display: inline-block;
 	}
-
+	
 	&.tabulator-block-select{
 		user-select: none;
 	}
-
+	
 	//column header containing element
 	.tabulator-header{
 		position:relative;
 		box-sizing: border-box;
-
+		
 		width:100%;
-
+		
 		border-bottom:1px solid $headerSeperatorColor;
 		background-color: $headerBackgroundColor;
 		color: $headerTextColor;
 		font-weight:bold;
-
+		
 		white-space: nowrap;
 		overflow:hidden;
-
+		
 		-moz-user-select: none;
 		-khtml-user-select: none;
 		-webkit-user-select: none;
 		-o-user-select: none;
-
+		
 		&.tabulator-header-hidden{
 			display:none;
 		}
-
+		
 		//individual column header element
 		.tabulator-col{
 			display:inline-block;
@@ -105,72 +105,72 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 			text-align:left;
 			vertical-align: bottom;
 			overflow: hidden;
-
+			
 			&.tabulator-moving{
 				position: absolute;
 				border:1px solid $headerSeperatorColor;
 				background:darken($headerBackgroundColor, 10%);
 				pointer-events: none;
 			}
-
+			
 			//hold content of column header
 			.tabulator-col-content{
 				box-sizing:border-box;
 				position: relative;
 				padding:4px;
-
+				
 				//header menu button
-				.tabulator-header-menu-button{
+				.tabulator-header-popup-button{
 					padding: 0 8px;
-
+					
 					&:hover{
 						cursor: pointer;
 						opacity: .6;
 					}
 				}
-
+				
 				//hold title and sort arrow
 				.tabulator-col-title-holder{
 					position: relative;
 				}
-
+				
 				//hold title of column header
 				.tabulator-col-title{
 					box-sizing:border-box;
 					width: 100%;
-
+					
 					white-space: nowrap;
 					overflow: hidden;
 					text-overflow: ellipsis;
 					vertical-align:bottom;
-
+					
 					//element to hold title editor
 					.tabulator-title-editor{
 						box-sizing: border-box;
 						width: 100%;
-
+						
 						border:1px solid #999;
-
+						
 						padding:1px;
-
+						
 						background: #fff;
 					}
-
-					.tabulator-header-menu-button + .tabulator-title-editor{
+					
+					.tabulator-header-popup-button + .tabulator-title-editor{
 						width:calc(100% - 22px);
 					}
 				}
-
+				
 				//column sorter arrow
 				.tabulator-col-sorter{
 					display: flex;
 					align-items: center;
-
+					
 					position: absolute;
 					top:0;
 					bottom:0;
 					right:4px;
-
+					
 					.tabulator-arrow{
 						width: 0;
 						height: 0;
@@ -179,31 +179,24 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 						border-bottom: 6px solid $sortArrowInactive;
 					}
 				}
-
+				
 			}
-
+			
 			//complex header column group
 			&.tabulator-col-group{
-
+				
 				//gelement to hold sub columns in column group
 				.tabulator-col-group-cols{
 					position:relative;
 					display: flex;
-
+					
 					border-top:1px solid $headerBorderColor;
 					overflow: hidden;
-
+					
 					margin-right:-1px;
 				}
 			}
-
-			//hide left resize handle on first column
-			&:first-child{
-				.tabulator-col-resize-handle.prev{
-					display: none;
-				}
-			}
-
+			
 			//header filter containing element
 			.tabulator-header-filter{
 				position: relative;
@@ -211,16 +204,16 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 				margin-top:2px;
 				width:100%;
 				text-align: center;
-
+				
 				//styling adjustment for inbuilt editors
 				textarea{
 					height:auto !important;
 				}
-
+				
 				svg{
 					margin-top: 3px;
 				}
-
+				
 				input{
 					&::-ms-clear {
 						width : 0;
@@ -228,45 +221,45 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 					}
 				}
 			}
-
+			
 			//styling child elements for sortable columns
 			&.tabulator-sortable{
 				.tabulator-col-title{
 					padding-right:25px;
 				}
-
+				
 				&:hover{
 					cursor:pointer;
 					background-color:darken($headerBackgroundColor, 10%);
 				}
-
+				
 				&[aria-sort="none"]{
 					.tabulator-col-content .tabulator-col-sorter{
 						color: $sortArrowInactive;
-
+						
 						.tabulator-arrow{
 							border-top: none;
 							border-bottom: 6px solid $sortArrowInactive;
 						}
 					}
 				}
-
+				
 				&[aria-sort="asc"]{
 					.tabulator-col-content .tabulator-col-sorter{
 						color: $sortArrowActive;
-
+						
 						.tabulator-arrow{
 							border-top: none;
 							border-bottom: 6px solid $sortArrowActive;
-
+							
 						}
 					}
 				}
-
+				
 				&[aria-sort="desc"]{
 					.tabulator-col-content .tabulator-col-sorter{
 						color: $sortArrowActive;
-
+						
 						.tabulator-arrow{
 							border-bottom: none;
 							border-top: 6px solid $sortArrowActive;
@@ -275,40 +268,40 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 					}
 				}
 			}
-
-
+			
+			
 			&.tabulator-col-vertical{
 				.tabulator-col-content{
 					.tabulator-col-title{
 						writing-mode: vertical-rl;
 						text-orientation: mixed;
-
+						
 						display:flex;
 						align-items:center;
 						justify-content:center;
 					}
 				}
-
+				
 				&.tabulator-col-vertical-flip{
 					.tabulator-col-title{
 						transform: rotate(180deg);
 					}
 				}
-
+				
 				&.tabulator-sortable{
 					.tabulator-col-title{
 						padding-right:0;
 						padding-top:20px;
 					}
-
+					
 					&.tabulator-col-vertical-flip{
 						.tabulator-col-title{
 							padding-right:0;
 							padding-bottom:20px;
 						}
-
+						
 					}
-
+					
 					.tabulator-col-sorter{
 						justify-content: center;
 						left:0;
@@ -319,54 +312,54 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 				}
 			}
 		}
-
+		
 		.tabulator-frozen{
 			display: inline-block;
 			position: absolute;
-
+			
 			// background-color: inherit;
-
+			
 			z-index: 10;
-
+			
 			&.tabulator-frozen-left{
 				border-right:2px solid $rowBorderColor;
 			}
-
+			
 			&.tabulator-frozen-right{
 				border-left:2px solid $rowBorderColor;
 			}
 		}
-
-
+		
+		
 		.tabulator-calcs-holder{
 			box-sizing:border-box;
 			min-width:600%;
-
+			
 			background:lighten($headerBackgroundColor, 5%) !important;
-
+			
 			.tabulator-row{
 				background:lighten($headerBackgroundColor, 5%) !important;
-
+				
 				.tabulator-col-resize-handle{
 					display: none;
 				}
 			}
-
+			
 			border-top:1px solid $rowBorderColor;
 			border-bottom:1px solid $headerBorderColor;
-
+			
 			overflow: hidden;
 		}
-
+		
 		.tabulator-frozen-rows-holder{
 			min-width:600%;
-
+			
 			&:empty{
 				display: none;
 			}
 		}
 	}
-
+	
 	//scrolling element to hold table
 	.tabulator-tableholder{
 		position:relative;
@@ -374,38 +367,38 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 		white-space: nowrap;
 		overflow:auto;
 		-webkit-overflow-scrolling: touch;
-
+		
 		&:focus{
 			outline: none;
 		}
-
+		
 		//default placeholder element
 		.tabulator-placeholder{
 			box-sizing:border-box;
 			display: flex;
 			align-items:center;
-
+			
 			&[tabulator-render-mode="virtual"]{
 				min-height:100%;
 				min-width:100%;
 			}
-
+			
 			width:100%;
-
+			
 			.tabulator-placeholder-contents {
 				display: inline-block;
 				text-align: center;
-
+				
 				padding:10px;
-
+				
 				color:#ccc;
 				font-weight: bold;
 				font-size: 20px;
-
+				
 				white-space: normal;
 			}
 		}
-
+		
 		//element to hold table rows
 		.tabulator-table{
 			position:relative;
@@ -414,26 +407,26 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 			white-space: nowrap;
 			overflow:visible;
 			color:$rowTextColor;
-
+			
 			//row element
 			.tabulator-row{
 				&.tabulator-calcs{
 					font-weight: bold;
 					background:darken($rowAltBackgroundColor, 5%) !important;
-
+					
 					&.tabulator-calcs-top{
 						border-bottom:2px solid $rowBorderColor;
 					}
-
+					
 					&.tabulator-calcs-bottom{
 						border-top:2px solid $rowBorderColor;
 					}
 				}
 			}
-
+			
 		}
 	}
-
+	
 	//footer element
 	.tabulator-footer{
 		border-top:1px solid $footerSeperatorColor;
@@ -443,63 +436,63 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 		font-weight:bold;
 		white-space:nowrap;
 		user-select:none;
-
+		
 		-moz-user-select: none;
 		-khtml-user-select: none;
 		-webkit-user-select: none;
 		-o-user-select: none;
-
+		
 		.tabulator-footer-contents {
 			display: flex;
 			flex-direction: row;
 			align-items: center;
 			justify-content: space-between;
-
+			
 			padding:5px 10px;
-
+			
 			&:empty{
 				display: none;
 			}
 		}
-
+		
 		.tabulator-calcs-holder{
 			box-sizing:border-box;
 			width:calc(100% + 20px);
-
+			
 			text-align: left;
-
+			
 			background:lighten($footerBackgroundColor, 5%) !important;
 			border-bottom:1px solid $rowBorderColor;
 			border-top:1px solid $rowBorderColor;
-
+			
 			overflow: hidden;
-
+			
 			.tabulator-row{
 				background:lighten($footerBackgroundColor, 5%) !important;
-
+				
 				.tabulator-col-resize-handle{
 					display: none;
 				}
 			}
-
-
+			
+			
 			&:only-child{
 				margin-bottom:-5px;
 				border-bottom:none;
 			}
 		}
-
+		
 		&>*+.tabulator-page-counter{
 			margin-left:10px;
 		}
-
+		
 		.tabulator-page-counter {
 			font-weight: normal;
 		}
-
+		
 		.tabulator-paginator{
 			flex:1;
-
+			
 			text-align: right;
 			
 			color: $footerTextColor;
@@ -507,42 +500,42 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 			font-weight:inherit;
 			font-size:inherit;
 		}
-
+		
 		//pagination container element
 		.tabulator-page-size{
 			display:inline-block;
-
+			
 			margin:0 5px;
 			padding:2px 5px;
-
+			
 			border:1px solid $footerBorderColor;
 			border-radius:3px;
 		}
-
+		
 		.tabulator-pages{
 			margin:0 7px;
 		}
-
+		
 		//pagination button
 		.tabulator-page{
 			display:inline-block;
-
+			
 			margin:0 2px;
 			padding:2px 5px;
-
+			
 			border:1px solid $footerBorderColor;
 			border-radius:3px;
-
+			
 			background:rgba(255,255,255,.2);
-
+			
 			&.active{
 				color:$footerActiveColor;
 			}
-
+			
 			&:disabled{
 				opacity:.5;
 			}
-
+			
 			&:not(.disabled){
 				&:hover{
 					cursor:pointer;
@@ -552,62 +545,61 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 			}
 		}
 	}
-
+	
 	//column resize handles
 	.tabulator-col-resize-handle{
-		position:absolute;
-		right:0;
-		top:0;
-		bottom:0;
-		width:5px;
-
-		&.prev{
-			left:0;
-			right:auto;
-		}
-
+		position: relative;
+		display: inline-block;
+		width: 6px;
+		
+		margin-left: -3px;
+		margin-right: -3px;
+		
+		z-index: 10;
+		vertical-align: middle;
+		
 		&:hover{
 			cursor:ew-resize;
 		}
 	}
-
-
+	
+	
 	//holding div that contains loader and covers tabulator element to prevent interaction
-	.tabulator-loader{
+	.tabulator-alert{
 		position:absolute;
 		display: flex;
 		align-items:center;
-
+		
 		top:0;
 		left:0;
 		z-index:100;
-
+		
 		height:100%;
 		width:100%;
 		background:rgba(0,0,0,.4);
 		text-align:center;
-
+		
 		//loading message element
-		.tabulator-loader-msg{
+		.tabulator-alert-msg {
 			display:inline-block;
-
+			
 			margin:0 auto;
 			padding:10px 20px;
-
+			
 			border-radius:10px;
-
+			
 			background:#fff;
 			font-weight:bold;
 			font-size:16px;
-
+			
 			//loading message
-			&.tabulator-loading{
+			&.tabulator-alert-state-msg {
 				border:4px solid #333;
 				color:#000;
 			}
-
+			
 			//error message
-			&.tabulator-error{
+			&.tabulator-alert-state-error {
 				border:4px solid #D00;
 				color:#590000;
 			}
@@ -621,41 +613,41 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 	box-sizing: border-box;
 	min-height:$textSize + ($headerMargin * 2);
 	background-color: $rowBackgroundColor;
-
-
+	
+	
 	&.tabulator-row-even{
 		background-color: $rowAltBackgroundColor;
 	}
-
+	
 	&.tabulator-selectable:hover{
 		background-color:$rowHoverBackground;
 		cursor: pointer;
 	}
-
+	
 	&.tabulator-selected{
 		background-color:$rowSelectedBackground;
 	}
-
+	
 	&.tabulator-selected:hover{
 		background-color:$rowSelectedBackgroundHover;
 		cursor: pointer;
 	}
-
+	
 	&.tabulator-row-moving{
 		border:1px solid #000;
 		background:#fff;
 	}
-
+	
 	&.tabulator-moving{
 		position: absolute;
-
+		
 		border-top:1px solid  $rowBorderColor;
 		border-bottom:1px solid  $rowBorderColor;
-
+		
 		pointer-events: none;
 		z-index:15;
 	}
-
+	
 	//row resize handles
 	.tabulator-row-resize-handle{
 		position:absolute;
@@ -663,53 +655,53 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 		bottom:0;
 		left:0;
 		height:5px;
-
+		
 		&.prev{
 			top:0;
 			bottom:auto;
 		}
-
+		
 		&:hover{
 			cursor:ns-resize;
 		}
 	}
-
+	
 	.tabulator-frozen{
 		display: inline-block;
 		position: absolute;
-
+		
 		background-color: inherit;
-
+		
 		z-index: 10;
-
+		
 		&.tabulator-frozen-left{
 			border-right:2px solid $rowBorderColor;
 		}
-
+		
 		&.tabulator-frozen-right{
 			border-left:2px solid $rowBorderColor;
 		}
 	}
-
+	
 	.tabulator-responsive-collapse{
 		box-sizing:border-box;
-
+		
 		padding:5px;
-
+		
 		border-top:1px solid $rowBorderColor;
 		border-bottom:1px solid $rowBorderColor;
-
+		
 		&:empty{
 			display:none;
 		}
-
+		
 		table{
 			font-size:$textSize;
-
+			
 			tr{
 				td{
 					position: relative;
-
+					
 					&:first-of-type{
 						padding-right:10px;
 					}
@@ -717,7 +709,7 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 			}
 		}
 	}
-
+	
 	//cell element
 	.tabulator-cell{
 		display:inline-block;
@@ -729,52 +721,46 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 		white-space:nowrap;
 		overflow:hidden;
 		text-overflow:ellipsis;
-
+		
 		&.tabulator-editing{
 			border:1px solid $editBoxColor;
 			outline:none;
-
+			
 			padding: 0;
-
+			
 			input, select{
 				border:1px;
 				background:transparent;
+				outline:none;
 			}
 		}
-
+		
 		&.tabulator-validation-fail{
 			border:1px solid $errorColor;
-
+			
 			input, select{
 				border:1px;
 				background:transparent;
-
+				
 				color: $errorColor;
 			}
 		}
-
-		//hide left resize handle on first column
-		&:first-child{
-			.tabulator-col-resize-handle.prev{
-				display: none;
-			}
-		}
-
+		
 		//movable row handle
 		&.tabulator-row-handle{
 			display: inline-flex;
 			align-items:center;
 			justify-content:center;
-
+			
 			-moz-user-select: none;
 			-khtml-user-select: none;
 			-webkit-user-select: none;
 			-o-user-select: none;
-
+			
 			//handle holder
 			.tabulator-row-handle-box{
 				width:80%;
-
+				
 				//Hamburger element
 				.tabulator-row-handle-bar{
 					width:100%;
@@ -784,140 +770,140 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 				}
 			}
 		}
-
+		
 		.tabulator-data-tree-branch{
 			display:inline-block;
 			vertical-align:middle;
-
+			
 			height:9px;
 			width:7px;
-
+			
 			margin-top:-9px;
 			margin-right:5px;
-
+			
 			border-bottom-left-radius:1px;
-
+			
 			border-left:2px solid $rowBorderColor;
 			border-bottom:2px solid $rowBorderColor;
 		}
-
+		
 		.tabulator-data-tree-control{
-
+			
 			display:inline-flex;
 			justify-content:center;
 			align-items:center;
 			vertical-align:middle;
-
+			
 			height:11px;
 			width:11px;
-
+			
 			margin-right:5px;
-
+			
 			border:1px solid $rowTextColor;
 			border-radius:2px;
 			background:rgba(0, 0, 0, .1);
-
+			
 			overflow:hidden;
-
+			
 			&:hover{
 				cursor:pointer;
 				background:rgba(0, 0, 0, .2);
 			}
-
+			
 			.tabulator-data-tree-control-collapse{
 				display:inline-block;
 				position: relative;
-
+				
 				height: 7px;
 				width: 1px;
-
+				
 				background: transparent;
-
+				
 				&:after {
 					position: absolute;
 					content: "";
 					left: -3px;
 					top: 3px;
-
+					
 					height: 1px;
 					width: 7px;
-
+					
 					background: $rowTextColor;
 				}
 			}
-
+			
 			.tabulator-data-tree-control-expand{
 				display:inline-block;
 				position: relative;
-
+				
 				height: 7px;
 				width: 1px;
-
+				
 				background: $rowTextColor;
-
+				
 				&:after {
 					position: absolute;
 					content: "";
 					left: -3px;
 					top: 3px;
-
+					
 					height: 1px;
 					width: 7px;
-
+					
 					background: $rowTextColor;
 				}
 			}
-
+			
 		}
-
+		
 		.tabulator-responsive-collapse-toggle{
 			display: inline-flex;
 			align-items:center;
 			justify-content:center;
-
+			
 			-moz-user-select: none;
 			-khtml-user-select: none;
 			-webkit-user-select: none;
 			-o-user-select: none;
-
+			
 			height:15px;
 			width:15px;
-
+			
 			border-radius:20px;
 			background:#666;
-
+			
 			color:$rowBackgroundColor;
 			font-weight:bold;
 			font-size:1.1em;
-
+			
 			&:hover{
 				opacity:.7;
 			}
-
+			
 			&.open{
 				.tabulator-responsive-collapse-toggle-close{
 					display:initial;
 				}
-
+				
 				.tabulator-responsive-collapse-toggle-open{
 					display:none;
 				}
 			}
-
+			
 			.tabulator-responsive-collapse-toggle-close{
 				display:none;
 			}
 		}
-
+		
 		.tabulator-traffic-light{
 			display: inline-block;
 			height:14px;
 			width:14px;
-
+			
 			border-radius:14px;
 		}
 	}
-
+	
 	//row grouping element
 	&.tabulator-group{
 		box-sizing:border-box;
@@ -928,16 +914,16 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 		padding-left:10px;
 		background:#ccc;
 		font-weight:bold;
-
+		
 		min-width: 100%;
-
+		
 		&:hover{
 			cursor:pointer;
 			background-color:rgba(0,0,0,.1);
 		}
-
+		
 		&.tabulator-group-visible{
-
+			
 			.tabulator-arrow{
 				margin-right:10px;
 				border-left: 6px solid transparent;
@@ -945,33 +931,33 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 				border-top: 6px solid $sortArrowActive;
 				border-bottom: 0;
 			}
-
+			
 		}
-
+		
 		&.tabulator-group-level-1{
 			padding-left:30px;
 		}
-
+		
 		&.tabulator-group-level-2{
 			padding-left:50px;
 		}
-
+		
 		&.tabulator-group-level-3{
 			padding-left:70px;
 		}
-
+		
 		&.tabulator-group-level-4{
 			padding-left:90px;
 		}
-
+		
 		&.tabulator-group-level-5{
 			padding-left:110px;
 		}
-
+		
 		.tabulator-group-toggle{
 			display: inline-block;
 		}
-
+		
 		//sorting arrow
 		.tabulator-arrow{
 			display: inline-block;
@@ -984,135 +970,167 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 			border-left: 6px solid $sortArrowActive;
 			vertical-align:middle;
 		}
-
+		
 		span{
 			margin-left:10px;
 			color:#d00;
 		}
 	}
-
+	
 }
 
-.tabulator-menu{
+.tabulator-popup-container{
 	position: absolute;
 	display:inline-block;
 	box-sizing:border-box;
-
+	
 	background:$rowBackgroundColor;
 	border:1px solid $rowBorderColor;
 	box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
-
+	
 	font-size:$textSize;
-
+	
 	overflow-y:auto;
 	-webkit-overflow-scrolling: touch;
-
+	
 	z-index: 10000;
+}
 
+.tabulator-popup{
+	padding:5px;
+
+	border-radius: 3px;
+}
+
+.tabulator-tooltip{
+	max-width: Min(500px, 100%);
+	
+	padding:3px 5px;
+	
+	border-radius: 2px;
+	box-shadow:none;
+	
+	font-size:12px;
+	
+	pointer-events: none;
+}
+
+.tabulator-menu{
 	.tabulator-menu-item{
 		position:relative;
 		box-sizing:border-box;
-
+		
 		padding:5px 10px;
-
+		
 		user-select: none;
-
+		
 		&.tabulator-menu-item-disabled{
 			opacity: .5;
 		}
-
+		
 		&:not(.tabulator-menu-item-disabled):hover{
 			cursor: pointer;
 			background: $rowAltBackgroundColor;
 		}
-
+		
 		&.tabulator-menu-item-submenu{
 			padding-right:25px;
-
+			
 			&::after {
 				display: inline-block;
 				position: absolute;
-
+				
 				top: calc(5px + .4em);
 				right: 10px;
 				height: 7px;
 				width: 7px;
-
+				
 				content: '';
-
+				
 				border-width: 1px 1px 0 0;
 				border-style: solid;
 				border-color: $rowBorderColor;
 				vertical-align: top;
-
+				
 				transform: rotate(45deg);
 			}
 		}
 	}
-
+	
 	.tabulator-menu-separator{
 		border-top:1px solid $rowBorderColor;
 	}
 }
 
-.tabulator-edit-select-list{
-	position: absolute;
-	display:inline-block;
-	box-sizing:border-box;
-
+.tabulator-edit-list{
 	max-height:200px;
-
-	background:$rowBackgroundColor;
-	border:1px solid $rowBorderColor;
-
+	
 	font-size:$textSize;
-
+	
 	overflow-y:auto;
 	-webkit-overflow-scrolling: touch;
-
-	z-index: 10000;
-
-	.tabulator-edit-select-list-item{
+	
+	.tabulator-edit-list-item{
 		padding:4px;
-
+		
 		color:$rowTextColor;
-
+		outline:none;
+		
 		&.active{
 			color:$rowBackgroundColor;
 			background:$editBoxColor;
-
+			
 			&.focused{
 				outline:1px solid rgba($rowBackgroundColor, .5);
 			}
 		}
-
+		
 		&.focused{
 			outline:1px solid $editBoxColor;
 		}
-
+		
 		&:hover{
 			cursor:pointer;
-
+			
 			color:$rowBackgroundColor;
 			background:$editBoxColor;
 		}
 	}
-
-	.tabulator-edit-select-list-notice{
+	
+	.tabulator-edit-list-placeholder{
 		padding:4px;
-
+		
 		color:$rowTextColor;
 		text-align: center;
 	}
-
-	.tabulator-edit-select-list-group{
+	
+	.tabulator-edit-list-group{
 		border-bottom:1px solid $rowBorderColor;
-
+		
 		padding:4px;
 		padding-top:6px;
-
+		
 		color:$rowTextColor;
 		font-weight:bold;
+		
+	}
+	
+	.tabulator-edit-list-item, .tabulator-edit-list-group{
+		&.tabulator-edit-list-group-level-2{
+			padding-left:12px;
+		}
+		
+		&.tabulator-edit-list-group-level-3{
+			padding-left:20px;
+		}
+		
+		&.tabulator-edit-list-group-level-4{
+			padding-left:28px;
+		}
+		
+		&.tabulator-edit-list-group-level-5{
+			padding-left:36px;
+		}
 	}
 }
 
@@ -1126,27 +1144,27 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 .tabulator.tabulator-rtl{
 	text-align: initial;
 	direction: rtl;
-
+	
 	.tabulator-header {
 		.tabulator-col{
 			text-align: initial;
 			border-left:1px solid $headerBorderColor;
 			border-right:initial;
-
+			
 			&.tabulator-col-group{
 				.tabulator-col-group-cols{
 					margin-right:initial;
 					margin-left:-1px;
 				}
 			}
-
+			
 			&.tabulator-sortable{
 				.tabulator-col-title{
 					padding-right:0;
 					padding-left:25px;
 				}
 			}
-
+			
 			.tabulator-col-content{
 				.tabulator-col-sorter{
 					left:8px;
@@ -1155,48 +1173,30 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 			}
 		}
 	}
-
+	
 	.tabulator-row{
 		.tabulator-cell{
 			border-right:initial;
 			border-left:1px solid $rowBorderColor;
-
-			//hide left resize handle on first column
-			// &:first-child{
-			// 	.tabulator-col-resize-handle.prev{
-			// 		display: none;
-			// 	}
-			// }
-
+			
 			.tabulator-data-tree-branch{
 				margin-right:initial;
 				margin-left:5px;
-
+				
 				border-bottom-left-radius:initial;
 				border-bottom-right-radius:1px;
-
+				
 				border-left:initial;
 				border-right:2px solid $rowBorderColor;
 			}
-
+			
 			.tabulator-data-tree-control{
 				margin-right:initial;
 				margin-left:5px;
 			}
 		}
 	}
-
-	//column resize handles
-	.tabulator-col-resize-handle{
-		position:absolute;
-		left:0;
-		right:auto;
-
-		&.prev{
-			right:0;
-			left:auto;
-		}
-	}
+	
 }
 
 
@@ -1208,7 +1208,7 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 	bottom:0;
 	left:0;
 	right:0;
-
+	
 	z-index: 10000;
 }
 
@@ -1218,23 +1218,23 @@ body.tabulator-print-fullscreen-hide>*:not(.tabulator-print-fullscreen){
 
 .tabulator-print-table{
 	border-collapse: collapse;
-
+	
 	.tabulator-data-tree-branch{
 		display:inline-block;
 		vertical-align:middle;
-
+		
 		height:9px;
 		width:7px;
-
+		
 		margin-top:-9px;
 		margin-right:5px;
-
+		
 		border-bottom-left-radius:1px;
-
+		
 		border-left:2px solid $rowBorderColor;
 		border-bottom:2px solid $rowBorderColor;
 	}
-
+	
 	//row grouping element
 	.tabulator-print-table-group{
 		box-sizing:border-box;
@@ -1245,16 +1245,16 @@ body.tabulator-print-fullscreen-hide>*:not(.tabulator-print-fullscreen){
 		padding-left:10px;
 		background:#ccc;
 		font-weight:bold;
-
+		
 		min-width: 100%;
-
+		
 		&:hover{
 			cursor:pointer;
 			background-color:rgba(0,0,0,.1);
 		}
-
+		
 		&.tabulator-group-visible{
-
+			
 			.tabulator-arrow{
 				margin-right:10px;
 				border-left: 6px solid transparent;
@@ -1262,43 +1262,43 @@ body.tabulator-print-fullscreen-hide>*:not(.tabulator-print-fullscreen){
 				border-top: 6px solid $sortArrowActive;
 				border-bottom: 0;
 			}
-
+			
 		}
-
+		
 		&.tabulator-group-level-1{
 			td{
 				padding-left:30px !important;
 			}
 		}
-
+		
 		&.tabulator-group-level-2{
 			td{
 				padding-left:50px !important;
 			}
 		}
-
+		
 		&.tabulator-group-level-3{
 			td{
 				padding-left:70px !important;
 			}
 		}
-
+		
 		&.tabulator-group-level-4{
 			td{
 				padding-left:90px !important;
 			}
 		}
-
+		
 		&.tabulator-group-level-5{
 			td{
 				padding-left:110px !important;
 			}
 		}
-
+		
 		.tabulator-group-toggle{
 			display: inline-block;
 		}
-
+		
 		//sorting arrow
 		.tabulator-arrow{
 			display: inline-block;
@@ -1311,76 +1311,76 @@ body.tabulator-print-fullscreen-hide>*:not(.tabulator-print-fullscreen){
 			border-left: 6px solid $sortArrowActive;
 			vertical-align:middle;
 		}
-
+		
 		span{
 			margin-left:10px;
 			color:#d00;
 		}
 	}
-
+	
 	.tabulator-data-tree-control{
-
+		
 		display:inline-flex;
 		justify-content:center;
 		align-items:center;
 		vertical-align:middle;
-
+		
 		height:11px;
 		width:11px;
-
+		
 		margin-right:5px;
-
+		
 		border:1px solid $rowTextColor;
 		border-radius:2px;
 		background:rgba(0, 0, 0, .1);
-
+		
 		overflow:hidden;
-
+		
 		&:hover{
 			cursor:pointer;
 			background:rgba(0, 0, 0, .2);
 		}
-
+		
 		.tabulator-data-tree-control-collapse{
 			display:inline-block;
 			position: relative;
-
+			
 			height: 7px;
 			width: 1px;
-
+			
 			background: transparent;
-
+			
 			&:after {
 				position: absolute;
 				content: "";
 				left: -3px;
 				top: 3px;
-
+				
 				height: 1px;
 				width: 7px;
-
+				
 				background: $rowTextColor;
 			}
 		}
-
+		
 		.tabulator-data-tree-control-expand{
 			display:inline-block;
 			position: relative;
-
+			
 			height: 7px;
 			width: 1px;
-
+			
 			background: $rowTextColor;
-
+			
 			&:after {
 				position: absolute;
 				content: "";
 				left: -3px;
 				top: 3px;
-
+				
 				height: 1px;
 				width: 7px;
-
+				
 				background: $rowTextColor;
 			}
 		}