WordPress.org
Get WordPress

Make WordPress Core

Ticket #29158: 29158.i9.3.diff

File 29158.i9.3.diff, 13.8 KB (added by celloexpressions, 9 years ago)

  • src/wp-admin/css/colors/_admin.scss

     
    475475        color: $menu-highlight-text;
    476476}
    477477
    478 /* Customize */
    479 
    480 #customize-theme-controls .widget-area-select .selected {
    481         background-color: $menu-highlight-background;
    482         color: $menu-highlight-text;
    483 }
    484 
    485 #customize-footer-actions .devices button:focus {
    486         border-bottom-color: $highlight-color;
    487 }
    488 
    489 #customize-controls .control-section:hover > .accordion-section-title,
    490 #customize-controls .control-section .accordion-section-title:hover,
    491 #customize-controls .control-section.open .accordion-section-title,
    492 #customize-controls .control-section .accordion-section-title:focus,
    493 #available-widgets .widget-tpl:hover,
    494 #available-widgets .widget-tpl.selected {
    495         border-left-color: $highlight-color;
    496 }
    497 
    498478/* Responsive Component */
    499479
    500480div#wp-responsive-toggle a:before {

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

     
    2121}
    2222
    2323#customize-controls .description {
    24         color: #555;
     24        color: #555d66;
    2525}
    2626
    2727#customize-header-actions .button-primary {
    … …  
    8282
    8383#customize-controls .customize-info .accordion-section-title {
    8484        background: #fff;
    85         color: #555;
     85        color: #555d66;
    8686        border-left: none;
    8787        border-right: none;
    8888        border-bottom: none;
    … …  
    9292#customize-controls .customize-info.open .accordion-section-title:after,
    9393#customize-controls .customize-info .accordion-section-title:hover:after,
    9494#customize-controls .customize-info .accordion-section-title:focus:after {
    95         color: #333;
     95        color: #32373c;
    9696}
    9797
    9898#customize-controls .customize-info .accordion-section-title:after {
    … …  
    134134        box-shadow: none;
    135135        -webkit-appearance: none;
    136136        background: transparent;
    137         color: #555;
     137        color: #555d66;
    138138        border: none;
    139139}
    140140
    … …  
    153153#customize-controls .customize-info .customize-panel-description,
    154154#customize-controls .customize-info .customize-section-description,
    155155#customize-controls .no-widget-areas-rendered-notice {
    156         color: #555;
     156        color: #555d66;
    157157        display: none;
    158158        background: #fff;
    159159        padding: 12px 15px;
    … …  
    187187}
    188188
    189189#customize-theme-controls .accordion-section-title {
    190         color: #555;
     190        color: #555d66;
    191191        background-color: #fff;
    192         border-bottom: 1px solid #eee;
     192        border-bottom: 1px solid #ddd;
    193193        border-left: 4px solid #fff;
     194        transition: .15s color ease-in-out,
     195                    .15s background-color ease-in-out,
     196                    .15s border-color ease-in-out;
    194197}
    195198
    196199#customize-theme-controls .accordion-section-title:after {
    … …  
    199202}
    200203
    201204#customize-theme-controls .accordion-section-content {
    202         color: #555;
     205        color: #555d66;
    203206        background: transparent;
    204207}
    205208
    … …  
    207210#customize-controls .control-section .accordion-section-title:hover,
    208211#customize-controls .control-section.open .accordion-section-title,
    209212#customize-controls .control-section .accordion-section-title:focus {
    210         color: #191e23;
    211         background: #f5f5f5;
    212         border-left: 4px solid #0073aa;
     213        color: #0073aa;
     214        background: #f3f3f5;
     215        border-left-color: #0073aa;
    213216}
    214217
    215218#accordion-section-themes + .control-section {
    … …  
    220223.js .control-section .accordion-section-title:hover,
    221224.js .control-section.open .accordion-section-title,
    222225.js .control-section .accordion-section-title:focus {
    223         background: #f5f5f5;
     226        background: #f3f3f5;
    224227}
    225228
    226229#customize-theme-controls .control-section:hover > .accordion-section-title:after,
    … …  
    227230#customize-theme-controls .control-section .accordion-section-title:hover:after,
    228231#customize-theme-controls .control-section.open .accordion-section-title:after,
    229232#customize-theme-controls .control-section .accordion-section-title:focus:after {
    230         color: #23282d;
     233        color: #0073aa;
    231234}
    232235
    233236#customize-theme-controls .control-section.open {
    … …  
    394397        padding: 10px 10px 12px 14px;
    395398        margin: 0;
    396399        line-height: 21px;
    397         color: #555;
     400        color: #555d66;
    398401}
    399402
    400403.accordion-sub-container.control-panel-content {
    … …  
    418421        top: 0;
    419422        left: 0;
    420423        width: 45px;
    421         height: 45px;
     424        height: 41px;
    422425        padding: 0 2px 0 0;
    423426        background: #eee;
    424427        border: none;
     428        border-top: 4px solid #eee;
    425429        border-right: 1px solid #ddd;
    426430        color: #444;
    427431        text-align: left;
    428432        cursor: pointer;
    429         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
    430         transition: color .1s ease-in-out, background .1s ease-in-out;
     433        -webkit-transition: color .15s ease-in-out,
     434                            border-color .15s ease-in-out,
     435                            background .15s ease-in-out;
     436        transition: color .1s ease-in-out,
     437                    border-color .15s ease-in-out,
     438                    background .15s ease-in-out;
    431439        -webkit-box-sizing: content-box;
    432440        -moz-box-sizing: content-box;
    433441        box-sizing: content-box;
    … …  
    444452        background: #fff;
    445453        border: none;
    446454        border-right: 1px solid #ddd;
     455        border-left: 4px solid #fff;
    447456        -webkit-box-shadow: none;
    448457        box-shadow: none;
    449458        cursor: pointer;
    450         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
    451         transition: color .1s ease-in-out, background .1s ease-in-out;
     459        -webkit-transition: color .15s ease-in-out,
     460                            border-color .15s ease-in-out,
     461                            background .15s ease-in-out;
     462        transition: color .15s ease-in-out,
     463                    border-color .15s ease-in-out,
     464                    background .15s ease-in-out;
    452465}
    453466
    454467.customize-section-back {
    … …  
    471484#customize-controls .panel-meta.customize-info .accordion-section-title:hover,
    472485#customize-controls .cannot-expand:hover .accordion-section-title {
    473486        background: #fff;
    474         color: #555;
     487        color: #555d66;
    475488        border-left-color: #fff;
    476489}
    477490
    … …  
    479492.customize-controls-close:hover,
    480493.customize-controls-preview-toggle:focus,
    481494.customize-controls-preview-toggle:hover {
    482         background: #ddd;
    483         border-color: #ccc;
    484         color: #000;
     495        background: #fff;
     496        color: #0073aa;
     497        border-top-color: #0073aa;
    485498        outline: none;
    486499        -webkit-box-shadow: none;
    487500        box-shadow: none;
    488501}
    489502
     503
    490504.customize-panel-back:hover,
    491505.customize-panel-back:focus,
    492506.customize-section-back:hover,
    493507.customize-section-back:focus {
    494         color: #23282d;
    495         background: #f5f5f5;
     508        color: #0073aa;
     509        background: #f3f3f5;
     510        border-left-color: #0073aa;
    496511        outline: none;
    497512        -webkit-box-shadow: none;
    498513        box-shadow: none;
    … …  
    502517        font: normal 22px/45px dashicons;
    503518        content: "\f335";
    504519        position: relative;
    505         top: 1px;
     520        top: -3px;
    506521        left: 13px;
    507522}
    508523
     524.customize-controls-close:focus:before {
     525        top: -3px;
     526}
     527
    509528.customize-panel-back:before,
    510529.customize-section-back:before {
    511530        font: normal 20px/72px dashicons;
    512531        content: "\f341";
    513532        position: relative;
    514         left: 13px;
     533        left: 9px;
    515534}
    516535
     536.customize-panel-back:focus:before,
     537.customize-section-back:focus:before {
     538        left: 10px;
     539}
     540
    517541.wp-full-overlay-sidebar .wp-full-overlay-header {
    518542        background-color: #eee;
    519543        -webkit-transition: padding ease-in-out .18s;
    … …  
    854878}
    855879
    856880.customize-control-color .dropdown .dropdown-content {
    857         background-color: #555;
     881        background-color: #555d66;
    858882        border: 1px solid rgba(0, 0, 0, 0.15);
    859883}
    860884
    … …  
    937961        display: none;
    938962        position: absolute;
    939963        width: 100%;
    940         color: #555;
     964        color: #555d66;
    941965        white-space: nowrap;
    942966        text-overflow: ellipsis;
    943967        overflow: hidden;
    … …  
    9921016.customize-control-header .uploaded .header-view .close {
    9931017        font-size: 20px;
    9941018        color: #fff;
    995         background: #555;
     1019        background: #555d66;
    9961020        background: rgba(0, 0, 0, 0.5);
    9971021        position: absolute;
    9981022        top: 10px;
    … …  
    11531177#customize-theme-controls .control-panel-themes > .accordion-section-title {
    11541178        cursor: default;
    11551179        background: #fff;
    1156         color: #555;
     1180        color: #555d66;
    11571181        border-top: 1px solid #ddd;
    11581182        border-bottom: 1px solid #ddd;
    11591183        border-left: none;
    … …  
    14111435        font-weight: 600;
    14121436        color: #555d66;
    14131437        text-shadow: none;
     1438        transition: .15s color ease-in-out,
     1439                    .15s background-color ease-in-out,
     1440                    .15s border-color ease-in-out;
    14141441}
    14151442
    14161443.control-panel-themes .theme-section {
    … …  
    14201447
    14211448.control-panel-themes .customize-themes-section-title:focus,
    14221449.control-panel-themes .customize-themes-section-title:hover {
     1450        color: #0073aa;
     1451        background: #f3f3f5;
    14231452        border-left-color: #0073aa;
    1424         color: #0073aa;
    1425         background: #f5f5f5;
    14261453}
    14271454
    14281455.control-panel-themes .theme-section .customize-themes-section-title.selected:after {
    … …  
    14781505}
    14791506
    14801507.control-panel-themes .filter-details {
    1481         background: #f5f5f5;
     1508        background: #f3f3f5;
    14821509        margin: 0;
    14831510        padding: 8px 15px;
    14841511        border-top: none;
    … …  
    14861513        display: none;
    14871514}
    14881515
    1489 .control-panel-themes .customize-themes-section-title.selected.details-open {
    1490         border-bottom-color: #f5f5f5;
    1491     border-left-color: #f5f5f5;
    1492         background: #f5f5f5;
     1516.control-panel-themes .customize-themes-section-title.details-open {
     1517        border-bottom-color: #f3f3f5;
     1518    border-left-color: #f3f3f5;
     1519        background: #f3f3f5;
    14931520}
    14941521
    14951522.control-panel-themes .favorites-form.filter-details label {
    … …  
    21542181        background: #fff;
    21552182        border-bottom: 1px solid #ddd;
    21562183        border-left: 4px solid #fff;
     2184        transition: .15s color ease-in-out,
     2185                    .15s background-color ease-in-out,
     2186                    .15s border-color ease-in-out;
    21572187        cursor: pointer;
    21582188        display: none;
    21592189}
    … …  
    22292259                background: #eee;
    22302260                border: 0;
    22312261                border-right: 1px solid #ddd;
    2232                 color: #444;
     2262                color: #555d66;
    22332263                cursor: pointer;
    22342264                -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
    22352265                transition: color .1s ease-in-out, background .1s ease-in-out;
    … …  
    23102340                padding: 9px 10px 12px 14px;
    23112341                margin: 0;
    23122342                line-height: 24px;
    2313                 color: #555;
     2343                color: #555d66;
    23142344                display: block;
    23152345                overflow: hidden;
    23162346                white-space: nowrap;

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

     
    229229
    230230#available-widgets .widget-tpl:hover,
    231231#available-widgets .widget-tpl.selected {
    232         background: #f5f5f5;
     232        background: #f3f3f5;
    233233        border-bottom-color: #ccc;
     234        color: #0073aa;
    234235        border-left: 4px solid #0073aa;
    235236}
    236237

  • src/wp-admin/css/themes.css

     
    15081508        box-shadow: none;
    15091509        border-top: 1px solid transparent;
    15101510        border-bottom: 4px solid transparent;
    1511         -webkit-transition: background .1s ease-in-out;
    1512         transition: background .1s ease-in-out;
     1511        transition: .15s color ease-in-out,
     1512                    .15s background-color ease-in-out,
     1513                    .15s border-color ease-in-out;
    15131514}
    15141515
    15151516.wp-full-overlay-footer .devices button:focus {
    … …  
    15371538        background-color: #fff;
    15381539}
    15391540
    1540 .wp-full-overlay-footer .devices button:focus {
    1541         background-color: #fff;
     1541.wp-full-overlay-footer .devices button:focus,
     1542.wp-full-overlay-footer .devices button.active:hover {
    15421543        border-bottom-color: #0073aa;
    15431544}
    15441545
    1545 .wp-full-overlay-footer .devices button.active:before,
     1546.wp-full-overlay-footer .devices button.active:before {
     1547        color: #191e23;
     1548}
     1549
    15461550.wp-full-overlay-footer .devices button:hover:before,
    15471551.wp-full-overlay-footer .devices button:focus:before {
    1548         color: #191e23;
     1552        color: #0073aa;
    15491553}
    15501554
    15511555.wp-full-overlay-footer .devices .preview-desktop:before {

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

     
    984984                                content = section.contentContainer,
    985985                                overlay = section.headContainer.closest( '.wp-full-overlay' ),
    986986                                backBtn = content.find( '.customize-section-back' ),
     987                                focusTarget = content.find( ':focusable' ).first(),
    987988                                sectionTitle = section.headContainer.find( '.accordion-section-title' ).first(),
    988989                                expand;
    989990
    … …  
    997998                                                        sectionTitle.attr( 'tabindex', '-1' );
    998999                                                        backBtn.attr( 'tabindex', '0' );
    9991000
    1000                                                         backBtn.focus();
     1001                                                        // Note that we can't always use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583
     1002                                                        if ( ! focusTarget.length ) {
     1003                                                                focusTarget = content.find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' ).first();
     1004                                                                if ( ! focusTarget.length ) {
     1005                                                                        focusTarget = backBtn; // Fall back to focusing the back button.
     1006                                                                }
     1007                                                        }
     1008                                                        focusTarget.focus();
    10011009                                                        content.css( 'top', '' );
    10021010                                                        container.scrollTop( 0 );
    10031011
    … …  
    19581966                                overlay = accordionSection.closest( '.wp-full-overlay' ),
    19591967                                container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ),
    19601968                                topPanel = panel.headContainer.find( '.accordion-section-title' ),
    1961                                 backBtn = accordionSection.find( '.customize-panel-back' );
     1969                                backBtn = accordionSection.find( '.customize-panel-back' ),
     1970                                focusTarget = accordionSection.find( ':focusable' ).first();
    19621971
    19631972                        if ( expanded && ! accordionSection.hasClass( 'current-panel' ) ) {
    19641973                                // Collapse any sibling sections/panels
    … …  
    19771986                                        topPanel.attr( 'tabindex', '-1' );
    19781987                                        backBtn.attr( 'tabindex', '0' );
    19791988
    1980                                         backBtn.focus();
     1989                                        // Note that we can't always use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583
     1990                                        if ( ! focusTarget.length ) {
     1991                                                focusTarget = accordionSection.find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' ).first();
     1992                                                if ( ! focusTarget.length ) {
     1993                                                        focusTarget = backBtn; // Fall back to focusing the back button.
     1994                                                }
     1995                                        }
     1996                                        focusTarget.focus();
    19811997                                        accordionSection.css( 'top', '' );
    19821998                                        container.scrollTop( 0 );
    19831999