tabulator-tables 5.4.3 → 5.5.0

package/src/scss/themes/semanticui/tabulator_semanticui.scss

@@ -1,562 +1,587 @@
-
-@import "variables_table.scss";
-
-//Main Theme Variables
-$backgroundColor: $background !default; //background color of tabulator
-$textSize:14px !default; //table text size
-
-//header theming
-$headerBackgroundColor:$headerBackground !default; //border to tabulator
-$headerTextColor:$headerColor !default; //header text color
-$headerBorderColor:#ddd !default;  //header border color
-$headerSeparatorColor:#999 !default; //header bottom separator color
-$headerMargin:4px !default; //padding round header
-
-//column header arrows
-$sortArrowActive: #666 !default;
-$sortArrowInactive: #bbb !default;
-
-//row theming
-$rowBorderColor:#ddd !default; //table border color
-$rowTextColor:#333 !default; //table text color
-
-$rowSelectedBackground: #9ABCEA !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:#fff !default; //border to tabulator
-$footerTextColor:#555 !default; //footer text color
-$footerBorderColor:#aaa !default; //footer border color
-$footerSeparatorColor:#999 !default; //footer bottom separator color
-$footerActiveColor:#d00 !default; //footer bottom active text color
-
-@import "../../tabulator.scss";
-
-.tabulator{
-	width: 100%;
-
-	margin: $margin;
-	border: $border;
-	box-shadow: $boxShadow;
-	border-radius: $borderRadius;
-	color: $color;
-
-	.tabulator-header{
-		border-right:none;
-		border-bottom: $headerBorder;
-		background-color: $headerBackgroundColor;
-
-		box-shadow: $headerBoxShadow;
-
-		color: $headerTextColor;
-		font-style: $headerFontStyle;
-		font-weight: $headerFontWeight;
-		text-transform: $headerTextTransform;
-
-		.tabulator-col{
-			border-right: none;
-			background-color: $headerBackgroundColor;
-
-			.tabulator-col-content{
-				padding: $headerVerticalPadding $headerHorizontalPadding;
-			}
-		}
-	}
-
-	.tabulator-tableholder{
-		.tabulator-table{
-			background-color:transparent;
-			.tabulator-row{
-				&.tabulator-calcs{
-					background:darken($background, 5%) !important;
-
-					&.tabulator-calcs-top{
-						border-bottom:2px solid $rowBorderColor;
-					}
-
-					&.tabulator-calcs-bottom{
-						border-top:2px solid $rowBorderColor;
-					}
-				}
-			}
-		}
-	}
-
-	.tabulator-footer{
-		padding: $footerVerticalPadding $footerHorizontalPadding;
-
-		border-top: $footerBorder;
-		box-shadow: $footerBoxShadow;
-
-		background: $footerBackground;
-
-		text-align:right;
-		color: $footerColor;
-
-		font-style: $footerFontStyle;
-		font-weight: $footerFontWeight;
-		text-transform: $footerTextTransform;
-
-		.tabulator-calcs-holder{
-			margin:(-$footerVerticalPadding) (-$footerHorizontalPadding) $footerVerticalPadding (-$footerHorizontalPadding);
-
-			background:lighten($footerBackground, 5%) !important;
-
-			.tabulator-row{
-				background:lighten($footerBackground, 5%) !important;
-			}
-
-			&:only-child{
-				margin-bottom:-$footerVerticalPadding;
-				border-bottom:none;
-			}
-		}
-	}
-
-	.tabulator-tableholder{
-		.tabulator-table{
-			.tabulator-row{
-				&.positive, .tabulator-cell.positive{
-					box-shadow: $positiveBoxShadow;
-					background: $positiveBackgroundColor !important;
-					color: $positiveColor !important;
-
-					&:hover{
-						background: $positiveBackgroundHover !important;
-						color: $positiveColorHover !important;
-					}
-				}
-
-				&.negative, .tabulator-cell.negative{
-					box-shadow: $negativeBoxShadow;
-					background: $negativeBackgroundColor !important;
-					color: $negativeColor !important;
-
-					&:hover{
-						background: $negativeBackgroundHover !important;
-						color: $negativeColorHover !important;
-					}
-				}
-
-				&.error, .tabulator-cell.error{
-					box-shadow: $errorBoxShadow;
-					background: $errorBackgroundColor !important;
-					color: $errorColor !important;
-
-					&:hover{
-						background: $errorBackgroundHover !important;
-						color: $errorColorHover !important;
-					}
-				}
-
-				&.warning, .tabulator-cell.warning{
-					box-shadow: $warningBoxShadow;
-					background: $warningBackgroundColor !important;
-					color: $warningColor !important;
-
-					&:hover{
-						background: $warningBackgroundHover !important;
-						color: $warningColorHover !important;
-					}
-				}
-
-				&.active, .tabulator-cell.active{
-					box-shadow: $activeBoxShadow;
-					background: $activeBackgroundColor !important;
-					color: $activeColor !important;
-
-					&:hover{
-						background: $positiveBackgroundHover !important;
-						color: $positiveColorHover !important;
-					}
-				}
-
-				&.active, &.disabled:hover, .tabulator-cell.active{
-					pointer-events: none;
-					color: $disabledTextColor;
-				}
-			}
-		}
-	}
-
-
-	&.inverted{
-
-		background: $invertedBackground;
-		color: $invertedCellColor;
-		border: $invertedBorder;
-
-		.tabulator-header{
-			background-color: $invertedHeaderBackground;
-			border-color: $invertedHeaderBorderColor !important;
-			color: $invertedHeaderColor;
-
-			.tabulator-col{
-				border-color: $invertedCellBorderColor !important;
-			}
-		}
-
-		.tabulator-tableholder{
-			.tabulator-table{
-				.tabulator-row{
-					color: $invertedCellColor;
-					border: $invertedBorder;
-
-					.tabulator-cell{
-						border-color: $invertedCellBorderColor !important;
-					}
-				}
-			}
-		}
-
-		.tabulator-footer{
-			background: $definitionPageBackground;
-		}
-	}
-
-	&.striped{
-		.tabulator-row{
-			&:nth-child(even){
-				background-color: $basicTableStripedBackground;
-			}
-		}
-	}
-
-	&.celled{
-		border:1px solid $borderColor;
-
-		.tabulator-header{
-			.tabulator-col{
-				border-right:$cellBorder;
-			}
-		}
-
-		.tabulator-tableholder{
-			.tabulator-table{
-				.tabulator-row{
-					.tabulator-cell{
-						border-right:$cellBorder;
-					}
-				}
-			}
-		}
-
-	}
-
-
-	&[class*="single line"]{
-		.tabulator-tableholder{
-			.tabulator-table{
-				.tabulator-row{
-					.tabulator-cell{
-						border-right:none;
-					}
-				}
-			}
-		}
-	}
-
-	//coloured table varients
-	/* Red */
-	&.red {
-		border-top: $coloredBorderSize solid $red;
-	}
-	&.inverted.red {
-		background-color: $red !important;
-		color: $white !important;
-	}
-
-	/* Orange */
-	&.orange {
-		border-top: $coloredBorderSize solid $orange;
-	}
-	&.inverted.orange {
-		background-color: $orange !important;
-		color: $white !important;
-	}
-
-	/* Yellow */
-	&.yellow {
-		border-top: $coloredBorderSize solid $yellow;
-	}
-	&.inverted.yellow {
-		background-color: $yellow !important;
-		color: $white !important;
-	}
-
-	/* Olive */
-	&.olive {
-		border-top: $coloredBorderSize solid $olive;
-	}
-	&.inverted.olive {
-		background-color: $olive !important;
-		color: $white !important;
-	}
-
-	/* Green */
-	&.green {
-		border-top: $coloredBorderSize solid $green;
-	}
-	&.inverted.green {
-		background-color: $green !important;
-		color: $white !important;
-	}
-
-	/* Teal */
-	&.teal {
-		border-top: $coloredBorderSize solid $teal;
-	}
-	&.inverted.teal {
-		background-color: $teal !important;
-		color: $white !important;
-	}
-
-	/* Blue */
-	&.blue {
-		border-top: $coloredBorderSize solid $blue;
-	}
-	&.inverted.blue {
-		background-color: $blue !important;
-		color: $white !important;
-	}
-
-	/* Violet */
-	&.violet {
-		border-top: $coloredBorderSize solid $violet;
-	}
-	&.inverted.violet {
-		background-color: $violet !important;
-		color: $white !important;
-	}
-
-	/* Purple */
-	&.purple {
-		border-top: $coloredBorderSize solid $purple;
-	}
-	&.inverted.purple {
-		background-color: $purple !important;
-		color: $white !important;
-	}
-
-	/* Pink */
-	&.pink {
-		border-top: $coloredBorderSize solid $pink;
-	}
-	&.inverted.pink {
-		background-color: $pink !important;
-		color: $white !important;
-	}
-
-	/* Brown */
-	&.brown {
-		border-top: $coloredBorderSize solid $brown;
-	}
-	&.inverted.brown {
-		background-color: $brown !important;
-		color: $white !important;
-	}
-
-	/* Grey */
-	&.grey {
-		border-top: $coloredBorderSize solid $grey;
-	}
-	&.inverted.grey {
-		background-color: $grey !important;
-		color: $white !important;
-	}
-
-	/* Black */
-	&.black {
-		border-top: $coloredBorderSize solid $black;
-	}
-	&.inverted.black {
-		background-color: $black !important;
-		color: $white !important;
-	}
-
-	&.padded{
-		.tabulator-header{
-			.tabulator-col{
-				.tabulator-col-content{
-					padding: $paddedVerticalPadding $paddedHorizontalPadding;
-
-					.tabulator-arrow{
-						top:20px;
-					}
-				}
-			}
-		}
-		.tabulator-tableholder{
-			.tabulator-table{
-				.tabulator-row{
-					.tabulator-cell{
-						padding: $paddedVerticalPadding $paddedHorizontalPadding;
-					}
-				}
-			}
-		}
-
-		&.very{
-			.tabulator-header{
-				.tabulator-col{
-					.tabulator-col-content{
-						padding: $veryPaddedVerticalPadding $veryPaddedHorizontalPadding;
-
-						.tabulator-arrow{
-							top:26px;
-						}
-					}
-				}
-			}
-			.tabulator-tableholder{
-				.tabulator-table{
-					.tabulator-row{
-						.tabulator-cell{
-							padding: $veryPaddedVerticalPadding $veryPaddedHorizontalPadding;
-						}
-					}
-				}
-			}
-		}
-	}
-
-	&.compact{
-		.tabulator-header{
-			.tabulator-col{
-				.tabulator-col-content{
-					padding: $compactVerticalPadding $compactHorizontalPadding;
-
-					.tabulator-arrow{
-						top:12px;
-					}
-				}
-			}
-		}
-		.tabulator-tableholder{
-			.tabulator-table{
-				.tabulator-row{
-					.tabulator-cell{
-						padding: $compactVerticalPadding $compactHorizontalPadding;
-					}
-				}
-			}
-		}
-
-		&.very{
-			.tabulator-header{
-				.tabulator-col{
-					.tabulator-col-content{
-						padding: $veryCompactVerticalPadding $veryCompactHorizontalPadding;
-
-						.tabulator-arrow{
-							top:10px;
-						}
-					}
-				}
-			}
-			.tabulator-tableholder{
-				.tabulator-table{
-					.tabulator-row{
-						.tabulator-cell{
-							padding: $veryCompactVerticalPadding $veryCompactHorizontalPadding;
-						}
-					}
-				}
-			}
-		}
-	}
-}
-
-.tabulator-row{
-	border-bottom: $rowBorder;
-
-	&.tabulator-row-even{
-		background-color: transparent;
-	}
-
-	&.tabulator-selectable:hover{
-		box-shadow: $activeBoxShadow;
-		background: $activeBackgroundColor !important;
-		color: $activeColor !important;
-	}
-
-	&.tabulator-selected{
-		background-color:$rowSelectedBackground !important;
-	}
-
-	&.tabulator-selected:hover{
-		background-color:$rowSelectedBackgroundHover !important;
-		cursor: pointer;
-	}
-
-	&.tabulator-moving{
-		pointer-events: none !important;
-	}
-
-	.tabulator-cell{
-		padding: $cellVerticalPadding $cellHorizontalPadding;
-		border-right:none;
-		vertical-align:middle;
-
-		&:last-of-type{
-			border-right: none;
-		}
-
-		.tabulator-responsive-collapse-toggle{
-			color:#fff;
-		}
-	}
-
-	&.tabulator-group{
-		background:#fafafa;
-		span{
-			color:#666;
-		}
-	}
-}
-
-.tabulator-menu{
-	background:$backgroundColor;
-
-	.tabulator-menu-item{
-		&:not(.tabulator-menu-item-disabled):hover{
-			background: $headerBackgroundColor;
-		}
-	}
-}
-
-.tabulator-edit-select-list{
-	background:$backgroundColor;
-
-	.tabulator-edit-select-list-item{
-		&.active{
-			color:$backgroundColor;
-
-			&.focused{
-				outline:1px solid rgba($backgroundColor, .5);
-			}
-		}
-
-		&:hover{
-			color:$backgroundColor;
-		}
-	}
-
-	.tabulator-edit-select-list-notice{
-		color:inherit;
-	}
-}
-
-.tabulator-print-table{
-	.tabulator-print-table-group{
-		background:#fafafa;
-
-		span{
-			color:#666;
-		}
-	}
+
+@import "variables_table.scss";
+
+//Main Theme Variables
+$backgroundColor: $background !default; //background color of tabulator
+$textSize:14px !default; //table text size
+
+//header theming
+$headerBackgroundColor:$headerBackground !default; //border to tabulator
+$headerTextColor:$headerColor !default; //header text color
+$headerBorderColor:#ddd !default;  //header border color
+$headerSeparatorColor:#999 !default; //header bottom separator color
+$headerMargin:4px !default; //padding round header
+
+//column header arrows
+$sortArrowActive: #666 !default;
+$sortArrowInactive: #bbb !default;
+
+//row theming
+$rowBorderColor:#ddd !default; //table border color
+$rowTextColor:#333 !default; //table text color
+
+$rowSelectedBackground: #9ABCEA !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:#fff !default; //border to tabulator
+$footerTextColor:#555 !default; //footer text color
+$footerBorderColor:#aaa !default; //footer border color
+$footerSeparatorColor:#999 !default; //footer bottom separator color
+$footerActiveColor:#d00 !default; //footer bottom active text color
+
+@import "../../tabulator.scss";
+
+.tabulator{
+	width: 100%;
+
+	margin: $margin;
+	border: $border;
+	box-shadow: $boxShadow;
+	border-radius: $borderRadius;
+	color: $color;
+
+	.tabulator-header{
+		border-right:none;
+		border-bottom: $headerBorder;
+		background-color: $headerBackgroundColor;
+
+		box-shadow: $headerBoxShadow;
+
+		color: $headerTextColor;
+		font-style: $headerFontStyle;
+		font-weight: $headerFontWeight;
+		text-transform: $headerTextTransform;
+
+		.tabulator-col{
+			border-right: none;
+			background-color: $headerBackgroundColor;
+
+			.tabulator-col-content{
+				padding: $headerVerticalPadding $headerHorizontalPadding;
+			}
+		}
+	}
+
+	.tabulator-tableholder{
+		.tabulator-table{
+			background-color:transparent;
+			.tabulator-row{
+				&.tabulator-calcs{
+					background:darken($background, 5%) !important;
+
+					&.tabulator-calcs-top{
+						border-bottom:2px solid $rowBorderColor;
+					}
+
+					&.tabulator-calcs-bottom{
+						border-top:2px solid $rowBorderColor;
+					}
+				}
+			}
+		}
+	}
+
+	.tabulator-footer{
+		padding: $footerVerticalPadding $footerHorizontalPadding;
+
+		border-top: $footerBorder;
+		box-shadow: $footerBoxShadow;
+
+		background: $footerBackground;
+
+		text-align:right;
+		color: $footerColor;
+
+		font-style: $footerFontStyle;
+		font-weight: $footerFontWeight;
+		text-transform: $footerTextTransform;
+
+		.tabulator-calcs-holder{
+			margin:(-$footerVerticalPadding) (-$footerHorizontalPadding) $footerVerticalPadding (-$footerHorizontalPadding);
+
+			background:lighten($footerBackground, 5%) !important;
+
+			.tabulator-row{
+				background:lighten($footerBackground, 5%) !important;
+			}
+
+			&:only-child{
+				margin-bottom:-$footerVerticalPadding;
+				border-bottom:none;
+			}
+		}
+	}
+
+	.tabulator-tableholder{
+		.tabulator-table{
+			.tabulator-row{
+				&.positive, .tabulator-cell.positive{
+					box-shadow: $positiveBoxShadow;
+					background: $positiveBackgroundColor !important;
+					color: $positiveColor !important;
+
+					@media (hover:hover) and (pointer:fine){
+						&:hover{
+							background: $positiveBackgroundHover !important;
+							color: $positiveColorHover !important;
+						}
+					}
+				}
+
+				&.negative, .tabulator-cell.negative{
+					box-shadow: $negativeBoxShadow;
+					background: $negativeBackgroundColor !important;
+					color: $negativeColor !important;
+
+					@media (hover:hover) and (pointer:fine){
+						&:hover{
+							background: $negativeBackgroundHover !important;
+							color: $negativeColorHover !important;
+						}
+					}
+				}
+
+				&.error, .tabulator-cell.error{
+					box-shadow: $errorBoxShadow;
+					background: $errorBackgroundColor !important;
+					color: $errorColor !important;
+
+					@media (hover:hover) and (pointer:fine){
+						&:hover{
+							background: $errorBackgroundHover !important;
+							color: $errorColorHover !important;
+						}
+					}
+				}
+
+				&.warning, .tabulator-cell.warning{
+					box-shadow: $warningBoxShadow;
+					background: $warningBackgroundColor !important;
+					color: $warningColor !important;
+
+					@media (hover:hover) and (pointer:fine){
+						&:hover{
+							background: $warningBackgroundHover !important;
+							color: $warningColorHover !important;
+						}
+					}
+				}
+
+				&.active, .tabulator-cell.active{
+					box-shadow: $activeBoxShadow;
+					background: $activeBackgroundColor !important;
+					color: $activeColor !important;
+
+					@media (hover:hover) and (pointer:fine){
+						&:hover{
+							background: $positiveBackgroundHover !important;
+							color: $positiveColorHover !important;
+						}
+					}
+				}
+
+				&.active, .tabulator-cell.active{
+					pointer-events: none;
+					color: $disabledTextColor;
+				}
+
+				@media (hover:hover) and (pointer:fine){
+					&.disabled:hover{
+						pointer-events: none;
+						color: $disabledTextColor;
+					}
+				}
+			}
+		}
+	}
+
+
+	&.inverted{
+
+		background: $invertedBackground;
+		color: $invertedCellColor;
+		border: $invertedBorder;
+
+		.tabulator-header{
+			background-color: $invertedHeaderBackground;
+			border-color: $invertedHeaderBorderColor !important;
+			color: $invertedHeaderColor;
+
+			.tabulator-col{
+				border-color: $invertedCellBorderColor !important;
+			}
+		}
+
+		.tabulator-tableholder{
+			.tabulator-table{
+				.tabulator-row{
+					color: $invertedCellColor;
+					border: $invertedBorder;
+
+					.tabulator-cell{
+						border-color: $invertedCellBorderColor !important;
+					}
+				}
+			}
+		}
+
+		.tabulator-footer{
+			background: $definitionPageBackground;
+		}
+	}
+
+	&.striped{
+		.tabulator-row{
+			&:nth-child(even){
+				background-color: $basicTableStripedBackground;
+			}
+		}
+	}
+
+	&.celled{
+		border:1px solid $borderColor;
+
+		.tabulator-header{
+			.tabulator-col{
+				border-right:$cellBorder;
+			}
+		}
+
+		.tabulator-tableholder{
+			.tabulator-table{
+				.tabulator-row{
+					.tabulator-cell{
+						border-right:$cellBorder;
+					}
+				}
+			}
+		}
+
+	}
+
+
+	&[class*="single line"]{
+		.tabulator-tableholder{
+			.tabulator-table{
+				.tabulator-row{
+					.tabulator-cell{
+						border-right:none;
+					}
+				}
+			}
+		}
+	}
+
+	//coloured table varients
+	/* Red */
+	&.red {
+		border-top: $coloredBorderSize solid $red;
+	}
+	&.inverted.red {
+		background-color: $red !important;
+		color: $white !important;
+	}
+
+	/* Orange */
+	&.orange {
+		border-top: $coloredBorderSize solid $orange;
+	}
+	&.inverted.orange {
+		background-color: $orange !important;
+		color: $white !important;
+	}
+
+	/* Yellow */
+	&.yellow {
+		border-top: $coloredBorderSize solid $yellow;
+	}
+	&.inverted.yellow {
+		background-color: $yellow !important;
+		color: $white !important;
+	}
+
+	/* Olive */
+	&.olive {
+		border-top: $coloredBorderSize solid $olive;
+	}
+	&.inverted.olive {
+		background-color: $olive !important;
+		color: $white !important;
+	}
+
+	/* Green */
+	&.green {
+		border-top: $coloredBorderSize solid $green;
+	}
+	&.inverted.green {
+		background-color: $green !important;
+		color: $white !important;
+	}
+
+	/* Teal */
+	&.teal {
+		border-top: $coloredBorderSize solid $teal;
+	}
+	&.inverted.teal {
+		background-color: $teal !important;
+		color: $white !important;
+	}
+
+	/* Blue */
+	&.blue {
+		border-top: $coloredBorderSize solid $blue;
+	}
+	&.inverted.blue {
+		background-color: $blue !important;
+		color: $white !important;
+	}
+
+	/* Violet */
+	&.violet {
+		border-top: $coloredBorderSize solid $violet;
+	}
+	&.inverted.violet {
+		background-color: $violet !important;
+		color: $white !important;
+	}
+
+	/* Purple */
+	&.purple {
+		border-top: $coloredBorderSize solid $purple;
+	}
+	&.inverted.purple {
+		background-color: $purple !important;
+		color: $white !important;
+	}
+
+	/* Pink */
+	&.pink {
+		border-top: $coloredBorderSize solid $pink;
+	}
+	&.inverted.pink {
+		background-color: $pink !important;
+		color: $white !important;
+	}
+
+	/* Brown */
+	&.brown {
+		border-top: $coloredBorderSize solid $brown;
+	}
+	&.inverted.brown {
+		background-color: $brown !important;
+		color: $white !important;
+	}
+
+	/* Grey */
+	&.grey {
+		border-top: $coloredBorderSize solid $grey;
+	}
+	&.inverted.grey {
+		background-color: $grey !important;
+		color: $white !important;
+	}
+
+	/* Black */
+	&.black {
+		border-top: $coloredBorderSize solid $black;
+	}
+	&.inverted.black {
+		background-color: $black !important;
+		color: $white !important;
+	}
+
+	&.padded{
+		.tabulator-header{
+			.tabulator-col{
+				.tabulator-col-content{
+					padding: $paddedVerticalPadding $paddedHorizontalPadding;
+
+					.tabulator-arrow{
+						top:20px;
+					}
+				}
+			}
+		}
+		.tabulator-tableholder{
+			.tabulator-table{
+				.tabulator-row{
+					.tabulator-cell{
+						padding: $paddedVerticalPadding $paddedHorizontalPadding;
+					}
+				}
+			}
+		}
+
+		&.very{
+			.tabulator-header{
+				.tabulator-col{
+					.tabulator-col-content{
+						padding: $veryPaddedVerticalPadding $veryPaddedHorizontalPadding;
+
+						.tabulator-arrow{
+							top:26px;
+						}
+					}
+				}
+			}
+			.tabulator-tableholder{
+				.tabulator-table{
+					.tabulator-row{
+						.tabulator-cell{
+							padding: $veryPaddedVerticalPadding $veryPaddedHorizontalPadding;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	&.compact{
+		.tabulator-header{
+			.tabulator-col{
+				.tabulator-col-content{
+					padding: $compactVerticalPadding $compactHorizontalPadding;
+
+					.tabulator-arrow{
+						top:12px;
+					}
+				}
+			}
+		}
+		.tabulator-tableholder{
+			.tabulator-table{
+				.tabulator-row{
+					.tabulator-cell{
+						padding: $compactVerticalPadding $compactHorizontalPadding;
+					}
+				}
+			}
+		}
+
+		&.very{
+			.tabulator-header{
+				.tabulator-col{
+					.tabulator-col-content{
+						padding: $veryCompactVerticalPadding $veryCompactHorizontalPadding;
+
+						.tabulator-arrow{
+							top:10px;
+						}
+					}
+				}
+			}
+			.tabulator-tableholder{
+				.tabulator-table{
+					.tabulator-row{
+						.tabulator-cell{
+							padding: $veryCompactVerticalPadding $veryCompactHorizontalPadding;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+.tabulator-row{
+	border-bottom: $rowBorder;
+
+	&.tabulator-row-even{
+		background-color: transparent;
+	}
+
+	@media (hover:hover) and (pointer:fine){
+		&.tabulator-selectable:hover{
+			box-shadow: $activeBoxShadow;
+			background: $activeBackgroundColor !important;
+			color: $activeColor !important;
+		}
+	}
+
+	&.tabulator-selected{
+		background-color:$rowSelectedBackground !important;
+	}
+
+	@media (hover:hover) and (pointer:fine){
+		&.tabulator-selected:hover{
+			background-color:$rowSelectedBackgroundHover !important;
+			cursor: pointer;
+		}
+	}
+
+	&.tabulator-moving{
+		pointer-events: none !important;
+	}
+
+	.tabulator-cell{
+		padding: $cellVerticalPadding $cellHorizontalPadding;
+		border-right:none;
+		vertical-align:middle;
+
+		&:last-of-type{
+			border-right: none;
+		}
+
+		.tabulator-responsive-collapse-toggle{
+			color:#fff;
+		}
+	}
+
+	&.tabulator-group{
+		background:#fafafa;
+		span{
+			color:#666;
+		}
+	}
+}
+
+.tabulator-menu{
+	background:$backgroundColor;
+
+	.tabulator-menu-item{
+		@media (hover:hover) and (pointer:fine){
+			&:not(.tabulator-menu-item-disabled):hover{
+				background: $headerBackgroundColor;
+			}
+		}
+	}
+}
+
+.tabulator-edit-select-list{
+	background:$backgroundColor;
+
+	.tabulator-edit-select-list-item{
+		&.active{
+			color:$backgroundColor;
+
+			&.focused{
+				outline:1px solid rgba($backgroundColor, .5);
+			}
+		}
+
+		@media (hover:hover) and (pointer:fine){
+			&:hover{
+				color:$backgroundColor;
+			}
+		}
+	}
+
+	.tabulator-edit-select-list-notice{
+		color:inherit;
+	}
+}
+
+.tabulator-print-table{
+	.tabulator-print-table-group{
+		background:#fafafa;
+
+		span{
+			color:#666;
+		}
+	}
 }