@gravityforms/components/css/admin/table.css

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

.gform-admin {

	.gform-table {
		border: 0.0625rem solid var(--gform-admin-color-white-lilac);
		border-collapse: collapse;
		box-sizing: border-box;
		font-family: var(--gform-admin-font-family-base);
		font-size: var(--gform-admin-font-size-base-old);
		max-width: 100%;
		text-align: left;
		width: 100%;

		* {
			box-sizing: border-box;
		}

		tr {
			border-bottom: 0.0625rem solid var(--gform-admin-color-white-lilac);
		}

		th {
			font-weight: var(--gform-common-font-weight-medium);
			padding: 0.8125rem 1.125rem;
		}

		td {
			padding: 1.25rem 1.125rem;
		}

		p {
			font-size: var(--gform-admin-font-size-base-old);
			margin: 0;
		}
	}

	.gform-table--responsive {

		thead {

			@media (--gform-admin-viewport-rg-960-down) {
				border: 0;
				clip: rect(1px, 1px, 1px, 1px);
				height: 1px;
				overflow: hidden;
				padding: 0;
				position: absolute;
				width: 1px;
			}
		}

		tbody,
		tr,
		th,
		td {

			@media (--gform-admin-viewport-rg-960-down) {
				display: block;
				padding: 0;
				white-space: normal;
			}
		}

		tr {

			@media (--gform-admin-viewport-rg-960-down) {
				border-bottom: 0;
			}
		}

		td,
		th {

			@media (--gform-admin-viewport-rg-960-down) {
				border-bottom: 1px solid var(--gform-admin-color-white-lilac);
				overflow: hidden;
				padding: 1.25rem 1.125rem;
				position: relative;
				vertical-align: top;
				white-space: normal;
				width: 100%;
			}
		}

		td {

			p {

				@media (--gform-admin-viewport-rg-960-down) {
					padding-left: 1.125rem;
				}
			}

			&[data-header] {

				&::before {

					@media (--gform-admin-viewport-rg-960-down) {
						content: attr(data-header);
						display: block;
						float: left;
						font-weight: var(--gform-common-font-weight-medium);
						width: 50%;
					}
				}

				> * {

					@media (--gform-admin-viewport-rg-960-down) {
						clear: right;
						display: block;
						float: right;
						width: 50%;
					}
				}

				&::after {

					@media (--gform-admin-viewport-rg-960-down) {
						border-right: 1px solid var(--gform-admin-color-white-lilac);
						content: "";
						display: block;
						left: 0;
						padding-bottom: 200%;
						position: absolute;
						top: 0;
						width: 50%;
					}
				}
			}
		}
	}

	.gform-table--fixed {
		table-layout: fixed;
	}

	.gform-table--no-outer-border {
		border: 0;

		tbody {

			tr:last-child {
				border-bottom: 0;

				td:last-child {
					border-bottom: 0;
				}
			}
		}
	}
}

html[dir="rtl"] .gform-admin .gform-table {
	text-align: right;
}