tabulator-tables 5.3.4 → 5.4.0

package/src/scss/tabulator.scss

@@ -12,6 +12,7 @@ $headerSeparatorColor:#999 !default; //header bottom separator color
 $headerMargin:4px !default; //padding round header
 
 //column header arrows
+$sortArrowHover: #555 !default;
 $sortArrowActive: #666 !default;
 $sortArrowInactive: #bbb !default;
 
@@ -95,18 +96,27 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 			display:none;
 		}
 		
+		.tabulator-header-contents{
+			position: relative;
+			overflow: hidden;
+			
+			.tabulator-headers{
+				display: inline-block;
+			}
+		}
+		
 		//individual column header element
 		.tabulator-col{
 			display:inline-flex;
 			position:relative;
 			box-sizing:border-box;
-
+			
 			flex-direction: column;
 			justify-content: flex-start;
-
+			
 			border-right:1px solid $headerBorderColor;
 			background:$headerBackgroundColor;
-
+			
 			text-align:left;
 			vertical-align: bottom;
 			overflow: hidden;
@@ -148,6 +158,11 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 					overflow: hidden;
 					text-overflow: ellipsis;
 					vertical-align:bottom;
+
+					&.tabulator-col-title-wrap{
+						white-space: normal;
+						text-overflow: initial;
+					}
 					
 					//element to hold title editor
 					.tabulator-title-editor{
@@ -233,7 +248,7 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 					padding-right:25px;
 				}
 				
-				&:hover{
+				&.tabulator-col-sorter-element:hover{
 					cursor:pointer;
 					background-color:darken($headerBackgroundColor, 10%);
 				}
@@ -242,6 +257,11 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 					.tabulator-col-content .tabulator-col-sorter{
 						color: $sortArrowInactive;
 						
+						&.tabulator-col-sorter-element .tabulator-arrow:hover{
+							cursor:pointer;
+							border-bottom: 6px solid $sortArrowHover;
+						}
+						
 						.tabulator-arrow{
 							border-top: none;
 							border-bottom: 6px solid $sortArrowInactive;
@@ -253,6 +273,11 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 					.tabulator-col-content .tabulator-col-sorter{
 						color: $sortArrowActive;
 						
+						&.tabulator-col-sorter-element .tabulator-arrow:hover{
+							cursor:pointer;
+							border-bottom: 6px solid $sortArrowHover;
+						}
+						
 						.tabulator-arrow{
 							border-top: none;
 							border-bottom: 6px solid $sortArrowActive;
@@ -265,6 +290,11 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 					.tabulator-col-content .tabulator-col-sorter{
 						color: $sortArrowActive;
 						
+						&.tabulator-col-sorter-element .tabulator-arrow:hover{
+							cursor:pointer;
+							border-top: 6px solid $sortArrowHover;
+						}
+						
 						.tabulator-arrow{
 							border-bottom: none;
 							border-top: 6px solid $sortArrowActive;
@@ -319,7 +349,8 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 		}
 		
 		.tabulator-frozen{
-			position: absolute;
+			position: sticky;
+			left:0;
 			
 			// background-color: inherit;
 			
@@ -341,6 +372,11 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 			
 			background:lighten($headerBackgroundColor, 5%) !important;
 			
+			border-top:1px solid $rowBorderColor;
+			border-bottom:1px solid $headerBorderColor;
+			
+			// overflow: hidden;
+			
 			.tabulator-row{
 				background:lighten($headerBackgroundColor, 5%) !important;
 				
@@ -348,11 +384,6 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 					display: none;
 				}
 			}
-			
-			border-top:1px solid $rowBorderColor;
-			border-bottom:1px solid $headerBorderColor;
-			
-			overflow: hidden;
 		}
 		
 		.tabulator-frozen-rows-holder{
@@ -461,7 +492,7 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 		
 		.tabulator-calcs-holder{
 			box-sizing:border-box;
-			width:calc(100% + 20px);
+			width:100%;
 			
 			text-align: left;
 			
@@ -472,6 +503,7 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 			overflow: hidden;
 			
 			.tabulator-row{
+				display: inline-block;
 				background:lighten($footerBackgroundColor, 5%) !important;
 				
 				.tabulator-col-resize-handle{
@@ -565,7 +597,7 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 		&:hover{
 			cursor:ew-resize;
 		}
-
+		
 		&:last-of-type{
 			width:3px;
 			margin-right:0;
@@ -675,22 +707,7 @@ $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-responsive-collapse{
 		box-sizing:border-box;
@@ -731,6 +748,25 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 		overflow:hidden;
 		text-overflow:ellipsis;
 		
+		&.tabulator-frozen{
+			display: inline-block;
+			position: sticky;
+			
+			left:0;
+			
+			background-color: inherit;
+			
+			z-index: 10;
+			
+			&.tabulator-frozen-left{
+				border-right:2px solid $rowBorderColor;
+			}
+			
+			&.tabulator-frozen-right{
+				border-left:2px solid $rowBorderColor;
+			}
+		}
+		
 		&.tabulator-editing{
 			border:1px solid $editBoxColor;
 			outline:none;
@@ -887,6 +923,7 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 			
 			&:hover{
 				opacity:.7;
+				cursor: pointer;
 			}
 			
 			&.open{
@@ -898,6 +935,10 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 					display:none;
 				}
 			}
+
+			svg{
+				stroke:$rowBackgroundColor;
+			}
 			
 			.tabulator-responsive-collapse-toggle-close{
 				display:none;
@@ -1007,7 +1048,7 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 
 .tabulator-popup{
 	padding:5px;
-
+	
 	border-radius: 3px;
 }
 
@@ -1203,14 +1244,34 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 				margin-right:initial;
 				margin-left:5px;
 			}
+			
+			&.tabulator-frozen{
+				
+				&.tabulator-frozen-left{
+					border-left:2px solid $rowBorderColor;
+				}
+				
+				&.tabulator-frozen-right{
+					border-right:2px solid $rowBorderColor;
+				}
+			}
+		}
+		
+		.tabulator-col-resize-handle{
+			&:last-of-type{
+				width:3px;
+				margin-left:0;
+				margin-right:-3px;
+			}
 		}
+		
 	}
-
+	
 	.tabulator-footer {
 		.tabulator-calcs-holder{
 			text-align: initial;
 		}
-
+		
 	}
 	
 }