WordPress.org

Make WordPress Core

Ticket #28979: 28979.design.diff

File 28979.design.diff, 2.6 KB (added by celloexpressions, 7 years ago)

Implement design tweaks to distinguish panels from top-level sections, and adjust hover/focus states accordingly.

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

     
    3232        display: block;
    3333}
    3434
     35#customize-header-actions {
     36        border-bottom: 1px solid #ddd;
     37}
     38
    3539#customize-controls .wp-full-overlay-sidebar-content {
    3640        overflow-y: auto;
    3741        overflow-x: hidden;
     
    9094
    9195#customize-theme-controls .accordion-section-content {
    9296        color: #555555;
    93         background: white;
     97        background: #fff;
    9498}
    9599
    96100#customize-info.open .accordion-section-title,
     
    100104#customize-theme-controls .control-section .accordion-section-title:hover,
    101105#customize-theme-controls .control-section.open .accordion-section-title,
    102106#customize-theme-controls .control-section .accordion-section-title:focus {
    103         color: #555555;
    104         background: #f5f5f5;
     107        color: #222;
     108        background: #eee;
    105109}
    106110
    107111.js .control-section:hover .accordion-section-title,
     
    108112.js .control-section .accordion-section-title:hover,
    109113.js .control-section.open .accordion-section-title,
    110114.js .control-section .accordion-section-title:focus {
    111         background: #f5f5f5;
     115        background: #eee;
    112116}
    113117
    114118#customize-theme-controls .control-section:hover > .accordion-section-title:after,
     
    115119#customize-theme-controls .control-section .accordion-section-title:hover:after,
    116120#customize-theme-controls .control-section.open .accordion-section-title:after,
    117121#customize-theme-controls .control-section .accordion-section-title:focus:after {
    118         color: #555555;
     122        color: #555;
    119123}
    120124
    121125#customize-info.open,
     
    137141        margin: 0;
    138142}
    139143
     144.control-section.control-panel > .accordion-section-title {
     145        padding-right: 54px;
     146}
     147
    140148.control-section.control-panel > .accordion-section-title:after {
    141         content: "\f139";
     149        content: "\f345";
     150        background: #f5f5f5;
     151        color: #555;
     152        width: 38px;
     153        height: 100%;
     154        margin: -11px -10px -11px 0;
     155        line-height: 45px;
     156        padding-left: 5px;
     157        border-left: 1px solid #eee;
     158        z-index: 0;
    142159}
    143160
    144161.rtl .control-section.control-panel > .accordion-section-title:after {
    145         content: "\f141";
     162        content: "\f341";
    146163}
    147164
     165#customize-theme-controls .control-section.control-panel > h3.accordion-section-title:focus:after,
     166#customize-theme-controls .control-section.control-panel > h3.accordion-section-title:hover:after {
     167        background: #ddd;
     168        color: #000;
     169        border-left: 1px solid #d9d9d9;
     170        border-top: 1px solid #d9d9d9;
     171        border-bottom: 1px solid #d9d9d9;
     172        margin-top: -12px;
     173        line-height: 44px;
     174        z-index: 1;
     175}
     176
    148177.accordion-sub-container.control-panel-content {
    149178        display: none;
    150179        position: absolute;