tabulator-tables 6.5.0 → 6.5.1

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

@@ -0,0 +1,623 @@
+@use "sass:color";
+@use "variables.scss" as *;
+@use "variables_table.scss" as *;
+
+//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
+
+@use "../../tabulator.scss" with (
+	$backgroundColor: $backgroundColor,
+	$textSize: $textSize,
+	$headerBackgroundColor: $headerBackgroundColor,
+	$headerTextColor: $headerTextColor,
+	$headerBorderColor: $headerBorderColor,
+	$headerSeparatorColor: $headerSeparatorColor,
+	$headerMargin: $headerMargin,
+	$sortArrowActive: $sortArrowActive,
+	$sortArrowInactive: $sortArrowInactive,
+	$rowBorderColor: $rowBorderColor,
+	$rowTextColor: $rowTextColor,
+	$rowSelectedBackground: $rowSelectedBackground,
+	$rowSelectedBackgroundHover: $rowSelectedBackgroundHover,
+	$editBoxColor: $editBoxColor,
+	$errorColor: $errorColor,
+	$footerBackgroundColor: $footerBackgroundColor,
+	$footerTextColor: $footerTextColor,
+	$footerBorderColor: $footerBorderColor,
+	$footerSeparatorColor: $footerSeparatorColor,
+	$footerActiveColor: $footerActiveColor
+);
+
+.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:color.adjust($background, $lightness: -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:color.adjust($footerBackground, $lightness: 5%) !important;
+
+			.tabulator-row{
+				background:color.adjust($footerBackground, $lightness: 5%) !important;
+			}
+
+			&:only-child{
+				margin-bottom:-$footerVerticalPadding;
+				border-bottom:none;
+			}
+		}
+
+		.tabulator-spreadsheet-tabs{
+			margin-top: calc( -0.78571em - 5px);
+			
+			.tabulator-spreadsheet-tab{
+				&.tabulator-spreadsheet-tab-active{
+					color:$footerActiveColor;
+				}
+			}
+		}
+	}
+
+	.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: tabulator.$rowBackgroundColor;
+	}
+
+	@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-row-header{
+			border-bottom: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;
+		}
+	}
+}