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";

/**
* Global variables
*/
@import "global-variables";

:root,
body {

	@include global-variables();
}

/**
 * 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";

/**
 * Vendors
 * - Styles for 3rd party plugins and WP extensions
 */
@import "../../varia/sass/vendors/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;
}

.block-editor-block-list__layout a:link,
.block-editor-block-list__layout a:active {
	text-decoration: underline;
}

.block-editor-block-list__layout a:hover,
.block-editor-block-list__layout a:active {
	text-decoration: none;
}

/**
 * 2. Block Specific Styles
 */

/**
 * 2.1. Column Block
 */
.wp-block-coblocks-column {

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-bottom: 0.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;
	}
}

.wp-block-a8c-blog-posts {

	.entry-title a {

		&:active,
		&:focus,
		&:hover {
			text-decoration: none;
		}
	}

	.cat-links a,
	.more-link,
	.entry-meta a {
		text-decoration: none;

		&:active,
		&:focus,
		&:hover {
			text-decoration: underline;
		}
	}

	&.image-alignbehind article {

		.entry-title a {

			&:active,
			&:focus,
			&:hover {
				text-decoration: underline;
			}
		}
	}
}

.has-background:not(.has-background-background-color),
[class*="background-color"]:not(.has-background-background-color),
[style*="background-color"] {

	.wp-block-a8c-blog-posts {

		.entry-title a {

			&:active,
			&:focus,
			&:hover {
				text-decoration: underline;
			}
		}
	}
}

.wp-block-a8c-blog-posts + .button {
	font-size: (strip-unit(map-deep-get($config-global, "font", "size", "xs")) + 0);
}

/**
 * Full Site Editing
 * - Full Site Editing overrides
 */
@import "full-site-editing-editor";