themes-wordpress/stow/sass/style-child-theme-editor.scss
2021-02-11 13:50:43 +01:00

252 lines
5.2 KiB
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;
}
/**
* 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;
}
}
.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")) + 0em);
}
/**
* Full Site Editing
* - Full Site Editing overrides
*/
@import "full-site-editing-editor";