packages/boot/src/components/root/style.scss - trunk - githubmirror/gutenberg

packages/boot/src/components/root/style.scss
239 строк5 KB
Andrew Duthie
Fix and permit unitless zeros used in CSS `calc` functions (#79786)
02 июл 2026, 00:06
02 июл 2026, 00:06e412445
@use "@wordpress/base-styles/breakpoints";
@use "@wordpress/base-styles/variables";
@use "@wordpress/base-styles/mixins";

.boot-layout {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: row;
	color: var(--wpds-color-foreground-content-neutral);
	isolation: isolate;
	background: var(--wpds-color-background-surface-neutral-weak);
}

.boot-layout__sidebar-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 100002;
	cursor: var(--wpds-cursor-control);
}

.boot-layout__sidebar {
	height: 100%;
	flex-shrink: 0;
	width: 240px;
	position: relative;
	overflow: hidden;

	&.is-mobile {
		position: fixed;
		top: 0;
		bottom: 0;
		inset-inline-start: 0;
		width: 300px;
		max-width: 85vw;
		background: var(--wpds-color-background-surface-neutral-weak);
		z-index: 100003;
		box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
	}
}

.boot-layout__mobile-sidebar-drawer {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;

	.boot-layout--single-page & {
		top: variables.$admin-bar-height-big;
	}

	z-index: 3;
	background: var(--wpds-color-background-surface-neutral);
	padding: variables.$grid-unit-20;
	border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral-weak);
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.boot-layout__canvas.has-mobile-drawer {
	position: relative;
	padding-top: 65px;
}

.boot-layout__surfaces {
	display: flex;
	flex-grow: 1;
	margin: 0;
	gap: variables.$grid-unit-10;

	@include mixins.break-medium {
		margin: variables.$grid-unit-10;

		.boot-layout--single-page & {
			margin-top: 0;
			margin-inline-start: 0;
		}
	}
}

.boot-layout__stage,
.boot-layout__inspector {
	flex: 1;
	overflow-y: auto;
	background: var(--wpds-color-background-surface-neutral);
	color: var(--wpds-color-foreground-content-neutral);
	position: relative;

	// Mobile-first: surfaces take full screen with fixed positioning
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	border-radius: 0;
	margin: 0;

	.boot-layout--single-page & {
		top: variables.$admin-bar-height-big;
		height: calc(100vh - variables.$admin-bar-height-big);
	}

	// Desktop: restore original styles
	@include mixins.break-medium {
		position: static;
		width: auto;
		height: auto;
		border-radius: var(--wpds-border-radius-xl);
		margin: 0;

		.boot-layout--single-page & {
			height: auto;
		}
	}
}

.boot-layout__stage {
	z-index: 2; // Highest surface priority on mobile

	@include mixins.break-medium {
		z-index: auto;
	}
}

.boot-layout__inspector {
	z-index: 3; // Medium surface priority on mobile

	@include mixins.break-medium {
		z-index: auto;
	}
}

.boot-layout__canvas {
	flex: 1;
	overflow-y: auto;
	background: var(--wpds-color-background-surface-neutral);
	color: var(--wpds-color-foreground-content-neutral);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--wpds-color-stroke-surface-neutral-weak);
	position: relative;

	// Mobile-first: full screen with lowest priority
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1; // Lowest surface priority
	border-radius: 0;
	margin: 0;

	.boot-layout--single-page & {
		top: variables.$admin-bar-height-big;
		height: calc(100vh - variables.$admin-bar-height-big);
	}

	// Desktop: restore original styles
	@include mixins.break-medium {
		position: static;
		width: auto;
		height: auto;
		border-radius: var(--wpds-border-radius-xl);
		z-index: auto;

		.boot-layout--single-page & {
			height: auto;
		}
	}
}

.boot-layout.has-canvas .boot-layout__stage,
.boot-layout__inspector {
	@include mixins.break-medium {
		max-width: 400px;
	}
}

.boot-layout__canvas .interface-interface-skeleton {
	position: relative;
	height: 100%;
	top: 0 !important;
	left: 0 !important;
}

// Full-screen canvas mode
.boot-layout.has-full-canvas .boot-layout__surfaces {
	margin: 0;
	gap: 0;
}

.boot-layout.has-full-canvas .boot-layout__stage,
.boot-layout.has-full-canvas .boot-layout__inspector {
	display: none;
}

.boot-layout.has-full-canvas .boot-layout__canvas {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0);
	left: 0;
	right: 0;
	bottom: 0;
	max-width: none;
	margin: 0;
	border-radius: 0;
	border: none;
	box-shadow: none;
	overflow: hidden;

	.boot-layout--single-page & {
		top: variables.$admin-bar-height-big;

		@include mixins.break-medium {
			top: variables.$admin-bar-height;

		}
	}
}

@media (max-width: #{breakpoints.$break-medium}) {
	.boot-layout__stage,
	.boot-layout__inspector,
	.boot-layout__canvas:not(.has-mobile-drawer) {
		top: var(--wp-admin--admin-bar--height, 0);
		height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	}

	.boot-layout__mobile-sidebar-drawer {
		top: var(--wp-admin--admin-bar--height, 0);
	}
}