Changeset 63966

Timestamp:

09/28/2026 10:25:15 AM (2 days ago)

Author:

afercia

Message:

Administration: Fix the CSS Coding Standards in customize-controls.css.

Lints the src/wp-admin/css/customize-controls.css file.
Part of the ongoing effort to lint all the admin CSS files.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/13127

See #65898.

File:

• trunk/src/wp-admin/css/customize-controls.css (modified) (90 diffs)

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

@@ -39 +39 @@
         overflow-y: auto;
         text-align: left;
-        top: calc( 50% - 100px );
+        top: calc(50% - 100px);
 }
 
@@ -49 +49 @@
         margin-top: 0;
 }
+
 #customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .action-buttons {
         margin-bottom: 0;
@@ -77 +78 @@
         visibility: hidden;
 }
+
 #customize-save-button-wrapper .save {
         float: left;
@@ -100 +102 @@
         z-index: -1;
         background: #f0f0f1;
-        transition: left .18s;
+        transition: left 0.18s;
         border-right: 1px solid #dcdcde;
         border-left: 1px solid #dcdcde;
@@ -127 +129 @@
         visibility: visible;
         left: 100%;
-        transition: left .18s;
+        transition: left 0.18s;
 }
 
@@ -224 +226 @@
         margin-top: 20px;
 }
+
 #customize-control-trash_changeset .button-link {
         position: relative;
@@ -229 +232 @@
         display: inline-block;
 }
-#customize-control-trash_changeset .button-link:before {
+
+#customize-control-trash_changeset .button-link::before {
         content: "\f182";
-        content: "\f182" / '';
-        font: normal 22px dashicons;
+        content: "\f182" / "";
+        font: 400 22px dashicons;
         text-decoration: none;
         position: absolute;
@@ -264 +268 @@
         position: relative;
         display: block;
+        margin-top: 6px;
 }
 
@@ -279 +284 @@
 }
 
-.customize-copy-preview-link:before,
-.customize-copy-preview-link:after {
+.customize-copy-preview-link::before,
+.customize-copy-preview-link::after {
         content: "";
         height: 40px;
@@ -288 +293 @@
 }
 
-.customize-copy-preview-link:before {
+.customize-copy-preview-link::before {
         left: -10px;
         width: 9px;
@@ -294 +299 @@
 }
 
-.customize-copy-preview-link:after {
+.customize-copy-preview-link::after {
         left: -5px;
         width: 4px;
@@ -382 +387 @@
 }
 
-#customize-control-changeset_preview_link {
-        margin-top: 6px;
-}
-
 #customize-control-changeset_status {
         margin-bottom: 0;
@@ -438 +439 @@
 }
 
-#customize-controls .customize-info.open .accordion-section-title:after,
-#customize-controls .customize-info .accordion-section-title:hover:after,
-#customize-controls .customize-info .accordion-section-title:focus:after {
+#customize-controls .customize-info.open .accordion-section-title::after,
+#customize-controls .customize-info .accordion-section-title:hover::after,
+#customize-controls .customize-info .accordion-section-title:focus::after {
         color: #2c3338;
 }
 
-#customize-controls .customize-info .accordion-section-title:after {
+#customize-controls .customize-info .accordion-section-title::after {
         display: none;
 }
@@ -463 +464 @@
         font-size: 20px;
         font-weight: 200;
-        line-height: 26px;
+        line-height: 1.3;
         display: block;
         overflow: hidden;
@@ -490 +491 @@
 }
 
-#customize-controls .customize-info .customize-help-toggle:before {
+#customize-controls .customize-info .customize-help-toggle::before {
         position: absolute;
         top: 5px;
@@ -510 +511 @@
         border-top: none;
 }
+
 .no-widget-areas-rendered-notice {
         font-style: italic;
 }
+
 .no-widget-areas-rendered-notice p:first-child {
         margin-top: 0;
 }
+
 .no-widget-areas-rendered-notice p:last-child {
         margin-bottom: 0;
@@ -550 +554 @@
         border-left: 4px solid #fff;
         transition:
-                .15s color ease-in-out,
-                .15s background-color ease-in-out,
-                .15s border-color ease-in-out;
+                0.15s color ease-in-out,
+                0.15s background-color ease-in-out,
+                0.15s border-color ease-in-out;
 }
 
