WordPress.org

Make WordPress Core

Changeset 35207


Ignore:
Timestamp:
10/15/2015 06:52:24 PM (5 years ago)
Author:
helen
Message:

Circular focus styling for widgets and menus in the customizer.

see #33808.

Location:
trunk/src/wp-admin/css
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/customize-nav-menus.css

    r34991 r35207  
    220220}
    221221
    222 .customize-control-nav_menu_item .item-edit:focus {
    223     color: #0073aa;
    224     -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
    225     box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
    226 }
    227 
    228 /* rework the arrow indicator implementation for NVDA bug same as #32715 */
    229 .wp-customizer .menu-item .item-edit .toggle-indicator {
    230     display: inline-block;
    231     font-size: 20px;
    232     line-height: 1;
    233 }
    234 
    235 .wp-customizer .menu-item .item-edit .toggle-indicator:after {
    236     content: "\f140";
    237     font: normal 20px/1 dashicons;
    238     color: #a0a5aa;
    239     vertical-align: top;
    240     speak: none;
    241     -webkit-font-smoothing: antialiased;
    242     -moz-osx-font-smoothing: grayscale;
    243     text-decoration: none !important;
    244 }
    245 
    246222.wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:after {
    247223    content: "\f142";
     
    357333    padding-right: 0;
    358334    line-height: 30px;
     335}
     336
     337/* rework the arrow indicator implementation for NVDA bug same as #32715 */
     338.wp-customizer .toggle-indicator {
     339    display: inline-block;
     340    font-size: 20px;
     341    line-height: 1;
     342    text-indent: -1px; /* account for the dashicon alignment */
     343}
     344
     345.wp-customizer .toggle-indicator:after {
     346    content: "\f140";
     347    speak: none;
     348    vertical-align: top;
     349    -webkit-border-radius: 50%;
     350    border-radius: 50%;
     351    color: #a0a5aa;
     352    font: normal 20px/1 dashicons;
     353    -webkit-font-smoothing: antialiased;
     354    -moz-osx-font-smoothing: grayscale;
     355    text-decoration: none !important;
     356}
     357
     358.wp-customizer button:focus .toggle-indicator:after {
     359    -webkit-box-shadow:
     360        0 0 0 1px #5b9dd9,
     361        0 0 2px 1px rgba(30, 140, 190, .8);
     362    box-shadow:
     363        0 0 0 1px #5b9dd9,
     364        0 0 2px 1px rgba(30, 140, 190, .8);
    359365}
    360366
     
    546552.menu-item-bar .item-delete:before {
    547553    content: "\f335";
     554    position: absolute;
     555    top: 9px;
     556    left: 5px;
     557    -webkit-border-radius: 50%;
     558    border-radius: 50%;
    548559    font: normal 20px/1 dashicons;
    549560    -webkit-font-smoothing: antialiased;
    550561    -moz-osx-font-smoothing: grayscale;
    551     position: absolute;
    552     top: 9px;
    553     left: 5px;
    554562}
    555563
     
    563571}
    564572
    565 .menu-item-bar .item-delete:focus {
    566     -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
    567     box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
     573.menu-item-bar .item-delete:focus:before {
     574    -webkit-box-shadow:
     575        0 0 0 1px #5b9dd9,
     576        0 0 2px 1px rgba(30, 140, 190, .8);
     577    box-shadow:
     578        0 0 0 1px #5b9dd9,
     579        0 0 2px 1px rgba(30, 140, 190, .8);
    568580}
    569581
     
    624636}
    625637
    626 #available-menu-items .accordion-section-title .toggle-indicator {
    627     display: inline-block;
    628     font-size: 20px;
    629     line-height: 1;
    630 }
    631 
    632 #available-menu-items .accordion-section-title .toggle-indicator:after {
    633     content: "\f140";
    634     font: normal 20px/1 dashicons;
    635     color: #a0a5aa;
    636     vertical-align: top;
    637     speak: none;
    638     -webkit-font-smoothing: antialiased;
    639     -moz-osx-font-smoothing: grayscale;
    640     text-decoration: none !important;
    641 }
    642 
    643638#available-menu-items .accordion-section-title:hover .toggle-indicator:after {
    644639    color: #777;
     
    677672}
    678673
    679 #available-menu-items .accordion-section-title button:focus {
    680     -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
    681     box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
    682 }
    683 
    684674#available-menu-items .accordion-section-title .no-items,
    685675#available-menu-items .cannot-expand .accordion-section-title .spinner,
     
    790780#available-menu-items .menu-item-handle .item-add:focus {
    791781    color: #23282d;
    792     -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
    793     box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
    794782}
    795783
    796784#available-menu-items .item-add:before {
    797785    content: "\f543";
    798     font: normal 20px/1 dashicons;
    799786    position: relative;
    800787    left: 2px;
    801788    top: 3px;
     789    display: inline-block;
     790    height: 20px;
     791    -webkit-border-radius: 50%;
     792    border-radius: 50%;
     793    font: normal 20px/1.05 dashicons; /* line height is to account for the dashicon's vertical alignment */
     794}
     795
     796#available-menu-items .item-add:focus:before {
     797    -webkit-box-shadow:
     798        0 0 0 1px #5b9dd9,
     799        0 0 2px 1px rgba(30, 140, 190, .8);
     800    box-shadow:
     801        0 0 0 1px #5b9dd9,
     802        0 0 2px 1px rgba(30, 140, 190, .8);
    802803}
    803804
  • trunk/src/wp-admin/css/customize-widgets.css

    r35015 r35207  
    629629        padding: 13px 15px;
    630630    }
    631     .widget-top a.widget-action:after {
    632         padding-top: 9px;
    633     }
    634631    .widget-reorder-nav span {
    635632        height: 39px;
Note: See TracChangeset for help on using the changeset viewer.