whmcsCrosterTemplates/assets/less/tables.less

.@{brand}-table {
	background: @white;
	margin-bottom: 15px;
	&.table {
		& >thead>tr>th,
		& >thead>tr>td {
			border-bottom: 3px double @default-border-color;
			border-color: @default-border-color;
			
			& label {
				margin-bottom: 0;
			}
		}		
		& .col-small {
			width: 45px;
			min-width: 45px;
			  &.center {
				  text-align: center;
				}
		}		
		& .col-medium {
			width: 125px;
			min-width: 125px;
			  &.center {
				  text-align: center;
				}
		}
		
		@media (max-width:992px) {
			& .tool-bars {
				width: 45px;
				min-width: 45px;
			}
		}
		& label {
			margin-bottom: 0;
		}
		
		&  ul.table-mobile-ul {
			margin-top: 5px;
			padding-left: 5px;
			border-left: 2px solid @default-border-color;
		}
		
		& >thead>tr>th[class*=sorted] {
			color: @link-color; 
		}
		
		@media (max-width:360px) {
			font-size: @baseFontSize - 1;
		}
	}
	
	&.footable>thead>tr>th>span.footable-sort-indicator {
		color: @gray-light;
		float: right;
		margin-right:4px;
	}
	
	&.table-bordered {
		border: 1px solid @default-border-color;
		>thead>tr>th, >tbody>tr>th, >tfoot>tr>th, >thead>tr>td, >tbody>tr>td, >tfoot>tr>td {
			border: 1px solid @default-border-color;
		}
		>thead>tr>th,
		>thead>tr>td {
			border-bottom: 3px double @default-border-color;
		}
	}
	
	&.table-primary {
		&.table {
			& >thead>tr>th,
			& >thead>tr>td {
				border-bottom-width: 1px;
				//background: @themeColor;
				//color: @white;
			}
		}
		&.footable>thead>tr>th>span.footable-sort-indicator {
			//color: @white;
		}
		
		
		&.table-bordered {
		&.dataTable {
			margin-bottom:0;
				thead {
					th {
						border-bottom: 4px solid @brand-success;
						
						&:nth-child(even) {
							border-bottom: 4px solid darken(@brand-success, 7%);
						}
					}
				}

			}	
		}
	}
	
	&.tech-features {
		thead {
			tr {
				th {
					text-transform: uppercase;
				
				}
			}
		}
		thead, tbody {
			tr {
				th,td {
					padding: 15px 25px;
				}
			}
		}
		tbody {
			tr {
				td {
					@media (min-width:992px) {
						&:first-child {
							background-color: @gray-lighter;
						}
					}
				}
			}
		}
		
	}
	
}

// DataTables Plugin
// ---------------------------

.dataTable {
  margin-bottom:0;
  th {
    &[class*=sort] {
		cursor:pointer;
		outline:0 none !important;
		&:after {
			content:"\f0dc";
			display:inline-block;
			color:@gray-light;
			font-family: "Font Awesome 5 Pro"; font-size:13px;
			float:right;
			margin-right:4px;
			position:relative;
		}
	}

	&[class*=sorting_] {
		background-color: @gray-lighter;
		
		&.sorting_disabled {
			background-color: @white;
		}
	}
	
	&.sorting_desc:after {
		content:"\f0dd";
		top:-6px;
		color:@gray-light;
	}
	&.sorting_asc:after {
		content:"\f0de";
		top:4px;
		color:@gray-light;
	}

	&.sorting_disabled {
		cursor:inherit;
		&:after { display:none; }
	}

  }

}

.dataTables_length {
  select {
	width:60px;
	height: auto;
  }
  label {
	font-weight:normal;
  }
}
.dataTables_filter {
  text-align:right;
  input[type=text] {
	width:125px;
	padding:4px 6px;
  }
  label {
	font-weight:normal;
  }
}

.dataTables_info {
  font-size:@baseFontSize;
  margin:5px 12px;
}

.dataTables_paginate {
  text-align:right;
  .pagination {
	margin:5px 12px;
  }
}


.dataTables_wrapper {
  label {
	display:inline-block;
  }
  input[type=text] , select {
	margin-bottom:0 !important;
	margin:0 4px;
  }

  .row {
	margin:0;
	
	&:first-child {
		padding-top:12px;
		padding-bottom:12px;
		border-bottom: 0 none;

		+ .dataTable {
			border-top:1px solid @default-border-color;
			border-bottom:1px solid @default-border-color;
		}
	}
	&:last-child {
		padding-top:12px;
		padding-bottom:12px;
		border-top: 0 none;
	}
  }

}

.footable-row-detail-row {
	display: block;
	line-height: 1.5em;
}

.dataTable {
	&.table.has-columns-hidden > tbody > tr > td > span.responsiveExpander {
		cursor: pointer;		
		&:before {
			font-family: "Font Awesome 5 Pro";
			font-style: normal;
			font-weight: 900;
			content: "\f067";
			padding-right: 5px;
			font-size: @baseFontSize + 5;
			color: #888;
		}
	}

	&.table.has-columns-hidden > tbody > tr.detail-show > td span.responsiveExpander {		
		&:before {
			font-family: "Font Awesome 5 Pro";
			font-style: normal;
			font-weight: 900;
			content: "\f068";
			padding-right: 5px;
			font-size: @baseFontSize + 5;
			color: #888;
		}
	}

	&.table.has-columns-hidden > tbody > tr.row-detail > td > ul > li > span.columnTitle {
		font-weight: bold;
	}
}