@@ -590 +594 @@
 }
 
-#customize-theme-controls .accordion-section-title:after,
-#customize-outer-theme-controls .accordion-section-title:after {
+#customize-theme-controls .accordion-section-title::after,
+#customize-outer-theme-controls .accordion-section-title::after {
         content: "\f345";
-        content: "\f345" / '';
+        content: "\f345" / "";
         color: #a7aaad;
         pointer-events: none;
@@ -787 +791 @@
         padding: 10px 10px 12px 14px;
         margin: 0;
+        /* stylelint-disable-next-line declaration-property-unit-allowed-list -- Can't be unitless because of backward compatibility reasons. */
         line-height: 21px;
         color: #50575e;
@@ -827 +832 @@
         .customize-controls-close {
                 transition:
-                        color .15s ease-in-out,
-                        border-color .15s ease-in-out,
-                        background .15s ease-in-out;
+                        color 0.15s ease-in-out,
+                        border-color 0.15s ease-in-out,
+                        background 0.15s ease-in-out;
         }
 }
@@ -848 +853 @@
         cursor: pointer;
         transition:
-                color .15s ease-in-out,
-                border-color .15s ease-in-out,
-                background .15s ease-in-out;
+                color 0.15s ease-in-out,
+                border-color 0.15s ease-in-out,
+                background 0.15s ease-in-out;
 }
 
@@ -904 +909 @@
 }
 
