sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Twenty Twelve: Fix button block custom colors.

Browse Source 
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.

Props laurelfulford.

Merges [44194] to trunk.

Fixes #45432.

git-svn-id: https://develop.svn.wordpress.org/trunk@44303 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Jonathan Desrosiers 2018-12-18 22:24:59 +00:00
parent de1ee6961a
commit a1f763aa98
2 changed files with 80 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/wp-content/themes/twentytwelve/css/blocks.css
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;
}

34
src/wp-content/themes/twentytwelve/css/editor-blocks.css
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 {