/** * 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); }