@wordpress/dataviews 2.2.0 → 4.0.0

package/src/style.scss

@@ -1,919 +1,11 @@
-.dataviews-wrapper {
-	height: 100%;
-	overflow: auto;
-	box-sizing: border-box;
-	scroll-padding-bottom: $grid-unit-80;
-	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
-	container: dataviews-wrapper / inline-size;
-	display: flex;
-	flex-direction: column;
-}
-
-.dataviews-filters__view-actions {
-	box-sizing: border-box;
-	padding: $grid-unit-20 $grid-unit-60;
-	flex-shrink: 0;
-	position: sticky;
-	left: 0;
-	transition: padding ease-out 0.1s;
-	@include reduce-motion("transition");
-
-	.components-search-control {
-		.components-base-control__field {
-			max-width: 240px;
-		}
-	}
-}
-
-.dataviews-filters__container {
-	.dataviews-filters__reset-button[aria-disabled="true"] {
-		&,
-		&:hover {
-			opacity: 0;
-		}
-
-		&:focus {
-			opacity: 1;
-		}
-	}
-}
-
-.dataviews-filters-button {
-	position: relative;
-}
-
-.dataviews-pagination {
-	position: sticky;
-	bottom: 0;
-	left: 0;
-	background-color: $white;
-	padding: $grid-unit-15 $grid-unit-60;
-	border-top: $border-width solid $gray-100;
-	color: $gray-700;
-	flex-shrink: 0;
-	transition: padding ease-out 0.1s;
-	@include reduce-motion("transition");
-}
-
-.dataviews-pagination__page-selection {
-	font-size: 11px;
-	text-transform: uppercase;
-	font-weight: 500;
-	color: $gray-900;
-}
-
-.dataviews-filters-options {
-	margin: $grid-unit-40 0 $grid-unit-20;
-}
-
-.dataviews-view-table {
-	width: 100%;
-	text-indent: 0;
-	border-color: inherit;
-	border-collapse: collapse;
-	position: relative;
-	color: $gray-700;
-	margin-bottom: auto;
-
-	a {
-		text-decoration: none;
-		color: $gray-900;
-		font-weight: 500;
-	}
-	th {
-		text-align: left;
-		color: $gray-900;
-		font-weight: normal;
-		font-size: $default-font-size;
-	}
-	td,
-	th {
-		padding: $grid-unit-15;
-		white-space: nowrap;
-
-		&[data-field-id="actions"] {
-			text-align: right;
-		}
-
-		&.dataviews-view-table__checkbox-column {
-			padding-right: 0;
-		}
-	}
-	tr {
-		border-bottom: 1px solid $gray-100;
-
-		.dataviews-view-table-header-button {
-			gap: $grid-unit-05;
-		}
-
-		th,
-		td {
-			&:first-child,
-			&:last-child {
-				transition: padding ease-out 0.1s;
-				@include reduce-motion("transition");
-			}
-		}
-
-		td:first-child,
-		th:first-child {
-			padding-left: $grid-unit-60;
-
-			.dataviews-view-table-header-button,
-			.dataviews-view-table-header {
-				margin-left: - #{$grid-unit-10};
-			}
-		}
-
-		td:last-child,
-		th:last-child {
-			padding-right: $grid-unit-60;
-		}
-
-		&:last-child {
-			border-bottom: 0;
-		}
-
-		&.is-hovered {
-			background-color: #f8f8f8;
-		}
-
-		.components-checkbox-control__input.components-checkbox-control__input {
-			opacity: 0;
-
-			&:checked,
-			&:indeterminate,
-			&:focus {
-				opacity: 1;
-			}
-		}
-
-		.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
-			opacity: 0;
-		}
-
-		&:focus-within,
-		&.is-hovered,
-		&:hover {
-			.components-checkbox-control__input,
-			.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
-				opacity: 1;
-			}
-		}
-
-		@media (hover: none) {
-			// Show checkboxes and quick-actions on devices that do not support hover.
-			.components-checkbox-control__input.components-checkbox-control__input,
-			.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
-				opacity: 1;
-			}
-		}
-
-		&.is-selected {
-			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-			color: $gray-700;
-
-			&:hover {
-				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
-			}
-		}
-	}
-	thead {
-		position: sticky;
-		inset-block-start: 0;
-		z-index: z-index(".dataviews-view-table thead");
-
-		tr {
-			border: 0;
-		}
-		th {
-			background-color: $white;
-			box-shadow: inset 0 -#{$border-width} 0 $gray-100;
-			padding-top: $grid-unit-10;
-			padding-bottom: $grid-unit-10;
-			font-size: 11px;
-			text-transform: uppercase;
-			font-weight: 500;
-			padding-left: $grid-unit-05;
-		}
-	}
-	tbody {
-		td {
-			vertical-align: top;
-		}
-		.dataviews-view-table__cell-content-wrapper {
-			min-height: $grid-unit-40;
-			display: flex;
-			align-items: center;
-
-			> * {
-				flex-grow: 1;
-			}
-
-			&.dataviews-view-table__primary-field {
-				a {
-					flex-grow: 0;
-				}
-			}
-		}
-	}
-	.dataviews-view-table-header-button {
-		padding: $grid-unit-05 $grid-unit-10;
-		font-size: 11px;
-		text-transform: uppercase;
-		font-weight: 500;
-
-		&:not(:hover) {
-			color: $gray-900;
-		}
-
-		span {
-			speak: none;
-
-			&:empty {
-				display: none;
-			}
-		}
-	}
-
-	.dataviews-view-table-header {
-		padding-left: $grid-unit-05;
-	}
-
-	.dataviews-view-table__actions-column {
-		width: 1%;
-	}
-
-	&:has(tr.is-selected) {
-		.components-checkbox-control__input {
-			opacity: 1;
-		}
-	}
-}
-
-.dataviews-view-list__primary-field,
-.dataviews-view-grid__primary-field,
-.dataviews-view-table__primary-field {
-	font-size: $default-font-size;
-	font-weight: 500;
-	color: $gray-700;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	display: block;
-	width: 100%;
-
-	a {
-		text-decoration: none;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		overflow: hidden;
-		display: block;
-		flex-grow: 0;
-		color: $gray-900;
-
-		&:hover {
-			color: var(--wp-admin-theme-color);
-		}
-		@include link-reset();
-	}
-
-	button.components-button.is-link {
-		text-decoration: none;
-		font-weight: inherit;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		overflow: hidden;
-		display: block;
-		width: 100%;
-		color: $gray-900;
-		&:hover {
-			color: var(--wp-admin-theme-color);
-		}
-	}
-}
-
-.dataviews-view-grid {
-	margin-bottom: auto;
-	grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
-	grid-template-rows: max-content;
-	padding: 0 $grid-unit-60 $grid-unit-30;
-	transition: padding ease-out 0.1s;
-	@include reduce-motion("transition");
-
-	@include break-mobile() {
-		grid-template-columns: repeat(2, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
-	}
-
-	@include break-xlarge() {
-		grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
-	}
-
-	@include break-huge() {
-		grid-template-columns: repeat(4, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
-	}
-
-	.dataviews-view-grid__card {
-		height: 100%;
-		justify-content: flex-start;
-
-		.dataviews-view-grid__title-actions {
-			padding: $grid-unit-10 0 $grid-unit-05;
-		}
-
-		.dataviews-view-grid__primary-field {
-			min-height: $grid-unit-40; // Preserve layout when there is no ellipsis button
-		}
-
-		&.is-selected {
-			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
-				color: $gray-900;
-			}
-
-			.page-pages-preview-field__button::after {
-				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-				background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-			}
-		}
-	}
-
-	.dataviews-view-grid__media {
-		width: 100%;
-		min-height: 200px;
-		aspect-ratio: 1/1;
-		background-color: $gray-100;
-		border-radius: $grid-unit-05;
-		overflow: hidden;
-		position: relative;
-
-		img {
-			object-fit: cover;
-			width: 100%;
-			height: 100%;
-		}
-
-		&::after {
-			content: "";
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
-			border-radius: $grid-unit-05;
-			pointer-events: none;
-		}
-	}
-
-	.dataviews-view-grid__fields {
-		position: relative;
-		font-size: 12px;
-		line-height: 16px;
-
-		&:not(:empty) {
-			padding: 0 0 $grid-unit-15;
-		}
-
-		.dataviews-view-grid__field {
-			align-items: flex-start;
-
-			&:not(.is-column) {
-				align-items: center;
-
-				.dataviews-view-grid__field-name {
-					width: 35%;
-				}
-
-				.dataviews-view-grid__field-value {
-					width: 65%;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-				}
-			}
-
-			.dataviews-view-grid__field-name {
-				color: $gray-700;
-			}
-		}
-	}
-
-	.dataviews-view-grid__badge-fields {
-		&:not(:empty) {
-			padding-bottom: $grid-unit-15;
-		}
-
-		.dataviews-view-grid__field-value {
-			width: fit-content;
-			background: $gray-100;
-			padding: 0 $grid-unit-10;
-			min-height: $grid-unit-30;
-			border-radius: $radius-block-ui;
-			display: flex;
-			align-items: center;
-			font-size: 12px;
-		}
-	}
-}
-
-.dataviews-view-list {
-	margin: 0 0 auto;
-
-	li {
-		margin: 0;
-		cursor: pointer;
-		border-top: 1px solid $gray-100;
-
-		.dataviews-view-list__item-wrapper {
-			position: relative;
-			border-radius: $grid-unit-05;
-
-			> * {
-				width: 100%;
-			}
-		}
-
-		.dataviews-view-list__item-actions {
-			.components-button {
-				opacity: 0;
-				position: fixed;
-				right: 0;
-			}
-		}
-
-		&.is-selected,
-		&.is-hovered,
-		&:focus-within {
-			.dataviews-view-list__item-actions {
-				padding-right: $grid-unit-40;
-
-				.components-button {
-					opacity: 1;
-					position: static;
-				}
-			}
-
-			.dataviews-view-list__item {
-				padding-right: 0;
-			}
-		}
-
-		&:not(.is-selected) {
-			.dataviews-view-list__primary-field {
-				color: $gray-900;
-			}
-			&:hover,
-			&:focus-within {
-				color: var(--wp-admin-theme-color);
-				background-color: #f8f8f8;
-
-				.dataviews-view-list__primary-field,
-				.dataviews-view-list__fields {
-					color: var(--wp-admin-theme-color);
-				}
-			}
-		}
-
-	}
-
-	li.is-selected,
-	li.is-selected:focus-within {
-		.dataviews-view-list__item-wrapper {
-			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-			color: $gray-900;
-
-			.dataviews-view-list__primary-field,
-			.dataviews-view-list__fields {
-				color: var(--wp-admin-theme-color);
-			}
-		}
-	}
-
-	.dataviews-view-list__item {
-		padding: $grid-unit-20 0 $grid-unit-20 $grid-unit-30;
-		width: 100%;
-		scroll-margin: $grid-unit-10 0;
-
-		&:focus-visible {
-			&::before {
-				position: absolute;
-				content: "";
-				top: calc(var(--wp-admin-border-width-focus) + 1px);
-				right: var(--wp-admin-border-width-focus);
-				bottom: var(--wp-admin-border-width-focus);
-				left: var(--wp-admin-border-width-focus);
-				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-				border-radius: $radius-block-ui;
-			}
-		}
-		.dataviews-view-list__primary-field {
-			min-height: $grid-unit-05 * 5;
-			line-height: $grid-unit-05 * 5;
-			overflow: hidden;
-		}
-	}
-
-	.dataviews-view-list__media-wrapper {
-		width: $grid-unit-50;
-		height: $grid-unit-50;
-		overflow: hidden;
-		position: relative;
-		flex-shrink: 0;
-		background-color: $gray-100;
-		border-radius: $grid-unit-05;
-
-		img {
-			width: 100%;
-			height: 100%;
-			object-fit: cover;
-		}
-
-		&::after {
-			content: "";
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
-			border-radius: $grid-unit-05;
-		}
-	}
-
-	.dataviews-view-list__media-placeholder {
-		min-width: $grid-unit-40;
-		height: $grid-unit-40;
-		background-color: $gray-200;
-	}
-
-	.dataviews-view-list__fields {
-		color: $gray-700;
-		display: flex;
-		gap: $grid-unit-10;
-		flex-wrap: wrap;
-		font-size: 12px;
-
-		.dataviews-view-list__field {
-			&:has(.dataviews-view-list__field-value:empty) {
-				display: none;
-			}
-		}
-
-		.dataviews-view-list__field-value {
-			line-height: $grid-unit-05 * 5;
-			display: inline-flex;
-		}
-	}
-	.dataviews-view-list__item-actions {
-		padding-right: $grid-unit-30;
-	}
-
-	& + .dataviews-pagination {
-		justify-content: space-between;
-	}
-
-}
-
-.dataviews-action-modal {
-	z-index: z-index(".dataviews-action-modal");
-}
-
-.dataviews-no-results,
-.dataviews-loading {
-	padding: 0 $grid-unit-60;
-	flex-grow: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	transition: padding ease-out 0.1s;
-	@include reduce-motion("transition");
-}
-
-.dataviews-view-table-selection-checkbox {
-	// Experimental override for CheckboxControl size (fragile)
-	--checkbox-input-size: 24px;
-	@include break-small() {
-		--checkbox-input-size: 16px;
-	}
-
-	line-height: 0;
-	flex-shrink: 0;
-
-	.components-checkbox-control__input-container {
-		margin: 0;
-	}
-}
-
-.dataviews-bulk-edit-button.components-button {
-	flex-shrink: 0;
-}
-
-.dataviews-filter-summary__popover {
-	.components-popover__content {
-		width: 230px;
-		padding: 0;
-		border-radius: $grid-unit-05;
-	}
-}
-
-.dataviews-search-widget-filter-combobox-list {
-	max-height: $grid-unit * 23;
-	padding: $grid-unit-05;
-	overflow: auto;
-	border-top: 1px solid $gray-200;
-
-	.dataviews-search-widget-filter-combobox-item-value {
-		[data-user-value] {
-			font-weight: 600;
-		}
-	}
-}
-
-.dataviews-search-widget-listbox {
-	max-height: $grid-unit * 23;
-	padding: $grid-unit-05;
-	overflow: auto;
-}
-
-.dataviews-search-widget-listitem {
-	display: flex;
-	align-items: center;
-	gap: $grid-unit-10;
-	border-radius: $radius-block-ui;
-	box-sizing: border-box;
-	padding: $grid-unit-10 $grid-unit-15;
-	cursor: default;
-	margin-block-end: 2px;
-
-	&:last-child {
-		margin-block-end: 0;
-	}
-
-	&:hover,
-	&[data-active-item],
-	&:focus {
-		background-color: var(--wp-admin-theme-color);
-		color: $white;
-
-		.dataviews-search-widget-listitem-check {
-			fill: $white;
-		}
-
-		.dataviews-search-widget-listitem-description {
-			color: $white;
-		}
-	}
-
-	.dataviews-search-widget-listitem-check {
-		width: 24px;
-		height: 24px;
-		flex-shrink: 0;
-	}
-
-	.dataviews-search-widget-listitem-description {
-		display: block;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		font-size: $helptext-font-size;
-		line-height: 16px;
-		color: $gray-700;
-	}
-}
-
-.dataviews-search-widget-filter-combobox__wrapper {
-	position: relative;
-	padding: $grid-unit-10;
-
-	.dataviews-search-widget-filter-combobox__input {
-		@include input-control;
-		display: block;
-		padding: 0 $grid-unit-40 0 $grid-unit-10;
-		background: $gray-100;
-		border: none;
-		width: 100%;
-		height: $grid-unit-40;
-
-		// Unset inherited values.
-		margin-left: 0;
-		margin-right: 0;
-
-		/* Fonts smaller than 16px causes mobile safari to zoom. */
-		font-size: $mobile-text-min-font-size;
-		@include break-small {
-			font-size: $default-font-size;
-		}
-
-		&:focus {
-			background: $white;
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
-
-		&::placeholder {
-			color: $gray-700;
-		}
-
-		&::-webkit-search-decoration,
-		&::-webkit-search-cancel-button,
-		&::-webkit-search-results-button,
-		&::-webkit-search-results-decoration {
-			-webkit-appearance: none;
-		}
-	}
-
-	.dataviews-search-widget-filter-combobox__icon {
-		position: absolute;
-		right: $grid-unit-15;
-		top: 50%;
-		transform: translateY(-50%);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: $icon-size;
-	}
-}
-
-.dataviews-filter-summary__operators-container {
-	padding: $grid-unit-10 $grid-unit-10 0;
-
-	&:has(+ .dataviews-search-widget-listbox) {
-		border-bottom: 1px solid $gray-200;
-		padding-bottom: $grid-unit-10;
-	}
-
-	&:empty {
-		display: none;
-	}
-
-	.dataviews-filter-summary__operators-filter-name {
-		color: $gray-700;
-	}
-}
-
-.dataviews-filter-summary__chip-container {
-	position: relative;
-	white-space: pre-wrap;
-
-	.dataviews-filter-summary__chip {
-		border-radius: $grid-unit-20;
-		border: 1px solid transparent;
-		cursor: pointer;
-		padding: 0 $grid-unit-15;
-		height: $grid-unit-40;
-		background: $gray-100;
-		color: $gray-700;
-		position: relative;
-		display: flex;
-		align-items: center;
-
-		&.has-reset {
-			padding-inline-end: $button-size-small + $grid-unit-05;
-		}
-
-		&:hover,
-		&:focus-visible,
-		&[aria-expanded="true"] {
-			background: $gray-200;
-			color: $gray-900;
-		}
-
-		&.has-values {
-			color: var(--wp-admin-theme-color);
-			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-
-			&:hover,
-			&[aria-expanded="true"] {
-				background: rgba(var(--wp-admin-theme-color--rgb), 0.12);
-			}
-		}
-
-		&:focus-visible {
-			outline: none;
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
-
-		.dataviews-filter-summary__filter-text-name {
-			font-weight: 500;
-		}
-	}
-
-	.dataviews-filter-summary__chip-remove {
-		width: $icon-size;
-		height: $icon-size;
-		border-radius: 50%;
-		border: 0;
-		padding: 0;
-		position: absolute;
-		right: $grid-unit-05;
-		top: 50%;
-		transform: translateY(-50%);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background: transparent;
-		cursor: pointer;
-
-		svg {
-			fill: $gray-700;
-		}
-
-		&:hover,
-		&:focus {
-			background: $gray-200;
-			svg {
-				fill: $gray-900;
-			}
-		}
-
-		&.has-values {
-			svg {
-				fill: var(--wp-admin-theme-color);
-			}
-			&:hover {
-				background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
-			}
-		}
-
-		&:focus-visible {
-			outline: none;
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
-	}
-}
-
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
-@container (max-width: 430px) {
-	.dataviews-pagination,
-	.dataviews-filters__view-actions {
-		padding: $grid-unit-15 $grid-unit-30;
-	}
-
-	.dataviews-filters__view-actions {
-		.components-search-control {
-			.components-base-control__field {
-				max-width: 112px;
-			}
-		}
-	}
-
-	.dataviews-view-table tr td:first-child,
-	.dataviews-view-table tr th:first-child {
-		padding-left: $grid-unit-30;
-	}
-
-	.dataviews-view-table tr td:last-child,
-	.dataviews-view-table tr th:last-child {
-		padding-right: $grid-unit-30;
-	}
-
-	.dataviews-view-grid,
-	.dataviews-no-results,
-	.dataviews-loading {
-		padding-left: $grid-unit-30;
-		padding-right: $grid-unit-30;
-	}
-}
-
-.dataviews-bulk-actions-toolbar-wrapper {
-	display: flex;
-	flex-grow: 1;
-	width: 100%;
-
-	.components-toolbar-group {
-		align-items: center;
-	}
-
-	.components-button.is-busy {
-		max-height: $button-size;
-	}
-}
-
-.dataviews-bulk-actions {
-	position: sticky;
-	display: flex;
-	flex-direction: column;
-	align-content: center;
-	flex-wrap: wrap;
-	width: fit-content;
-	margin-left: auto;
-	margin-right: auto;
-	bottom: $grid-unit-30;
-	z-index: z-index(".dataviews-bulk-actions");
-
-	.components-accessible-toolbar {
-		border-color: $gray-300;
-		box-shadow: $shadow-popover;
-
-		.components-toolbar-group {
-			border-color: $gray-200;
-
-			&:last-child {
-				border: 0;
-			}
-		}
-	}
-
-	.dataviews-bulk-actions__selection-count {
-		display: flex;
-		align-items: center;
-		margin: 0 $grid-unit-10 0 $grid-unit-10;
-	}
-}
+@import "./components/dataviews/style.scss";
+@import "./components/dataviews-bulk-actions/style.scss";
+@import "./components/dataviews-bulk-actions-toolbar/style.scss";
+@import "./components/dataviews-filters/style.scss";
+@import "./components/dataviews-pagination/style.scss";
+@import "./components/dataviews-item-actions/style.scss";
+@import "./components/dataviews-selection-checkbox/style.scss";
+
+@import "./layouts/grid/style.scss";
+@import "./layouts/list/style.scss";
+@import "./layouts/table/style.scss";