Merge pull request #12648 from valtlai/valtlai/css-prefixes-units

Marcel Gerber · web-flow · commit 0858f849fc98 · 2016-08-08T17:38:25.000+02:00
CSS: remove unneeded prefixes, add standard properties, remove `px` from 0s
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;
@@ -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;
@@ -840,6 +840,7 @@ a, img {
     -webkit-transform: translateZ(0); // forces GPU mode for better filter rendering on retina
     transform: translateZ(0); // future proofing
     -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;
 }
 
@@ -905,7 +906,7 @@ a, img {
 
 .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
 
 
@@ -1059,22 +1060,30 @@ 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);
+    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);
+        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);
+    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);
+        filter: drop-shadow(1px 0 1px @dark-bc-shadow);
     }
 }
 
@@ -1123,7 +1132,7 @@ a, img {
 /* Styles for inline editors */
 
 .inline-text-editor {
-    line-height: 0px;
+    line-height: 0;
 }
 
 .inline-widget {
@@ -1203,13 +1212,13 @@ a, img {
     }
 
     .shadow.top {
-        top: 0px;
-        background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
+        top: 0;
+        background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
     }
 
     .shadow.bottom {
-        bottom: 0px;
-        background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
+        bottom: 0;
+        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
     }
 
     .CodeMirror-scroll {
@@ -1303,15 +1312,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;
 
@@ -1469,6 +1478,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);
     }
 }
 
@@ -1486,7 +1496,9 @@ a, img {
     padding: 5px 4px 4px 14px;
 
     -webkit-transform: translate(0, 0); // Prefix still required.
+    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 & {
@@ -1669,19 +1681,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;
     }
 }
@@ -2024,14 +2036,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); }
+    50% { -webkit-transform: perspective(120px) rotateY(180deg); }
+    100% { -webkit-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); }
 }
 
 
@@ -2153,7 +2165,7 @@ label input {
         }
     }
     &.animateOpen {
-        -webkit-transition: -webkit-transform 125ms;
+        transition: -webkit-transform 125ms;
         transition: transform 125ms;
         -webkit-transform: scale(1);
         transform: scale(1);
@@ -2162,7 +2174,7 @@ 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;
     }
diff --git a/src/styles/brackets_codemirror_override.less b/src/styles/brackets_codemirror_override.less
@@ -26,7 +26,7 @@
     padding: 0 @code-padding 0 0;
 
     > * {
-        text-indent: 0px;
+        text-indent: 0;
     }
 }
 
diff --git a/src/styles/brackets_mixins.less b/src/styles/brackets_mixins.less
@@ -24,13 +24,10 @@
 /* Helpers for working with flex layouts */
 /* see: https://developer.mozilla.org/en-US/docs/Web/CSS/flex */
 .flex-box(@direction: row) {
-    display: -webkit-flex;
-    -webkit-flex-direction: @direction;
     display: flex;
     flex-direction: @direction;
 }
 .flex-item(@grow: 0, @shrink: 1, @basis: auto) {
-    -webkit-flex: @grow @shrink @basis;
     flex: @grow @shrink @basis;
 }
 
