Twenty Seventeen: Improve selectors for block editor custom colors.
Twenty Seventeen's original styles for the block editor custom colors had some issues: they weren't being applied to the button blocks due to lack of specificity, and when applied to paragraph blocks, there was no padding in the editor. This update makes sure the colors and related styles work as expected. Fixes #45426. git-svn-id: https://develop.svn.wordpress.org/trunk@44402 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
laurelfulford
parent
537faa7178
commit
899e5163fa
@ -6,10 +6,12 @@ Description: Used to style blocks.
|
||||
/*--------------------------------------------------------------
|
||||
>>> TABLE OF CONTENTS:
|
||||
----------------------------------------------------------------
|
||||
1.0 Blocks - Common Blocks
|
||||
2.0 Blocks - Formatting
|
||||
3.0 Blocks - Layout Elements
|
||||
4.0 Blocks - Widgets
|
||||
1.0 General Block Styles
|
||||
2.0 Blocks - Common Blocks
|
||||
3.0 Blocks - Formatting
|
||||
4.0 Blocks - Layout Elements
|
||||
5.0 Blocks - Widgets
|
||||
6.0 Blocks - Colors
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
@ -187,10 +189,8 @@ p.has-drop-cap:not(:focus)::first-letter {
|
||||
/* Buttons */
|
||||
|
||||
.wp-block-button .wp-block-button__link {
|
||||
background-color: #222;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-size: 0.875rem;
|
||||
@ -203,11 +203,64 @@ p.has-drop-cap:not(:focus)::first-letter {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wp-block-button .wp-block-button__link:hover,
|
||||
.wp-block-button .wp-block-button__link:focus {
|
||||
.entry-content .wp-block-button__link {
|
||||
background-color: #222;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.entry-content .is-style-outline .wp-block-button__link:not(.has-background) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.entry-content .is-style-outline .wp-block-button__link:not(.has-text-color) {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.colors-dark .wp-block-button__link {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.entry-content .wp-block-button__link:hover,
|
||||
.entry-content .wp-block-button__link:focus,
|
||||
.entry-content .is-style-outline .wp-block-button__link:not(.has-background):hover,
|
||||
.entry-content .is-style-outline .wp-block-button__link:not(.has-background):focus {
|
||||
background-color: #767676;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.colors-dark .entry-content .wp-block-button__link:hover,
|
||||
.colors-dark .entry-content .wp-block-button__link:focus,
|
||||
.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-background):hover,
|
||||
.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-background):focus {
|
||||
background-color: #bbb;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-text-color) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-text-color):hover,
|
||||
.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-text-color):focus {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.colors-custom .entry-content .wp-block-button__link,
|
||||
.colors-custom .entry-content .wp-block-button__link:hover,
|
||||
.colors-custom .entry-content .wp-block-button__link:focus,
|
||||
.colors-dark .entry-content .wp-block-button__link,
|
||||
.colors-dark .entry-content .wp-block-button__link:hover,
|
||||
.colors-dark .entry-content .wp-block-button__link:focus {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.colors-custom .entry-content .wp-block-button__link:hover,
|
||||
.colors-custom .entry-content .wp-block-button__link:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Separator */
|
||||
@ -293,3 +346,106 @@ p.has-drop-cap:not(:focus)::first-letter {
|
||||
font-size: 14px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
6.0 Blocks - Colors
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
.entry-content .has-pale-pink-color {
|
||||
color: #f78da7;
|
||||
}
|
||||
|
||||
.entry-content .has-pale-pink-background-color,
|
||||
.wp-block-button.is-style-outline .has-pale-pink-background-color:link {
|
||||
background-color: #f78da7;
|
||||
}
|
||||
|
||||
.entry-content .has-vivid-red-color {
|
||||
color: #cf2e2e;
|
||||
}
|
||||
|
||||
.entry-content .has-vivid-red-background-color,
|
||||
.wp-block-button.is-style-outline .has-vivid-red-background-color:link {
|
||||
background-color: #cf2e2e;
|
||||
}
|
||||
|
||||
.entry-content .has-luminous-vivid-orange-color {
|
||||
color: #ff6900;
|
||||
}
|
||||
|
||||
.entry-content .has-luminous-vivid-orange-background-color,
|
||||
.wp-block-button.is-style-outline .has-luminous-vivid-orange-background-color:link {
|
||||
background-color: #ff6900;
|
||||
}
|
||||
|
||||
.entry-content .has-luminous-vivid-amber-color {
|
||||
color: #fcb900;
|
||||
}
|
||||
|
||||
.entry-content .has-luminous-vivid-amber-background-color,
|
||||
.wp-block-button.is-style-outline .has-luminous-vivid-amber-background-color:link {
|
||||
background-color: #fcb900;
|
||||
}
|
||||
|
||||
.entry-content .has-light-green-cyan-color {
|
||||
color: #7bdcb5;
|
||||
}
|
||||
|
||||
.entry-content .has-light-green-cyan-background-color,
|
||||
.wp-block-button.is-style-outline .has-light-green-cyan-background-color:link {
|
||||
background-color: #7bdcb5;
|
||||
}
|
||||
|
||||
.entry-content .has-vivid-green-cyan-color {
|
||||
color: #00d084;
|
||||
}
|
||||
|
||||
.entry-content .has-vivid-green-cyan-background-color,
|
||||
.wp-block-button.is-style-outline .has-vivid-green-cyan-background-color:link {
|
||||
background-color: #00d084;
|
||||
}
|
||||
|
||||
.entry-content .has-pale-cyan-blue-color {
|
||||
color: #8ed1fc;
|
||||
}
|
||||
|
||||
.entry-content .has-pale-cyan-blue-background-color,
|
||||
.wp-block-button.is-style-outline .has-pale-cyan-blue-background-color:link {
|
||||
background-color: #8ed1fc;
|
||||
}
|
||||
|
||||
.entry-content .has-vivid-cyan-blue-color {
|
||||
color: #0693e3;
|
||||
}
|
||||
|
||||
.entry-content .has-vivid-cyan-blue-background-color,
|
||||
.wp-block-button.is-style-outline .has-vivid-cyan-blue-background-color:link {
|
||||
background-color: #0693e3;
|
||||
}
|
||||
|
||||
.entry-content .has-very-light-gray-color {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.entry-content .has-very-light-gray-background-color,
|
||||
.wp-block-button.is-style-outline .has-very-light-gray-background-color:link {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.entry-content .has-cyan-bluish-gray-color {
|
||||
color: #abb8c3;
|
||||
}
|
||||
|
||||
.entry-content .has-cyan-bluish-gray-background-color,
|
||||
.wp-block-button.is-style-outline .has-cyan-bluish-gray-background-color:link {
|
||||
background-color: #abb8c3;
|
||||
}
|
||||
|
||||
.entry-content .has-very-dark-gray-color {
|
||||
color: #313131;
|
||||
}
|
||||
|
||||
.entry-content .has-very-dark-gray-background-color,
|
||||
.wp-block-button.is-style-outline .has-very-dark-gray-background-color:link {
|
||||
background-color: #313131;
|
||||
}
|
||||
|
||||
@ -492,6 +492,10 @@ html[lang="th"] .edit-post-visual-editor * {
|
||||
margin-top: 0.075em;
|
||||
}
|
||||
|
||||
.wp-block-paragraph.has-background {
|
||||
padding: 20px 30px;
|
||||
}
|
||||
|
||||
/* Gallery */
|
||||
|
||||
.wp-block-gallery figcaption {
|
||||
@ -707,10 +711,8 @@ table.wp-block-table td:last-child {
|
||||
/* Buttons */
|
||||
|
||||
.wp-block-button .wp-block-button__link {
|
||||
background-color: #222;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-size: 0.875rem;
|
||||
@ -723,6 +725,15 @@ table.wp-block-table td:last-child {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wp-block-button__link {
|
||||
background-color: #222;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.is-style-outline .wp-block-button__link {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
/* Media & Text */
|
||||
|
||||
.wp-block-media-text *:last-child {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user