studiokit-scaffolding-js 7.1.0 → 7.1.2-alpha.1

package/lib/css/components/_tables.css

@@ -1,497 +1,504 @@
-:root {
-	--cell-padding-horiz: 1rem;
-}
-
-/*  table style overrides  */
-
-td,
-.MuiTableCell-body {
-	padding: 0.9rem var(--cell-padding-horiz);
-	font-size: 1rem;
-	border-bottom: 2px solid var(--color-light-grey);
-	width: 130px;
-
-	& button {
-		overflow: hidden;
-	}
-}
-
-th,
-.MuiTableCell-head {
-	background-color: var(--color-off-white);
-	border-bottom: 1px solid var(--color-light-grey);
-	color: var(--color-dark-grey);
-	font-size: 0.9rem;
-	padding: 0.75rem var(--cell-padding-horiz);
-	text-transform: uppercase;
-	font-weight: var(--font-weight-bold);
-	height: auto;
-	width: 130px;
-
-	&.header-sort {
-		padding: 0;
-		white-space: pre-wrap;
-
-		& button {
-			display: block;
-			padding: 0.75rem 18px;
-			height: auto;
-			width: 100%;
-			margin: 0;
-			line-height: 1.4rem;
-
-			& span {
-				text-transform: uppercase;
-				padding: 0 8px 0 0;
-				font-size: 0.9rem;
-			}
-
-			& svg {
-				margin: -4px 0 0;
-				vertical-align: middle;
-			}
-		}
-	}
-}
-
-.MuiTableCell-footer {
-	font-size: 1rem;
-}
-
-/**
- * react table
- */
-
-.table-container {
-	width: 100%;
-	overflow-x: auto;
-}
-
-.table-search-container {
-	padding: 0 !important;
-	text-align: left;
-	background: white;
-	border: 1px solid rgb(0 0 0 / 10%);
-	border-radius: 3px;
-	width: 100%;
-
-	& .MuiSvgIcon-root {
-		margin-top: 0.55rem;
-	}
-
-	& .table-search-input {
-		text-align: left;
-		outline: none !important;
-		border: none !important;
-		width: 100%;
-	}
-
-	& input[type="search"] {
-		-webkit-appearance: none;
-	}
-
-	& input[type="search"]::-webkit-search-cancel-button {
-		-webkit-appearance: searchfield-cancel-button;
-	}
-}
-
-.ReactTable {
-	& .rt-thead .rt-tr {
-		background-color: var(--color-off-white);
-		border-bottom: 1px solid var(--color-light-grey);
-	}
-
-	& .rt-th {
-		font-weight: var(--font-weight-bold);
-		color: var(--color-dark-grey);
-		font-size: 0.9rem;
-		text-transform: uppercase;
-	}
-
-	& .rt-th > div {
-		padding: 0.75rem var(--cell-padding-horiz);
-	}
-
-	& .rt-td {
-		padding: var(--cell-padding-horiz);
-		font-size: 1rem;
-	}
-
-	& .rt-td.overflow-visible {
-		overflow: visible;
-	}
-
-	& .pagination-top,
-	& .pagination-bottom {
-		background-color: var(--color-off-white);
-
-		& .-pagination {
-			padding: 0.5rem 0.6rem;
-			border-top: none;
-		}
-	}
-
-	& .pagination-top .-pagination {
-		border-bottom: 1px solid var(--color-light-grey);
-	}
-
-	& .pagination-bottom .-pagination {
-		border-top: 1px solid var(--color-light-grey);
-	}
-
-	& .-pagination .-previous,
-	& .-pagination .-next {
-		& .MuiButton-text {
-			background-color: var(--color-white);
-			border: 1px solid var(--color-light-grey);
-
-			&[disabled] {
-				background-color: var(--color-light-grey);
-			}
-
-			& .MuiButton-label .MuiSvgIcon-root {
-				margin: 0;
-			}
-		}
-	}
-
-	/* duplicate .form-control styles */
-	& .-pagination input,
-	.-pagination select {
-		display: block;
-		width: 100%;
-		height: calc(1.5em + 0.75rem + 2px);
-		font-size: 1rem;
-		font-weight: 400;
-		line-height: 1.5;
-		color: #495057;
-		background-color: #fff;
-		background-clip: padding-box;
-		border: 1px solid #ced4da;
-		border-radius: 0.25rem;
-		transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-		font-family: var(--text-font-stack);
-		padding: 0.5rem;
-		border-color: var(--color-light-grey);
-		box-shadow: none;
-
-		&:focus {
-			border-color: #80bdff;
-			outline: 0;
-			-webkit-box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
-			box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
-		}
-
-		&::placeholder {
-			color: #6c757d;
-			opacity: 1;
-		}
-	}
-
-	& .-pagination .-pageSizeOptions.select {
-		padding: 0.375rem 0.75rem;
-	}
-
-	&.single-row-action-button {
-		& .rt-tbody {
-			padding-bottom: 108px;
-		}
-	}
-
-	& .rt-noData {
-		top: 128px;
-		color: var(--color-dark-grey);
-		font-weight: bold;
-		border-width: 0.1rem;
-		border-style: solid;
-		border-radius: 0.25rem;
-		background-color: color-mod(var(--color-accent-blue) lightness(98%)) !important;
-		border-color: color-mod(var(--color-accent-blue) lightness(69%)) !important;
-		padding: 1rem;
-		width: 100%;
-		text-align: center;
-	}
-
-	& .dropdown {
-		position: static;
-	}
-}
-
-.striped-table tr:nth-child(even) {
-	background-color: var(--color-light-blue) !important;
-}
-
-.ReactTable.-striped {
-	& .rt-tr.-odd {
-		background: var(--color-off-white) !important;
-	}
-}
-
-/**
- * react-super-responsive-table
- */
-
-/* RESET STYLES at the package's breakpoint */
-
-@media screen and (max-width: 40em) {
-	.responsiveTable table {
-		display: table;
-	}
-
-	.responsiveTable thead {
-		display: table-header-group;
-	}
-
-	.responsiveTable tbody {
-		display: table-row-group;
-	}
-
-	.responsiveTable th,
-	.responsiveTable td {
-		display: table-cell;
-	}
-
-	.responsiveTable tr {
-		display: table-row;
-	}
-
-	.responsiveTable thead tr {
-		position: static;
-		top: auto;
-		left: auto;
-		border-bottom: inherit;
-	}
-
-	.responsiveTable tbody tr {
-		border: inherit;
-		padding: 0;
-	}
-
-	.responsiveTable td.pivoted {
-		border: inherit !important;
-		position: static;
-		padding-left: var(--cell-padding-horiz) !important;
-		text-align: inherit !important;
-		white-space: normal;
-		overflow-wrap: normal;
-	}
-
-	.responsiveTable td .tdBefore {
-		display: none;
-	}
-}
-
-/**
-* SET STYLES to use our "lt-sm" breakpoint
-* COPIED DIRECTLY from /node_modules/react-super-responsive-table/dist/SuperResponsiveTableStyle.css
-*/
-@media (--lt-sm) {
-	.responsiveTable table,
-	.responsiveTable thead,
-	.responsiveTable tbody,
-	.responsiveTable th,
-	.responsiveTable td,
-	.responsiveTable tr {
-		display: block;
-	}
-
-	.responsiveTable thead tr {
-		position: absolute;
-		top: -9999px;
-		left: -9999px;
-		border-bottom: 2px solid #333;
-	}
-
-	.responsiveTable tbody tr {
-		border: 1px solid #000;
-		padding: 0.25em;
-	}
-
-	.responsiveTable td.pivoted {
-		/* Behave like a "row" */
-		border: none !important;
-		position: relative;
-		padding-left: calc(50% + 10px) !important;
-		text-align: left !important;
-		white-space: pre-wrap;
-		overflow-wrap: break-word;
-	}
-
-	.responsiveTable td .tdBefore {
-		/* Now like a table header */
-		position: absolute;
-		display: block;
-
-		/* Top/left values mimic padding */
-		left: 1rem;
-		width: calc(50% - 20px);
-		white-space: pre-wrap;
-		overflow-wrap: break-word;
-		text-align: left !important;
-		font-weight: 600;
-	}
-}
-
-/**
- * SET STYLES to use our "lt-md" breakpoint
- * COPIED DIRECTLY from /node_modules/react-super-responsive-table/dist/SuperResponsiveTableStyle.css
- */
-@media (--lt-md) {
-	.responsiveTable-lt-md table,
-	.responsiveTable-lt-md thead,
-	.responsiveTable-lt-md tbody,
-	.responsiveTable-lt-md th,
-	.responsiveTable-lt-md td,
-	.responsiveTable-lt-md tr {
-		display: block;
-	}
-
-	.responsiveTable-lt-md thead tr {
-		position: absolute;
-		top: -9999px;
-		left: -9999px;
-		border-bottom: 2px solid #333;
-	}
-
-	.responsiveTable-lt-md tbody tr {
-		border: 1px solid #000;
-		padding: 0.25em;
-	}
-
-	.responsiveTable-lt-md td.pivoted {
-		/* Behave like a "row" */
-		border: none !important;
-		position: relative;
-		padding-left: calc(50% + 10px) !important;
-		text-align: left !important;
-		white-space: pre-wrap;
-		overflow-wrap: break-word;
-	}
-
-	.responsiveTable-lt-md td .tdBefore {
-		/* Now like a table header */
-		position: absolute;
-		display: block;
-
-		/* Top/left values mimic padding */
-		left: 1rem;
-		width: calc(50% - 20px);
-		white-space: pre-wrap;
-		overflow-wrap: break-word;
-		text-align: left !important;
-		font-weight: 600;
-	}
-}
-
-/* CUSTOM OVERRIDES for react-super-responsive-table */
-
-.responsiveTable {
-	margin-top: 1.2rem;
-
-	& th {
-		font-size: 0.94rem;
-		text-transform: uppercase;
-		border: none;
-	}
-
-	& td.pivoted {
-		font-size: 0.96rem;
-		width: auto;
-		border-bottom: 1px solid var(--color-light-grey) !important;
-	}
-
-	/* at normal widths, show the icon button and hide the text button */
-	& .action-list-icon-button {
-		display: inherit;
-	}
-
-	& .action-list-text-button {
-		display: none;
-	}
-}
-
-/* default: table is responsive at xs widths and below */
-@media (--lt-sm) {
-	.responsiveTable {
-		& td {
-			width: 100%;
-
-			& .tdBefore {
-				width: 100%;
-				position: static !important;
-			}
-		}
-
-		& tbody > tr {
-			background-color: color-mod(var(--color-off-white) l(99%));
-			border-color: var(--color-light-grey) !important;
-			margin-bottom: 1.5rem;
-			border-width: 0.15rem;
-
-			& > td.pivoted {
-				padding-left: var(--cell-padding-horiz) !important;
-
-				&:last-child {
-					border-bottom: none !important;
-				}
-			}
-
-			&:last-child {
-				margin-bottom: 0;
-			}
-		}
-
-		/* hide the icon button and show the text button if there is no default action displayed */
-		& .action-list-icon-button:not(.with-default-action) {
-			display: none;
-		}
-
-		& .action-list-text-button:not(.with-default-action) {
-			display: inherit;
-		}
-	}
-}
-
-/*
- * table is responsive at small widths and below
- */
-@media (--lt-md) {
-	.responsiveTable-lt-md {
-		& td {
-			width: 100%;
-
-			& .tdBefore {
-				width: 100%;
-				position: static !important;
-			}
-		}
-
-		& tbody > tr {
-			background-color: color-mod(var(--color-off-white) l(99%));
-			border-color: var(--color-light-grey) !important;
-			margin-bottom: 1.5rem;
-			border-width: 0.15rem;
-
-			& > td.pivoted {
-				padding-left: var(--cell-padding-horiz) !important;
-
-				&:last-child {
-					border-bottom: none !important;
-				}
-			}
-
-			&:last-child {
-				margin-bottom: 0;
-			}
-		}
-
-		/* hide the icon button and show the text button if there is no default action displayed */
-		& .action-list-icon-button:not(.with-default-action) {
-			display: none;
-		}
-
-		& .action-list-text-button:not(.with-default-action) {
-			display: inherit;
-		}
-	}
-}
+:root {
+	--cell-padding-horiz: 1rem;
+}
+
+/*  table style overrides  */
+
+td,
+.MuiTableCell-body {
+	padding: 0.9rem var(--cell-padding-horiz);
+	font-size: 1rem;
+	border-bottom: 2px solid var(--color-light-grey);
+	width: 130px;
+
+	& button {
+		overflow: hidden;
+	}
+}
+
+th,
+.MuiTableCell-head {
+	background-color: var(--color-off-white);
+	border-bottom: 1px solid var(--color-light-grey);
+	color: var(--color-dark-grey);
+	font-size: 0.9rem;
+	padding: 0.75rem var(--cell-padding-horiz);
+	text-transform: uppercase;
+	font-weight: var(--font-weight-bold);
+	height: auto;
+	width: 130px;
+
+	&.header-sort {
+		padding: 0;
+		white-space: pre-wrap;
+
+		& button {
+			display: block;
+			padding: 0.75rem 18px;
+			height: auto;
+			width: 100%;
+			margin: 0;
+			line-height: 1.4rem;
+
+			& span {
+				text-transform: uppercase;
+				padding: 0 8px 0 0;
+				font-size: 0.9rem;
+			}
+
+			& svg {
+				margin: -4px 0 0;
+				vertical-align: middle;
+			}
+		}
+	}
+}
+
+.MuiTableCell-footer {
+	font-size: 1rem;
+}
+
+/**
+ * react table
+ */
+
+.table-container {
+	width: 100%;
+	overflow-x: auto;
+}
+
+.table-search-container {
+	padding: 0 !important;
+	text-align: left;
+	background: white;
+	width: 100%;
+	position: relative;
+
+	& .MuiSvgIcon-root {
+		margin-top: 0.55rem;
+		position: absolute;
+		left: 0;
+	}
+
+	& .table-search-input {
+		text-align: left;
+		width: 100%;
+		padding-left: 1.5rem !important;
+	}
+
+	& input[type="search"] {
+		-webkit-appearance: none;
+	}
+
+	& input[type="search"]::-webkit-search-cancel-button {
+		-webkit-appearance: searchfield-cancel-button;
+	}
+}
+
+.ReactTable {
+	& .rt-thead .rt-tr {
+		background-color: var(--color-off-white);
+		border-bottom: 1px solid var(--color-light-grey);
+	}
+
+	& .rt-th {
+		font-weight: var(--font-weight-bold);
+		color: var(--color-dark-grey);
+		font-size: 0.9rem;
+		text-transform: uppercase;
+	}
+
+	& .rt-th > div {
+		padding: 0.75rem var(--cell-padding-horiz);
+	}
+
+	& .rt-thead.-filters .form-control {
+		border-color: var(--color-medium-dark-grey);
+
+		&:focus {
+			border-color: var(--color-focus-border);
+		}
+	}
+
+	& .rt-td {
+		padding: var(--cell-padding-horiz);
+		font-size: 1rem;
+	}
+
+	& .rt-td.overflow-visible {
+		overflow: visible;
+	}
+
+	& .pagination-top,
+	& .pagination-bottom {
+		background-color: var(--color-off-white);
+
+		& .-pagination {
+			padding: 0.5rem 0.6rem;
+			border-top: none;
+		}
+	}
+
+	& .pagination-top .-pagination {
+		border-bottom: 1px solid var(--color-light-grey);
+	}
+
+	& .pagination-bottom .-pagination {
+		border-top: 1px solid var(--color-light-grey);
+	}
+
+	& .-pagination .-previous,
+	& .-pagination .-next {
+		& .MuiButton-text {
+			background-color: var(--color-white);
+			border: 1px solid var(--color-light-grey);
+
+			&[disabled] {
+				background-color: var(--color-light-grey);
+			}
+
+			& .MuiButton-label .MuiSvgIcon-root {
+				margin: 0;
+			}
+		}
+	}
+
+	/* duplicate .form-control styles */
+	& .-pagination input,
+	.-pagination select {
+		display: block;
+		width: 100%;
+		height: calc(1.5em + 0.75rem + 2px);
+		font-size: 1rem;
+		font-weight: 400;
+		line-height: 1.5;
+		color: #495057;
+		background-color: #fff;
+		background-clip: padding-box;
+		border: 1px solid #ced4da;
+		border-radius: 0.25rem;
+		transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+		font-family: var(--text-font-stack);
+		padding: 0.5rem;
+		border-color: var(--color-light-grey);
+		box-shadow: none;
+
+		&:focus {
+			border-color: var(--color-focus-border);
+			outline: 0;
+			box-shadow: var(--box-shadow-focus);
+		}
+
+		&::placeholder {
+			color: #6c757d;
+			opacity: 1;
+		}
+	}
+
+	& .-pagination .-pageSizeOptions.select {
+		padding: 0.375rem 0.75rem;
+	}
+
+	&.single-row-action-button {
+		& .rt-tbody {
+			padding-bottom: 108px;
+		}
+	}
+
+	& .rt-noData {
+		top: 128px;
+		color: var(--color-dark-grey);
+		font-weight: bold;
+		border-width: 0.1rem;
+		border-style: solid;
+		border-radius: 0.25rem;
+		background-color: color-mod(var(--color-accent-blue) lightness(98%)) !important;
+		border-color: color-mod(var(--color-accent-blue) lightness(69%)) !important;
+		padding: 1rem;
+		width: 100%;
+		text-align: center;
+	}
+
+	& .dropdown {
+		position: static;
+	}
+}
+
+.striped-table tr:nth-child(even) {
+	background-color: var(--color-light-blue) !important;
+}
+
+.ReactTable.-striped {
+	& .rt-tr.-odd {
+		background: var(--color-off-white) !important;
+	}
+}
+
+/**
+ * react-super-responsive-table
+ */
+
+/* RESET STYLES at the package's breakpoint */
+
+@media screen and (max-width: 40em) {
+	.responsiveTable table {
+		display: table;
+	}
+
+	.responsiveTable thead {
+		display: table-header-group;
+	}
+
+	.responsiveTable tbody {
+		display: table-row-group;
+	}
+
+	.responsiveTable th,
+	.responsiveTable td {
+		display: table-cell;
+	}
+
+	.responsiveTable tr {
+		display: table-row;
+	}
+
+	.responsiveTable thead tr {
+		position: static;
+		top: auto;
+		left: auto;
+		border-bottom: inherit;
+	}
+
+	.responsiveTable tbody tr {
+		border: inherit;
+		padding: 0;
+	}
+
+	.responsiveTable td.pivoted {
+		border: inherit !important;
+		position: static;
+		padding-left: var(--cell-padding-horiz) !important;
+		text-align: inherit !important;
+		white-space: normal;
+		overflow-wrap: normal;
+	}
+
+	.responsiveTable td .tdBefore {
+		display: none;
+	}
+}
+
+/**
+* SET STYLES to use our "lt-sm" breakpoint
+* COPIED DIRECTLY from /node_modules/react-super-responsive-table/dist/SuperResponsiveTableStyle.css
+*/
+@media (--lt-sm) {
+	.responsiveTable table,
+	.responsiveTable thead,
+	.responsiveTable tbody,
+	.responsiveTable th,
+	.responsiveTable td,
+	.responsiveTable tr {
+		display: block;
+	}
+
+	.responsiveTable thead tr {
+		position: absolute;
+		top: -9999px;
+		left: -9999px;
+		border-bottom: 2px solid #333;
+	}
+
+	.responsiveTable tbody tr {
+		border: 1px solid #000;
+		padding: 0.25em;
+	}
+
+	.responsiveTable td.pivoted {
+		/* Behave like a "row" */
+		border: none !important;
+		position: relative;
+		padding-left: calc(50% + 10px) !important;
+		text-align: left !important;
+		white-space: pre-wrap;
+		overflow-wrap: break-word;
+	}
+
+	.responsiveTable td .tdBefore {
+		/* Now like a table header */
+		position: absolute;
+		display: block;
+
+		/* Top/left values mimic padding */
+		left: 1rem;
+		width: calc(50% - 20px);
+		white-space: pre-wrap;
+		overflow-wrap: break-word;
+		text-align: left !important;
+		font-weight: 600;
+	}
+}
+
+/**
+ * SET STYLES to use our "lt-md" breakpoint
+ * COPIED DIRECTLY from /node_modules/react-super-responsive-table/dist/SuperResponsiveTableStyle.css
+ */
+@media (--lt-md) {
+	.responsiveTable-lt-md table,
+	.responsiveTable-lt-md thead,
+	.responsiveTable-lt-md tbody,
+	.responsiveTable-lt-md th,
+	.responsiveTable-lt-md td,
+	.responsiveTable-lt-md tr {
+		display: block;
+	}
+
+	.responsiveTable-lt-md thead tr {
+		position: absolute;
+		top: -9999px;
+		left: -9999px;
+		border-bottom: 2px solid #333;
+	}
+
+	.responsiveTable-lt-md tbody tr {
+		border: 1px solid #000;
+		padding: 0.25em;
+	}
+
+	.responsiveTable-lt-md td.pivoted {
+		/* Behave like a "row" */
+		border: none !important;
+		position: relative;
+		padding-left: calc(50% + 10px) !important;
+		text-align: left !important;
+		white-space: pre-wrap;
+		overflow-wrap: break-word;
+	}
+
+	.responsiveTable-lt-md td .tdBefore {
+		/* Now like a table header */
+		position: absolute;
+		display: block;
+
+		/* Top/left values mimic padding */
+		left: 1rem;
+		width: calc(50% - 20px);
+		white-space: pre-wrap;
+		overflow-wrap: break-word;
+		text-align: left !important;
+		font-weight: 600;
+	}
+}
+
+/* CUSTOM OVERRIDES for react-super-responsive-table */
+
+.responsiveTable {
+	margin-top: 1.2rem;
+
+	& th {
+		font-size: 0.94rem;
+		text-transform: uppercase;
+		border: none;
+	}
+
+	& td.pivoted {
+		font-size: 0.96rem;
+		width: auto;
+		border-bottom: 1px solid var(--color-light-grey) !important;
+	}
+
+	/* at normal widths, show the icon button and hide the text button */
+	& .action-list-icon-button {
+		display: inherit;
+	}
+
+	& .action-list-text-button {
+		display: none;
+	}
+}
+
+/* default: table is responsive at xs widths and below */
+@media (--lt-sm) {
+	.responsiveTable {
+		& td {
+			width: 100%;
+
+			& .tdBefore {
+				width: 100%;
+				position: static !important;
+			}
+		}
+
+		& tbody > tr {
+			background-color: color-mod(var(--color-off-white) l(99%));
+			border-color: var(--color-light-grey) !important;
+			margin-bottom: 1.5rem;
+			border-width: 0.15rem;
+
+			& > td.pivoted {
+				padding-left: var(--cell-padding-horiz) !important;
+
+				&:last-child {
+					border-bottom: none !important;
+				}
+			}
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+
+		/* hide the icon button and show the text button if there is no default action displayed */
+		& .action-list-icon-button:not(.with-default-action) {
+			display: none;
+		}
+
+		& .action-list-text-button:not(.with-default-action) {
+			display: inherit;
+		}
+	}
+}
+
+/*
+ * table is responsive at small widths and below
+ */
+@media (--lt-md) {
+	.responsiveTable-lt-md {
+		& td {
+			width: 100%;
+
+			& .tdBefore {
+				width: 100%;
+				position: static !important;
+			}
+		}
+
+		& tbody > tr {
+			background-color: color-mod(var(--color-off-white) l(99%));
+			border-color: var(--color-light-grey) !important;
+			margin-bottom: 1.5rem;
+			border-width: 0.15rem;
+
+			& > td.pivoted {
+				padding-left: var(--cell-padding-horiz) !important;
+
+				&:last-child {
+					border-bottom: none !important;
+				}
+			}
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+
+		/* hide the icon button and show the text button if there is no default action displayed */
+		& .action-list-icon-button:not(.with-default-action) {
+			display: none;
+		}
+
+		& .action-list-text-button:not(.with-default-action) {
+			display: inherit;
+		}
+	}
+}