WordPress.org

Make WordPress Core

Ticket #29158: 29158.borders.diff

File 29158.borders.diff, 3.5 KB (added by celloexpressions, 6 years ago)

Audit usage of borders in Customizer Navigation. Introduce clearer, higher-contrast hover/focus styling for navigation, with visual non-color focus indicators.

  • src/wp-admin/css/customize-controls.css

     
    5252
    5353#customize-controls .customize-info {
    5454        border: none;
    55         border-top: 1px solid #ddd;
    5655        border-bottom: 1px solid #ddd;
    5756        margin-bottom: 15px;
    5857}
     
    174173#customize-controls .control-section .accordion-section-title:hover,
    175174#customize-controls .control-section.open .accordion-section-title,
    176175#customize-controls .control-section .accordion-section-title:focus {
    177         color: #23282d;
     176        color: #191e23;
    178177        background: #f5f5f5;
     178        border-bottom: 1px solid #ccc;
     179        border-top: 1px solid #ccc;
     180        margin-top: -1px;
    179181}
    180182
     183.in-sub-panel #customize-theme-controls > ul > .control-section:hover > .accordion-section-title,
     184.in-sub-panel #customize-theme-controls > ul > .control-section.open > .accordion-section-title,
     185.in-themes-panel #customize-controls .control-section:hover > .accordion-section-title {
     186        margin-top: 0;
     187}
     188
     189#accordion-section-themes + .control-section {
     190        border-top: 1px solid #ddd;
     191}
     192
    181193.js .control-section:hover .accordion-section-title,
    182194.js .control-section .accordion-section-title:hover,
    183195.js .control-section.open .accordion-section-title,
     
    190202#customize-theme-controls .control-section.open .accordion-section-title:after,
    191203#customize-theme-controls .control-section .accordion-section-title:focus:after {
    192204        color: #23282d;
     205        content: "\f344";
     206        right: 14px;
    193207}
    194208
    195209#customize-theme-controls .control-section.open {
     
    386400#customize-controls .panel-meta.customize-info .accordion-section-title:hover {
    387401        background: #fff;
    388402        color: #555;
     403        border-top: none;
     404        border-bottom: none;
     405        margin-top: 0;
    389406}
    390407
    391408.customize-overlay-close:focus,
     
    410427.customize-section-back:focus {
    411428        color: #23282d;
    412429        background: #f5f5f5;
     430        border-right: 1px solid #ccc;
    413431        outline: none;
    414432        -webkit-box-shadow: none;
    415433        box-shadow: none;
     
    432450        left: 13px;
    433451}
    434452
     453.customize-panel-back:hover:before,
     454.customize-panel-back:focus:before,
     455.customize-section-back:hover:before,
     456.customize-section-back:focus:before {
     457        content: "\f340";
     458        left: 17px;
     459}
     460
    435461.control-panel-back:before {
    436462        font: normal 20px/45px dashicons;
    437463        content: "\f341";
     
    10281054        animation: customize-reload .75s;
    10291055}
    10301056
    1031 .control-section-themes .accordion-section-title {
     1057#customize-theme-controls .control-section-themes .accordion-section-title:hover, /* Not a focusable element. */
     1058#customize-theme-controls .control-section-themes .accordion-section-title {
    10321059        cursor: default;
     1060        background: #fff;
     1061        color: #555;
     1062        border-top: 1px solid #ddd;
     1063        border-bottom: 1px solid #ddd;
     1064        margin-top: 0;
    10331065}
    10341066
    1035 #customize-theme-controls .control-section-themes .accordion-section-title:hover,
    1036 #customize-theme-controls .control-section-themes .accordion-section-title:focus {
    1037         color: #555;
    1038         background-color: #fff;
     1067#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */
     1068#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child {
     1069        border-top: 0;
    10391070}
    10401071
    1041 .control-section-themes .accordion-section-title {
     1072#customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
     1073#customize-theme-controls .control-section-themes > .accordion-section-title {
    10421074        margin: 15px 0;
    10431075}
    10441076