diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 32d0695b0f2..d5ddfe8d1ff 100644 --- 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,7 +1309,7 @@ a, img { ul { margin: 0; - padding: 10px 0px 10px 5px; + padding: 10px 0 10px 5px; list-style: none; } @@ -1313,7 +1317,7 @@ a, img { 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 index b33aab2f701..3a72e20a3ac 100644 --- 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; diff --git a/src/styles/brackets_mixins.less b/src/styles/brackets_mixins.less index 84fb13b7e99..0b2d4bcec4f 100644 --- a/src/styles/brackets_mixins.less +++ b/src/styles/brackets_mixins.less @@ -1,22 +1,22 @@ // 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 mixins */ @@ -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; } @@ -115,7 +112,7 @@ background-position: -@x-offset -@y-offset; } - + /* Scale x-axis using top-left as the origin */ .scale-x (@value: 1.0, @horizontal: 50%, @vertical: 50%) { -ms-transform: scaleX(@value); diff --git a/src/styles/brackets_patterns_override.less b/src/styles/brackets_patterns_override.less index d709802028f..816f2e76fe8 100644 --- 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; } } @@ -179,7 +179,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 +199,7 @@ a:focus { background-repeat: no-repeat; display: block; height: 24px; - margin: 7px 0px 0px 3px; + margin: 7px 0 0 3px; width: 24px; } @@ -284,6 +284,7 @@ a:focus { .dropdown-menu { .animation(dropdown, 90ms, cubic-bezier(0, .97, .2, .99), 0, 1); -webkit-transform-origin: 0 0; + transform-origin: 0 0; border: none; border-radius: @bc-border-radius; @@ -293,8 +294,8 @@ a:focus { } @-webkit-keyframes dropdown { - 0% { opacity: 0.5; -webkit-transform: translate3d(0, 0, 0) scale(0.5); } - 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1); } + 0% { opacity: 0.5; -webkit-transform: translate3d(0, 0, 0) scale(0.5); transform: translate3d(0, 0, 0) scale(0.5); } + 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } } @keyframes dropdown { 0% { opacity: 0.5; transform: translate3d(0, 0, 0) scale(0.5); } @@ -392,7 +393,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 +503,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 +572,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 +679,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%; @@ -866,8 +868,8 @@ a:focus { } @-webkit-keyframes backdrop { - 0% { opacity: 0; -webkit-transform: translate3d(0, 0, 0); } - 100% { opacity: 0.4; -webkit-transform: translate3d(0, 0, 0); } + 0% { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } + 100% { opacity: 0.4; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes backdrop { 0% { opacity: 0; transform: translate3d(0, 0, 0); } @@ -875,8 +877,8 @@ a:focus { } @-webkit-keyframes modal { - 0% { opacity: 0; -webkit-transform: translate3d(0, 0, 0) scale(0); } - 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1); } + 0% { opacity: 0; -webkit-transform: translate3d(0, 0, 0) scale(0); transform: translate3d(0, 0, 0) scale(0); } + 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } } @keyframes modal { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0); } @@ -1525,7 +1527,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;