style.scss

@import "./components/fullscreen-mode/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/more-menu/style.scss";
@import "./components/header/pinned-plugins/style.scss";
@import "./components/keyboard-shortcut-help-modal/style.scss";
@import "./components/layout/style.scss";
@import "./components/manage-blocks-modal/style.scss";
@import "./components/meta-boxes/meta-boxes-area/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-link/style.scss";
@import "./components/sidebar/post-schedule/style.scss";
@import "./components/sidebar/post-status/style.scss";
@import "./components/sidebar/post-visibility/style.scss";
@import "./components/sidebar/settings-header/style.scss";
@import "./components/sidebar/settings-sidebar/style.scss";
@import "./components/sidebar/sidebar-header/style.scss";
@import "./components/text-editor/style.scss";
@import "./components/visual-editor/style.scss";
@import "./components/options-modal/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__loading-fade-animation {
	0% {
		opacity: 0.5;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.5;
	}
}

@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" );
}

.block-editor,
// The modals are shown outside the .block-editor wrapper, they need these styles
.components-modal__frame {
	@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;
	}

	iframe {
		width: 100%;
	}

	.components-navigate-regions {
		height: 100%;
	}
}


// These are default block editor styles in case the theme doesn't provide them.
.wp-block {
	max-width: $content-width;

	&[data-align="wide"] {
		max-width: 1100px;
	}

	&[data-align="full"] {
		max-width: none;
	}
}