tabulator-tables 6.5.0 → 6.5.1

package/src/scss/themes/semanticui/variables_table.scss

@@ -0,0 +1,248 @@
+@use "sass:color";
+@use "variables.scss" as *;
+
+/*******************************
+             Table
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+$verticalMargin: 1em !default;
+$horizontalMargin: 0em !default;
+$margin: $verticalMargin $horizontalMargin !default;
+$borderCollapse: separate !default;
+$borderSpacing: 0px !default;
+$borderRadius: $defaultBorderRadius !default;
+$transition:
+  background $defaultDuration $defaultEasing,
+  color $defaultDuration $defaultEasing !default;
+$background: $white !default;
+$color: $textColor !default;
+$borderWidth: 1px !default;
+$border: $borderWidth solid $borderColor !default;
+$boxShadow: none !default;
+$textAlign: left !default;
+
+/*--------------
+     Parts
+---------------*/
+
+/* Table Row */
+$rowBorder: 1px solid $internalBorderColor !default;
+
+/* Table Cell */
+$cellVerticalPadding: $relativeMini !default;
+$cellHorizontalPadding: $relativeMini !default;
+$cellVerticalAlign: inherit !default;
+$cellTextAlign: inherit !default;
+$cellBorder: 1px solid $internalBorderColor !default;
+
+/* Table Header */
+$headerBorder: 1px solid $internalBorderColor !default;
+$headerDivider: none !default;
+$headerBackground: $offWhite !default;
+$headerAlign: inherit !default;
+$headerVerticalAlign: inherit !default;
+$headerColor: $textColor !default;
+$headerVerticalPadding: $relativeSmall !default;
+$headerHorizontalPadding: $cellHorizontalPadding !default;
+$headerFontStyle: none !default;
+$headerFontWeight: bold !default;
+$headerTextTransform: none !default;
+$headerBoxShadow: none !default;
+
+/* Table Footer */
+$footerBoxShadow: none !default;
+$footerBorder: 1px solid $borderColor !default;
+$footerDivider: none !default;
+$footerBackground: $offWhite !default;
+$footerAlign: inherit !default;
+$footerVerticalAlign: middle !default;
+$footerColor: $textColor !default;
+$footerVerticalPadding: $cellVerticalPadding !default;
+$footerHorizontalPadding: $cellHorizontalPadding !default;
+$footerFontStyle: normal !default;
+$footerFontWeight: normal !default;
+$footerTextTransform: none !default;
+
+/* Responsive Size */
+$responsiveHeaderDisplay: block !default;
+$responsiveFooterDisplay: block !default;
+$responsiveRowVerticalPadding: 1em !default;
+$responsiveRowBoxShadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important !default;
+$responsiveCellVerticalPadding: 0.25em !default;
+$responsiveCellHorizontalPadding: 0.75em !default;
+$responsiveCellBoxShadow: none !important !default;
+
+/*-------------------
+       Types
+--------------------*/
+
+/* Definition */
+$definitionPageBackground: $white !default;
+
+$definitionHeaderBackground: transparent !default;
+$definitionHeaderColor: $unselectedTextColor !default;
+$definitionHeaderFontWeight: normal !default;
+
+$definitionFooterBackground: $definitionHeaderBackground !default;
+$definitionFooterColor: $definitionHeaderColor !default;
+$definitionFooterFontWeight: $definitionHeaderFontWeight !default;
+
+$definitionColumnBackground: $subtleTransparentBlack !default;
+$definitionColumnFontWeight: bold !default;
+$definitionColumnColor: $selectedTextColor !default;
+$definitionColumnFontSize: $relativeMedium !default;
+$definitionColumnTextTransform: '' !default;
+$definitionColumnBoxShadow: '' !default;
+$definitionColumnTextAlign: '' !default;
+$definitionColumnHorizontalPadding: '' !default;
+
+
+/*--------------
+    Couplings
+---------------*/
+
+$iconVerticalAlign: baseline !default;
+
+/*--------------
+     States
+---------------*/
+
+$stateMarkerWidth: 0px !default;
+
+/* Positive */
+$positiveColor: $positiveTextColor !default;
+$positiveBoxShadow: $stateMarkerWidth 0px 0px $positiveBorderColor inset !default;
+$positiveBackgroundHover: color.adjust($positiveBackgroundColor, $lightness: -3%) !default;
+$positiveColorHover: color.adjust($positiveColor, $lightness: -3%) !default;
+
+/* Negative */
+$negativeColor: $negativeTextColor !default;
+$negativeBoxShadow: $stateMarkerWidth 0px 0px $negativeBorderColor inset !default;
+$negativeBackgroundHover: color.adjust($negativeBackgroundColor, $lightness: -3%) !default;
+$negativeColorHover: color.adjust($negativeColor, $lightness: -3%) !default;
+
+/* Error */
+$errorColor: $errorTextColor !default;
+$errorBoxShadow: $stateMarkerWidth 0px 0px $errorBorderColor inset !default;
+$errorBackgroundHover: color.adjust($errorBackgroundColor, $lightness: -3%) !default;
+$errorColorHover: color.adjust($errorColor, $lightness: -3%) !default;
+
+/* Warning */
+$warningColor: $warningTextColor !default;
+$warningBoxShadow: $stateMarkerWidth 0px 0px $warningBorderColor inset !default;
+$warningBackgroundHover: color.adjust($warningBackgroundColor, $lightness: -3%) !default;
+$warningColorHover: color.adjust($warningColor, $lightness: -3%) !default;
+
+/* Active */
+$activeColor: $textColor !default;
+$activeBackgroundColor: #E0E0E0 !default;
+$activeBoxShadow: $stateMarkerWidth 0px 0px $activeColor inset !default;
+
+$activeBackgroundHover: #EFEFEF !default;
+$activeColorHover: $selectedTextColor !default;
+
+/*--------------
+     Types
+---------------*/
+
+/* Attached */
+$attachedTopOffset: 0px !default;
+$attachedBottomOffset: 0px !default;
+$attachedHorizontalOffset: -$borderWidth !default;
+$attachedWidth: calc(100% + #{$attachedHorizontalOffset * -2}) !default;
+$attachedBoxShadow: none !default;
+$attachedBorder: $borderWidth solid $solidBorderColor !default;
+$attachedBottomBoxShadow:
+  $boxShadow,
+  $attachedBoxShadow
+ !default;
+
+/* Striped */
+$stripedBackground: rgba(0, 0, 50, 0.02) !default;
+$invertedStripedBackground: rgba(255, 255, 255, 0.05) !default;
+
+/* Selectable */
+$selectableBackground: $transparentBlack !default;
+$selectableTextColor: $selectedTextColor !default;
+$selectableInvertedBackground: $transparentWhite !default;
+$selectableInvertedTextColor: $invertedSelectedTextColor !default;
+
+/* Sortable */
+$sortableBackground: '' !default;
+$sortableColor: $textColor !default;
+
+$sortableBorder: 1px solid $borderColor !default;
+$sortableIconWidth: auto !default;
+$sortableIconDistance: 0.5em !default;
+$sortableIconOpacity: 0.8 !default;
+$sortableIconFont: 'Icons' !default;
+$sortableIconAscending: '\f0d8' !default;
+$sortableIconDescending: '\f0d7' !default;
+$sortableDisabledColor: $disabledTextColor !default;
+
+$sortableHoverBackground: $transparentBlack !default;
+$sortableHoverColor: $hoveredTextColor !default;
+
+$sortableActiveBackground: $transparentBlack !default;
+$sortableActiveColor: $selectedTextColor !default;
+
+$sortableActiveHoverBackground: $transparentBlack !default;
+$sortableActiveHoverColor: $selectedTextColor !default;
+
+$sortableInvertedBorderColor: transparent !default;
+$sortableInvertedHoverBackground: $transparentWhite $subtleGradient !default;
+$sortableInvertedHoverColor: $invertedHoveredTextColor !default;
+$sortableInvertedActiveBackground: $strongTransparentWhite $subtleGradient !default;
+$sortableInvertedActiveColor: $invertedSelectedTextColor !default;
+
+/* Colors */
+$coloredBorderSize: 0.2em !default;
+$coloredBorderRadius: 0em 0em $borderRadius $borderRadius !default;
+
+/* Inverted */
+$invertedBackground: #333333 !default;
+$invertedBorder: none !default;
+$invertedCellBorderColor: $whiteBorderColor !default;
+$invertedCellColor: $invertedTextColor !default;
+
+$invertedHeaderBackground: $veryStrongTransparentBlack !default;
+$invertedHeaderColor: $invertedTextColor !default;
+$invertedHeaderBorderColor: $invertedCellBorderColor !default;
+
+$invertedDefinitionColumnBackground: $subtleTransparentWhite !default;
+$invertedDefinitionColumnColor: $invertedSelectedTextColor !default;
+$invertedDefinitionColumnFontWeight: bold !default;
+
+/* Basic */
+$basicTableBackground: transparent !default;
+$basicTableBorder: $borderWidth solid $borderColor !default;
+$basicBoxShadow: none !default;
+
+$basicTableHeaderBackground: transparent !default;
+$basicTableCellBackground: transparent !default;
+$basicTableHeaderDivider: none !default;
+$basicTableCellBorder: 1px solid rgba(0, 0, 0, 0.1) !default;
+$basicTableCellPadding: '' !default;
+$basicTableStripedBackground: #f2f2f2 !default;
+
+/* Padded */
+$paddedVerticalPadding: 1em !default;
+$paddedHorizontalPadding: 1em !default;
+$veryPaddedVerticalPadding: 1.5em !default;
+$veryPaddedHorizontalPadding: 1.5em !default;
+
+/* Compact */
+$compactVerticalPadding: 0.5em !default;
+$compactHorizontalPadding: 0.7em !default;
+$veryCompactVerticalPadding: 0.4em !default;
+$veryCompactHorizontalPadding: 0.6em !default;
+
+
+/* Sizes */
+$small: 0.9em !default;
+$medium: 1em !default;
+$large: 1.1em !default;

package/src/scss/themes/tabulator_midnight.scss

@@ -0,0 +1,235 @@
+@use "sass:color";
+
+//Main Theme Variables
+$backgroundColor: #222 !default; //background color of tabulator
+$borderColor:#333 !default; //border to tabulator
+$textSize:14px !default; //table text size
+
+//header theming
+$headerBackgroundColor:#333 !default; //border to tabulator
+$headerTextColor:#fff !default; //header text color
+$headerBorderColor:#aaa !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
+$rowBackgroundColor:#666 !default; //table row background color
+$rowAltBackgroundColor:#444 !default; //table row background color
+$rowBorderColor:#888 !default; //table border color
+$rowTextColor:#fff !default; //table text color
+$rowHoverBackground:#999 !default; //row background color on hover
+
+$rowSelectedBackground: #000 !default; //row background color when selected
+$rowSelectedBackgroundHover: #888 !default;//row background color when selected and hovered
+
+$editBoxColor:#999 !default; //border color for edit boxes
+$errorColor:#dd0000 !default; //error indication
+
+//footer theming
+$footerBackgroundColor:#333 !default; //border to tabulator
+$footerTextColor:#333 !default; //footer text color
+$footerBorderColor:#aaa !default; //footer border color
+$footerSeparatorColor:#999 !default; //footer bottom separator color
+$footerActiveColor:#fff !default; //footer bottom active text color
+
+$headerHighlightBackground: #777 !default; //header background color when highlighted
+$headerTextHighlightBackground: #fff !default; //header background color when highlighted
+
+//range selection
+$rangeBorderColor: #ccc !default; //range border color
+$rangeHandleColor: $rangeBorderColor !default; //range handle color
+$rangeHeaderSelectedBackground: $rangeBorderColor !default; //header background color when selected
+$rangeHeaderSelectedTextColor: #333 !default; //header text color when selected
+$rangeHeaderHighlightBackground: #999 !default; //header background color when highlighted
+$rangeHeaderTextHighlightBackground: #000000 !default; //header text color when highlighted
+
+
+
+@use "../tabulator.scss" with (
+	$backgroundColor: $backgroundColor,
+	$borderColor: $borderColor,
+	$textSize: $textSize,
+	$headerBackgroundColor: $headerBackgroundColor,
+	$headerTextColor: $headerTextColor,
+	$headerBorderColor: $headerBorderColor,
+	$headerSeparatorColor: $headerSeparatorColor,
+	$headerMargin: $headerMargin,
+	$sortArrowActive: $sortArrowActive,
+	$sortArrowInactive: $sortArrowInactive,
+	$rowBackgroundColor: $rowBackgroundColor,
+	$rowAltBackgroundColor: $rowAltBackgroundColor,
+	$rowBorderColor: $rowBorderColor,
+	$rowTextColor: $rowTextColor,
+	$rowHoverBackground: $rowHoverBackground,
+	$rowSelectedBackground: $rowSelectedBackground,
+	$rowSelectedBackgroundHover: $rowSelectedBackgroundHover,
+	$editBoxColor: $editBoxColor,
+	$errorColor: $errorColor,
+	$footerBackgroundColor: $footerBackgroundColor,
+	$footerTextColor: $footerTextColor,
+	$footerBorderColor: $footerBorderColor,
+	$footerSeparatorColor: $footerSeparatorColor,
+	$footerActiveColor: $footerActiveColor,
+	$rangeBorderColor: $rangeBorderColor,
+	$rangeHandleColor: $rangeHandleColor,
+	$rangeHeaderSelectedBackground: $rangeHeaderSelectedBackground,
+	$rangeHeaderSelectedTextColor: $rangeHeaderSelectedTextColor,
+	$rangeHeaderHighlightBackground: $rangeHeaderHighlightBackground,
+	$rangeHeaderTextHighlightBackground: $rangeHeaderTextHighlightBackground
+);
+
+//Tabulator Containing Element
+.tabulator{
+	background-color: $backgroundColor;
+	
+	.tabulator-header{
+		
+		.tabulator-col{
+			background-color: $headerBackgroundColor;
+			
+			.tabulator-col-content{
+				.tabulator-col-title{
+					.tabulator-title-editor{
+						color: #fff;
+					}
+				}
+			}
+			
+			.tabulator-header-filter{
+				input, select{
+					border:1px solid #999;
+					background: #444;
+					color: #fff;
+				}
+			}
+		}
+		
+		.tabulator-calcs-holder{
+			background:color.adjust($headerBackgroundColor, $lightness: -10%) !important;
+			
+			.tabulator-row{
+				background:color.adjust($headerBackgroundColor, $lightness: -10%) !important;
+			}
+		}
+	}
+	
+	//footer element
+	.tabulator-footer{
+		
+		.tabulator-calcs-holder{
+			background:color.adjust($footerBackgroundColor, $lightness: -5%) !important;
+			
+			.tabulator-row{
+				background:color.adjust($footerBackgroundColor, $lightness: -5%) !important;
+			}
+		}
+		
+		.tabulator-spreadsheet-tabs{
+			.tabulator-spreadsheet-tab{
+				border-color: $footerBorderColor;
+				
+				background:rgba(255,255,255,.2);
+				
+				&.tabulator-spreadsheet-tab-active{
+					background:rgba(0,0,0,.2);
+					color:#fff;
+				}
+			}
+		}
+		
+		//pagination container element
+		.tabulator-paginator{
+			label{
+				color:#fff;
+			}
+		}
+		
+		.tabulator-page-counter {
+			color: #fff;
+		}
+		
+		//pagination button
+		.tabulator-page{
+			color: $footerTextColor;
+			font-family:inherit;
+			font-weight:inherit;
+			font-size:inherit;
+		}
+	}
+}
+
+//row element
+.tabulator-row{
+	
+	//row grouping element
+	&.tabulator-group{
+		min-width: 100%;
+		
+		color:#333;
+		
+		@media (hover:hover) and (pointer:fine){
+			&:hover{
+				cursor:pointer;
+				background-color:rgba(0,0,0,.1);
+			}
+		}
+		
+		span{
+			color:#666;
+		}
+	}
+}
+
+.tabulator-toggle{
+	border-color:#000;
+	background:$headerBackgroundColor;
+	
+	// &.tabulator-toggle-on{
+		// background:#25682b;
+	// }
+
+	.tabulator-toggle-switch{
+		border-color:#000;
+		background:#232323;
+	}
+}
+
+
+.tabulator-edit-select-list{
+	background:$rowTextColor;
+	
+	.tabulator-edit-select-list-item{
+		color:$rowBackgroundColor;
+		
+		&.active{
+			color:$editBoxColor;
+			background:$rowAltBackgroundColor;
+			
+			&.focused{
+				outline:1px solid rgba($editBoxColor, .5);
+			}
+		}
+		
+		&.focused{
+			outline:1px solid $rowAltBackgroundColor;
+		}
+		
+		@media (hover:hover) and (pointer:fine){
+			&:hover{
+				color:$editBoxColor;
+				background:$rowBackgroundColor;
+			}
+		}
+	}
+}
+
+.tabulator-print-table{
+	.tabulator-print-table-group{
+		color:#333;
+	}
+}
+