@gravityforms/components/css/admin/layouts/right-sidebar.css

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

.gform-admin {

	.gform-right-sidebar__header {
		margin-block-end: 24px;
	}

	.gform-right-sidebar__body {
		display: flex;
		flex-direction: column;
		gap: 24px;

		@container gform-layout-container (min-width: 810px) {
			display: grid;
			grid-template-columns: calc(100% - 384px) 360px;
			grid-template-rows: auto auto;
		}
	}

	.gform-right-sidebar__content {
		display: flex;
		flex-direction: column;
		gap: 24px;

		@container gform-layout-container (min-width: 810px) {
			grid-column: 1 / 2;
			grid-row: 1 / 2;
		}
	}

	.gform-right-sidebar__sidebar {

		@container gform-layout-container (min-width: 900px) {
			grid-column: 2 / 3;
			grid-row: 1 / 3;
		}
	}

	.gform-right-sidebar__secondary-content {

		@container gform-layout-container (min-width: 900px) {
			grid-column: 1 / 2;
			grid-row: 2 / 3;
		}
	}
}