WordPress/wp-admin/css/customize-nav-menus.css
Aaron Jorbin 50cb2c5e28 Update autoprefixer browser support matrix
WordPress no longer supports many old old browsers: https://make.wordpress.org/core/2017/04/23/target-browser-coverage/

This also removes alot of no longer necessary CSS. It served us well, but we are never getting back together with IE8,9,10.

So, in the (paraphrased) words of Taylor Swift:

I remember when we dropped support  the first time
Saying, "This is it, I've had enough, " 'cause like
We hadn't seen many users in a month
When you said you needed flexbox. (What?)
Then you postMessage again and say
"IE8, I miss you and I swear I'm gonna change, trust me."
Remember how that lasted for a day?
I say, "I hate the box model, " we break up, you call me, "I love css-grids."
Ooh, we called it off again last night
But ooh, this time I'm telling you, I'm telling you

We are never ever ever supporting IE 8,9,10,
We are never ever ever supporting IE 8,9,10,
You go talk to EDGE, talk to my FIREFOX, talk to CHROME
But we are never ever ever ever getting back together
Like, ever...

Fixes #37651.
Props stunnedbeast, netweb, jorbin.



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


git-svn-id: http://core.svn.wordpress.org/trunk@40912 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-07-16 01:15:46 +00:00

843 lines
20 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 .theme-location-set,
#customize-controls .control-section .accordion-section-title:focus .menu-in-location,
#customize-controls .control-section .accordion-section-title:hover .menu-in-location {
color: #555;
}
/* The `edit-menu` button uses also the `button-link` class. */
.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 {
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 0;
}
.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 items reordering styles
*/
.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%; /* Override the 98% default for customizer inputs, to align with the size of menu items. */
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;
box-shadow: none;
outline: none;
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 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;
}
/* @todo update selector or potentially remove */
.menu-settings .customize-control.customize-control-checkbox {
margin-bottom: 8px; /* Override collapsing at smaller viewports. */
}
.customize-control-menu {
margin-top: 4px;
}
#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle {
color: #555;
}
/* Screen Options */
.customize-screen-options-toggle {
background: none;
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-screen-options-toggle:hover,
.customize-screen-options-toggle:active,
.customize-screen-options-toggle:focus,
.active-menu-screen-options .customize-screen-options-toggle,
#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
#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 {
color: #0073aa;
}
.customize-screen-options-toggle:focus,
#customize-controls .customize-info .customize-help-toggle:focus {
outline: none;
}
.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-screen-options-toggle:focus:before,
#customize-controls .customize-info .customize-help-toggle:focus:before {
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;
}
/* rework the arrow indicator implementation for NVDA bug same as #32715 */
.wp-customizer .toggle-indicator {
display: inline-block;
font-size: 20px;
line-height: 1;
}
.rtl .wp-customizer .toggle-indicator {
text-indent: 1px; /* account for the dashicon alignment */
}
.wp-customizer .menu-item .item-edit .toggle-indicator:before,
#available-menu-items .accordion-section-title .toggle-indicator:before {
content: "\f140";
display: block;
padding: 1px 2px 1px 0px;
speak: none;
border-radius: 50%;
color: #72777c;
font: normal 20px/1 dashicons;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none !important;
}
.control-section-nav_menu .field-link-target,
.control-section-nav_menu .field-title-attribute,
.control-section-nav_menu .field-css-classes,
.control-section-nav_menu .field-xfn,
.control-section-nav_menu .field-description {
display: none;
}
.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-css-classes-active .field-css-classes,
.control-section-nav_menu.field-xfn-active .field-xfn,
.control-section-nav_menu.field-description-active .field-description {
display: block;
}
/* WARNING: The 20px factor is hard-coded in JS. */
.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; } /* Not likely to be used or useful beyond this depth */
.menu-item-depth-9 { margin-left: 180px; }
.menu-item-depth-10 { margin-left: 200px; }
.menu-item-depth-11 { margin-left: 220px; }
/* @todo handle .menu-item-settings width */
.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; }
/* Submenu left margin. */
.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; }
/* WARNING: The 20px factor is hard-coded in JS. */
.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; } /* Not likely to be used or useful beyond this depth */
.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: 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;
}
/**
* Add-menu-items mode
*/
.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;
border-radius: 50%;
font: normal 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:hover,
.menu-item-bar .item-delete:focus {
box-shadow: none;
outline: none;
color: #f00;
}
.adding-menu-items .menu-item-bar .item-edit {
display: none;
}
.adding-menu-items .menu-item-bar .item-delete {
display: block;
}
/**
* Styles for menu-item addition panel
*/
#available-menu-items.opening {
overflow-y: hidden; /* avoid scrollbar jitter with animating heights */
}
#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;
transition: background-color 0.15s;
/* Reset the value inherited from the base .accordion-section-title style. Ticket #37589. */
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
#available-menu-items .open .accordion-section-title,
#available-menu-items #available-menu-items-search .accordion-section-title {
background: #eee;
}
/* rework the arrow indicator implementation for NVDA bug see #32715 */
#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:hover .toggle-indicator:before,
#available-menu-items .button-link:focus .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; /* This gets set in JS to fit the screen size, and based on # of sections. */
background: transparent;
}
#available-menu-items .accordion-section-title button {
display: block;
width: 28px;
height: 35px;
position: absolute;
top: 5px;
right: 5px;
box-shadow: none;
outline: none;
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: transparent;
}
#available-menu-items .accordion-section-content .available-menu-items-list {
margin: 0 0 45px 0;
padding: 1px 15px 15px 15px;
}
#available-menu-items .accordion-section-content .available-menu-items-list:only-child { /* Types that do not support new items for the current user */
margin-bottom: 0;
}
#new-custom-menu-item .accordion-section-content {
padding: 0 15px 15px 15px;
}
#available-menu-items .menu-item-tpl {
margin: 0;
}
#custom-menu-item-name.invalid,
#custom-menu-item-url.invalid,
.menu-name-field.invalid,
.menu-name-field.invalid:focus,
#available-menu-items .new-content-item .create-item-input.invalid,
#available-menu-items .new-content-item .create-item-input.invalid:focus {
border: 1px solid #f00;
}
#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;
}
#available-menu-items .menu-item-handle {
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;
box-shadow: none;
outline: none;
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;
border-radius: 50%;
font: normal 20px/1.05 dashicons; /* line height is to account for the dashicon's vertical alignment */
}
#available-menu-items .menu-item-handle.item-added .item-type,
#available-menu-items .menu-item-handle.item-added .item-title,
#available-menu-items .menu-item-handle.item-added:hover .item-add,
#available-menu-items .menu-item-handle.item-added .item-add:focus {
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; /* 13 container padding +1 input margin +6 ( ( 32 input height - 20 spinner height ) / 2 ) */
right: 21px;
margin: 0 !important;
}
/* search results list */
#available-menu-items #available-menu-items-search .accordion-section-content {
position: absolute;
left: 0;
top: 60px; /* below title div / search input */
bottom: 0px; /* 100% height that still triggers lazy load */
max-height: none;
width: 100%;
padding: 1px 15px 15px;
box-sizing: border-box;
}
#available-menu-items-search .nothing-found {
/* Compensate the 1px top padding of the container. */
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 {
transition: all 0.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: 0.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;
}
.nav-menu-inserted-item-loading .menu-item-handle,
.added-menu-item .menu-item-handle.loading {
padding: 10px 15px 10px 8px;
cursor: default;
opacity: .5;
background: #fff;
color: #727773;
}
.added-menu-item .menu-item-handle {
transition-property: opacity, background, color;
transition-duration: 1.25s;
transition-timing-function: cubic-bezier( .25, -2.5, .75, 8 ); /* Replacement for .hide().fadeIn('slow') in JS to add emphasis when it's loaded. */
}
/* Add/delete Menus */
#customize-theme-controls .control-panel-content .control-section-nav_menu:nth-last-child(2) .accordion-section-title {
border-bottom-color: #ddd;
}
/* @todo update selector */
#accordion-section-add_menu {
margin: 15px 12px;
overflow: hidden;
}
.new-menu-section-content {
display: none;
padding: 15px 0 0 0;
clear: both;
}
/* @todo update selector */
#accordion-section-add_menu .accordion-section-title {
padding-left: 45px;
}
/* @todo update selector */
#accordion-section-add_menu .accordion-section-title:before {
font: normal 20px/1 dashicons;
position: absolute;
top: 12px;
left: 14px;
content: "\f132";
}
#create-new-menu-submit {
float: right;
margin: 0 0 12px 0;
}
.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;
}
.menu-item-handle:hover .item-type,
.menu-item-handle:hover .item-edit,
#available-menu-items .menu-item-handle:hover .item-add {
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;
}
/**
* box-shadows
*/
.wp-customizer .menu-item .submitbox .submitdelete:focus,
.customize-screen-options-toggle:focus:before,
#customize-controls .customize-info .customize-help-toggle:focus:before,
.wp-customizer button:focus .toggle-indicator:before,
.menu-delete:focus,
.menu-item-bar .item-delete:focus:before,
#available-menu-items .item-add:focus:before {
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;
}
}