Changeset 44194

Timestamp:

12/14/2018 08:54:35 PM (6 years ago)

Author:

laurelfulford

Message:

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.

Location:

branches/5.0/src/wp-content/themes/twentytwelve/css

Files:

• blocks.css (modified) (5 diffs)
• editor-blocks.css (modified) (3 diffs)

branches/5.0/src/wp-content/themes/twentytwelve/css/blocks.css

@@ -245 +245 @@
 /* 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;
@@ -267 +257 @@
 }
 
-.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);
@@ -276 +296 @@
     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);
@@ -288 +306 @@
     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;
 }
 
@@ -368 +388 @@
 --------------------------------------------------------------*/
 
-.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;
 }

branches/5.0/src/wp-content/themes/twentytwelve/css/editor-blocks.css

@@ -236 +236 @@
 
 .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;
@@ -336 +336 @@
 /* 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;
+    color: #7c7c7c;
+}
+
+.wp-block-button .wp-block-button__link {
+    border: 1px solid #d2d2d2;
+    border-radius: 3px;
+    font-family: inherit;
+    font-size: 11px;
+    font-weight: normal;
+    line-height: 1.428571429;
+    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);
@@ -345 +365 @@
     background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
     background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
-    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;
-    line-height: 1.428571429;
-    padding: 6px 10px;
+    background-repeat: repeat-x;
 }