diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index ced9735168..560d85e783 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -1311,6 +1311,185 @@ body.cheatin p { color: #00a0d2; } +.widget-reorder-nav span, +.menu-item-reorder-nav button { + position: relative; + overflow: hidden; + float: left; + display: block; + width: 33px; /* was 42px for mobile */ + height: 43px; + color: #82878c; + text-indent: -9999px; + cursor: pointer; + outline: none; +} + +.menu-item-reorder-nav button { + width: 30px; + height: 40px; + background: transparent; + border: none; + -webkit-box-shadow: none; + box-shadow: none; +} + +.widget-reorder-nav span:before, +.menu-item-reorder-nav button:before { + display: inline-block; + position: absolute; + top: 0; + right: 0; + width: 100%; + height: 100%; + font: normal 20px/43px dashicons; + text-align: center; + text-indent: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.widget-reorder-nav span:hover, +.widget-reorder-nav span:focus, +.menu-item-reorder-nav button:hover, +.menu-item-reorder-nav button:focus { + color: #191e23; + background: #eee; +} + +.move-widget-down:before, +.menus-move-down:before { + content: "\f347"; +} + +.move-widget-up:before, +.menus-move-up:before { + content: "\f343"; +} + +#customize-theme-controls .first-widget .move-widget-up, +#customize-theme-controls .last-widget .move-widget-down, +.move-up-disabled .menus-move-up, +.move-down-disabled .menus-move-down, +.move-right-disabled .menus-move-right, +.move-left-disabled .menus-move-left { + color: #d5d5d5; + background-color: #fff; + cursor: default; + pointer-events: none; +} + +/** + * New widget and Add-menu-items modes and panels + */ + +.wp-full-overlay-main { + right: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */ + width: 100%; +} + +body.adding-widget .add-new-widget, +body.adding-widget .add-new-widget:hover, +.adding-menu-items .add-new-menu-item, +.adding-menu-items .add-new-menu-item:hover, +.add-menu-toggle.open, +.add-menu-toggle.open:hover { + background: #eee; + border-color: #929793; + color: #32373c; + -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); + box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); +} + +body.adding-widget .add-new-widget:before, +.adding-menu-items .add-new-menu-item:before, +#accordion-section-add_menu .add-new-menu-item.open:before { + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} + +#available-widgets, +#available-menu-items { + position: absolute; + top: 0; + bottom: 0; + left: -301px; + visibility: hidden; + overflow-x: hidden; + overflow-y: auto; + width: 300px; + margin: 0; + z-index: 4; + background: #eee; + -webkit-transition: left .18s; + transition: left .18s; + border-right: 1px solid #ddd; +} + +#available-widgets .customize-section-title, +#available-menu-items .customize-section-title { + display: none; +} + +#available-widgets-list { + top: 60px; + position: absolute; + overflow: auto; + bottom: 0; + width: 100%; +} + +#available-widgets-filter { + position: fixed; + top: 0; + z-index: 1; + width: 300px; + background: #eee; + border-bottom: 1px solid #e4e4e4; +} + +/* search field container */ +#available-widgets-filter, +#available-menu-items-search .accordion-section-title { + padding: 12px 15px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +#available-widgets-filter input, +#available-menu-items-search input { + padding: 6px 10px; + width: 100%; +} + +#available-widgets .widget-top, +#available-widgets .widget-top:hover, +#available-menu-items .item-top, +#available-menu-items .item-top:hover { + border: none; + background: transparent; + -webkit-box-shadow: none; + box-shadow: none; +} + +#available-widgets .widget-tpl, +#available-menu-items .item-tpl { + position: relative; + padding: 20px 15px 20px 60px; + background: #fff; + border-bottom: 1px solid #e4e4e4; + cursor: pointer; + display: none; +} + +#available-widgets .widget, +#available-menu-items .item { + position: static; +} + + /* Responsive */ .customize-controls-preview-toggle { display: none; @@ -1423,4 +1602,59 @@ body.cheatin p { #customize-header-actions .button-primary { margin-top: 6px; } + + body.adding-widget div#available-widgets, + body.adding-menu-items div#available-menu-items { + top: 46px; + left: 0; + z-index: 10; + width: 100%; + } + + #available-widgets .customize-section-title, + #available-menu-items .customize-section-title { + display: block; + margin: 0; + } + + #available-widgets .customize-section-back, + #available-menu-items .customize-section-back { + height: 69px; + } + + #available-widgets .customize-section-title h3, + #available-menu-items .customize-section-title h3 { + font-size: 20px; + font-weight: 200; + padding: 9px 10px 12px 14px; + margin: 0; + line-height: 24px; + color: #555; + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + #available-widgets .customize-section-title .customize-action, + #available-menu-items .customize-section-title .customize-action { + font-size: 13px; + display: block; + font-weight: 400; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + #available-widgets-filter { + position: relative; + width: 100%; + background: #fff; + height: auto; + padding: 10px 15px; + } + + #available-widgets-list { + top: 140px; + } } diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css index 2daa03ccb8..d3a7e9857b 100644 --- a/src/wp-admin/css/customize-nav-menus.css +++ b/src/wp-admin/css/customize-nav-menus.css @@ -12,9 +12,7 @@ #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, -#customize-controls .control-section .accordion-section-title:focus .menu-in-locations, -#customize-controls .control-section .accordion-section-title:hover .menu-in-locations { +#customize-controls .control-section .accordion-section-title:hover .menu-in-location { color: #555; } @@ -78,17 +76,12 @@ } .wp-customizer .menu-item .submitbox .submitdelete { - display: block; float: left; margin: 6px 0 0; padding: 0; cursor: pointer; } -.wp-customizer .menu-item .submitbox .submitdelete:focus { - -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); -} /** * Menu items reordering styles @@ -102,51 +95,6 @@ right: 0; } -.menu-item-reorder-nav button { - position: relative; - overflow: hidden; - float: left; - display: block; - width: 30px; - height: 40px; - color: #82878c; - text-indent: -9999px; - cursor: pointer; - background: transparent; - border: none; - -webkit-box-shadow: none; - box-shadow: none; - outline: none; -} - -.menu-item-reorder-nav button:before { - display: inline-block; - position: absolute; - top: 0; - right: 0; - width: 100%; - height: 100%; - font: normal 20px/40px dashicons; - text-align: center; - text-indent: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.menu-item-reorder-nav button:hover, -.menu-item-reorder-nav button:focus { - color: #191e23; - background: #eee; -} - -.menus-move-down:before { - content: "\f347"; -} - -.menus-move-up:before { - content: "\f343"; -} - .menus-move-left:before { content: "\f341"; } @@ -155,28 +103,6 @@ content: "\f345"; } -.move-up-disabled .menus-move-up, -.move-down-disabled .menus-move-down, -.move-right-disabled .menus-move-right, -.move-left-disabled .menus-move-left { - color: #d5d5d5 !important; - background-color: #fff !important; - cursor: default; - pointer-events: none; -} - -.menu-item-reorder-nav:before { - content: ""; - display: block; - position: absolute; - left: -10px; - width: 10px; - height: 40px; - background: -webkit-gradient(linear, left top, right top, from(rgba(250,250,250,0)), to(rgba(250,250,250,1))); - background: -webkit-linear-gradient(left, rgba(250,250,250,0) 0%, rgba(250,250,250,1) 100%); - background: linear-gradient(to right, rgba(250,250,250,0) 0%, rgba(250,250,250,1) 100%); -} - .reordering .menu-item .item-controls, .reordering .menu-item .item-type { display: none; @@ -302,8 +228,6 @@ .customize-screen-options-toggle:focus:before, #customize-controls .customize-info .customize-help-toggle:focus: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); -webkit-border-radius: 100%; border-radius: 100%; } @@ -346,15 +270,6 @@ text-decoration: none !important; } -.wp-customizer button:focus .toggle-indicator:after { - -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); -} - #accordion-panel-nav_menus .field-link-target, #accordion-panel-nav_menus .field-attr-title, #accordion-panel-nav_menus .field-css-classes, @@ -470,11 +385,6 @@ * Add-menu-items mode */ -.wp-full-overlay-main { - right: auto; /* This overrides a right: 0; which causes the preview to resize rather than slide off screen at the normal size. */ - width: 100%; -} - .adding-menu-items .control-section { opacity: .4; } @@ -484,24 +394,6 @@ opacity: 1; } -.adding-menu-items .add-new-menu-item, -.adding-menu-items .add-new-menu-item:hover, -.add-menu-toggle.open, -.add-menu-toggle.open:hover { - background: #eee; - border-color: #929793; - color: #32373c; - -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); - box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); -} - -.adding-menu-items .add-new-menu-item:before, -#accordion-section-add_menu .add-new-menu-item.open:before { - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); -} - .menu-item-bar .item-delete { color: #a00; position: absolute; @@ -537,15 +429,6 @@ color: #f00; } -.menu-item-bar .item-delete:focus: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); -} - .adding-menu-items .menu-item-bar .item-edit { display: none; } @@ -554,26 +437,9 @@ display: block; } -#available-menu-items .item { - position: static; -} - -#available-menu-items { - position: absolute; - top: 0; - bottom: 0; - left: -301px; - visibility: hidden; - overflow-x: hidden; - overflow-y: auto; - width: 300px; - margin: 0; - z-index: 4; - background: #eee; - -webkit-transition: left .18s; - transition: left .18s; - border-right: 1px solid #ddd; -} +/** + * Styles for menu-item addition panel + */ #available-menu-items.opening { overflow-y: hidden; /* avoid scrollbar jitter with animating heights */ @@ -640,10 +506,9 @@ } #available-menu-items .cannot-expand .accordion-section-title .no-items { - display: block; + float: right; color: #777; font-weight: normal; - float: right; margin-left: 5px; } @@ -653,19 +518,6 @@ max-height: 290px; } -#available-menu-items #available-menu-items-search .accordion-section-content { - position: absolute; - left: 1px; - 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; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - #available-menu-items .menu-item-tpl { margin: 0; } @@ -677,19 +529,6 @@ border: 1px solid #f00; } -#available-menu-items .item-tpl { - position: relative; - padding: 20px 15px 20px 60px; - border-bottom: 1px solid #e4e4e4; - cursor: pointer; - display: none; -} - -#available-menu-items .item-tpl:hover, -#available-menu-items .item-tpl.selected { - background: #eee; -} - #available-menu-items .menu-item-handle .item-type { padding-right: 0; } @@ -702,14 +541,6 @@ cursor: pointer; } -#available-menu-items .item-top, -#available-menu-items .item-top:hover { - border: none; - background: transparent; - -webkit-box-shadow: none; - box-shadow: none; -} - #available-menu-items .menu-item-handle { -webkit-box-shadow: none; box-shadow: none; @@ -754,15 +585,6 @@ font: normal 20px/1.05 dashicons; /* line height is to account for the dashicon's vertical alignment */ } -#available-menu-items .item-add:focus: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); -} - #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, @@ -812,11 +634,6 @@ color: #f00; } -#available-menu-items-search .clear-results:focus { - -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); -} - #available-menu-items-search .spinner { position: absolute; top: 20px; @@ -824,13 +641,15 @@ right: 20px; } -#available-menu-items-search input { - padding: 6px 10px; +/* search results list */ +#available-menu-items #available-menu-items-search .accordion-section-content { + position: absolute; + left: 1px; + top: 60px; /* below title div / search input */ + bottom: 0px; /* 100% height that still triggers lazy load */ + max-height: none; width: 100%; -} - -#available-menu-items-search .accordion-section-title { - padding: 12px 15px; + padding: 1px 15px 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -936,7 +755,6 @@ body.adding-menu-items #customize-preview { } .menu-delete-item { - display: block; float: left; padding: 1em 0; width: 100%; @@ -962,11 +780,6 @@ li.assigned-to-menu-location .add-new-menu-item { text-decoration: none; } -.menu-delete:focus { - -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); -} - .menu-item-handle { margin-top: -1px; } @@ -999,10 +812,27 @@ li.assigned-to-menu-location .add-new-menu-item { margin-top: 12px; } -#available-menu-items .customize-section-title { - display: none; +/** + * 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:after, +#available-menu-items-search .clear-results:focus, +.menu-delete:focus, +.menu-item-bar .item-delete:focus:before, +#available-menu-items .item-add:focus: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; @@ -1010,45 +840,7 @@ li.assigned-to-menu-location .add-new-menu-item { } @media screen and ( max-width: 640px ) { - body.adding-menu-items div#available-menu-items { - top: 46px; - left: 0; - z-index: 10; - width: 100%; - } - #available-menu-items #available-menu-items-search .accordion-section-content { top: 133px; } - - #available-menu-items .customize-section-title { - display: block; - margin: 0; - } - - #available-menu-items .customize-section-back { - height: 69px; - } - - #available-menu-items .customize-section-title h3 { - font-size: 20px; - font-weight: 200; - padding: 9px 10px 12px 14px; - margin: 0; - line-height: 24px; - color: #555; - display: block; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - #available-menu-items .customize-section-title .customize-action { - font-size: 13px; - display: block; - font-weight: 400; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } } diff --git a/src/wp-admin/css/customize-widgets.css b/src/wp-admin/css/customize-widgets.css index 3f839cbd86..e1c248743f 100644 --- a/src/wp-admin/css/customize-widgets.css +++ b/src/wp-admin/css/customize-widgets.css @@ -79,10 +79,6 @@ line-height: 16px; } -.widget-top { - cursor: move; -} - .customize-control-widget_form.expanded a.widget-action:after { content: "\f142"; } @@ -99,6 +95,7 @@ cursor: pointer; } +.widget-top, .customize-control-widget_form .widget .customize-control-title { cursor: move; } @@ -126,57 +123,10 @@ background-color: #fafafa; } -.widget-reorder-nav span { - position: relative; - overflow: hidden; - float: left; - display: block; - width: 33px; /* was 42px for mobile */ - height: 43px; - color: #82878c; - text-indent: -9999px; - cursor: pointer; - outline: none; -} - -.widget-reorder-nav span:before { - display: inline-block; - position: absolute; - top: 0; - right: 0; - width: 100%; - height: 100%; - font: normal 20px/43px dashicons; - text-align: center; - text-indent: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.widget-reorder-nav span:hover, -.widget-reorder-nav span:focus { - color: #444; - background: #eee; -} - .move-widget:before { content: "\f504"; } -.move-widget-down:before { - content: "\f347"; -} - -.move-widget-up:before { - content: "\f343"; -} - -#customize-theme-controls .first-widget .move-widget-up, -#customize-theme-controls .last-widget .move-widget-down { - color: #d5d5d5; - cursor: default; -} - #customize-theme-controls .move-widget-area { display: none; background: #fff; @@ -256,106 +206,23 @@ * Styles for new widget addition panel */ -.wp-full-overlay-main { - right: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */ - width: 100%; -} - -body.adding-widget .add-new-widget, -body.adding-widget .add-new-widget:hover { - background: #eee; - border-color: #999; - color: #32373c; - -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); - box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); -} -body.adding-widget .add-new-widget:before { - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); -} - -#available-widgets .widget { - position: static; -} - /* override widgets admin page rules in wp-admin/css/wp-admin.css */ #widgets-left #available-widgets .widget { float: none !important; width: auto !important; } -#available-widgets { - position: absolute; - top: 0; - bottom: 0; - left: -301px; - visibility: hidden; - overflow: auto; - width: 300px; - margin: 0; - z-index: 1; - background: #eee !important; - -webkit-transition: left .18s; - transition: left .18s; - border-right: 1px solid #ddd; -} - .ios #available-widgets { -webkit-transition: left 0s; transition: left 0s; } -#available-widgets-list { - top: 46px; - position: absolute; - overflow: auto; - bottom: 0; - width: 100%; -} - -#available-widgets-filter { - position: fixed; - top: 0; - z-index: 1; - width: 300px; - height: 46px; - padding: 8px 17px 7px 13px; - background: #eee; - border-bottom: 1px solid #e4e4e4; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -#available-widgets-filter input { - padding: 5px 10px 2px 10px; - width: 100%; -} - -#available-widgets .widget-tpl { - position: relative; - padding: 20px 15px 20px 60px; - background: #fff; - border-bottom: 1px solid #e4e4e4; - cursor: pointer; - display: none; -} - #available-widgets .widget-tpl:hover, #available-widgets .widget-tpl.selected { background: #eee; border-bottom-color: #ccc; } -#available-widgets .widget-top, -#available-widgets .widget-top:hover { - border: none; - background: transparent; - -webkit-box-shadow: none; - box-shadow: none; -} - #customize-controls .widget-title h3 { font-size: 1em; } @@ -543,10 +410,6 @@ body.adding-widget #customize-preview { #available-widgets [class*="tweet"] .widget-title:before, #available-widgets [class*="twitter"] .widget-title:before { content: "\f301"; } -#available-widgets .customize-section-title { - display: none; -} - @media screen and (max-height: 700px) and (min-width: 981px) { .customize-control-widget { margin-bottom: 0; @@ -579,55 +442,3 @@ body.adding-widget #customize-preview { top: 8px; } } - -@media screen and ( max-width: 640px ) { - body.adding-widget div#available-widgets { - top: 46px; - left: 0; - z-index: 10; - width: 100%; - } - - #available-widgets .customize-section-title { - display: block; - margin: 0; - } - - #available-widgets .customize-section-back { - height: 69px; - } - - #available-widgets .customize-section-title h3 { - font-size: 20px; - font-weight: 200; - padding: 9px 10px 12px 14px; - margin: 0; - line-height: 24px; - color: #555; - display: block; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - #available-widgets .customize-section-title .customize-action { - font-size: 13px; - display: block; - font-weight: 400; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - #available-widgets-filter { - position: relative; - width: 100%; - background: #fff; - height: auto; - padding: 10px 15px; - } - - #available-widgets-list { - top: 140px; - } -} diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css index 85cdf4ce6c..dd3ebe80f5 100644 --- a/src/wp-admin/css/widgets.css +++ b/src/wp-admin/css/widgets.css @@ -155,7 +155,7 @@ div#widgets-left .sidebar-name h3 { padding: 9px; } -#widgets-left #available-widgets, +#widgets-left .widgets-holder-wrap, div#widgets-left .widget-holder { background: transparent; border: none;