-.customize-controls-close:before {
-        font: normal 22px/45px dashicons;
+.customize-controls-close::before {
+        font: 400 22px/45px dashicons;
         content: "\f335";
-        content: "\f335" / '';
+        content: "\f335" / "";
         position: relative;
         top: -3px;
@@ -913 +918 @@
 }
 
-.customize-panel-back:before,
-.customize-section-back:before {
-        font: normal 20px/72px dashicons;
+.customize-panel-back::before,
+.customize-section-back::before {
+        font: 400 20px/72px dashicons;
         content: "\f341";
-        content: "\f341" / '';
+        content: "\f341" / "";
         position: relative;
         left: 9px;
@@ -924 +929 @@
 .wp-full-overlay-sidebar .wp-full-overlay-header {
         background-color: #f0f0f1;
-        transition: padding ease-in-out .18s;
+        transition: padding ease-in-out 0.18s;
 }
 
@@ -1001 +1006 @@
 }
 
-.customize-section-description a.external-link:after {
+.customize-section-description a.external-link::after {
         font: 16px/11px dashicons;
         content: "\f504";
-        content: "\f504" / '';
+        content: "\f504" / "";
         top: 3px;
         position: relative;
@@ -1014 +1019 @@
 .customize-control-color .color-picker,
 .customize-control-upload div {
+        /* stylelint-disable-next-line declaration-property-unit-allowed-list -- Can't be unitless because of backward compatibility reasons. */
         line-height: 28px;
 }
@@ -1080 +1086 @@
         line-height: 0;
 }
-
 
 .customize-control .thumbnail-image img {
@@ -1171 +1176 @@
         position: absolute;
 }
+
 #customize-preview iframe + iframe {
         visibility: hidden;
@@ -1179 +1185 @@
         border-right: 1px solid #dcdcde;
 }
-
 
 /**
@@ -1194 +1199 @@
 .customize-control-nav_menu_item.has-error .menu-item-bar .menu-item-handle {
         box-shadow: inset 0 0 0 2px #d63638;
-        transition: .15s box-shadow linear;
+        transition: 0.15s box-shadow linear;
 }
 
@@ -1203 +1208 @@
         overflow: hidden;
 }
+
 #customize-controls .customize-control-notifications-container .notice.is-dismissible {
         padding-right: 38px;
@@ -1253 +1259 @@
         margin: 0;
 }
+
 #customize-controls .panel-meta > .customize-control-notifications-container,
 #customize-controls .customize-section-title > .customize-control-notifications-container {
         border-top: 1px solid #dcdcde;
 }
+
 #customize-controls #customize-notifications-area .notice,
 #customize-controls .panel-meta > .customize-control-notifications-container .notice,
@@ -1262 +1270 @@
         padding: 9px 14px;
 }
+
 #customize-controls #customize-notifications-area .notice.is-dismissible,
 #customize-controls .panel-meta > .customize-control-notifications-container .notice.is-dismissible,
@@ -1267 +1276 @@
         padding-right: 38px;
 }
+
 #customize-controls #customize-notifications-area .notice + .notice,
 #customize-controls .panel-meta > .customize-control-notifications-container .notice + .notice,
@@ -1274 +1284 @@
 
 @keyframes customize-fade-in {
-        0%   { opacity: 0; }
-        100% { opacity: 1; }
+        0% {
+                opacity: 0;
+        }
+
+        100% {
+                opacity: 1;
+        }
 }
 
@@ -1313 +1328 @@
         margin-bottom: 0;
 }
+
 #customize-control-show_on_front.has-error .customize-control-notifications-container {
         margin-top: 12px;
@@ -1328 +1344 @@
 }
 
+/* @todo maybe no more used? */
 .accordion-section .dropdown-content {
         overflow: hidden;
@@ -1333 +1350 @@
         min-width: 30px;
         height: 16px;
+        /* stylelint-disable-next-line declaration-property-unit-allowed-list -- Legacy UI likely no longer used. */
         line-height: 16px;
         margin-right: 16px;
@@ -1351 +1369 @@
 }
 
-.customize-control .dropdown-arrow:after {
+.customize-control .dropdown-arrow::after {
         content: "\f140";
-        content: "\f140" / '';
-        font: normal 20px/1 dashicons;
+        content: "\f140" / "";
+        font: 400 20px/1 dashicons;
         display: block;
         padding: 0;
@@ -1499 +1517 @@
 .customize-control-header .inner,
 .customize-control-header .inner .dashicons {
+        /* stylelint-disable-next-line declaration-property-unit-allowed-list -- Used for dashicons. */
         line-height: 20px;
         top: 8px;
@@ -1519 +1538 @@
 
 /* Convoluted, but 'outline' support isn't good enough yet */
-.customize-control-header .header-view:after {
+.customize-control-header .header-view::after {
         border: 0;
 }
@@ -1527 +1546 @@
 }
 
-.customize-control-header .header-view.selected:after {
+.customize-control-header .header-view.selected::after {
         content: "";
         position: absolute;
@@ -1594 +1613 @@
 
 .button-see-me {
-        animation: bounce .7s 1;
+        animation: bounce 0.7s 1;
         transform-origin: center bottom;
 }
 
 @keyframes bounce {
-        from, 20%, 53%, 80%, to {
-                animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-                transform: translate3d(0,0,0);
-        }
-
-        40%, 43% {
-                animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+        from,
+        20%,
+        53%,
+        80%,
+        to {
+                animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+                transform: translate3d(0, 0, 0);
+        }
+
+        40%,
+        43% {
+                animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
                 transform: translate3d(0, -12px, 0);
         }
 
         70% {
-                animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+                animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
                 transform: translate3d(0, -6px, 0);
         }
 
         90% {
-                transform: translate3d(0,-1px,0);
+                transform: translate3d(0, -1px, 0);
         }
 }
@@ -1665 +1689 @@
         tab-size: 2;
 }
+
 .customize-control-code_editor textarea,
 .customize-control-code_editor .CodeMirror {
@@ -1690 +1715 @@
         border-right: 0;
         border-left: 0;
-        height: calc( 100vh - 185px );
+        height: calc(100vh - 185px);
         resize: none;
 }
@@ -1697 +1722 @@
         margin-left: -12px;
         width: 299px;
-        width: calc( 100% + 24px );
+        width: calc(100% + 24px);
         margin-bottom: -12px;
 }
 
 .customize-section-description-container + #customize-control-custom_css:last-child .CodeMirror {
-        height: calc( 100vh - 185px );
+        height: calc(100vh - 185px);
 }
 
@@ -1730 +1755 @@
 
         .customize-section-description-container + #customize-control-custom_css:last-child textarea {
-                height: calc( 100vh - 140px );
+                height: calc(100vh - 140px);
         }
 }
@@ -1777 +1802 @@
 .control-panel-themes .accordion-section-title span.customize-action,
 #customize-controls .customize-section-title span.customize-action,
-#customize-controls .control-section-themes .accordion-section-title span.customize-action,
-#customize-controls .customize-section-title span.customize-action {
+#customize-controls .control-section-themes .accordion-section-title span.customize-action {
         font-size: 13px;
         display: block;
@@ -1798 +1822 @@
 }
 
-#customize-theme-controls .control-panel-themes > .accordion-section-title:after {
+#customize-theme-controls .control-panel-themes > .accordion-section-title::after {
         display: none;
 }
@@ -1806 +1830 @@
         top: 0;
         left: 0;
-        transition: .18s left ease-in-out;
+        transition: 0.18s left ease-in-out;
         margin: 0 0 0 300px;
         padding: 71px 0 25px;
@@ -1838 +1862 @@
 #customize-header-actions .spinner,
 #customize-header-actions .customize-controls-preview-toggle {
-        transition: .18s margin ease-in-out;
+        transition: 0.18s margin ease-in-out;
 }
 
