Dalston: Add custom media-text block style, add design improvements to cover-block image, improve header styles.
This commit is contained in:
parent
5c465e4e0e
commit
b080fd7512
9 changed files with 65 additions and 52 deletions
|
@ -1,6 +1,6 @@
|
|||
/* Inner Container */
|
||||
|
||||
.wp-block-cover.is-style-hover-reveal {
|
||||
.wp-block-cover.is-style-hover-reveal:not(.has-parallax) {
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
|
38
dalston/block-extends/extend-media-text-block.css
Executable file
38
dalston/block-extends/extend-media-text-block.css
Executable file
|
@ -0,0 +1,38 @@
|
|||
/* Media & Text Inset Borders */
|
||||
|
||||
.wp-block-media-text.is-style-inset-borders {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wp-block-media-text.is-style-inset-borders:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
border: 1px solid #FFFFFF;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.wp-block-media-text.is-style-inset-borders.is-selected:before {
|
||||
content: inherit;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wp-block-media-text.is-style-inset-borders.is-selected .block-library-media-text__media-container:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
border: 1px solid #FFFFFF;
|
||||
z-index: 1;
|
||||
border-right-width: inherit;
|
||||
}
|
||||
|
||||
.wp-block-media-text.has-media-on-the-right.is-style-inset-borders.is-selected .block-library-media-text__media-container:before {
|
||||
border-left-width: inherit;
|
||||
border-right-width: 1px;
|
||||
}
|
6
dalston/block-extends/extend-media-text-block.js
Executable file
6
dalston/block-extends/extend-media-text-block.js
Executable file
|
@ -0,0 +1,6 @@
|
|||
( function( blocks ) {
|
||||
blocks.registerBlockStyle( 'core/media-text', {
|
||||
name: 'inset-borders',
|
||||
label: 'Inset Borders'
|
||||
} );
|
||||
}( window.wp.blocks ) );
|
|
@ -199,5 +199,15 @@ function dalston_block_extends() {
|
|||
wp_enqueue_style( 'dalston-extend-cover-columns-style',
|
||||
get_stylesheet_directory_uri() . '/block-extends/extend-columns-block.css'
|
||||
);
|
||||
|
||||
// Columns Block Tweaks
|
||||
wp_enqueue_script( 'dalston-extend-media-text-block',
|
||||
get_stylesheet_directory_uri() . '/block-extends/extend-media-text-block.js',
|
||||
array( 'wp-blocks' )
|
||||
);
|
||||
|
||||
wp_enqueue_style( 'dalston-extend-cover-media-text-style',
|
||||
get_stylesheet_directory_uri() . '/block-extends/extend-media-text-block.css'
|
||||
);
|
||||
}
|
||||
add_action( 'enqueue_block_assets', 'dalston_block_extends' );
|
||||
|
|
|
@ -221,17 +221,9 @@ a {
|
|||
|
||||
background: #{map-deep-get($config-global, "color", "secondary", "default")};
|
||||
color: #{map-deep-get($config-global, "color", "background", "default")};
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
border: 1px solid #{map-deep-get($config-global, "color", "background", "default")};
|
||||
z-index: 1;
|
||||
&.is-style-inset-borders:before {
|
||||
border-color: #{map-deep-get($config-global, "color", "background", "default")};
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -40,19 +40,10 @@
|
|||
}
|
||||
|
||||
.wp-block-media-text {
|
||||
|
||||
background: #{map-deep-get($config-global, "color", "secondary", "default")};
|
||||
color: #{map-deep-get($config-global, "color", "background", "default")};
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
border: 1px solid #{map-deep-get($config-global, "color", "background", "default")};
|
||||
z-index: 1;
|
||||
&.is-style-inset-borders:before {
|
||||
border-color: #{map-deep-get($config-global, "color", "background", "default")};
|
||||
}
|
||||
}
|
||||
|
|
|
@ -890,16 +890,8 @@ table th,
|
|||
.wp-block-media-text {
|
||||
background: #0d1b24;
|
||||
color: #FFFFFF;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wp-block-media-text:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
border: 1px solid #FFFFFF;
|
||||
z-index: 1;
|
||||
.wp-block-media-text.is-style-inset-borders:before {
|
||||
border-color: #FFFFFF;
|
||||
}
|
||||
|
|
|
@ -3594,18 +3594,10 @@ a {
|
|||
.entry .entry-content .wp-block-media-text {
|
||||
background: #0d1b24;
|
||||
color: #FFFFFF;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.entry .entry-content .wp-block-media-text:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
border: 1px solid #FFFFFF;
|
||||
z-index: 1;
|
||||
.entry .entry-content .wp-block-media-text.is-style-inset-borders:before {
|
||||
border-color: #FFFFFF;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -3623,18 +3623,10 @@ a {
|
|||
.entry .entry-content .wp-block-media-text {
|
||||
background: #0d1b24;
|
||||
color: #FFFFFF;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.entry .entry-content .wp-block-media-text:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
border: 1px solid #FFFFFF;
|
||||
z-index: 1;
|
||||
.entry .entry-content .wp-block-media-text.is-style-inset-borders:before {
|
||||
border-color: #FFFFFF;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
Loading…
Add table
Reference in a new issue