WordPress.org

Make WordPress Core

Changeset 44194


Ignore:
Timestamp:
12/14/2018 08:54:35 PM (9 months 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:
2 edited

Legend:

Unmodified
Added
Removed
  • branches/5.0/src/wp-content/themes/twentytwelve/css/blocks.css

    r43871 r44194  
    245245/* Buttons */
    246246
    247 .wp-block-button .wp-block-button__link,
    248 .wp-block-button .wp-block-button__link:visited {
    249     background-color: #e6e6e6;
    250     background-repeat: repeat-x;
    251     background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
    252     background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
    253     background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
    254     background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
    255     background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
     247.wp-block-button .wp-block-button__link {
    256248    border: 1px solid #d2d2d2;
    257249    border-radius: 3px;
    258     box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
    259     color: #7c7c7c;
    260250    font-family: inherit;
    261251    font-size: 11px;
     
    267257}
    268258
    269 .wp-block-button .wp-block-button__link:hover,
    270 .wp-block-button .wp-block-button__link:focus {
     259.entry-content .wp-block-button__link,
     260.entry-content .wp-block-button__link:visited {
     261    background-color: #e6e6e6;
     262    color: #7c7c7c;
     263}
     264
     265.entry-content .wp-block-button__link:hover,
     266.entry-content .wp-block-button__link:visited:hover,
     267.entry-content .wp-block-button__link:focus {
    271268    background-color: #ebebeb;
     269    color: #5e5e5e;
     270}
     271
     272.entry-content .wp-block-button__link:active {
     273    background-color: #e1e1e1;
     274    color: #757575;
     275}
     276
     277.wp-block-button__link:not(.has-background) {
     278    background-repeat: repeat-x;
     279    background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
     280    background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
     281    background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
     282    background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
     283    background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
     284}
     285
     286.wp-block-button__link:not(.has-text-color) {
     287    box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
     288}
     289
     290.wp-block-button__link:not(.has-background):hover,
     291.wp-block-button__link:not(.has-background):focus {
    272292    background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb);
    273293    background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb);
     
    276296    background-image: linear-gradient(top, #f9f9f9, #ebebeb);
    277297    background-repeat: repeat-x;
    278     color: #5e5e5e;
    279 }
    280 
    281 .wp-block-button .wp-block-button__link:active {
    282     background-color: #e1e1e1;
     298}
     299
     300.wp-block-button__link:not(.has-background):active {
    283301    background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1);
    284302    background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1);
     
    288306    background-repeat: repeat-x;
    289307    border-color: transparent;
     308}
     309
     310.wp-block-button__link:not(.has-text-color):active {
    290311    box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4;
    291     color: #757575;
    292312}
    293313
     
    368388--------------------------------------------------------------*/
    369389
    370 .has-blue-color {
     390.entry-content .has-blue-color,
     391.entry-content .has-blue-color:visited {
    371392    color: #21759b;
    372393}
    373394
    374 .has-blue-background-color {
     395.entry-content .has-blue-background-color,
     396.entry-content .has-blue-background-color:visited {
    375397    background-color: #21759b;
    376398}
    377399
    378 .has-dark-gray-color {
     400.entry-content .has-dark-gray-color,
     401.entry-content .has-dark-gray-color:visited {
    379402    color: #373737;
    380403}
    381404
    382 .has-dark-gray-background-color {
     405.entry-content .has-dark-gray-background-color,
     406.entry-content .has-dark-gray-background-color:visited {
    383407    background-color: #373737;
    384408}
    385409
    386 .has-medium-gray-color {
     410.entry-content .has-medium-gray-color,
     411.entry-content .has-medium-gray-color:visited {
    387412    color: #9f9f9f;
    388413}
    389414
    390 .has-medium-gray-background-color {
     415.entry-content .has-medium-gray-background-color,
     416.entry-content .has-medium-gray-background-color:visited {
    391417    background-color: #9f9f9f;
    392418}
    393419
    394 .has-light-gray-color {
     420.entry-content .has-light-gray-color,
     421.entry-content .has-light-gray-color:visited {
    395422    color: #e6e6e6;
    396423}
    397424
    398 .has-light-gray-background-color {
     425.entry-content .has-light-gray-background-color,
     426.entry-content .has-light-gray-background-color:visited {
    399427    background-color: #e6e6e6;
    400428}
    401429
    402 .has-white-color {
     430.entry-content .has-white-color,
     431.entry-content .has-white-color:visited {
    403432    color: #fff;
    404433}
    405434
    406 .has-white-background-color {
     435.entry-content .has-white-background-color,
     436.entry-content .has-white-background-color:visited {
    407437    background-color: #fff;
    408438}
  • branches/5.0/src/wp-content/themes/twentytwelve/css/editor-blocks.css

    r43871 r44194  
    236236
    237237.wp-block-file .wp-block-file__button,
    238 .wp-block-button .wp-block-button__link:hover {
     238.wp-block-button .wp-block-file__button:hover {
    239239    background-color: #e6e6e6;
    240240    background-repeat: repeat-x;
     
    336336/* Buttons */
    337337
    338 .wp-block-button .wp-block-button__link,
    339 .wp-block-button .wp-block-button__link:hover {
     338.wp-block-button__link {
    340339    background-color: #e6e6e6;
    341     background-repeat: repeat-x;
     340    color: #7c7c7c;
     341}
     342
     343.wp-block-button .wp-block-button__link {
     344    border: 1px solid #d2d2d2;
     345    border-radius: 3px;
     346    font-family: inherit;
     347    font-size: 11px;
     348    font-weight: normal;
     349    line-height: 1.428571429;
     350    padding: 6px 10px;
     351}
     352
     353.wp-block-button .editor-rich-text__tinymce.mce-content-body {
     354    line-height: 1.428571429;
     355}
     356
     357.wp-block-button__link:not(.has-text-color) {
     358    box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
     359}
     360
     361.wp-block-button .wp-block-button__link:not(.has-background) {
    342362    background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
    343363    background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
     
    345365    background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
    346366    background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
    347     border: 1px solid #d2d2d2;
    348     border-radius: 3px;
    349     box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
    350     color: #7c7c7c;
    351     font-family: inherit;
    352     font-size: 11px;
    353     font-weight: normal;
    354     line-height: 1.428571429;
    355     padding: 6px 10px;
     367    background-repeat: repeat-x;
    356368}
    357369
Note: See TracChangeset for help on using the changeset viewer.