Context Navigation

Back to Ticket #34333

Ticket #34333: 34333.2.patch

File 34333.2.patch, 20.3 KB (added by afercia, 11 years ago)

src/wp-admin/css/customize-controls.css

         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;
+}
+/* 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;
 …
         #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;
+        }
+}

src/wp-admin/css/customize-nav-menus.css

 #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;
+}
 …
+}
 .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
 …
         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";
+}
 …
         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;
 …
 .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%;
+}
 …
         text-decoration: none !important;
+}
-.wp-customizer button:focus .toggle-indicator:after {
-        -webkit-box-shadow:
-0 0 1px #5b9dd9,
-0 2px 1px rgba(30, 140, 190, .8);
-        box-shadow:
-0 0 1px #5b9dd9,
-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,
 …
  * 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;
+}
 …
         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;
 …
         color: #f00;
+}
-.menu-item-bar .item-delete:focus:before {
-        -webkit-box-shadow:
-0 0 1px #5b9dd9,
-0 2px 1px rgba(30, 140, 190, .8);
-        box-shadow:
-0 0 1px #5b9dd9,
-0 2px 1px rgba(30, 140, 190, .8);
+}
 .adding-menu-items .menu-item-bar .item-edit {
         display: none;
+}
 …
         display: block;
+}
+#available-menu-items .item {
+        position: static;
+}
+/**
+ * Styles for menu-item addition panel
+ */
-#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-menu-items.opening {
         overflow-y: hidden; /* avoid scrollbar jitter with animating heights */
+}
 …
+}
 #available-menu-items .cannot-expand .accordion-section-title .no-items {
         display: block;
+        float: right;
         color: #777;
         font-weight: normal;
-        float: right;
         margin-left: 5px;
+}
 …
         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;
+}
 …
         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;
+}
 …
         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;
 …
         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 1px #5b9dd9,
-0 2px 1px rgba(30, 140, 190, .8);
-        box-shadow:
-0 0 1px #5b9dd9,
-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,
 …
         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;
 …
         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;
 …
+}
 .menu-delete-item {
-        display: block;
         float: left;
         padding: 1em 0;
         width: 100%;
 …
         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;
+}
 …
         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 1px #5b9dd9,
+0 2px 1px rgba(30, 140, 190, .8);
+        box-shadow:
+0 0 1px #5b9dd9,
+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 ) {
-        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;
+        }
+}

src/wp-admin/css/customize-widgets.css

         line-height: 16px;
+}
-.widget-top {
-        cursor: move;
+}
 .customize-control-widget_form.expanded a.widget-action:after {
         content: "\f142";
+}
 …
         cursor: pointer;
+}
+.widget-top,
 .customize-control-widget_form .widget .customize-control-title {
         cursor: move;
+}
 …
         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;
 …
  * 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;
+        top: 60px;
         position: absolute;
         overflow: auto;
         bottom: 0;
 …
         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;
+}
 …
                 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;
+        }
+}

Download in other formats:

Original Format

Make WordPress Core

Context Navigation

Ticket #34333: 34333.2.patch

src/wp-admin/css/customize-controls.css

src/wp-admin/css/customize-nav-menus.css

src/wp-admin/css/customize-widgets.css

Download in other formats: