Remove unneeded CSS prefixes and length unit symbols

* Remove `-webkit-` prefixes from `transition` and flexbox-related properties * Remove `-webkit-` prefix inside unprefixed `@keyframes` * Add missing unprefixed `transform`s * Remove `px` unit from `0px` values (+ Remove whitespace from end of lines)
adobe · Jan 30, 2016 · 802243a · 802243a
1 parent 419c986
commit 802243a
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 90 deletions.
diff --git a/src/styles/brackets.less b/src/styles/brackets.less
@@ -220,8 +220,8 @@ a, img {
 
     #status-language {
         border-right: 1px solid @bc-panel-border;
-        padding: 0px;
-        margin: 0px;
+        padding: 0;
+        margin: 0;
 
         .dark & {
             border-right: 1px solid @dark-bc-panel-separator;
@@ -347,10 +347,10 @@ a, img {
         .image-view {
             overflow: hidden;
             position: absolute;
-            top: 0px;
-            right: 0px;
-            bottom: 0px;
-            left: 0px;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
             text-align: center;
             .image-centering {
                 display: inline-block;
@@ -409,7 +409,7 @@ a, img {
         }
 
         .image-guide,
-        .image-tip, 
+        .image-tip,
         .image-scale {
             pointer-events: none;
         }
@@ -503,7 +503,7 @@ a, img {
         &-flipview-btn {
             position: relative;
             display: none;
-            top: 0px;
+            top: 0;
             padding-top: 2px;
             padding-right: 4px;
             padding-left: 4px;
@@ -512,7 +512,7 @@ a, img {
             .sprite-icon(0, 0, 13px, 13px, "images/flip-view-icons.svg");
             background-origin: content-box;
             -webkit-transform: translateZ(0); // forces GPU mode for better filter rendering on retina
-            transform: translateZ(0); // future proofing
+            transform: translateZ(0);
             -webkit-filter: drop-shadow(0 1px 0 rgba(0,0,0,0.36));
             filter: drop-shadow(0 1px 0 rgba(0,0,0,0.36));
             z-index: 1;
@@ -648,7 +648,7 @@ a, img {
 
     .dark & {
         background-color: @dark-bc-panel-bg;
-        border-top: 1px solid @dark-bc-panel-border;        
+        border-top: 1px solid @dark-bc-panel-border;
     }
 
     .check-all {
@@ -667,7 +667,7 @@ a, img {
         .dark & {
             background-color: @dark-bc-panel-bg-promoted;
             border-bottom: @dark-bc-panel-separator;
-            box-shadow: inset 0 1px 0 @dark-bc-highlight, 0 -1px 3px @dark-bc-shadow-small;            
+            box-shadow: inset 0 1px 0 @dark-bc-highlight, 0 -1px 3px @dark-bc-shadow-small;
         }
 
         .title {
@@ -795,7 +795,7 @@ a, img {
 #working-set-list-container {
     background: @bc-sidebar-bg;
 
-    > div:last-child ul { 
+    > div:last-child ul {
         padding-bottom: 21px; // Adds working set bottom padding to the last UL.
     }
 }
@@ -840,7 +840,7 @@ a, img {
     .sprite-icon(0, 0, 13px, 13px, "images/split-view-icons.svg");
     background-origin: content-box;  // center image within the 13x13 area - ignore button's padding
     -webkit-transform: translateZ(0); // forces GPU mode for better filter rendering on retina
-    transform: translateZ(0); // future proofing
+    transform: translateZ(0);
     -webkit-filter: drop-shadow(0 1px 0 rgba(0,0,0,0.36));
     z-index: 1;
 }
@@ -901,13 +901,13 @@ a, img {
 
         // relative positioning plus z-index make sure that the splitview button flows under the left aligned buttons in the project pane when there are no working set files
         position: relative;
-        z-index: 9; 
+        z-index: 9;
     }
 }
 
 .open-files-container {
     .box-flex(0);
-    padding: 0px;
+    padding: 0;
     max-height: 200px; // TODO (Issue #276): it would be nicer to have this be 50%, but that doesn't seem to work
 
 
@@ -1015,7 +1015,7 @@ a, img {
 
     > ul {
         padding-bottom: 24px;
-    }    
+    }
 }
 
 .scroller-shadow {
@@ -1061,22 +1061,26 @@ a, img {
 .jstree-brackets .jstree-no-dots .jstree-open > ins {
     background-position: 7px -8px;
     -webkit-transform: translateZ(0) rotate(90deg);
-    -webkit-transition: -webkit-transform 190ms cubic-bezier(.01, .91, 0, .99);
+    transform: translateZ(0) rotate(90deg);
+    transition: -webkit-transform 190ms cubic-bezier(.01, .91, 0, .99);
+    transition: transform 190ms cubic-bezier(.01, .91, 0, .99);
     -webkit-filter: drop-shadow(1px 0 1px @bc-shadow);
 
     .dark & {
-        -webkit-filter: drop-shadow(1px 0 1px @dark-bc-shadow);        
+        -webkit-filter: drop-shadow(1px 0 1px @dark-bc-shadow);
     }
 }
 
 .jstree-brackets .jstree-no-dots .jstree-closed > ins {
     background-position: 7px -8px;
     -webkit-transform: translateZ(0); /* Need this to make sure that the svg isn't blurry on retina. */
-    -webkit-transition: -webkit-transform 90ms cubic-bezier(.01, .91, 0, .99);
+    transform: translateZ(0);
+    transition: -webkit-transform 90ms cubic-bezier(.01, .91, 0, .99);
+    transition: transform 90ms cubic-bezier(.01, .91, 0, .99);
     -webkit-filter: drop-shadow(1px 0 1px @bc-shadow);
 
     .dark & {
-        -webkit-filter: drop-shadow(1px 0 1px @dark-bc-shadow);        
+        -webkit-filter: drop-shadow(1px 0 1px @dark-bc-shadow);
     }
 }
 
@@ -1125,7 +1129,7 @@ a, img {
 /* Styles for inline editors */
 
 .inline-text-editor {
-    line-height: 0px;
+    line-height: 0;
 }
 
 .inline-widget {
@@ -1138,7 +1142,7 @@ a, img {
     cursor: default;
 
     .dark & {
-        background-color: @dark-bc-bg-inline-widget; 
+        background-color: @dark-bc-bg-inline-widget;
     }
 
     &.animating {
@@ -1205,12 +1209,12 @@ a, img {
     }
 
     .shadow.top {
-        top: 0px;
+        top: 0;
         background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
     }
 
     .shadow.bottom {
-        bottom: 0px;
+        bottom: 0;
         background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
     }
 
@@ -1305,15 +1309,15 @@ a, img {
 
         ul {
             margin: 0;
-            padding: 10px 0px 10px 5px;
+            padding: 10px 0 10px 5px;
             list-style: none;
         }
 
         li {
             color: @bc-text-emphasized;
             margin: 0;
             overflow: hidden;
-            padding: 2px 0px 2px 15px;
+            padding: 2px 0 2px 15px;
             text-overflow: ellipsis;
             white-space: nowrap;
 
@@ -1419,7 +1423,7 @@ a, img {
         .dark & {
             background-color: @dark-bc-shadow;
         }
-    } 
+    }
     .replace-col {
         .flex-item(1, 0);
         min-width: 120px;
@@ -1471,6 +1475,7 @@ a, img {
         // Unfortunately, the way jsTree sprites are aligned within their 18px boxes doesn't look good in
         // other contexts, so we need some tweaks here instead of straight multiples of @jstree-sprite-size
         -webkit-transform: translateZ(0) rotate(90deg);
+        transform: translateZ(0) rotate(90deg);
     }
 }
 
@@ -1487,8 +1492,10 @@ a, img {
     overflow: visible;  // needed for .error popup
     padding: 5px 4px 4px 14px;
 
-    -webkit-transform: translate(0, 0); // Prefix still required.
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
     transition: -webkit-transform 66ms cubic-bezier(0, 0.62, 0.04, 0.99);
+    transition: transform 66ms cubic-bezier(0, 0.62, 0.04, 0.99);
     z-index: @z-index-brackets-modalbar;
 
     .dark & {
@@ -1671,19 +1678,19 @@ a, img {
     }
     #replace-all.solo {
         border-left: none;
-        margin-left: 0px;
+        margin-left: 0;
     }
 
     // Make find field snug with options buttons
     //    & replace snug with replace commands
     #find-what, #replace-with {
-        margin-right: 0px;
+        margin-right: 0;
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
     }
     #find-case-sensitive, #replace-yes {
         border-left: none;
-        margin-left: 0px;
+        margin-left: 0;
         border-radius: 0;
     }
 }
@@ -1924,8 +1931,8 @@ textarea.exclusions-editor {
 }
 
 @-webkit-keyframes autocomplete {
-    0%   { opacity: 0.6; -webkit-transform: translate3d(0, 0, 0) scale(0.6); }
-    100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1); }
+    0%   { opacity: 0.6; -webkit-transform: translate3d(0, 0, 0) scale(0.6); transform: translate3d(0, 0, 0) scale(0.6); }
+    100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); }
 }
 @keyframes autocomplete {
     0%   { opacity: 0.6; transform: translate3d(0, 0, 0) scale(0.6); }
@@ -2026,14 +2033,14 @@ textarea.exclusions-editor {
 }
 
 @-webkit-keyframes spinner-rotateplane {
-    0% { -webkit-transform: perspective(120px) }
-    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
-    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
+    0% { -webkit-transform: perspective(120px); transform: perspective(120px); }
+    50% { -webkit-transform: perspective(120px) rotateY(180deg); transform: perspective(120px) rotateY(180deg); }
+    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg); transform: perspective(120px) rotateY(180deg)  rotateX(180deg); }
 }
 @keyframes spinner-rotateplane {
-    0% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
-    50% { -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
-    100% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }
+    0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
+    50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
+    100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }
 }
 
 
@@ -2129,7 +2136,7 @@ label input {
             background-color: @dark-bc-error;
             border-radius: 3px;
             color: @dark-bc-text-alt;
-            box-shadow: 0 3px 9px @dark-bc-shadow;            
+            box-shadow: 0 3px 9px @dark-bc-shadow;
         }
     }
     .arrowAbove {
@@ -2155,7 +2162,7 @@ label input {
         }
     }
     &.animateOpen {
-        -webkit-transition: -webkit-transform 125ms;
+        transition: -webkit-transform 125ms;
         transition: transform 125ms;
         -webkit-transform: scale(1);
         transform: scale(1);
@@ -2164,12 +2171,11 @@ label input {
         // Make the animation use the GPU--especially important for retina.
         -webkit-transform: translateZ(0);
         transform: translateZ(0);
-        -webkit-transition: opacity 500ms 5s ease-in, -webkit-transform 500ms 5s;
+        transition: opacity 500ms 5s ease-in, -webkit-transform 500ms 5s;
         transition: opacity 500ms 5s ease-in, transform 500ms 5s;
         opacity: 0.0;
     }
     &.open {
-        -webkit-transform: scale(1);
         transform: scale(1);
     }
 }
@@ -2224,7 +2230,7 @@ label input {
     .dark & {
         background: @dark-bc-primary-btn-bg;
         border: 1px solid @dark-bc-primary-btn-bg;
-        color: @dark-bc-text-alt;        
+        color: @dark-bc-text-alt;
     }
 }
 

diff --git a/src/styles/brackets_codemirror_override.less b/src/styles/brackets_codemirror_override.less
@@ -1,21 +1,21 @@
 // Copyright (c) 2012 - present Adobe Systems Incorporated. All rights reserved.
-//  
+//
 // Permission is hereby granted, free of charge, to any person obtaining a
-// copy of this software and associated documentation files (the "Software"), 
-// to deal in the Software without restriction, including without limitation 
-// the rights to use, copy, modify, merge, publish, distribute, sublicense, 
-// and/or sell copies of the Software, and to permit persons to whom the 
+// copy of this software and associated documentation files (the "Software"),
+// to deal in the Software without restriction, including without limitation
+// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+// and/or sell copies of the Software, and to permit persons to whom the
 // Software is furnished to do so, subject to the following conditions:
-//  
+//
 // The above copyright notice and this permission notice shall be included in
 // all copies or substantial portions of the Software.
-//  
+//
 // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
-// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 // DEALINGS IN THE SOFTWARE.
 
 /* Brackets / CodeMirror Code Formatting */
@@ -26,7 +26,7 @@
     padding: 0 @code-padding 0 0;
 
     > * {
-        text-indent: 0px;
+        text-indent: 0;
     }
 }
 
@@ -71,7 +71,7 @@
         color: @activeline-number;
     }
     .inline-widget .CodeMirror-gutter-elt {
-        color: @accent-comment;    
+        color: @accent-comment;
     }
 }
 
@@ -126,7 +126,7 @@ div.CodeMirror-cursors {
     /* This is necessary for issue #2780. The logic for closing dropdowns depends on "click" events. Now
      * that each line has a separate div element, there is a good chance that mouseDown and mouseUp events
      * occur on different elements, which means a click event will not be sent. By disabling pointer events here,
-     * we are guaranteed that the mouse event will be captured by our parent div, and click events will 
+     * we are guaranteed that the mouse event will be captured by our parent div, and click events will
      * be dispatched.
      */
     pointer-events: none;