WordPress.org
Get WordPress

Make WordPress Core

Ticket #29158: 29158.i9.2.diff

File 29158.i9.2.diff, 12.6 KB (added by celloexpressions, 9 years ago)

Unify transitions to .15s (per @folletto, and any slower is generally not visible) and remove color schemes.

  • 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 {
    … …  
    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;
     213        color: #0073aa;
     214        background: #f3f3f5;
     215        border-left-color: #f3f3f5;
     216}
     217
     218#customize-controls .control-section .accordion-section-title:focus {
    212219        border-left: 4px solid #0073aa;
    213220}
    214221
    … …  
    220227.js .control-section .accordion-section-title:hover,
    221228.js .control-section.open .accordion-section-title,
    222229.js .control-section .accordion-section-title:focus {
    223         background: #f5f5f5;
     230        background: #f3f3f5;
    224231}
    225232
    226233#customize-theme-controls .control-section:hover > .accordion-section-title:after,
    … …  
    227234#customize-theme-controls .control-section .accordion-section-title:hover:after,
    228235#customize-theme-controls .control-section.open .accordion-section-title:after,
    229236#customize-theme-controls .control-section .accordion-section-title:focus:after {
    230         color: #23282d;
     237        color: #0073aa;
    231238}
    232239
    233240#customize-theme-controls .control-section.open {
    … …  
    392399        padding: 10px 10px 12px 14px;
    393400        margin: 0;
    394401        line-height: 21px;
    395         color: #555;
     402        color: #555d66;
    396403}
    397404
    398405.accordion-sub-container.control-panel-content {
    … …  
    424431        color: #444;
    425432        text-align: left;
    426433        cursor: pointer;
    427         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
    428         transition: color .1s ease-in-out, background .1s ease-in-out;
     434        -webkit-transition: color .15s ease-in-out,
     435                            background .15s ease-in-out;
     436        transition: color .1s ease-in-out,
     437                    background .15s ease-in-out;
    429438        -webkit-box-sizing: content-box;
    430439        -moz-box-sizing: content-box;
    431440        box-sizing: content-box;
    … …  
    445454        -webkit-box-shadow: none;
    446455        box-shadow: none;
    447456        cursor: pointer;
    448         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
    449         transition: color .1s ease-in-out, background .1s ease-in-out;
     457        -webkit-transition: color .15s ease-in-out,
     458                            background .15s ease-in-out;
     459        transition: color .15s ease-in-out,
     460                    background .15s ease-in-out;
    450461}
    451462
    452463.customize-section-back {
    … …  
    467478
    468479#customize-controls .panel-meta.customize-info .accordion-section-title:hover {
    469480        background: #fff;
    470         color: #555;
     481        color: #555d66;
    471482        border-left: none;
    472483}
    473484
    … …  
    475486.customize-controls-close:hover,
    476487.customize-controls-preview-toggle:focus,
    477488.customize-controls-preview-toggle:hover {
    478         background: #ddd;
    479         border-color: #ccc;
    480         color: #000;
     489        background: #fff;
     490        color: #0073aa;
    481491        outline: none;
    482492        -webkit-box-shadow: none;
    483493        box-shadow: none;
    484494}
    485495
     496
     497.customize-controls-close:focus,
     498.customize-controls-preview-toggle:focus {
     499        border-top: 4px solid #0073aa;
     500        height: 41px;
     501}
     502
    486503.customize-panel-back:hover,
    487504.customize-panel-back:focus,
    488505.customize-section-back:hover,
    489506.customize-section-back:focus {
    490         color: #23282d;
    491         background: #f5f5f5;
     507        color: #0073aa;
     508        background: #f3f3f5;
    492509        outline: none;
    493510        -webkit-box-shadow: none;
    494511        box-shadow: none;
    495512}
    496513
     514.customize-panel-back:focus,
     515.customize-section-back:focus {
     516        border-left: 4px solid #0073aa;
     517}
     518
    497519.customize-controls-close:before {
    498520        font: normal 22px/45px dashicons;
    499521        content: "\f335";
    … …  
    502524        left: 13px;
    503525}
    504526
     527.customize-controls-close:focus:before {
     528        top: -3px;
     529}
     530
    505531.customize-panel-back:before,
    506532.customize-section-back:before {
    507533        font: normal 20px/72px dashicons;
    … …  
    510536        left: 13px;
    511537}
    512538
     539.customize-panel-back:focus:before,
     540.customize-section-back:focus:before {
     541        left: 10px;
     542}
     543
    513544.wp-full-overlay-sidebar .wp-full-overlay-header {
    514545        background-color: #eee;
    515546        -webkit-transition: padding ease-in-out .18s;
    … …  
    801832}
    802833
    803834.customize-control-color .dropdown .dropdown-content {
    804         background-color: #555;
     835        background-color: #555d66;
    805836        border: 1px solid rgba(0, 0, 0, 0.15);
    806837}
    807838
    … …  
    884915        display: none;
    885916        position: absolute;
    886917        width: 100%;
    887         color: #555;
     918        color: #555d66;
    888919        white-space: nowrap;
    889920        text-overflow: ellipsis;
    890921        overflow: hidden;
    … …  
    933964.customize-control-header .uploaded .header-view .close {
    934965        font-size: 20px;
    935966        color: #fff;
    936         background: #555;
     967        background: #555d66;
    937968        background: rgba(0, 0, 0, 0.5);
    938969        position: absolute;
    939970        top: 10px;
    … …  
    10791110#customize-theme-controls .control-panel-themes > .accordion-section-title {
    10801111        cursor: default;
    10811112        background: #fff;
    1082         color: #555;
     1113        color: #555d66;
    10831114        border-top: 1px solid #ddd;
    10841115        border-bottom: 1px solid #ddd;
    10851116        border-left: none;
    … …  
    13371368        font-weight: 600;
    13381369        color: #555d66;
    13391370        text-shadow: none;
     1371        transition: .15s color ease-in-out,
     1372                    .15s background-color ease-in-out,
     1373                    .15s border-color ease-in-out;
    13401374}
    13411375
    13421376.control-panel-themes .theme-section {
    … …  
    13461380
    13471381.control-panel-themes .customize-themes-section-title:focus,
    13481382.control-panel-themes .customize-themes-section-title:hover {
    1349         border-left-color: #0073aa;
    13501383        color: #0073aa;
    1351         background: #f5f5f5;
     1384        background: #f3f3f5;
     1385    border-left-color: #f3f3f5;
    13521386}
    13531387
     1388.control-panel-themes .customize-themes-section-title:focus {
     1389        border-left-color: #0073aa;
     1390}
     1391
    13541392.control-panel-themes .theme-section .customize-themes-section-title.selected:after {
    13551393        content: "\f147";
    13561394        font: 16px/1 dashicons;
    … …  
    14041442}
    14051443
    14061444.control-panel-themes .filter-details {
    1407         background: #f5f5f5;
     1445        background: #f3f3f5;
    14081446        margin: 0;
    14091447        padding: 8px 15px;
    14101448        border-top: none;
    … …  
    14131451}
    14141452
    14151453.control-panel-themes .customize-themes-section-title.selected.details-open {
    1416         border-bottom-color: #f5f5f5;
    1417     border-left-color: #f5f5f5;
    1418         background: #f5f5f5;
     1454        border-bottom-color: #f3f3f5;
     1455    border-left-color: #f3f3f5;
     1456        background: #f3f3f5;
    14191457}
    14201458
    14211459.control-panel-themes .favorites-form.filter-details label {
    … …  
    20802118        background: #fff;
    20812119        border-bottom: 1px solid #ddd;
    20822120        border-left: 4px solid #fff;
     2121        transition: .15s color ease-in-out,
     2122                    .15s background-color ease-in-out,
     2123                    .15s border-color ease-in-out;
    20832124        cursor: pointer;
    20842125        display: none;
    20852126}
    … …  
    21552196                background: #eee;
    21562197                border: 0;
    21572198                border-right: 1px solid #ddd;
    2158                 color: #444;
     2199                color: #555d66;
    21592200                cursor: pointer;
    21602201                -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
    21612202                transition: color .1s ease-in-out, background .1s ease-in-out;
    … …  
    22362277                padding: 9px 10px 12px 14px;
    22372278                margin: 0;
    22382279                line-height: 24px;
    2239                 color: #555;
     2280                color: #555d66;
    22402281                display: block;
    22412282                overflow: hidden;
    22422283                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;
     235}
     236
     237#available-widgets .widget-tpl.selected { /* Used for focus */
    234238        border-left: 4px solid #0073aa;
    235239}
    236240

  • 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

     
    980980                                content = section.contentContainer,
    981981                                overlay = section.headContainer.closest( '.wp-full-overlay' ),
    982982                                backBtn = content.find( '.customize-section-back' ),
     983                                focusTarget = content.find( ':focusable' ).first() || backBtn,
    983984                                sectionTitle = section.headContainer.find( '.accordion-section-title' ).first(),
    984985                                expand;
    985986
    … …  
    993994                                                        sectionTitle.attr( 'tabindex', '-1' );
    994995                                                        backBtn.attr( 'tabindex', '0' );
    995996
    996                                                         backBtn.focus();
     997                                                        focusTarget.focus();
    997998                                                        content.css( 'top', '' );
    998999                                                        container.scrollTop( 0 );
    9991000
    … …  
    19691970                                overlay = accordionSection.closest( '.wp-full-overlay' ),
    19701971                                container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ),
    19711972                                topPanel = panel.headContainer.find( '.accordion-section-title' ),
    1972                                 backBtn = accordionSection.find( '.customize-panel-back' );
     1973                                backBtn = accordionSection.find( '.customize-panel-back' ),
     1974                                focusTarget = accordionSection.find( ':focusable' ).first() || backBtn;
    19731975
    19741976                        if ( expanded && ! accordionSection.hasClass( 'current-panel' ) ) {
    19751977                                // Collapse any sibling sections/panels
    … …  
    19881990                                        topPanel.attr( 'tabindex', '-1' );
    19891991                                        backBtn.attr( 'tabindex', '0' );
    19901992
    1991                                         backBtn.focus();
     1993                                        focusTarget.focus();
    19921994                                        accordionSection.css( 'top', '' );
    19931995                                        container.scrollTop( 0 );
    19941996