jquery.tabulator/themes/semantic-ui/tabulator_semantic-ui.less

Interactive table generation plugin for jQuery UI

@import (less) "variables_table.less";



//Main Theme Variables
@backgroundColor: @background; //background color of tabulator
@textSize:14px; //table text size

//header themeing
@headerBackgroundColor:@headerBackground; //border to tablulator
@headerTextColor:@headerColor; //header text colour
@headerBorderColor:#ddd;  //header border color
@headerSeperatorColor:#999; //header bottom seperator color
@headerMargin:4px; //padding round header

//column header arrows
@sortArrowActive: #666;
@sortArrowInactive: #bbb;

//row themeing
@rowBorderColor:#ddd; //table border color
@rowTextColor:#333; //table text color

@rowSelectedBackground: #9ABCEA; //row background color when selected
@rowSelectedBackgroundHover: #769BCC;//row background color when selected and hovered


@editBoxColor:#1D68CD; //border color for edit boxes

//footer themeing
@footerBackgroundColor:#fff; //border to tablulator
@footerTextColor:#555; //footer text colour
@footerBorderColor:#aaa; //footer border color
@footerSeperatorColor:#999; //footer bottom seperator color



//Tabulator Containing Element
.tabulator{
	position: relative;
	background-color: @backgroundColor;
	overflow:hidden;
	font-size:@textSize;
	text-align: left;
	width: 100%;

	margin: @margin;
	border: @border;
	box-shadow: @boxShadow;
	border-radius: @borderRadius;
	color: @color;

	//column header containing element
	.tabulator-header{
		position:relative;
		box-sizing: border-box;

		width:100%;

		border-bottom: @headerBorder;
		background-color: @headerBackgroundColor;

		box-shadow: @headerBoxShadow;

		color: @headerTextColor;
		font-style: @headerFontStyle;
		font-weight: @headerFontWeight;
		text-transform: @headerTextTransform;

		white-space: nowrap;
		overflow:hidden;

		-moz-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		-o-user-select: none;

		//individual column header element
		.tabulator-col{
			display:inline-block;


			//hold content of column header
			.tabulator-col-content{
				position: relative;
				padding: @headerVerticalPadding @headerHorizontalPadding;

				//hold title of column header
				.tabulator-col-title{
					width: 100%;

					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					vertical-align:bottom;

					//element to hold title editor
					.tabulator-title-editor{
						box-sizing: border-box;
						width: 100%;

						border:1px solid #999;

						padding:1px;

						background: #fff;
					}
				}

				//column sorter arrow
				.tabulator-arrow{
					display: inline-block;
					position: absolute;
					top:18px;
					right:8px;
					width: 0;
					height: 0;
					border-left: 6px solid transparent;
					border-right: 6px solid transparent;
					border-bottom: 6px solid @sortArrowInactive;

					&.asc{
						border-top: none;
						border-bottom: 6px solid @sortArrowActive;
					}

					&.desc{
						border-top: 6px solid @sortArrowActive;
						border-bottom: none;
					}
				}

			}

			//column resize handles
			.tabulator-handle{
				position:absolute;
				right:0;
				top:0;
				bottom:0;
				width:5px;

				&.prev{
					left:0;
					right:auto;
				}

				&:hover{
					cursor:ew-resize;
				}
			}

			//complex header column group
			&.tabulator-col-group{

				//gelement to hold sub columns in column group
				.tabulator-col-group-cols{
					position:relative;
					display: flex;

					border-top:1px solid @headerBorderColor;
					overflow: hidden;

					.tabulator-col:last-child{
						margin-right:-1px;
					}
				}
			}


			//hide left resize handle on first column
			&:first-child{
				.tabulator-handle.prev{
					display: none;
				}
			}

			//placeholder element for sortable columns
			&.ui-sortable-helper{
				position: absolute;
				background-color:darken(@headerBackgroundColor, 10%) !important;
				border:1px solid @headerBorderColor;
			}

			//header filter containing element
			.tabulator-header-filter{
				position: relative;
				box-sizing: border-box;
				margin-top:2px;
				width:100%;
				text-align: center;

				//styling adjustment for inbuilt editors
				textarea{
					height:auto !important;
				}

				svg{
					margin-top: 3px;
				}
			}


			//styling child elements for sortable columns
			&[data-sortable=true]{
				.tabulator-col-title{
					width:calc(~"100% - 25px");
				}

				&:hover{
					cursor:pointer;
					background-color:darken(@headerBackgroundColor, 10%);
				}
			}

		}

		//empty column for spacing row handlers on tables with movable rows enabled
		.tabulator-col-row-handle{
			width:30px;
			max-width:30px;
			display:inline-block;
		}

		.tabulator-col, .tabulator-col-row-handle{
			position:relative;
			box-sizing:border-box;
			// border-right: @headerDivider;
			text-align:left;
			vertical-align: bottom;
			overflow: hidden;
		}

		.tabulator-frozen{
			display: inline-block;
			position: absolute;

			background-color: inherit;

			z-index: 10;

			&.tabulator-frozen-left{
				border-right:1px solid @rowBorderColor;
			}

			&.tabulator-frozen-right{
				border-left:2px solid @rowBorderColor;
			}
		}
	}



	//scrolling element to hold table
	.tabulator-tableHolder{
		position:relative;
		width:100%;
		white-space: nowrap;
		overflow:auto;
		-webkit-overflow-scrolling: touch;

		//element to hold table rows
		.tabulator-table{
			position:relative;
			display:inline-block;
			white-space: nowrap;
			overflow:visible;
			color:@rowTextColor;

			//row element
			.tabulator-row{
				position: relative;
				box-sizing: border-box;

				min-height:@textSize + (@headerMargin * 2);
				border-bottom: @rowBorder;

				&.tabulator-selectable:hover{
					box-shadow: @activeBoxShadow;
					background: @activeBackgroundColor !important;
					color: @activeColor !important;
					cursor: pointer;
				}

				&.tabulator-selected{
					background-color:@rowSelectedBackground;
				}

				&.tabulator-selected:hover{
					background-color:@rowSelectedBackgroundHover;
					cursor: pointer;
				}


				//movable row handle
				.tabulator-row-handle{
					display:inline-block;
					box-sizing:border-box;
					width:30px;
					max-width:30px;
					padding: @cellVerticalPadding @cellHorizontalPadding;
					border-right:1px solid @rowBorderColor;
					text-align: center;
					vertical-align:middle;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;

					&:hover{
						cursor:move;
						background-color:rgba(0,0,0,.1);
					}

					//Hamburger element
					div{
						width:80%;
						height:3px;
						margin:2px 10% 0 10%;
						background:#666;
					}
				}

				.tabulator-frozen{
					display: inline-block;
					position: absolute;

					background-color: inherit;

					z-index: 10;

					&.tabulator-frozen-left{
						border-right:1px solid @rowBorderColor;
					}

					&.tabulator-frozen-right{
						border-left:2px solid @rowBorderColor;
					}
				}

				//cell element
				.tabulator-cell{
					position: relative;
					box-sizing:border-box;
					padding: @cellVerticalPadding @cellHorizontalPadding;
					// border-right:1px solid @rowBorderColor;
					vertical-align:middle;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;

					&:last-of-type{
						border-right: none;
					}

					&.tabulator-editing{
						border:1px solid  @editBoxColor;
						padding: 0;

						input, select{
							border:1px;
							background:transparent;
						}
					}
				}

			}

			//row grouping element
			.tabulator-group{

				&.show{
					.tabulator-group-header{
						.tabulator-arrow{
							margin-left:5px;
							margin-right:10px;
							border-left: 6px solid transparent;
							border-right: 6px solid transparent;
							border-top: 6px solid @sortArrowActive;
							border-bottom: 0;
						}
					}

					.tabulator-group-body{
						visibility: visible;
						height:auto;
					}
				}

				//row grouping header
				.tabulator-group-header{
					box-sizing:border-box;
					border-bottom:1px solid #999;
					border-right:1px solid @rowBorderColor;
					border-top:1px solid #999;
					padding:5px;
					background:#fafafa;
					font-weight:bold;

					//sorting arrow
					.tabulator-arrow{
						display: inline-block;
						width: 0;
						height: 0;
						margin-left:8px;
						margin-right:13px;
						border-top: 6px solid transparent;
						border-bottom: 6px solid transparent;
						border-right: 0;
						border-left: 6px solid @sortArrowActive;
						vertical-align:middle;

						&:hover{
							cursor:pointer;
							background-color:rgba(0,0,0,.1);
						}
					}

					span{
						margin-left:10px;
						color:#666;
					}
				}

				//row grouping footer
				.tabulator-group-body{
					visibility:hidden;
					height:0;
				}
			}
		}
	}

	//footer element
	.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;

		white-space:nowrap;
		user-select:none;

		-moz-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		-o-user-select: none;

		//pagination container element
		.tabulator-pages{
			margin:0 7px;
		}

		//pagination button
		.tabulator-page{
			display:inline-block;
			margin:0 2px;
			border:1px solid @footerBorderColor;
			border-radius:3px;
			padding:2px 5px;
			background:rgba(255,255,255,.2);
			color: @footerTextColor;

			&.active{
				color:#d00;
			}

			&.disabled{
				opacity:.5;
			}

			&:not(.disabled){
				&:hover{
					cursor:pointer;
					background:rgba(0,0,0,.2);
					color:#fff;
				}
			}
		}
	}

	//holding div that contains loader and covers tabulator element to prevent interaction
	.tablulator-loader{
		position:absolute;
		top:0;
		left:0;
		z-index:100;
		height:100%;
		width:100%;
		background:rgba(0,0,0,.4);
		text-align:center;

		//loading message element
		.tabulator-loader-msg{

			//loading message
			.tabulator-loading{
				display:inline-block;
				border:4px solid #333;
				border-radius:10px;
				padding:10px 20px;
				background:#fff;
				font-weight:bold;
				font-size:16px;
				color:#000;
			}

			//error message
			.tabulator-error{
				display:inline-block;
				border:4px solid #D00;
				border-radius:10px;
				padding:10px 20px;
				background:#fff;
				font-weight:bold;
				font-size:16px;
				color:#590000;
			}
		}
	}


	//Semantic-ui theming classes

	.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, .tabulator-col-row-handle{
				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-tableHolder{
			.tabulator-table{
				.tabulator-row{
					&:nth-child(even){
						background-color: @basicTableStripedBackground !important;
					}
				}
			}
		}
	}

	&.celled{
		border:1px solid @borderColor;

		.tabulator-header{
			.tabulator-col, .tabulator-col-row-handle{
				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-row-handle{
				.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-row-handle{
					.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-row-handle{
				.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-row-handle{
					.tabulator-col-content{
						padding: @veryCompactVerticalPadding @veryCompactHorizontalPadding;

						.tabulator-arrow{
							top:10px;
						}
					}
				}
			}
			.tabulator-tableHolder{
				.tabulator-table{
					.tabulator-row{
						.tabulator-cell{
							padding: @veryCompactVerticalPadding @veryCompactHorizontalPadding;
						}
					}
				}
			}
		}
	}
}