vpn.email/bower_components/metro/less/tables.less

vpn.email client

@import (once) "vars";
@import (once) "typography";
@import (once) "utils";


.table {
	width: 100%;
	margin: .625rem 0;

	th, td {
		padding: 0.625rem;
	}

	thead {
		border-bottom: 4px solid @grayLight;

		tr:last-child {
		}

		th, td {
			cursor: default;
			color: @textColor2;
			border-color: transparent;
			.align-left;
			.text-bold;
			line-height: 100%;
		}
	}

	tfoot {
		border-top: 4px solid @grayLight;

		tr:last-child {
		}

		th, td {
			cursor: default;
			color: @textColor2;
			border-color: transparent;
			.align-left;
			.text-bold;
			line-height: 100%;
		}
	}

	tbody {
		td {
			padding: 0.625rem 0.85rem;
		}
	}

	.sortable-column {
		position: relative;
		cursor: pointer;
		.no-user-select;
		&:after {
			position: absolute;
			content: "";
			width: 1rem;
			height: 1rem;
			left: 100%;
			margin-left: -20px;
			top: 50%;
			margin-top: -.5rem;
			color: inherit;
			font-size: 1rem;
			line-height: 1;
		}

		&.sort-asc, &.sort-desc {
			background-color: @grayLighter;
			&:after {
				color: @dark;
			}
		}

		&.sort-asc {
			&:after {
				content: "\2191";
			}
		}

		&.sort-desc {
			&:after {
				content: "\2193";
			}
		}
	}

	&.sortable-markers-on-left {
		.sortable-column {
			padding-left: 30px;
			&:before, &:after {
				left: 0;
				margin-left: 10px;
			}
		}
	}

	tr.selected {
		td {background-color: rgba(28, 183, 236, 0.10);}
	}

	td.selected {
		background-color: rgba(28, 183, 236, 0.30);
	}

	&.striped {
		tbody tr:nth-child(odd) {
			background: @grayLighter;
		}
	}

	&.hovered {
		tbody {
			tr {
				&:hover {
					background-color: rgba(28, 183, 236, 0.10);
				}
			}
		}
	}

	&.cell-hovered {
		tbody {
			td {
				&:hover {
					background-color: rgba(28, 183, 236, 0.30);
				}
			}
		}
	}

	&.border {
		border: 1px @grayLight solid;
	}

	&.bordered {
		th, td {
			border: 1px @grayLight solid;
		}

		thead {
			tr:first-child {
				th, td {
					border-top: none;

					&:first-child {
						border-left: none;
					}
					&:last-child {
						border-right: none;
					}
				}
			}
		}

		tbody {
			tr {

				&:first-child {
					td {
						border-top: none;
					}
				}

				td {
					&:first-child {
						border-left: none;
					}
					&:last-child {
						border-right: none;
					}
				}

				&:last-child {
					td {
						border-bottom: none;
					}
				}
			}
		}
	}

	.condensed {
		th, td {padding: .3125rem;}
	}
	.super-condensed {
		th, td {padding: .125rem;}
	}
}

.table {
    tbody tr {
        &.error {
            background-color: @red;
            color: @white;
            &:hover {
                background-color: @lightRed;
            }
        }
        &.warning {
            background-color: @orange;
            color: @white;
            &:hover {
                background-color: @lightOrange;
            }
        }
        &.success {
            background-color: @green;
            color: @white;
            &:hover {
                background-color: @lightGreen;
            }
        }
        &.info {
            background-color: @cyan;
            color: @white;
            &:hover {
                background-color: @lightCyan;
            }
        }
    }
}