Twenty Twelve: Fix button block custom colors.

Simplify some of the button block’s CSS selectors in the theme, to make sure the default colors don’t override the custom colors on the front end.

Also make sure the button’s gradient is not applied when a custom background color is added, since it will hide it. 

Fixes #45432.


Built from https://develop.svn.wordpress.org/branches/5.0@44194


git-svn-id: http://core.svn.wordpress.org/branches/5.0@44024 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
laurelfulford 2018-12-15 11:08:24 +00:00
parent e8fd5abb26
commit b108dc651e
3 changed files with 81 additions and 39 deletions

View File

@ -244,19 +244,9 @@ pre.wp-block-code {
/* Buttons */
.wp-block-button .wp-block-button__link,
.wp-block-button .wp-block-button__link:visited {
background-color: #e6e6e6;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
.wp-block-button .wp-block-button__link {
border: 1px solid #d2d2d2;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
color: #7c7c7c;
font-family: inherit;
font-size: 11px;
font-size: 0.785714286rem;
@ -266,20 +256,48 @@ pre.wp-block-code {
padding: 0.428571429rem 0.714285714rem;
}
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus {
.entry-content .wp-block-button__link,
.entry-content .wp-block-button__link:visited {
background-color: #e6e6e6;
color: #7c7c7c;
}
.entry-content .wp-block-button__link:hover,
.entry-content .wp-block-button__link:visited:hover,
.entry-content .wp-block-button__link:focus {
background-color: #ebebeb;
color: #5e5e5e;
}
.entry-content .wp-block-button__link:active {
background-color: #e1e1e1;
color: #757575;
}
.wp-block-button__link:not(.has-background) {
background-repeat: repeat-x;
background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
}
.wp-block-button__link:not(.has-text-color) {
box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
}
.wp-block-button__link:not(.has-background):hover,
.wp-block-button__link:not(.has-background):focus {
background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb);
background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb);
background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb);
background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb);
background-image: linear-gradient(top, #f9f9f9, #ebebeb);
background-repeat: repeat-x;
color: #5e5e5e;
}
.wp-block-button .wp-block-button__link:active {
background-color: #e1e1e1;
.wp-block-button__link:not(.has-background):active {
background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1);
background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1);
background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1);
@ -287,8 +305,10 @@ pre.wp-block-code {
background-image: linear-gradient(top, #ebebeb, #e1e1e1);
background-repeat: repeat-x;
border-color: transparent;
}
.wp-block-button__link:not(.has-text-color):active {
box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4;
color: #757575;
}
/* Separator */
@ -367,42 +387,52 @@ pre.wp-block-code {
6.0 Blocks - Colors
--------------------------------------------------------------*/
.has-blue-color {
.entry-content .has-blue-color,
.entry-content .has-blue-color:visited {
color: #21759b;
}
.has-blue-background-color {
.entry-content .has-blue-background-color,
.entry-content .has-blue-background-color:visited {
background-color: #21759b;
}
.has-dark-gray-color {
.entry-content .has-dark-gray-color,
.entry-content .has-dark-gray-color:visited {
color: #373737;
}
.has-dark-gray-background-color {
.entry-content .has-dark-gray-background-color,
.entry-content .has-dark-gray-background-color:visited {
background-color: #373737;
}
.has-medium-gray-color {
.entry-content .has-medium-gray-color,
.entry-content .has-medium-gray-color:visited {
color: #9f9f9f;
}
.has-medium-gray-background-color {
.entry-content .has-medium-gray-background-color,
.entry-content .has-medium-gray-background-color:visited {
background-color: #9f9f9f;
}
.has-light-gray-color {
.entry-content .has-light-gray-color,
.entry-content .has-light-gray-color:visited {
color: #e6e6e6;
}
.has-light-gray-background-color {
.entry-content .has-light-gray-background-color,
.entry-content .has-light-gray-background-color:visited {
background-color: #e6e6e6;
}
.has-white-color {
.entry-content .has-white-color,
.entry-content .has-white-color:visited {
color: #fff;
}
.has-white-background-color {
.entry-content .has-white-background-color,
.entry-content .has-white-background-color:visited {
background-color: #fff;
}

View File

@ -235,7 +235,7 @@ p.has-drop-cap:not(:focus)::first-letter {
}
.wp-block-file .wp-block-file__button,
.wp-block-button .wp-block-button__link:hover {
.wp-block-button .wp-block-file__button:hover {
background-color: #e6e6e6;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
@ -335,19 +335,14 @@ p.has-drop-cap:not(:focus)::first-letter {
/* Buttons */
.wp-block-button .wp-block-button__link,
.wp-block-button .wp-block-button__link:hover {
.wp-block-button__link {
background-color: #e6e6e6;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
color: #7c7c7c;
}
.wp-block-button .wp-block-button__link {
border: 1px solid #d2d2d2;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
color: #7c7c7c;
font-family: inherit;
font-size: 11px;
font-weight: normal;
@ -355,6 +350,23 @@ p.has-drop-cap:not(:focus)::first-letter {
padding: 6px 10px;
}
.wp-block-button .editor-rich-text__tinymce.mce-content-body {
line-height: 1.428571429;
}
.wp-block-button__link:not(.has-text-color) {
box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
}
.wp-block-button .wp-block-button__link:not(.has-background) {
background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
background-repeat: repeat-x;
}
/* Separator */
.editor-block-list__block hr.wp-block-separator {

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.0.2-alpha-44193';
$wp_version = '5.0.2-alpha-44194';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.