@@ -1844 +1868 @@
 #customize-footer-actions .collapse-sidebar {
         bottom: 0;
-        transition: .18s bottom ease-in-out;
+        transition: 0.18s bottom ease-in-out;
 }
 
@@ -1883 +1907 @@
 }
 
-.themes-filter-bar .feature-filter-toggle:before {
+.themes-filter-bar .feature-filter-toggle::before {
         content: "\f111";
-        content: "\f111" / '';
+        content: "\f111" / "";
         margin: 0 5px 0 0;
-        font: normal 16px/1 dashicons;
+        font: 400 16px/1 dashicons;
         vertical-align: text-bottom;
         -webkit-font-smoothing: antialiased;
@@ -1918 +1942 @@
 .filter-drawer .filter-group {
         margin: 0 25px 0 0;
-        width: calc( (100% - 75px) / 3);
+        width: calc((100% - 75px) / 3);
         min-width: 200px;
         max-width: 320px;
@@ -1928 +1952 @@
                 opacity: 0;
         }
+
         50% {
                 opacity: 0;
         }
+
         100% {
                 opacity: 1;
@@ -1937 +1963 @@
 
 .control-panel-themes .customize-themes-full-container.animate {
-        animation: .6s themes-fade-in 1;
+        animation: 0.6s themes-fade-in 1;
 }
 
 .in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
-        animation: .6s themes-fade-in 1;
+        animation: 0.6s themes-fade-in 1;
 }
 
@@ -1969 +1995 @@
         padding: 0 0 8px 15px;
         margin: 15px 0 0;
+        /* stylelint-disable-next-line declaration-property-unit-allowed-list -- Legacy UI likely no longer used. */
         line-height: 16px;
         border-bottom: 1px solid #dcdcde;
@@ -2007 +2034 @@
 }
 
-.customize-themes-section-title:not(.selected):after {
+.customize-themes-section-title:not(.selected)::after {
         content: "";
         display: block;
@@ -2020 +2047 @@
 }
 
-.control-panel-themes .theme-section .customize-themes-section-title.selected:after {
+.control-panel-themes .theme-section .customize-themes-section-title.selected::after {
         content: "\f147";
-        content: "\f147" / '';
+        content: "\f147" / "";
         font: 16px/1 dashicons;
         box-sizing: border-box;
@@ -2070 +2097 @@
 }
 
-.customize-control-theme .theme .theme-name, .customize-control-theme .theme .theme-actions {
+.customize-control-theme .theme .theme-name,
+.customize-control-theme .theme .theme-actions {
         background: #fff;
         border: none;
@@ -2087 +2115 @@
 @media screen and (min-width: 2101px) {
         .customize-control.customize-control-theme {
-                width: calc( ( 100% - 125px ) / 5 - 1px ); /* 1px offset accounts for browser rounding, typical all grids */
+                width: calc(( 100% - 125px ) / 5 - 1px); /* 1px offset accounts for browser rounding, typical all grids */
         }
 }
@@ -2094 +2122 @@
 @media screen and (min-width: 1601px) and (max-width: 2100px) {
         .customize-control.customize-control-theme {
-                width: calc( ( 100% - 100px ) / 4 - 1px );
+                width: calc(( 100% - 100px ) / 4 - 1px);
         }
 }
@@ -2101 +2129 @@
 @media screen and (min-width: 1201px) and (max-width: 1600px) {
         .customize-control.customize-control-theme {
-                width: calc( ( 100% - 75px ) / 3 - 1px );
+                width: calc(( 100% - 75px ) / 3 - 1px);
         }
 }
@@ -2108 +2136 @@
 @media screen and (min-width: 851px) and (max-width: 1200px) {
         .customize-control.customize-control-theme {
-                width: calc( ( 100% - 50px ) / 2 - 1px );
+                width: calc(( 100% - 50px ) / 2 - 1px);
 
         }
@@ -2122 +2150 @@
 .wp-customizer .theme-browser .themes {
         padding: 0 0 25px 25px;
-        transition: .18s margin-top linear;
+        transition: 0.18s margin-top linear;
 }
 
@@ -2149 +2177 @@
         border-bottom: 1px solid #dcdcde;
 }
+
 .customize-preview-header.themes-filter-bar,
 .customize-preview-header.themes-filter-bar .search-form {
@@ -2209 +2238 @@
                 margin: 0 0 25px;
         }
+
         .filter-drawer {
                 top: 46px;
         }
+
         .wp-customizer .theme-browser .themes {
                 padding: 0 0 25px 25px;
@@ -2227 +2258 @@
 @media screen and (max-width: 1018px) {
         .filter-drawer .filter-group {
-                width: calc( (100% - 50px) / 2);
+                width: calc((100% - 50px) / 2);
         }
 }
@@ -2245 +2276 @@
 
         .customize-preview-header.themes-filter-bar,
-        .customize-preview-header.themes-filter-bar .search-form
-        .themes-filter-bar .themes-filter-container {
+        .customize-preview-header.themes-filter-bar .search-form .themes-filter-bar .themes-filter-container {
                 display: grid;
                 gap: 4px;
@@ -2267 +2297 @@
 @media screen and (max-width: 792px) {
         .filter-drawer .filter-group {
-                width: calc( 100% - 25px);
+                width: calc(100% - 25px);
         }
 }
@@ -2277 +2307 @@
 /* Mobile - toggle between themes and filters */
 @media screen and (max-width: 600px) {
-
         .filter-drawer {
                 top: 132px;
@@ -2323 +2352 @@
         }
 
-        .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:before {
+        .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back::before {
                 left: 0;
                 top: 0;
@@ -2370 +2399 @@
 .wp-customizer.modal-open #customize-header-actions,
 .wp-customizer.modal-open .control-panel-themes .filter-themes-count,
-.wp-customizer.modal-open .control-panel-themes .customize-themes-section-title.selected:after {
+.wp-customizer.modal-open .control-panel-themes .customize-themes-section-title.selected::after {
         z-index: -1;
 }
@@ -2390 +2419 @@
 
 .wp-customizer .theme-rating .num-ratings {
-        line-height: 20px;
+        line-height: 1.5384;
 }
 
@@ -2421 +2450 @@
 
 .wp-customizer .theme-overlay .theme-header button,
-.wp-customizer .theme-overlay .theme-header .close:before {
+.wp-customizer .theme-overlay .theme-header .close::before {
         color: #3c434a;
 }
@@ -2434 +2463 @@
 }
 
-.wp-customizer .theme-overlay .theme-header .close:focus:before,
-.wp-customizer .theme-overlay .theme-header .close:hover:before {
+.wp-customizer .theme-overlay .theme-header .close:focus::before,
+.wp-customizer .theme-overlay .theme-header .close:hover::before {
         color: var(--wp-admin-theme-color);
 }
@@ -2521 +2550 @@
 }
 
-.add-new-widget:before,
-.add-new-menu-item:before,
-#available-menu-items .new-content-item .add-content:before {
+.add-new-widget::before,
+.add-new-menu-item::before,
+#available-menu-items .new-content-item .add-content::before {
         content: "\f132";
-        content: "\f132" / '';
+        content: "\f132" / "";
         display: inline-block;
         position: relative;
         left: -2px;
         top: 0;
-        font: normal 20px/1 dashicons;
+        font: 400 20px/1 dashicons;
         vertical-align: middle;
         transition: all 0.2s;
@@ -2578 +2607 @@
 }
 
-.widget-reorder-nav span:before,
-.menu-item-reorder-nav button:before {
+.widget-reorder-nav span::before,
+.menu-item-reorder-nav button::before {
         display: inline-block;
         position: absolute;
@@ -2586 +2615 @@
         width: 100%;
         height: 100%;
-        font: normal 20px/43px dashicons;
+        font: 400 20px/43px dashicons;
         text-align: center;
         text-indent: 0;
@@ -2601 +2630 @@
 }
 
-.move-widget-down:before,
-.menus-move-down:before {
+.move-widget-down::before,
+.menus-move-down::before {
         content: "\f347";
-        content: "\f347" / '';
-}
-
-.move-widget-up:before,
-.menus-move-up:before {
+        content: "\f347" / "";
+}
+
+.move-widget-up::before,
+.menus-move-up::before {
         content: "\f343";
-        content: "\f343" / '';
+        content: "\f343" / "";
 }
 
@@ -2646 +2675 @@
 }
 
-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 {
+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 {
         transform: rotate(45deg);
 }
@@ -2665 +2694 @@
         z-index: 4;
         background: #f0f0f1;
-        transition: left .18s;
+        transition: left 0.18s;
         border-right: 1px solid #dcdcde;
 }
@@ -2775 +2804 @@
 }
 
-#available-widgets-filter .clear-results:before,
-#available-menu-items-search .clear-results:before {
+#available-widgets-filter .clear-results::before,
+#available-menu-items-search .clear-results::before {
         content: "\f335";
-        content: "\f335" / '';
-        font: normal 20px/1 dashicons;
+        content: "\f335" / "";
+        font: 400 20px/1 dashicons;
         vertical-align: middle;
         -webkit-font-smoothing: antialiased;
@@ -2800 +2829 @@
 }
 
-#available-menu-items-search .search-icon:after,
-#available-widgets-filter .search-icon:after,
-.themes-filter-bar .search-icon:after {
+#available-menu-items-search .search-icon::after,
+#available-widgets-filter .search-icon::after,
+.themes-filter-bar .search-icon::after {
         content: "\f179";
-        font: normal 20px/1 dashicons;
+        font: 400 20px/1 dashicons;
         vertical-align: middle;
         -webkit-font-smoothing: antialiased;
@@ -2850 +2879 @@
         border-left: 4px solid #fff;
         transition:
-                .15s color ease-in-out,
-                .15s background-color ease-in-out,
-                .15s border-color ease-in-out;
+                0.15s color ease-in-out,
+                0.15s background-color ease-in-out,
+                0.15s border-color ease-in-out;
         cursor: pointer;
         display: none;
@@ -2861 +2890 @@
         position: static;
 }
-
 
 /* Responsive */
@@ -2968 +2996 @@
                 color: #50575e;
                 cursor: pointer;
-                transition: color .1s ease-in-out, background .1s ease-in-out;
+                transition: color 0.1s ease-in-out, background 0.1s ease-in-out;
         }
 
@@ -2983 +3011 @@
         }
 
-        .customize-controls-preview-toggle .preview:before,
-        .customize-controls-preview-toggle .controls:before {
-                font: normal 20px/1 dashicons;
+        .customize-controls-preview-toggle .preview::before,
+        .customize-controls-preview-toggle .controls::before {
+                font: 400 20px/1 dashicons;
                 content: "\f177";
-                content: "\f177" / '';
+                content: "\f177" / "";
                 position: relative;
                 top: 4px;
@@ -2993 +3021 @@
         }
 
-        .customize-controls-preview-toggle .controls:before {
+        .customize-controls-preview-toggle .controls::before {
                 content: "\f540";
-                content: "\f540" / '';
+                content: "\f540" / "";
         }
 
@@ -3056 +3084 @@
                 padding: 9px 10px 12px 14px;
                 margin: 0;
-                line-height: 24px;
+                line-height: 1.2;
                 color: #50575e;
                 display: block;