Changeset 44194

Timestamp:

12/14/2018 08:54:35 PM (8 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;
 }