312 lines
6.8 KiB
SCSS
312 lines
6.8 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";
|
|
|
|
/**
|
|
* Extras
|
|
*/
|
|
$color_background: #{map-deep-get($config-global, "color", "background", "default")};
|
|
$color_background_light: #{map-deep-get($config-global, "color", "background", "light")};
|
|
$color_foreground: #{map-deep-get($config-global, "color", "foreground", "default")};
|
|
$color_primary: #{map-deep-get($config-global, "color", "primary", "default")};
|
|
$color_secondary: #{map-deep-get($config-global, "color", "secondary", "default")};
|
|
$color_primary_hover: #{map-deep-get($config-global, "color", "primary", "hover")};
|
|
$spacing_horizontal: #{map-deep-get($config-global, "spacing", "horizontal")};
|
|
$spacing_vertical: #{map-deep-get($config-global, "spacing", "vertical")};
|
|
$font_size_xs: #{map-deep-get($config-global, "font", "size", "xs")};
|
|
$font_size_md: #{map-deep-get($config-global, "font", "size", "md")};
|
|
$font_size_base: #{map-deep-get($config-global, "font", "size", "base")};
|
|
$font_size_xl: #{map-deep-get($config-global, "font", "size", "xl")};
|
|
$font_family_code: #{map-deep-get($config-global, "font", "family", "code")};
|
|
$font_line_height_body: #{map-deep-get($config-global, "font", "line-height", "body")};
|
|
$button_line_height: #{map-deep-get($config-button, "font", "line-height")};
|
|
$button_font_weight: #{map-deep-get($config-button, "font", "weight")};
|
|
$button_font_size: #{map-deep-get($config-button, "font", "size")};
|
|
$button_spacing_vertical: #{map-deep-get($config-button, "padding", "vertical")};
|
|
$button_spacing_horizontal: #{map-deep-get($config-button, "padding", "horizontal")};
|
|
$button_color: #{map-deep-get($config-button, "color", "text")};
|
|
$button_color_hover: #{map-deep-get($config-button, "color", "text-hover")};
|
|
$button_background: #{map-deep-get($config-button, "color", "background")};
|
|
$button_background_hover: #{map-deep-get($config-button, "color", "background-hover")};
|
|
$font_size_widget_title: #{map-deep-get($config-heading, "font", "size", "h3")};
|
|
|
|
/**
|
|
* 1. General Styles
|
|
*/
|
|
a {
|
|
text-decoration: none;
|
|
|
|
.wp-block-group &,
|
|
.wp-block-cover &,
|
|
.wp-block-cover-image &,
|
|
.wp-block-media-text &,
|
|
p:not(.site-title) & {
|
|
text-decoration: underline;
|
|
|
|
&.wp-block-button__link,
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.editor-post-title__block .editor-post-title__input {
|
|
text-align: left;
|
|
color: $color_primary;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
color: $color_primary;
|
|
}
|
|
|
|
|
|
/**
|
|
* 2. Block Specific Styles
|
|
*/
|
|
|
|
/**
|
|
* 2.1. Column Block
|
|
*/
|
|
.wp-block-columns {
|
|
.wp-block-latest-posts {
|
|
border-bottom: 1px solid $color_background_light;
|
|
> li {
|
|
border-top: 1px solid $color_background_light;
|
|
margin: 0;
|
|
padding-top: $spacing_horizontal;
|
|
padding-bottom: $spacing_horizontal;
|
|
> a {
|
|
font-size: $font_size_base;
|
|
font-weight: normal;
|
|
@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
|
|
line-height: $font_line_height_body;
|
|
}
|
|
> time {
|
|
&.wp-block-latest-posts__post-date {
|
|
font-size: $font_size_base;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 2.2. Quote Block
|
|
*/
|
|
.wp-block-quote,
|
|
.wp-block-quote[style*="text-align:center"],
|
|
.wp-block-quote[style*="text-align:right"] {
|
|
border: 1px solid $color_background_light;
|
|
padding: $spacing_horizontal;
|
|
p {
|
|
@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
|
|
font-size: $font_size_md;
|
|
line-height: $font_line_height_body;
|
|
}
|
|
.wp-block-quote__citation {
|
|
color: inherit;
|
|
font-size: $font_size_md;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 2.3. File Block
|
|
*/
|
|
.wp-block-file {
|
|
div {
|
|
&.wp-block-file__button {
|
|
line-height: $button_line_height;
|
|
cursor: pointer;
|
|
font-weight: $button_font_weight;
|
|
@include font-family( map-deep-get($config-button, "font", "family") );
|
|
background-color: $button_background;
|
|
font-size: $button_font_size;
|
|
padding: $button_spacing_vertical $button_spacing_horizontal;
|
|
text-transform: uppercase;
|
|
display: inline-block;
|
|
&:focus,
|
|
&:hover {
|
|
color: $button_color_hover;
|
|
background-color: $button_background_hover;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 2.4. Pre Block, Code Block and Verse Block
|
|
*/
|
|
.wp-block-preformatted,
|
|
.wp-block-verse {
|
|
pre {
|
|
font-family: $font_family_code;
|
|
font-size: $font_size_base;
|
|
}
|
|
}
|
|
|
|
.wp-block-code {
|
|
.block-editor-plain-text {
|
|
font-family: $font_family_code;
|
|
font-size: $font_size_base;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 2.5. Button Block
|
|
*/
|
|
.wp-block-button {
|
|
div {
|
|
&.wp-block-button__link {
|
|
text-transform: uppercase;
|
|
border: 0;
|
|
border-radius: 5em;
|
|
text-transform: uppercase;
|
|
&.has-background {
|
|
&:focus,
|
|
&:hover,
|
|
&:visited {
|
|
opacity: .8;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.minimal {
|
|
.wp-block-button__link {
|
|
background: 0 0;
|
|
border: 2px solid;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 2.6. Search Block
|
|
*/
|
|
.wp-block-search {
|
|
.wp-block-search__button {
|
|
text-transform: uppercase;
|
|
line-height: $button_line_height;
|
|
color: $button_color;
|
|
cursor: pointer;
|
|
font-weight: $button_font_weight;
|
|
@include font-family( map-deep-get($config-button, "font", "family") );
|
|
font-size: $button_font_size;
|
|
background-color: $button_background;
|
|
border-radius: 5em;
|
|
border-width: 0;
|
|
padding: $button_spacing_vertical $button_spacing_horizontal;
|
|
display: inline-block;
|
|
&:focus,
|
|
&:hover,
|
|
&:visited {
|
|
color: $button_color_hover;
|
|
background-color: $button_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 {
|
|
color: #fff;
|
|
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{
|
|
text-decoration: none;
|
|
|
|
&:active,
|
|
&:focus,
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.wp-block-a8c-blog-posts + .button {
|
|
font-size: (strip-unit(map-deep-get($config-global, "font", "size", "sm")) + 0em);
|
|
}
|