@vgip/meta-ui 2.0.0 → 2.1.1

package/vendor/volta3/scss/components/_tables.scss

@@ -0,0 +1,739 @@
+@use "../lib/mediaqueries";
+@use "../lib/variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+// Basic Tables
+
+%Vlt-table-cell-hover {
+	@media #{mediaqueries.$L-plus} {
+		// Limiting to desktop because on mobile it's not good
+		// Declaring this in the td because otherwise in Firefox the background covers the borders
+		background-color: variables.$grey-lighter;
+	}
+}
+
+.Vlt-table {
+	/* TEMPORARILY REMOVED DUE TO A BUG IN CHROME FOR LINUX
+	background: linear-gradient(90deg, rgba($black, 0.1) 0%, transparent 30%), linear-gradient(90deg, transparent 70%, rgba($black, 0.1) 100%) 100% 0;
+	background-color: $white;
+	background-repeat: no-repeat;
+	background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
+	*/
+	display: flex; // Takes care of an artifact that appears on certain screen sizes due to the shadow effect.
+	margin-bottom: variables.$unit1;
+	overflow-x: auto;
+	overflow-y: hidden;
+	position: relative;
+	width: 100%;
+	z-index: 1;
+
+	// Standard tables
+	table {
+		@extend %Vlt-table-inner;
+
+		tr {
+			position: relative;
+		}
+
+		thead {
+			th {
+				@extend %Vlt-table-header-cell;
+			}
+		}
+
+		td,
+		th {
+			@extend %Vlt-table-cell;
+		}
+
+		tbody {
+			tr {
+				&:hover {
+					> td {
+						@extend %Vlt-table-cell-hover;
+					}
+				}
+			}
+		}
+	}
+
+	// Div tables
+	&__inner {
+		@extend %Vlt-table-inner;
+	}
+
+	&__header {
+		.Vlt-table__cell {
+			@extend %Vlt-table-header-cell;
+			@extend %Vlt-table-cell;
+		}
+	}
+
+	&__cell {
+		@extend %Vlt-table-cell;
+		display: table-cell;
+	}
+
+	&__footer {
+		.Vlt-table__cell {
+			@extend %Vlt-table-data-footer-cell;
+		}
+	}
+
+	& &__row {
+		&:hover {
+			.Vlt-table__cell {
+				@extend %Vlt-table-cell-hover;
+			}
+		}
+
+		&--noline {
+			.Vlt-table__cell,
+			> td {
+				border-bottom: 0;
+			}
+		}
+
+		&--nohighlight {
+			&:hover {
+				.Vlt-table__cell,
+				> td {
+					background-color: transparent;
+				}
+			}
+		}
+	}
+
+	// All tables
+
+	&--tall {
+		.Vlt-table__cell {
+			@extend %Vlt-table-tall-padding;
+		}
+
+		table {
+			td {
+				@extend %Vlt-table-tall-padding;
+			}
+		}
+	}
+
+	&--short {
+		.Vlt-table__cell {
+			@extend %Vlt-table-short-padding;
+		}
+
+		table {
+			td {
+				@extend %Vlt-table-short-padding;
+			}
+		}
+	}
+
+	&--nowrap {
+		td,
+		th,
+		.Vlt-table__cell {
+			white-space: nowrap;
+		}
+	}
+
+	&--fixed {
+		table {
+			@media #{mediaqueries.$M-plus} {
+				table-layout: fixed;
+			}
+		}
+	}
+
+	&--nohighlight {
+
+		.Vlt-table__row {
+			&:hover {
+				.Vlt-table__cell {
+					background-color: transparent;
+				}
+			}
+		}
+
+		table {
+			tbody {
+				tr {
+					&:hover {
+						> td {
+							background-color: transparent;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	&--bordered {
+		border-bottom: 1px solid variables.$grey-light;
+		border-left: 1px solid variables.$grey-light;
+		border-radius: 2px 2px variables.$unit0 variables.$unit0;
+		border-right: 1px solid variables.$grey-light;
+		border-top: 1px solid variables.$grey-light;
+	}
+
+	// To deprecate in v2.0
+	table tbody &__cell,
+	table tfoot &__cell {
+		&--number {
+			text-align: right;
+		}
+
+		&--neg {
+			color: variables.$red;
+		}
+
+		&--pos {
+			color: variables.$green;
+		}
+
+		&--avg {
+			color: variables.$yellow;
+		}
+
+		&--nowrap {
+			white-space: nowrap;
+		}
+	}
+
+	// To deprecate in v2.0
+	.Vlt-btn {
+		@extend %Vlt-btn--small !optional;
+		@extend %Vlt-btn--app !optional;
+		margin-bottom: -(variables.$unit0);
+		margin-top: -(variables.$unit0);
+	}
+
+	&__pagination {
+		padding: variables.$unit1;
+		text-align: center;
+
+		ul {
+			display: inline-flex;
+			flex-flow: row wrap;
+
+			li {
+				border-radius: variables.$unit1;
+				font-size: 1.2rem;
+				line-height: 2.4rem;
+				margin-left: variables.$unit0;
+				min-width: 24px;
+				text-align: center;
+
+				&:first-child {
+					margin-left: 0;
+				}
+
+				a {
+					border-radius: variables.$unit1;
+					color: variables.$black;
+					line-height: 1.6rem;
+					padding: variables.$unit0;
+
+					&,
+					&:visited {
+						color: variables.$black;
+						display: block;
+						height: 100%;
+						width: 100%;
+
+						&:hover {
+							background: rgba(variables.$black, 0.12);
+							color: variables.$black;
+							font-weight: 600;
+							text-decoration: none;
+						}
+					}
+				}
+
+				&.Vlt-table__pagination__prev,
+				&.Vlt-table__pagination__next {
+					a {
+						&:hover {
+							background: none;
+							color: variables.$purple-dark;
+							font-weight: 400;
+						}
+					}
+				}
+
+				&.Vlt-table__pagination__prev {
+					margin-right: variables.$unit1;
+				}
+
+				&.Vlt-table__pagination__next {
+					margin-left: 12px;
+				}
+			}
+		}
+
+		&__current {
+			background: rgba(variables.$black, 0.05);
+			font-weight: 600;
+		}
+	}
+
+	// Mobile stack for traditional tables
+
+	&--mobile-stack,
+	&--mobile-stack.Vlt-table--data {
+		@media #{mediaqueries.$S-only} {
+			background: none;
+
+			table {
+				background: none;
+				display: flex;
+				max-width: 100%;
+				min-width: 100%;
+				overflow: hidden;
+				white-space: nowrap;
+				width: auto;
+
+				thead {
+					display: flex;
+					flex-shrink: 0;
+					min-width: min-content;
+
+					th {
+						border-bottom: 1px solid variables.$grey-light;
+						border-top: 0;
+						font-size: 1.5rem;
+						height: auto;
+						min-height: 3.6rem;
+						padding: 13px 16px 10px;
+					}
+				}
+
+				tr {
+					display: flex;
+					flex-flow: column;
+					flex-shrink: 0;
+					min-width: min-content;
+				}
+
+				tbody {
+					background: linear-gradient(90deg, rgba(variables.$black, 0.1) 0%, transparent 30%), linear-gradient(90deg, transparent 70%, rgba(variables.$black, 0.1) 100%) 100% 0;
+					background-repeat: no-repeat;
+					background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
+					display: flex;
+					overflow-x: auto;
+					overflow-y: hidden;
+					position: relative;
+
+					tr {
+						&:first-child {
+							background: linear-gradient(90deg, variables.$white 20px, transparent 20px);
+						}
+
+						&:last-child {
+							background: linear-gradient(90deg, transparent calc(100% - 20px), variables.$white calc(100% - 20px)) 100% 0;
+						}
+					}
+				}
+
+				td,
+				th {
+					border-left: 0;
+					border-right: 0;
+					display: block;
+					white-space: nowrap;
+				}
+
+				.Vlt-table__cell--number {
+					text-align: left;
+				}
+
+				tfoot {
+					display: none;
+				}
+			}
+
+			&:not(.Vlt-table--data) {
+				table {
+					thead th {
+						border-right: 1px solid variables.$grey-light;
+						padding-left: 0;
+						padding-right: variables.$unit2;
+					}
+
+					tbody td {
+						padding-left: variables.$unit2;
+						padding-right: variables.$unit2;
+					}
+				}
+			}
+		}
+	}
+
+	// Sortable columns styles for all tables - to be deprecated as we changed plugin
+
+	&__col {
+		&--sortable {
+			cursor: pointer;
+			padding-left: 16px;
+			position: relative;
+
+			&:before {
+				background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%206%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2.37873%200.265338L0%202.71856L1.24253%204L3%202.1875L4.75747%204L6%202.71856L3.62127%200.265338C3.45648%200.0954422%203.23301%200%203%200C2.76699%200%202.54352%200.0954422%202.37873%200.265338V0.265338Z%22%2F%3E%0A%3Cpath%20d%3D%22M3%207.8125L1.24253%206L0%207.28144L2.37873%209.73466C2.54352%209.90456%202.76699%2010%203%2010C3.23301%2010%203.45648%209.90456%203.62127%209.73466L6%207.28144L4.75747%206L3%207.8125Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+				background-position: center center;
+				background-repeat: no-repeat;
+				background-size: contain;
+				content: '';
+				display: inline-block;
+				height: 10px;
+				left: 5px;
+				margin-top: -5px;
+				opacity: 0.6;
+				position: absolute;
+				top: 50%;
+				width: 6px;
+			}
+		}
+
+		&--descending,
+		&--ascending {
+			color: variables.$black;
+			font-weight: 600;
+		}
+
+		&--descending {
+			&:before {
+				background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%206%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M3%207.8125L1.24253%206L0%207.28144L2.37873%209.73466C2.54352%209.90456%202.76699%2010%203%2010C3.23301%2010%203.45648%209.90456%203.62127%209.73466L6%207.28144L4.75747%206L3%207.8125Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+				background-position: center center;
+				background-repeat: no-repeat;
+				background-size: contain;
+			}
+		}
+
+		&--ascending {
+			&:before {
+				background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%206%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2.37873%200.265338L0%202.71856L1.24253%204L3%202.1875L4.75747%204L6%202.71856L3.62127%200.265338C3.45648%200.0954422%203.23301%200%203%200C2.76699%200%202.54352%200.0954422%202.37873%200.265338Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+				background-position: center center;
+				background-repeat: no-repeat;
+				background-size: contain;
+			}
+		}
+	}
+
+	// Hover buttons
+
+	td:not(.Vlt-btn-group) {
+		.Vlt-btn + .Vlt-btn {
+			margin-left: variables.$unit0;
+		}
+	}
+
+	td.Vlt-btn-group {
+		min-height: 0;
+	}
+
+	tfoot {
+		td {
+			@extend %Vlt-table-data-footer-cell;
+		}
+	}
+
+	// Sortable style with sortable plugin (no jQuery)
+
+	&[data-sortable] {
+		th:not([data-sortable='false']) {
+			cursor: pointer;
+			padding-left: 16px;
+			position: relative;
+			user-select: none;
+
+			&:before {
+				background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%206%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2.37873%200.265338L0%202.71856L1.24253%204L3%202.1875L4.75747%204L6%202.71856L3.62127%200.265338C3.45648%200.0954422%203.23301%200%203%200C2.76699%200%202.54352%200.0954422%202.37873%200.265338V0.265338Z%22%2F%3E%0A%3Cpath%20d%3D%22M3%207.8125L1.24253%206L0%207.28144L2.37873%209.73466C2.54352%209.90456%202.76699%2010%203%2010C3.23301%2010%203.45648%209.90456%203.62127%209.73466L6%207.28144L4.75747%206L3%207.8125Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+				background-position: center center;
+				background-repeat: no-repeat;
+				background-size: contain;
+				content: '';
+				display: inline-block;
+				height: 10px;
+				left: 5px;
+				margin-top: -4px;
+				opacity: 0.6;
+				position: absolute;
+				top: 50%;
+				width: 6px;
+			}
+		}
+
+		th[data-sorted='true'] {
+			color: variables.$black;
+			font-weight: 600;
+		}
+
+		th[data-sorted-direction='descending'] {
+			&:before {
+				background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%206%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M3%207.8125L1.24253%206L0%207.28144L2.37873%209.73466C2.54352%209.90456%202.76699%2010%203%2010C3.23301%2010%203.45648%209.90456%203.62127%209.73466L6%207.28144L4.75747%206L3%207.8125Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+				background-position: center center;
+				background-repeat: no-repeat;
+				background-size: contain;
+				opacity: 1;
+			}
+		}
+
+		th[data-sorted-direction='ascending'] {
+			&:before {
+				background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%206%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2.37873%200.265338L0%202.71856L1.24253%204L3%202.1875L4.75747%204L6%202.71856L3.62127%200.265338C3.45648%200.0954422%203.23301%200%203%200C2.76699%200%202.54352%200.0954422%202.37873%200.265338Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+				background-position: center center;
+				background-repeat: no-repeat;
+				background-size: contain;
+				opacity: 1;
+			}
+		}
+	}
+
+	&--cols {
+		td,
+		th,
+		.Vlt-table__cell {
+			&:not(:first-child) {
+				border-left: 1px solid rgba(variables.$black, 0.1);
+			}
+		}
+	}
+}
+
+// Data Tables
+
+.Vlt-table--data {
+
+	.Vlt-table__inner,
+	table {
+		font-size: 1.4rem;
+		width: 100%;
+	}
+
+	.Vlt-table__header {
+		.Vlt-table__cell {
+			@extend %Vlt-table-data-header-cell;
+		}
+	}
+
+	table {
+		thead {
+			th {
+				@extend %Vlt-table-data-header-cell;
+			}
+		}
+	}
+
+	&--cols {
+		td,
+		th,
+		.Vlt-table__cell {
+			&:not(:first-child) {
+				border-left: 1px solid rgba(variables.$black, 0.1);
+			}
+		}
+	}
+
+	&.Vlt-table--data--dark {
+		table {
+			thead {
+				th {
+					@extend %Vlt-table-data-header-cell-dark;
+				}
+			}
+		}
+
+		.Vlt-table__header {
+			.Vlt-table__cell {
+				@extend %Vlt-table-data-header-cell-dark;
+			}
+		}
+
+		&.Vlt-table--data--cols,
+		&.Vlt-table--cols {
+			thead {
+				th + th {
+					@extend %Vlt-table-data-header-cell-dark-cols;
+				}
+			}
+
+			.Vlt-table__header {
+				.Vlt-table__cell {
+					&:not(:first-child) {
+						@extend %Vlt-table-data-header-cell-dark-cols;
+					}
+				}
+			}
+		}
+	}
+
+	&.Vlt-table--data--teal {
+		table {
+			thead {
+				th {
+					@extend %Vlt-table-data-header-cell-teal;
+				}
+			}
+		}
+
+		.Vlt-table__header {
+			.Vlt-table__cell {
+				@extend %Vlt-table-data-header-cell-teal;
+			}
+		}
+
+		&.Vlt-table--data--cols,
+		&.Vlt-table--cols {
+			thead {
+				th + th {
+					@extend %Vlt-table-data-header-cell-teal-cols;
+				}
+			}
+
+			.Vlt-table__header {
+				.Vlt-table__cell {
+					&:not(:first-child) {
+						@extend %Vlt-table-data-header-cell-teal-cols;
+					}
+				}
+			}
+		}
+
+		&.Vlt-table--bordered {
+			border-bottom: 1px solid variables.$teal-lighter;
+			border-left: 1px solid variables.$teal-lighter;
+			border-right: 1px solid variables.$teal-lighter;
+		}
+	}
+
+	&.Vlt-table--data--orange {
+		table {
+			thead {
+				th {
+					@extend %Vlt-table-data-header-cell-orange;
+				}
+			}
+		}
+
+		.Vlt-table__header {
+			.Vlt-table__cell {
+				@extend %Vlt-table-data-header-cell-orange;
+			}
+		}
+
+		&.Vlt-table--data--cols,
+		&.Vlt-table--cols {
+			thead {
+				th + th {
+					@extend %Vlt-table-data-header-cell-orange-cols;
+				}
+			}
+
+			.Vlt-table__header {
+				.Vlt-table__cell {
+					&:not(:first-child) {
+						@extend %Vlt-table-data-header-cell-orange-cols;
+					}
+				}
+			}
+		}
+
+		&.Vlt-table--bordered {
+			border-bottom: 1px solid variables.$orange-lighter;
+			border-left: 1px solid variables.$orange-lighter;
+			border-right: 1px solid variables.$orange-lighter;
+		}
+	}
+}
+
+%Vlt-table-header-cell {
+	border-bottom: 1px solid variables.$black;
+	color: variables.$black;
+	font-size: 1.4rem;
+	font-weight: 600;
+	padding: 10px variables.$unit2 7px;
+}
+
+%Vlt-table-cell {
+	background-clip: padding-box; // Needed for Firefox, otherwise the background covers the borders
+	border-bottom: 1px solid variables.$grey-light;
+	min-height: 3.6rem;
+	min-width: min-content;
+	padding: 13px variables.$unit2 10px;
+	text-align: left;
+	vertical-align: middle;
+}
+
+%Vlt-table-data-header-cell {
+	background-color: variables.$grey-lighter;
+	border-bottom: 1px solid variables.$black;
+	color: variables.$black;
+	font-size: 1.4rem;
+	height: 3.6rem;
+	padding: 10px variables.$unit2 7px;
+}
+
+%Vlt-table-data-header-cell-dark {
+	background-color: variables.$grey-light;
+	border-bottom-color: variables.$black;
+	color: variables.$black;
+}
+
+%Vlt-table-data-header-cell-dark-cols {
+	border-left-color: variables.$grey;
+}
+
+%Vlt-table-data-cell-teal-cols {
+	border-left-color: variables.$teal-lighter;
+}
+
+%Vlt-table-data-header-cell-teal {
+	background-color: variables.$teal-lighter;
+	border-bottom-color: variables.$teal;
+	color: variables.$teal-text;
+}
+
+%Vlt-table-data-header-cell-teal-cols {
+	border-left-color: variables.$teal-light;
+}
+
+%Vlt-table-data-cell-orange-cols {
+	border-left-color: variables.$orange-lighter;
+}
+
+%Vlt-table-data-header-cell-orange {
+	background-color: variables.$orange-lighter;
+	border-bottom-color: variables.$orange;
+	color: variables.$orange-text;
+}
+
+%Vlt-table-data-header-cell-orange-cols {
+	border-left-color: variables.$orange-light;
+}
+
+%Vlt-table-data-footer-cell {
+	border-bottom: 0;
+	font-weight: bold;
+}
+
+%Vlt-table-inner {
+	/* TEMPORARILY REMOVED DUE TO A BUG IN CHROME FOR LINUX
+	background: linear-gradient(90deg, $white 20px, transparent 20px), linear-gradient(90deg, transparent calc(100% - 20px), $white calc(100% - 20px)) 100% 0;*/
+	font-size: 1.5rem;
+	min-width: min-content;
+	width: 100%;
+}
+
+%Vlt-table-tall-padding {
+	padding-bottom: variables.$unit2;
+	padding-top: variables.$unit2;
+}
+
+%Vlt-table-short-padding {
+	padding-bottom: variables.$unit0;
+	padding-top: variables.$unit0;
+}