@wordpress/edit-post/src/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 {
	background: $white;

	#wpcontent {
		padding-left: 0;
	}

	#wpbody-content {
		padding-bottom: 0;
	}

	/* We hide legacy notices in Gutenberg, because they were not designed in a way that scaled well.
	   Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
	#wpbody-content > div:not(.block-editor):not(#screen-meta) {
		display: none;
	}

	#wpfooter {
		display: none;
	}

	.a11y-speak-region {
		left: -1px;
		top: -1px;
	}

	ul#adminmenu a.wp-has-current-submenu::after,
	ul#adminmenu > li.current > a.current::after {
		border-right-color: $white;
	}

	.media-frame select.attachment-filters:last-of-type {
		width: auto;
		max-width: 100%;
	}
}

.block-editor,
// The modals are shown outside the .block-editor wrapper, they need these styles
.components-modal__frame {
	box-sizing: border-box;

	*,
	*::before,
	*::after {
		box-sizing: inherit;
	}

	select {
		font-size: $default-font-size;
		color: $dark-gray-500;
	}
}

.block-editor__container {
	// on mobile the main content area has to scroll
	// otherwise you can invoke the overscroll bounce on the non-scrolling container, causing (ノಠ益ಠ)ノ彡┻━┻
	@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%;
	}
}

// Override core input styles to provide styles consistent with Gutenberg.
// Upstream ticket for redesigned input and styles in general: https://core.trac.wordpress.org/ticket/44749
// Upstream ticket for redesigned checkbox: https://core.trac.wordpress.org/ticket/35596
.editor-post-permalink,
.edit-post-sidebar,
.editor-post-publish-panel,
.block-editor-block-list__block,
.components-popover,
.components-modal__content {
	.input-control, // Upstream name is `.regular-text`.
	input[type="text"],
	input[type="search"],
	input[type="radio"],
	input[type="tel"],
	input[type="time"],
	input[type="url"],
	input[type="week"],
	input[type="password"],
	input[type="checkbox"],
	input[type="color"],
	input[type="date"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="email"],
	input[type="month"],
	input[type="number"],
	select,
	textarea {
		font-family: $default-font;
		padding: 6px 8px;
		@include input-style__neutral();

		/* Fonts smaller than 16px causes mobile safari to zoom. */
		font-size: $mobile-text-min-font-size;
		@include break-small {
			font-size: $default-font-size;
		}

		&:focus {
			@include input-style__focus();
		}
	}

	input[type="number"] {
		padding-left: 4px;
		padding-right: 4px;
	}

	select {
		padding: 2px;

		&:focus {
			border-color: $blue-medium-600;
			// Windows High Contrast mode will show this outline
			outline: 2px solid transparent;
			outline-offset: 0;
		}
	}

	input[type="checkbox"],
	input[type="radio"] {
		border: $border-width + 1 solid $dark-gray-300;
		margin-right: 12px;
		transition: none;

		&:focus {
			border-color: $dark-gray-300;
			box-shadow: 0 0 0 1px $dark-gray-300;
		}

		&:checked {
			background: theme(toggle);
			border-color: theme(toggle);
		}

		&:checked:focus {
			box-shadow: 0 0 0 2px $dark-gray-500;
		}
	}

	input[type="checkbox"] {
		border-radius: $radius-round-rectangle / 2;

		&:checked::before,
		&[aria-checked="mixed"]::before {
			margin: -3px -5px;
			color: $white;

			@include break-medium() {
				margin: -4px 0 0 -5px;
			}
		}

		&[aria-checked="mixed"] {
			background: theme(toggle);
			border-color: theme(toggle);

			&::before {
				// Inherited from `forms.css`.
				// See: https://github.com/WordPress/wordpress-develop/tree/5.1.1/src/wp-admin/css/forms.css#L122-L132
				content: "\f460";
				float: left;
				display: inline-block;
				vertical-align: middle;
				width: 16px;
				/* stylelint-disable */
				font: normal 30px/1 dashicons;
				/* stylelint-enable */
				speak: none;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;

				@include break-medium() {
					float: none;
					font-size: 21px;
				}
			}

			&:focus {
				box-shadow: 0 0 0 2px $dark-gray-500;
			}
		}
	}

	input[type="radio"] {
		border-radius: $radius-round;

		&:checked::before {
			margin: 3px 0 0 3px;
			background-color: $white;
		}
	}
}

// Placeholder colors
.editor-post-title,
.block-editor-block-list__block {
	input,
	textarea {
		// Use opacity to work in various editor styles.
		&::-webkit-input-placeholder {
			color: $dark-opacity-300;
		}

		&::-moz-placeholder {
			opacity: 1; // Necessary because Firefox reduces this from 1.
			color: $dark-opacity-300;
		}

		&:-ms-input-placeholder {
			color: $dark-opacity-300;
		}

		.is-dark-theme & {
			&::-webkit-input-placeholder {
				color: $light-opacity-300;
			}

			&::-moz-placeholder {
				opacity: 1; // Necessary because Firefox reduces this from 1.
				color: $light-opacity-300;
			}

			&:-ms-input-placeholder {
				color: $light-opacity-300;
			}
		}
	}
}

// These are default 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;
	}
}