WordPress/wp-admin/css/customize-nav-menus.min.css
Andrea Fercia 1d739a0925 Accessibility: Make some Widgets buttons real buttons.
Links used as UI controls that behave like buttons, should be buttons.
- changes the widgets "toggle", "Delete", and "Close" links to buttons
- uses `aria-expanded` to announce the state of the toggle buttons
- increases a bit the clickable area of the toggle
- ensures the "circular focus" doesn't get cut-off in some browsers by centering the toggle arrows
- uses a `<span>` element with an `aria-hidden` attribute to hide CSS generated font icons from assistive technologies
- standardizes on `.toggle-indicator:before` rather than `:after`
- changes two `#f00` reds in `#dc3232`, see #35622

Fixes #31476.

Built from https://develop.svn.wordpress.org/trunk@40480


git-svn-id: http://core.svn.wordpress.org/trunk@40356 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-04-19 21:14:44 +00:00

1 line
17 KiB
CSS

#customize-theme-controls #accordion-section-menu_locations{position:relative;margin-bottom:15px}#customize-theme-controls #accordion-section-menu_locations>.accordion-section-title{border-bottom-color:#ddd}.menu-in-location,.menu-in-locations{display:block;font-weight:600;font-size:10px}#customize-controls .control-section .accordion-section-title:focus .menu-in-location,#customize-controls .control-section .accordion-section-title:hover .menu-in-location,#customize-controls .theme-location-set{color:#555}.customize-control-nav_menu_location .edit-menu{margin-left:6px;vertical-align:middle;line-height:28px}.wp-customizer .menu-item-bar .menu-item-handle,.wp-customizer .menu-item-settings,.wp-customizer .menu-item-settings .description-thin{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.wp-customizer .menu-item-bar{margin:0}.wp-customizer .menu-item-bar .menu-item-handle{width:100%;background:#fff}.wp-customizer .menu-item-handle .item-title{margin-right:0}.wp-customizer .menu-item-handle .item-type{padding:1px 21px 0 5px;float:right;text-align:right}.wp-customizer .menu-item-handle:hover{z-index:8}.customize-control-nav_menu_item.has-notifications .menu-item-handle{border-left:4px solid #00a0d2}.wp-customizer .menu-item-settings{max-width:100%;overflow:hidden;z-index:8;padding:10px;background:#eee;border:1px solid #999;border-top:none}.wp-customizer .menu-item-settings .description-thin{width:100%;height:auto;margin:0 0 8px}.wp-customizer .menu-item-settings input[type=text]{width:100%}.wp-customizer .menu-item-settings .submitbox{margin:0;padding:0}.wp-customizer .menu-item-settings .link-to-original{padding:5px 0;border:none;font-style:normal;margin:0;width:100%}.wp-customizer .menu-item .submitbox .submitdelete{float:left;margin:6px 0 0;padding:0;cursor:pointer}.menu-item-reorder-nav{display:none;background-color:#fff;position:absolute;top:0;right:0}.menus-move-left:before{content:"\f341"}.menus-move-right:before{content:"\f345"}.reordering .menu-item .item-controls,.reordering .menu-item .item-type{display:none}.reordering .menu-item-reorder-nav{display:block}.customize-control input.menu-name-field{width:100%;margin:12px 0}.wp-customizer .menu-item .item-edit{position:absolute;right:-19px;top:2px;display:block;width:30px;height:38px;margin-right:0!important;-webkit-box-shadow:none;box-shadow:none;outline:0;overflow:hidden;cursor:pointer;text-align:center}.wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:before{content:"\f142"}.wp-customizer .menu-item-settings p.description{font-style:normal}.wp-customizer .menu-settings dl{margin:12px 0 0;padding:0}.wp-customizer .menu-settings .checkbox-input{margin-top:8px}.wp-customizer .menu-settings .menu-theme-locations{border-top:1px solid #ccc}.wp-customizer .menu-settings{margin-top:36px;border-top:none}.menu-settings .customize-control-checkbox label{line-height:1}.menu-settings .customize-control.customize-control-checkbox{margin-bottom:8px}.customize-control-menu{margin-top:4px}#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle{color:#555}.customize-screen-options-toggle{background:0 0;border:none;color:#555;cursor:pointer;margin:0;padding:20px;position:absolute;right:0;top:30px}#customize-controls .customize-info .customize-help-toggle{padding:20px}#customize-controls .customize-info .customize-help-toggle:before{padding:4px}#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus,#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,.active-menu-screen-options .customize-screen-options-toggle,.customize-screen-options-toggle:active,.customize-screen-options-toggle:focus,.customize-screen-options-toggle:hover{color:#0073aa}#customize-controls .customize-info .customize-help-toggle:focus,.customize-screen-options-toggle:focus{outline:0}.customize-screen-options-toggle:before{-moz-osx-font-smoothing:grayscale;border:none;content:"\f111";display:block;font:18px/1 dashicons;padding:5px;text-align:center;text-decoration:none!important;text-indent:0;left:6px;position:absolute;top:6px}#customize-controls .customize-info .customize-help-toggle:focus:before,.customize-screen-options-toggle:focus:before{-webkit-border-radius:100%;border-radius:100%}.wp-customizer #screen-options-wrap{display:none;background:#fff;border-top:1px solid #ddd;padding:4px 15px 15px}.wp-customizer .metabox-prefs label{display:block;padding-right:0;line-height:30px}.wp-customizer .toggle-indicator{display:inline-block;font-size:20px;line-height:1}.rtl .wp-customizer .toggle-indicator{text-indent:1px}#available-menu-items .accordion-section-title .toggle-indicator:before,.wp-customizer .menu-item .item-edit .toggle-indicator:before{content:"\f140";display:block;padding:1px 2px 1px 0;speak:none;-webkit-border-radius:50%;border-radius:50%;color:#72777c;font:400 20px/1 dashicons;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none!important}.control-section-nav_menu .field-css-classes,.control-section-nav_menu .field-description,.control-section-nav_menu .field-link-target,.control-section-nav_menu .field-title-attribute,.control-section-nav_menu .field-xfn{display:none}.control-section-nav_menu.field-css-classes-active .field-css-classes,.control-section-nav_menu.field-description-active .field-description,.control-section-nav_menu.field-link-target-active .field-link-target,.control-section-nav_menu.field-title-attribute-active .field-title-attribute,.control-section-nav_menu.field-xfn-active .field-xfn{display:block}.menu-item-depth-0{margin-left:0}.menu-item-depth-1{margin-left:20px}.menu-item-depth-2{margin-left:40px}.menu-item-depth-3{margin-left:60px}.menu-item-depth-4{margin-left:80px}.menu-item-depth-5{margin-left:100px}.menu-item-depth-6{margin-left:120px}.menu-item-depth-7{margin-left:140px}.menu-item-depth-8{margin-left:160px}.menu-item-depth-9{margin-left:180px}.menu-item-depth-10{margin-left:200px}.menu-item-depth-11{margin-left:220px}.menu-item-depth-0>.menu-item-bar{margin-right:0}.menu-item-depth-1>.menu-item-bar{margin-right:20px}.menu-item-depth-2>.menu-item-bar{margin-right:40px}.menu-item-depth-3>.menu-item-bar{margin-right:60px}.menu-item-depth-4>.menu-item-bar{margin-right:80px}.menu-item-depth-5>.menu-item-bar{margin-right:100px}.menu-item-depth-6>.menu-item-bar{margin-right:120px}.menu-item-depth-7>.menu-item-bar{margin-right:140px}.menu-item-depth-8>.menu-item-bar{margin-right:160px}.menu-item-depth-9>.menu-item-bar{margin-right:180px}.menu-item-depth-10>.menu-item-bar{margin-right:200px}.menu-item-depth-11>.menu-item-bar{margin-right:220px}.menu-item-depth-0 .menu-item-transport{margin-left:0}.menu-item-depth-1 .menu-item-transport{margin-left:-20px}.menu-item-depth-3 .menu-item-transport{margin-left:-60px}.menu-item-depth-4 .menu-item-transport{margin-left:-80px}.menu-item-depth-2 .menu-item-transport{margin-left:-40px}.menu-item-depth-5 .menu-item-transport{margin-left:-100px}.menu-item-depth-6 .menu-item-transport{margin-left:-120px}.menu-item-depth-7 .menu-item-transport{margin-left:-140px}.menu-item-depth-8 .menu-item-transport{margin-left:-160px}.menu-item-depth-9 .menu-item-transport{margin-left:-180px}.menu-item-depth-10 .menu-item-transport{margin-left:-200px}.menu-item-depth-11 .menu-item-transport{margin-left:-220px}.reordering .menu-item-depth-0{margin-left:0}.reordering .menu-item-depth-1{margin-left:15px}.reordering .menu-item-depth-2{margin-left:30px}.reordering .menu-item-depth-3{margin-left:45px}.reordering .menu-item-depth-4{margin-left:60px}.reordering .menu-item-depth-5{margin-left:75px}.reordering .menu-item-depth-6{margin-left:90px}.reordering .menu-item-depth-7{margin-left:105px}.reordering .menu-item-depth-8{margin-left:120px}.reordering .menu-item-depth-9{margin-left:135px}.reordering .menu-item-depth-10{margin-left:150px}.reordering .menu-item-depth-11{margin-left:165px}.reordering .menu-item-depth-0>.menu-item-bar{margin-right:0}.reordering .menu-item-depth-1>.menu-item-bar{margin-right:15px}.reordering .menu-item-depth-2>.menu-item-bar{margin-right:30px}.reordering .menu-item-depth-3>.menu-item-bar{margin-right:45px}.reordering .menu-item-depth-4>.menu-item-bar{margin-right:60px}.reordering .menu-item-depth-5>.menu-item-bar{margin-right:75px}.reordering .menu-item-depth-6>.menu-item-bar{margin-right:90px}.reordering .menu-item-depth-7>.menu-item-bar{margin-right:105px}.reordering .menu-item-depth-8>.menu-item-bar{margin-right:120px}.reordering .menu-item-depth-9>.menu-item-bar{margin-right:135px}.reordering .menu-item-depth-10>.menu-item-bar{margin-right:150px}.reordering .menu-item-depth-11>.menu-item-bar{margin-right:165px}.control-section-nav_menu.menu .menu-item-edit-active{margin-left:0}.control-section-nav_menu.menu .menu-item-edit-active .menu-item-bar{margin-right:0}.control-section-nav_menu.menu .sortable-placeholder{margin-top:0;margin-bottom:1px;max-width:-webkit-calc(100% - 2px);max-width:calc(100% - 2px);float:left;display:list-item;border-color:#a0a5aa}.menu-item-transport li.customize-control{float:none}.control-section-nav_menu.menu ul.menu-item-transport .menu-item-bar{margin-top:0}.adding-menu-items .control-section{opacity:.4}.adding-menu-items .control-panel.control-section,.adding-menu-items .control-section.open{opacity:1}.menu-item-bar .item-delete{color:#a00;position:absolute;top:2px;right:-19px;width:30px;height:38px;cursor:pointer;display:none}.menu-item-bar .item-delete:before{content:"\f335";position:absolute;top:9px;left:5px;-webkit-border-radius:50%;border-radius:50%;font:400 20px/1 dashicons;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ie8 .menu-item-bar .item-delete:before{top:-10px}.menu-item-bar .item-delete:focus,.menu-item-bar .item-delete:hover{-webkit-box-shadow:none;box-shadow:none;outline:0;color:red}.adding-menu-items .menu-item-bar .item-edit{display:none}.adding-menu-items .menu-item-bar .item-delete{display:block}#available-menu-items.opening{overflow-y:hidden}#available-menu-items #available-menu-items-search.open{height:100%;border-bottom:none}#available-menu-items .accordion-section-title{border-left:none;border-right:none;background:#fff;-webkit-transition:background-color .15s;transition:background-color .15s;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}#available-menu-items #available-menu-items-search .accordion-section-title,#available-menu-items .open .accordion-section-title{background:#eee}#available-menu-items .accordion-section-title:after{content:none!important}#available-menu-items .accordion-section-title:hover .toggle-indicator:before,#available-menu-items .button-link:focus .toggle-indicator:before,#available-menu-items .button-link:hover .toggle-indicator:before{color:#23282d}#available-menu-items .open .accordion-section-title .toggle-indicator:before{content:"\f142";color:#23282d}#available-menu-items .available-menu-items-list{overflow-y:auto;max-height:200px;background:0 0}#available-menu-items .accordion-section-title button{display:block;width:28px;height:35px;position:absolute;top:5px;right:5px;-webkit-box-shadow:none;box-shadow:none;outline:0;cursor:pointer;text-align:center}#available-menu-items .accordion-section-title .no-items,#available-menu-items .cannot-expand .accordion-section-title .spinner,#available-menu-items .cannot-expand .accordion-section-title>button{display:none}#available-menu-items-search.cannot-expand .accordion-section-title .spinner{display:block}#available-menu-items .cannot-expand .accordion-section-title .no-items{float:right;color:#555d66;font-weight:400;margin-left:5px}#available-menu-items .accordion-section-content{max-height:290px;margin:0;padding:0;position:relative;background:0 0}#available-menu-items .accordion-section-content .available-menu-items-list{margin:0 0 45px;padding:1px 15px 15px}#available-menu-items .accordion-section-content .available-menu-items-list:only-child{margin-bottom:0}#new-custom-menu-item .accordion-section-content{padding:0 15px 15px}#available-menu-items .menu-item-tpl{margin:0}#available-menu-items .new-content-item .create-item-input.invalid,#available-menu-items .new-content-item .create-item-input.invalid:focus,#custom-menu-item-name.invalid,#custom-menu-item-url.invalid,.menu-name-field.invalid,.menu-name-field.invalid:focus{border:1px solid red}#available-menu-items .menu-item-handle .item-type{padding-right:0}#available-menu-items .menu-item-handle .item-title{padding-left:20px}#available-menu-items .menu-item-handle{cursor:pointer;-webkit-box-shadow:none;box-shadow:none;margin-top:-1px}#available-menu-items .menu-item-handle:hover{z-index:1}#available-menu-items .item-title h4{padding:0 0 5px;font-size:14px}#available-menu-items .item-add{position:absolute;top:1px;left:1px;color:#82878c;width:30px;height:38px;-webkit-box-shadow:none;box-shadow:none;outline:0;cursor:pointer;text-align:center}#available-menu-items .menu-item-handle .item-add:focus{color:#23282d}#available-menu-items .item-add:before{content:"\f543";position:relative;left:2px;top:3px;display:inline-block;height:20px;-webkit-border-radius:50%;border-radius:50%;font:400 20px/1.05 dashicons}#available-menu-items .menu-item-handle.item-added .item-add:focus,#available-menu-items .menu-item-handle.item-added .item-title,#available-menu-items .menu-item-handle.item-added .item-type,#available-menu-items .menu-item-handle.item-added:hover .item-add{color:#82878c}#available-menu-items .menu-item-handle.item-added .item-add:before{content:"\f147"}#available-menu-items .accordion-section-title.loading .spinner,#available-menu-items-search.loading .accordion-section-title .spinner{visibility:visible;margin:0 20px}#available-menu-items-search .spinner{position:absolute;top:20px;right:21px;margin:0!important}#available-menu-items #available-menu-items-search .accordion-section-content{position:absolute;left:0;top:60px;bottom:0;max-height:none;width:100%;padding:1px 15px 15px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#available-menu-items-search .nothing-found{margin-top:-1px}#available-menu-items-search .accordion-section-title:after{display:none}#available-menu-items-search .accordion-section-content:empty{min-height:0;padding:0}#available-menu-items-search.loading .accordion-section-content div{opacity:.5}#available-menu-items-search.loading.loading-more .accordion-section-content div{opacity:1}#customize-preview{-webkit-transition:all .2s;transition:all .2s}body.adding-menu-items #available-menu-items{left:0;visibility:visible}body.adding-menu-items .wp-full-overlay-main{left:300px}body.adding-menu-items #customize-preview{opacity:.4}body.adding-menu-items #customize-preview iframe{pointer-events:none}.menu-item-handle .spinner{display:none;float:left;margin:0 8px 0 0}.nav-menu-inserted-item-loading .spinner{display:block}.nav-menu-inserted-item-loading .menu-item-handle .item-type{padding:0 0 0 8px}.added-menu-item .menu-item-handle.loading,.nav-menu-inserted-item-loading .menu-item-handle{padding:10px 15px 10px 8px;cursor:default;opacity:.5;background:#fff;color:#727773}.added-menu-item .menu-item-handle{-webkit-transition-property:opacity,background,color;transition-property:opacity,background,color;-webkit-transition-duration:1.25s;transition-duration:1.25s;-webkit-transition-timing-function:cubic-bezier(.25,-2.5,.75,8);transition-timing-function:cubic-bezier(.25,-2.5,.75,8)}#customize-theme-controls .control-panel-content .control-section-nav_menu:nth-last-child(2) .accordion-section-title{border-bottom-color:#ddd}#accordion-section-add_menu{margin:15px 12px;overflow:hidden}.new-menu-section-content{display:none;padding:15px 0 0;clear:both}#accordion-section-add_menu .accordion-section-title{padding-left:45px}#accordion-section-add_menu .accordion-section-title:before{font:400 20px/1 dashicons;position:absolute;top:12px;left:14px;content:"\f132"}#create-new-menu-submit{float:right;margin:0 0 12px}.menu-delete-item{float:left;padding:1em 0;width:100%}li.assigned-to-menu-location .menu-delete-item{display:none}li.assigned-to-menu-location .add-new-menu-item{margin-bottom:1em}.menu-item-handle{margin-top:-1px}.ui-sortable-disabled .menu-item-handle{cursor:default}.menu-item-handle:hover{position:relative;z-index:10;color:#0073aa}#available-menu-items .menu-item-handle:hover .item-add,.menu-item-handle:hover .item-edit,.menu-item-handle:hover .item-type{color:#0073aa}.menu-item-edit-active .menu-item-handle{border-color:#999;border-bottom:none}.customize-control-nav_menu_item{margin-bottom:0}.customize-control-nav_menu{margin-top:12px}#available-menu-items .item-add:focus:before,#customize-controls .customize-info .customize-help-toggle:focus:before,.customize-screen-options-toggle:focus:before,.menu-delete:focus,.menu-item-bar .item-delete:focus:before,.wp-customizer .menu-item .submitbox .submitdelete:focus,.wp-customizer button:focus .toggle-indicator:before{-webkit-box-shadow:0 0 0 1px #5b9dd9,0 0 2px 1px rgba(30,140,190,.8);box-shadow:0 0 0 1px #5b9dd9,0 0 2px 1px rgba(30,140,190,.8)}@media screen and (max-width:782px){#available-menu-items #available-menu-items-search .accordion-section-content{top:63px}}@media screen and (max-width:640px){#available-menu-items #available-menu-items-search .accordion-section-content{top:130px}}