WordPress.org

Make WordPress Core

Changeset 38602


Ignore:
Timestamp:
09/14/16 16:14:20 (15 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.