tabulator-tables 6.5.0 → 6.5.1

package/src/scss/themes/materialize/tabulator_materialize.scss

@@ -0,0 +1,318 @@
+@use "sass:color";
+@use "variables.scss" as *;
+
+// 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: #{color.adjust($primary-color, $lightness: -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
+
+
+@use "../../tabulator.scss" with (
+	$backgroundColor: $backgroundColor,
+	$borderColor: $borderColor,
+	$textSize: $textSize,
+	$headerBackgroundColor: $headerBackgroundColor,
+	$headerSeparatorColor: $headerSeparatorColor,
+	$sortArrowActive: $sortArrowActive,
+	$sortArrowInactive: $sortArrowInactive,
+	$rowBackgroundColor: $rowBackgroundColor,
+	$rowAltBackgroundColor: $rowAltBackgroundColor,
+	$rowBorderColor: $rowBorderColor,
+	$rowHoverBackground: $rowHoverBackground,
+	$rowSelectedBackground: $rowSelectedBackground,
+	$rowSelectedBackgroundHover: $rowSelectedBackgroundHover,
+	$editBoxColor: $editBoxColor,
+	$errorColor: $errorColor,
+	$footerBorderColor: $footerBorderColor,
+	$footerSeparatorColor: $footerSeparatorColor,
+	$footerActiveColor: $footerActiveColor,
+	$rangeBorderColor: $rangeBorderColor,
+	$rangeHandleColor: $rangeHandleColor,
+	$rangeHeaderSelectedBackground: $rangeHeaderSelectedBackground,
+	$rangeHeaderSelectedTextColor: $rangeHeaderSelectedTextColor
+);
+
+.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{
+			padding-top: 1em;
+			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;
+			}
+		}
+	}
+}
+

package/src/scss/themes/materialize/variables.scss

@@ -0,0 +1,71 @@
+@use "sass:map";
+// ==========================================================================
+// Materialize variables
+// ==========================================================================
+//
+// Table of Contents:
+//
+//  1. Colors
+//  2. Badges
+//  3. Buttons
+//  4. Cards
+//  5. Carousel
+//  6. Collapsible
+//  7. Chips
+//  8. Date + Time Picker
+//  9. Dropdown
+//  10. Forms
+//  11. Global
+//  12. Grid
+//  13. Navigation Bar
+//  14. Side Navigation
+//  15. Photo Slider
+//  16. Spinners | Loaders
+//  17. Tabs
+//  18. Tables
+//  19. Toasts
+//  20. Typography
+//  21. Footer
+//  22. Flow Text
+//  23. Collections
+//  24. Progress Bar
+
+
+// 18. Tables
+// ==========================================================================
+
+$materialize-red: (
+  "base":       #e51c23,
+  "lighten-5":  #fdeaeb,
+  "lighten-4":  #f8c1c3,
+  "lighten-3":  #f3989b,
+  "lighten-2":  #ee6e73,
+  "lighten-1":  #ea454b,
+  "darken-1":   #d0181e,
+  "darken-2":   #b9151b,
+  "darken-3":   #a21318,
+  "darken-4":   #8b1014,
+);
+
+$colors: (
+        "materialize-red": $materialize-red,
+) !default;
+
+// usage: color("name_of_color", "type_of_color")
+// to avoid to repeating map-get($colors, ...)
+@function color($color, $type) {
+  @if map.has-key($colors, $color) {
+    $curr_color: map.get($colors, $color);
+    @if map.has-key($curr_color, $type) {
+      @return map.get($curr_color, $type);
+    }
+  }
+  @warn "Unknown `#{$color}` - `#{$type}` in $colors.";
+  @return null;
+}
+
+$table-border-color: rgba(0,0,0,.12) !default;
+$table-striped-color: #f8f8f8 !default;
+
+
+$primary-color: color("materialize-red", "lighten-2") !default;