WordPress.org

Make WordPress Core

Changeset 35200


Ignore:
Timestamp:
10/15/2015 04:45:14 PM (6 years ago)
Author:
helen
Message:

Circular focus styling for expand/collapse arrows.

Affects postboxes, widgets, and nav menus, all in the admin.

props grvrulz for the initial patch.
see #33808.

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

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/common.css

    r35184 r35200  
    28012801}
    28022802
    2803 /* @todo: these seem misplaced */
    2804 .js .meta-box-sortables .postbox:hover .handlediv {
    2805     margin-right: 0 !important;
    2806 }
    2807 
    28082803/* Metabox collapse arrow indicators */
    28092804.js .sidebar-name .sidebar-name-arrow:before,
    28102805.js .meta-box-sortables .postbox .toggle-indicator:before {
    2811     position: relative;
    2812     left: -1px; /* fix the dashicon horizontal alignment */
     2806    content: "\f142";
    28132807    display: inline-block;
    28142808    font: normal 20px/1 dashicons;
    28152809    speak: none;
    2816     padding: 8px;
    28172810    -webkit-font-smoothing: antialiased;
    28182811    -moz-osx-font-smoothing: grayscale;
     
    28202813}
    28212814
     2815.js .widgets-holder-wrap.closed .sidebar-name-arrow:before,
     2816.js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before {
     2817    content: "\f140";
     2818}
     2819
    28222820.js .sidebar-name .sidebar-name-arrow:before {
    28232821    padding: 10px;
     
    28342832}
    28352833
    2836 /* Show the arrow only on hover */
    2837 .js .sidebar-name .sidebar-name-arrow:before,
    2838 .js .meta-box-sortables .postbox .toggle-indicator:before {
    2839     content: "\f142";
    2840 }
    2841 
    2842 .js .widgets-holder-wrap.closed .sidebar-name-arrow:before,
    2843 .js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before {
    2844     content: "\f140";
     2834.js .postbox .handlediv .toggle-indicator:before {
     2835    margin-top: 4px;
     2836    width: 20px;
     2837    border-radius: 50%;
     2838    text-indent: -1px; /* account for the dashicon alignment */
     2839}
     2840
     2841.js .postbox .handlediv:focus {
     2842    -webkit-box-shadow: none;
     2843    box-shadow: none;
     2844}
     2845
     2846.js .postbox .handlediv:focus .toggle-indicator:before {
     2847    -webkit-box-shadow:
     2848        0 0 0 1px #5b9dd9,
     2849        0 0 2px 1px rgba(30, 140, 190, .8);
     2850    box-shadow:
     2851        0 0 0 1px #5b9dd9,
     2852        0 0 2px 1px rgba(30, 140, 190, .8);
    28452853}
    28462854
     
    29752983
    29762984.widget-top a.widget-action:after {
    2977     padding: 12px 12px 11px;
     2985    padding: 1px 2px 1px 0px;
     2986    margin-top: 10px;
     2987    margin-right: 10px;
     2988    border-radius: 50%;
    29782989}
    29792990
    29802991.widget-top a.widget-action:focus:after {
    2981     -webkit-box-shadow: 0 0 0 1px #5b9dd9,0 0 2px 1px rgba(30,140,190,.8);
    2982     box-shadow: 0 0 0 1px #5b9dd9,0 0 2px 1px rgba(30,140,190,.8);
    2983 }
    2984 
    2985 .nav-menus-php .item-edit:before {
    2986     line-height: 2.1;
     2992    -webkit-box-shadow:
     2993        0 0 0 1px #5b9dd9,
     2994        0 0 2px 1px rgba(30,140,190,.8);
     2995    box-shadow:
     2996        0 0 0 1px #5b9dd9,
     2997        0 0 2px 1px rgba(30,140,190,.8);
    29872998}
    29882999
  • trunk/src/wp-admin/css/nav-menus.css

    r34065 r35200  
    580580.item-type {
    581581    display: inline-block;
    582     padding: 12px 10px;
     582    padding: 12px 16px;
    583583    color: #666;
    584584    font-size: 12px;
     
    617617    overflow: hidden;
    618618    white-space: nowrap;
     619}
     620
     621.nav-menus-php .item-edit:before {
     622    margin-top: 10px;
     623    margin-left: 4px;
     624    width: 20px;
     625    border-radius: 50%;
     626    text-indent: -1px; /* account for the dashicon alignment */
     627}
     628
     629.nav-menus-php .item-edit:focus {
     630    -webkit-box-shadow: none;
     631    box-shadow: none;
     632}
     633
     634.nav-menus-php .item-edit:focus:before {
     635    -webkit-box-shadow:
     636        0 0 0 1px #5b9dd9,
     637        0 0 2px 1px rgba(30, 140, 190, .8);
     638    box-shadow:
     639        0 0 0 1px #5b9dd9,
     640        0 0 2px 1px rgba(30, 140, 190, .8);
    619641}
    620642
Note: See TracChangeset for help on using the changeset viewer.