style.scss

@import "../../interface/src/style.scss";
@import "./components/header/style.scss";
@import "./components/header/fullscreen-mode-close/style.scss";
@import "./components/header/header-toolbar/style.scss";
@import "./components/header/template-title/style.scss";
@import "./components/keyboard-shortcut-help-modal/style.scss";
@import "./components/layout/style.scss";
@import "./components/block-manager/style.scss";
@import "./components/meta-boxes/meta-boxes-area/style.scss";
@import "./components/secondary-sidebar/style.scss";
@import "./components/sidebar/style.scss";
@import "./components/sidebar/last-revision/style.scss";
@import "./components/sidebar/post-author/style.scss";
@import "./components/sidebar/post-format/style.scss";
@import "./components/sidebar/post-schedule/style.scss";
@import "./components/sidebar/post-slug/style.scss";
@import "./components/sidebar/post-status/style.scss";
@import "./components/sidebar/post-template/style.scss";
@import "./components/sidebar/post-url/style.scss";
@import "./components/sidebar/post-visibility/style.scss";
@import "./components/sidebar/settings-header/style.scss";
@import "./components/sidebar/template-summary/style.scss";
@import "./components/text-editor/style.scss";
@import "./components/visual-editor/style.scss";
@import "./components/welcome-guide/style.scss";
@import "./components/start-page-options/style.scss";

/**
 * Animations
 */

// These keyframes should not be part of the _animations.scss mixins file.
// Because keyframe animations can't be defined as mixins properly, they are duplicated.
// Since hey are intended only for the editor, we add them here instead.
@keyframes edit-post__fade-in-animation {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

// In order to use mix-blend-mode, this element needs to have an explicitly set background-color
// We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations
html.wp-toolbar {
	background: $white;
}

body.block-editor-page {
	@include wp-admin-reset( ".block-editor" );
}

// Fix issue with wp-admin menu not scrolling between 170% and 200% zoom.
.block-editor-page #wpwrap {
	overflow-y: auto;
	@include break-medium() {
		overflow-y: initial;
	}
}

// Target the editor UI excluding the visual editor contents, metaboxes and custom fields areas.
.edit-post-header,
.edit-post-text-editor,
.edit-post-sidebar,
.editor-post-publish-panel,
.components-popover,
.components-modal__frame,
.edit-post-editor__inserter-panel {
	@include reset;
}

.block-editor__container {
	// On mobile the main content area has to scroll, otherwise you can invoke
	// the overscroll bounce on the non-scrolling container, for a bad experience.
	@include break-small {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		min-height: calc(100vh - #{$admin-bar-height-big});
	}

	// The WP header height changes at this breakpoint.
	@include break-medium {
		min-height: calc(100vh - #{$admin-bar-height});

		body.is-fullscreen-mode & {
			min-height: 100vh;
		}
	}

	img {
		max-width: 100%;
		height: auto;
	}
}

@include wordpress-admin-schemes();

// The edit-site package adds or removes the sidebar when it's opened or closed.
// The edit-post package, however, always has the sidebar in the canvas.
// These edit-post specific rules ensures there isn't a border on the right of
// the canvas when a sidebar is visually closed.
.interface-interface-skeleton__sidebar {
	border-left: none;

	.is-sidebar-opened & {
		@include break-medium() {
			border-left: $border-width solid $gray-200;
		}
	}
}