packages/interface/src/components/interface-skeleton/style.scss - trunk - githubmirror/gutenberg

packages/interface/src/components/interface-skeleton/style.scss
217 строк6 KB
Aki Hamano
Interface: Increase footer breadcrumb height to prevent focus ring clipping (#81145)
04 авг 2026, 16:36
04 авг 2026, 16:369043ec1
@use "@wordpress/base-styles/breakpoints" as *;
@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/variables" as *;
@use "@wordpress/base-styles/z-index" as *;

// On Mobile devices, swiping the HTML element should not scroll.
// By making it fixed, we prevent that.
html.interface-interface-skeleton__html-container {
	position: fixed;
	width: 100%;

	@include break-medium() {
		&:not(:has(.is-zoom-out)) {
			position: initial;
			width: initial;
		}
	}
}

.interface-interface-skeleton {
	display: flex;
	flex-direction: row;
	height: auto;
	max-height: 100%;

	// Fill the available space on Mobile.
	position: fixed;
	top: $admin-bar-height-big;
	left: 0;
	right: 0;
	bottom: 0;

	// Adjust to admin-bar going small.
	@media (min-width: #{ ($break-medium + 1) }) {
		top: $admin-bar-height;

		.is-fullscreen-mode & {
			top: var(--wp-admin--admin-bar--height, 0);
		}
	}
}

.interface-interface-skeleton__editor {
	display: flex;
	flex-direction: column;
	flex: 0 1 100%;
	overflow: hidden;
}

@include editor-left(".interface-interface-skeleton");

.interface-interface-skeleton__body {
	position: relative;
	flex-grow: 1;
	display: flex;

	// Even on Mobile, we choose to scroll this element on its own.
	// This helps enable a fixed-to-top toolbar that makes the editing experience
	// on Mobile Safari usable.
	// Unfortunately an issue still exists where if you swipe the top toolbar
	// or beyond the bottom of the page when the soft keyboard is showing, you scroll
	// the body element and can scroll the toolbar out of view.
	// This is still preferable, though, as it allows the editor to function at all.
	overflow: auto;

	// In future versions of Mobile Safari, hopefully overscroll-behavior will be supported.
	// This allows us to disallow the scroll-chaining and rubber-banding that is currently
	// is the cause of the issue outlined above.
	// In other words, the following behavior doesn't yet work in Safari, but if/when
	// it is added, it should take care of the issue.
	// See also: https://drafts.csswg.org/css-overscroll/
	overscroll-behavior-y: none;

	// Footer overlap prevention
	.has-footer & {
		@include break-medium() {
			padding-bottom: calc(var(--wpds-dimension-size-md) + #{$border-width});
		}
	}
}

.interface-interface-skeleton__content {
	flex-grow: 1;

	// Treat as flex container to allow children to grow to occupy full
	// available height of the content area.
	display: flex;
	flex-direction: column;

	// On Mobile the header is fixed to keep HTML as scrollable.
	// Beyond the medium breakpoint, we allow the sidebar.
	// The sidebar should scroll independently, so enable scroll here also.
	overflow: auto;

	// On Safari iOS on smaller viewports lack of a z-index causes the background
	// to "bleed" through the header.
	// See https://github.com/WordPress/gutenberg/issues/32631
	z-index: z-index(".interface-interface-skeleton__content");

	// On Safari the z-index is not respected when the element is fixed.
	// Setting it to auto fixes the problem
	@include break-medium() {
		z-index: auto;
	}
}

.interface-interface-skeleton__secondary-sidebar,
.interface-interface-skeleton__sidebar {
	flex-shrink: 0;
	position: absolute;
	z-index: z-index(".interface-interface-skeleton__sidebar");
	top: 0;
	left: 0;
	bottom: 0;
	background: $white;
	color: $gray-900;
	width: auto; // Keep the sidebar width flexible.

	// On Mobile the header is fixed to keep HTML as scrollable.
	@include break-medium() {
		position: relative !important;
	}
}

.interface-interface-skeleton__sidebar {
	border-top: $border-width solid $gray-200;
	overflow: hidden;

	@include break-medium() {
		box-shadow: -$border-width 0 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
		outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
	}
}

.interface-interface-skeleton__secondary-sidebar {
	border-top: $border-width solid $gray-200;
	right: 0;

	@include break-medium() {
		box-shadow: $border-width 0 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
		outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
	}
}

.interface-interface-skeleton__header {
	flex-shrink: 0;
	height: auto;  // Keep the height flexible.
	box-shadow: 0 $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
	z-index: z-index(".interface-interface-skeleton__header");
	color: $gray-900;
	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
}

.interface-interface-skeleton__footer {
	height: auto; // Keep the height flexible.
	flex-shrink: 0;
	border-top: $border-width solid $gray-200;
	color: $gray-900;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: $white;
	z-index: z-index(".interface-interface-skeleton__footer");

	// On Mobile the footer is hidden
	display: none;
	@include break-medium() {
		display: flex;
	}

	.block-editor-block-breadcrumb {
		z-index: z-index(".edit-post-layout__footer");
		display: flex;
		background: $white;
		height: var(--wpds-dimension-size-md);
		align-items: center;
		font-size: $default-font-size;
		padding: 0 ($grid-unit-15 + 6px);
	}
}

.interface-interface-skeleton__actions {
	z-index: z-index(".interface-interface-skeleton__actions");
	position: fixed !important; // Need to override the default relative positioning
	top: -9999em;
	bottom: auto;
	left: auto;
	right: 0;
	color: $gray-900;
	background: $white;
	width: 100vw;

	@include break-medium() {
		width: $sidebar-width;
	}

	&:focus,
	&:focus-within {
		top: auto;
		bottom: 0;

		.is-entity-save-view-open & {
			top: $admin-bar-height-big;

			@include break-medium() {
				border-left: $border-width solid $gray-300;
				top: $admin-bar-height;

				.is-fullscreen-mode & {
					top: var(--wp-admin--admin-bar--height, 0);
				}
			}
		}
	}
}