themes-wordpress/stow/sass/style-child-theme-editor.scss

/**
 * These styles should be loaded by the Block Editor only
 */

/**
 * Abstracts
 * - Mixins, variables and functions
 */
@import "../../varia/sass/abstracts/imports";

/**
 * Child Theme Name
 */
@import "config-child-theme-deep";

/**
 * Base
 * - Reset the browser
 */
@import "../../varia/sass/base/editor";

/**
 * Elements
 * - Styles for basic HTML elemants
 */
@import "../../varia/sass/elements/editor";

/**
 * Blocks
 * - These styles replace key Gutenberg Block styles for fonts, colors, and
 *   spacing with CSS-variables overrides
 */
@import "../../varia/sass/blocks/editor";

/**
 * Extra Editor Styles
 *
 * 1. General Styles
 * 2. Block Specific Styles
 * 2.1. Column Block
 * 2.2. Quote Block
 * 2.3. File Block
 * 2.4. Pre Block and Verse Block
 * 2.5. Button Block
 * 2.6. Search Block
 */

.editor-post-title__input {
	text-align: center;
}

/**
 * 1. General Styles
 */
body {
	background-color: #{map-deep-get($config-global, "color", "white")};
	font-weight: 300;
}

a {
	text-decoration: none;
}

/**
 * 2. Block Specific Styles
 */

/**
 * 2.1. Column Block
 */
 .wp-block-coblocks-column {
	h1, 
	h2, 
	h3, 
	h4, 
	h5, 
	h6 {
		margin-bottom: .857em;
	}
	a {
		color: #{map-deep-get($config-global, "color", "secondary", "default")};
		&:hover {
			color: #{map-deep-get($config-global, "color", "secondary", "hover")};
		}
	}
}

/**
 * 2.2. Quote Block
 */
 .wp-block-quote, 
 .wp-block-quote[style*="text-align:center"], 
 .wp-block-quote[style*="text-align:right"] {
	 border: 1px solid #f2f2f2;
	 padding: #{map-deep-get($config-global, "spacing", "horizontal")};;
	 p {
		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
	 }
	 .wp-block-quote__citation {
		 color: #{map-deep-get($config-global, "color", "secondary", "default")};
	 }
 }

 /**
 * 2.3. File Block
 */
.wp-block-file {
	div {
		&.wp-block-file__button {
			text-transform: uppercase;
			line-height: #{map-deep-get($config-button, "font", "line-height")};
			color: #{map-deep-get($config-button, "color", "text")};
			cursor: pointer;
			font-weight: #{map-deep-get($config-button, "font", "weight")};
			@include font-family( map-deep-get($config-button, "font", "family") );
			font-size: #{map-deep-get($config-button, "font", "size")};
			background-color: #{map-deep-get($config-button, "color", "background")};
			border-radius: #{map-deep-get($config-button, "border-radius")};
			border-width: #{map-deep-get($config-button, "border-width")};
			padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
			display: inline-block;
			&:focus, 
			&:hover, 
			&:visited {
				color: #{map-deep-get($config-button, "color", "text-hover")};
				background-color: #{map-deep-get($config-button, "color", "background-hover")};
				opacity: 1;
			}
		}
	}
}

/**
 * 2.4. Pre Block and Verse Block
 */
.wp-block-preformatted,
.wp-block-verse {
	pre {
		font-family: #{map-deep-get($config-global, "font", "family", "code")};
	}
}

/**
 * 2.5. Button Block
 */
 .wp-block-button {
	div {
		&.wp-block-button__link {
			text-transform: uppercase;
		}
	}
}

/**
 * 2.6. Search Block
 */
 .wp-block-search {
	.wp-block-search__button {
		text-transform: uppercase;
		line-height: #{map-deep-get($config-button, "font", "line-height")};
		color: #{map-deep-get($config-button, "color", "text")};
		cursor: pointer;
		font-weight: #{map-deep-get($config-button, "font", "weight")};
		@include font-family( map-deep-get($config-button, "font", "family") );
		font-size: #{map-deep-get($config-button, "font", "size")};
		background-color: #{map-deep-get($config-button, "color", "background")};
		border-radius: #{map-deep-get($config-button, "border-radius")};
		border-width: #{map-deep-get($config-button, "border-width")};
		padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
		display: inline-block;
		&:focus, 
		&:hover, 
		&:visited {
			color: #{map-deep-get($config-button, "color", "text-hover")};
			background-color: #{map-deep-get($config-button, "color", "background-hover")};
			opacity: 1;
		}
		border: none;
		box-shadow: none;
	}
}