[wp-trac] [WordPress Trac] #34333: Customizer: aggregate similar CSS rules

[WordPress Trac]

#34333: Customizer: aggregate similar CSS rules
--------------------------+-----------------------------
 Reporter:  afercia       |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Customize     |    Version:  4.3
 Severity:  normal        |   Keywords:
  Focuses:  ui            |
--------------------------+-----------------------------
 There are so many CSS rules in `customize-widgets.css` and `customize-nav-
 menus.css` that are duplicate (just different selectors) and could be
 aggregated in `customize-controls.css`.
 A first bunch is handled in #33327.

 Some examples:

 {{{
 in customize-widgets.css:

 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);
 }
 }}}

 {{{
 in customize-nav-menus.css

 .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);
 }
 }}}

 etc. In the example above there's just one small difference in a `border-
 color` property that should be paired I guess. They're typically rules
 related to the `available-widgets` and `available-menu-items` panels that
 basically look the same. Not to mention the selectors could be unified
 too.
 I'd propose to start reviewing them and get some sanity.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/34333>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform