WordPress.org

Make WordPress Core

Changeset 38602


Ignore:
Timestamp:
09/14/2016 04:14:20 PM (21 months ago)
Author:
helen
Message:

Customizer: Better hover/focus state for section titles and available widgets.

The 4px border pattern is found in a number of places across the admin, including plugins, notices, and Press This.

props celloexpressions, folletto, hugobaeta.
see #29158.

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

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/colors/_admin.scss

    r36619 r38602  
    486486}
    487487
     488#customize-controls .control-section:hover > .accordion-section-title,
     489#customize-controls .control-section .accordion-section-title:hover,
     490#customize-controls .control-section.open .accordion-section-title,
     491#customize-controls .control-section .accordion-section-title:focus,
     492#available-widgets .widget-tpl:hover,
     493#available-widgets .widget-tpl.selected {
     494    border-left-color: $highlight-color;
     495}
     496
    488497/* Responsive Component */
    489498
  • trunk/src/wp-admin/css/customize-controls.css

    r38503 r38602  
    5050#customize-controls .customize-info {
    5151    border: none;
    52     border-top: 1px solid #ddd;
    5352    border-bottom: 1px solid #ddd;
    5453    margin-bottom: 15px;
     
    157156    background-color: #fff;
    158157    border-bottom: 1px solid #eee;
     158    border-left: 4px solid #fff;
    159159}
    160160
     
    173173#customize-controls .control-section.open .accordion-section-title,
    174174#customize-controls .control-section .accordion-section-title:focus {
    175     color: #23282d;
     175    color: #191e23;
    176176    background: #f5f5f5;
     177    border-left: 4px solid #0073aa;
     178}
     179
     180#accordion-section-themes + .control-section {
     181    border-top: 1px solid #ddd;
    177182}
    178183
     
    202207#customize-theme-controls .control-section:last-of-type > .accordion-section-title {
    203208    border-bottom-color: #ddd;
     209}
     210
     211#customize-theme-controls .control-panel-content .control-section:nth-child(2),
     212#customize-theme-controls .control-panel-nav_menus .control-section:nth-child(3) {
     213    border-top: 1px solid #ddd;
    204214}
    205215
     
    363373    background: #fff;
    364374    color: #555;
     375    border-left: none;
    365376}
    366377
     
    977988}
    978989
    979 .control-section-themes .accordion-section-title {
     990#customize-theme-controls .control-section-themes .accordion-section-title:hover, /* Not a focusable element. */
     991#customize-theme-controls .control-section-themes .accordion-section-title {
    980992    cursor: default;
    981 }
    982 
    983 #customize-theme-controls .control-section-themes .accordion-section-title:hover,
    984 #customize-theme-controls .control-section-themes .accordion-section-title:focus {
     993    background: #fff;
    985994    color: #555;
    986     background-color: #fff;
    987 }
    988 
    989 .control-section-themes .accordion-section-title {
     995    border-top: 1px solid #ddd;
     996    border-bottom: 1px solid #ddd;
     997    border-left: none;
     998    margin-top: 0;
     999}
     1000
     1001#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */
     1002#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child {
     1003    border-top: 0;
     1004}
     1005
     1006#customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
     1007#customize-theme-controls .control-section-themes > .accordion-section-title {
    9901008    margin: 15px 0;
    9911009}
     
    14451463    background: #fff;
    14461464    border-bottom: 1px solid #e5e5e5;
     1465    border-left: 4px solid #fff;
    14471466    cursor: pointer;
    14481467    display: none;
  • trunk/src/wp-admin/css/customize-nav-menus.css

    r38436 r38602  
    1 #accordion-section-menu_locations {
     1#customize-theme-controls #accordion-section-menu_locations {
    22    position: relative;
    33    margin-bottom: 15px;
     4}
     5
     6#customize-theme-controls #accordion-section-menu_locations > .accordion-section-title {
     7    border-bottom-color: #ddd;
    48}
    59
     
    810814/* Add/delete Menus */
    811815
     816#customize-theme-controls .control-panel-content .control-section-nav_menu:nth-last-child(2) .accordion-section-title {
     817    border-bottom-color: #ddd;
     818}
     819
    812820/* @todo update selector */
    813821#accordion-section-add_menu {
    814822    margin: 15px 12px;
     823    overflow: hidden;
    815824}
    816825
  • trunk/src/wp-admin/css/customize-widgets.css

    r36959 r38602  
    230230#available-widgets .widget-tpl:hover,
    231231#available-widgets .widget-tpl.selected {
    232     background: #eee;
     232    background: #f5f5f5;
    233233    border-bottom-color: #ccc;
     234    border-left: 4px solid #0073aa;
    234235}
    235236
  • trunk/src/wp-admin/css/themes.css

    r38520 r38602  
    14881488    bottom: 0;
    14891489    left: 0;
    1490     width: 300px;
     1490    width: 299px;
    14911491    height: 45px;
    14921492    border-top: 1px solid #ddd;
Note: See TracChangeset for help on using the changeset viewer.