@@ -70,8 +67,6 @@
 
 /* Helpful for percentage-sizing items that have border/padding */
 .sane-box-model {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
 
diff --git a/src/styles/brackets_patterns_override.less b/src/styles/brackets_patterns_override.less
@@ -73,10 +73,10 @@ a:focus {
     background: @project-panel-base-color;
     color: #bbb;
     letter-spacing: .01em;
-    text-shadow: 0px 1px 2px @bc-shadow-large;
+    text-shadow: 0 1px 2px @bc-shadow-large;
 
     .dark & {
-        text-shadow: 0px 1px 2px @dark-bc-shadow-large;
+        text-shadow: 0 1px 2px @dark-bc-shadow-large;
     }
 }
 
@@ -88,10 +88,10 @@ a:focus {
     z-index: @z-index-brackets-drag-ghost;
     background-color: transparent;
 
-    text-shadow: 0px 1px 2px @bc-shadow-large;
+    text-shadow: 0 1px 2px @bc-shadow-large;
     
     .dark & {
-        text-shadow: 0px 1px 2px @dark-bc-shadow-large;
+        text-shadow: 0 1px 2px @dark-bc-shadow-large;
     }
 }
 
@@ -156,6 +156,7 @@ a:focus {
             max-height: 90vh;
             overflow-y: auto;
             -webkit-animation: none;
+            animation: none;
         }
     }
     .title {
@@ -179,7 +180,7 @@ a:focus {
     box-sizing: border-box;
 
     background: @main-toolbar-background-color;
-    padding: 7px 0px;
+    padding: 7px 0;
 
     // Ensure icons are vertically stacked & horizontally centered
     .vbox;
@@ -199,7 +200,7 @@ a:focus {
             background-repeat: no-repeat;
             display: block;
             height: 24px;
-            margin: 7px 0px 0px 3px;
+            margin: 7px 0 0 3px;
             width: 24px;
         }
 
@@ -259,8 +260,6 @@ a:focus {
 
         white-space: nowrap;
         overflow: hidden;
-        -ms-text-overflow: ellipsis;
-        -o-text-overflow: ellipsis;
         text-overflow: ellipsis;
     }
 
@@ -284,6 +283,7 @@ a:focus {
 .dropdown-menu {
     .animation(dropdown, 90ms, cubic-bezier(0, .97, .2, .99));
     -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
     border: none;
     border-radius: @bc-border-radius;
 
@@ -305,6 +305,7 @@ a:focus {
 
 .codehint-menu.open .dropdown-menu {
     -webkit-animation: none;
+    animation: none;
 }
 
 .toolbar .nav, .context-menu, .codehint-menu {
@@ -373,6 +374,7 @@ a:focus {
         // This technique won't work on all browsers; see comments in #4593 for alternative options.
         width: -webkit-max-content;
         width: -moz-max-content;
+        width: max-content;
 
         background-color: @bc-menu-bg;
         .border-radius(0 0 3px 3px);
@@ -392,7 +394,7 @@ a:focus {
 
                 // Slightly less padding on left to account for checkmark.
                 // More padding on top than bottom to center font within its bg highlight better.
-                padding: 2px 10px 0px 6px;
+                padding: 2px 10px 0 6px;
 
                 color: @bc-menu-text;
                 text-shadow: none;
@@ -502,7 +504,7 @@ a:focus {
             a {
                 // Less padding than on menus. More padding on top than bottom
                 // to center font within its bg highlight better.
-                padding: 2px 20px 0px 0px;
+                padding: 2px 20px 0 0;
 
                 // Don't show highlighting on hover for code hints...
                 &:hover {
@@ -571,8 +573,8 @@ a:focus {
 .btn-dropdown::after {
     content: "";
     display: block;
-    height: 0px;
-    width: 0px;
+    height: 0;
+    width: 0;
     position: absolute;
     right: 7px;
     top: 11px;
@@ -678,6 +680,7 @@ a:focus {
 /* Status bar language picker's DropdownButton */
 .dropdownbutton-popup.dropdown-status-bar {
     -webkit-transform-origin: 0 100%;
+    transform-origin: 0 100%;
     height: auto;
     max-height: 80%;
     
@@ -1525,7 +1528,7 @@ input[type="color"],
     box-shadow: inset 0 1px @bc-highlight-hard;
     -webkit-font-smoothing: antialiased;
     text-shadow: none;
-    margin: 3px 0px 3px 3px;
+    margin: 3px 0 3px 3px;
 
     .dark & {
         background-color: @dark-bc-btn-bg;
diff --git a/src/styles/jsTreeTheme.less b/src/styles/jsTreeTheme.less
@@ -29,8 +29,8 @@
 .jstree ul, .jstree li { display:block; margin:0 0 0 0; padding:0 0 0 0; list-style-type:none; }
 .jstree li { display:block; min-height:@li-min-height; line-height:16px; white-space:nowrap; margin-left:18px; min-width:18px; }
 .jstree-rtl li { margin-left:0; margin-right:18px; }
-.jstree > ul > li { margin-left:0px; }
-.jstree-rtl > ul > li { margin-right:0px; }
+.jstree > ul > li { margin-left:0; }
+.jstree-rtl > ul > li { margin-right:0; }
 .jstree ins { display:inline-block; text-decoration:none; width:18px; height:18px; margin:0 0 0 0; padding:0; }
 .jstree a:focus { outline: none; }
 .jstree a > ins { height:16px; width:16px; }
@@ -169,11 +169,11 @@ ins.jstree-icon {
 }
 
 #vakata-contextmenu.jstree-brackets-context,
-#vakata-contextmenu.jstree-brackets-context li ul { background:#f0f0f0; border:1px solid #979797; -moz-box-shadow: 1px 1px 2px #999; -webkit-box-shadow: 1px 1px 2px #999; box-shadow: 1px 1px 2px #999; }
+#vakata-contextmenu.jstree-brackets-context li ul { background:#f0f0f0; border:1px solid #979797; box-shadow: 1px 1px 2px #999; }
 #vakata-contextmenu.jstree-brackets-context li { }
 #vakata-contextmenu.jstree-brackets-context a { color:black; }
 #vakata-contextmenu.jstree-brackets-context a:hover,
-#vakata-contextmenu.jstree-brackets-context .vakata-hover > a { padding:0 5px; background:#e8eff7; border:1px solid #aecff7; color:black; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; }
+#vakata-contextmenu.jstree-brackets-context .vakata-hover > a { padding:0 5px; background:#e8eff7; border:1px solid #aecff7; color:black; border-radius:2px; }
 #vakata-contextmenu.jstree-brackets-context li.jstree-contextmenu-disabled a,
 #vakata-contextmenu.jstree-brackets-context li.jstree-contextmenu-disabled a:hover { color:silver; background:transparent; border:0; padding:1px 4px; }
 #vakata-contextmenu.jstree-brackets-context li.vakata-separator { background:white; border-top:1px solid #e0e0e0; margin:0; }

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@`
`26`	`26`	`padding: 0 @code-padding 0 0;`
`27`	`27`
`28`	`28`	`> * {`
`29`		`- text-indent: 0px;`
	`29`	`+ text-indent: 0;`
`30`	`30`	`}`
`31`	`31`	`}`
`32`	`32`
Original file line number	Diff line number	Diff line change
`@@ -24,13 +24,10 @@`
`24`	`24`	`/* Helpers for working with flex layouts */`
`25`	`25`	`/* see: https://developer.mozilla.org/en-US/docs/Web/CSS/flex */`
`26`	`26`	`.flex-box(@direction: row) {`
`27`		`- display: -webkit-flex;`
`28`		`- -webkit-flex-direction: @direction;`
`29`	`27`	`display: flex;`
`30`	`28`	`flex-direction: @direction;`
`31`	`29`	`}`
`32`	`30`	`.flex-item(@grow: 0, @shrink: 1, @basis: auto) {`
`33`		`- -webkit-flex: @grow @shrink @basis;`
`34`	`31`	`flex: @grow @shrink @basis;`
`35`	`32`	`}`
`36`	`33`
`@@ -70,8 +67,6 @@`
`70`	`67`
`71`	`68`	`/* Helpful for percentage-sizing items that have border/padding */`
`72`	`69`	`.sane-box-model {`
`73`		`- -webkit-box-sizing: border-box;`
`74`		`- -moz-box-sizing: border-box;`
`75`	`70`	`box-sizing: border-box;`
`76`	`71`	`}`
`77`	`72`