prefix sash variables with --vscode (microsoft#166710)

microsoft#165536

Author: jrieken

src/vs/base/browser/ui/sash/sash.css

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 :root {
-	--sash-size: 4px;
+	--vscode-sash-size: 4px;
 }
 
 .monaco-sash {
@@ -49,21 +49,21 @@
 .monaco-sash.vertical {
 	cursor: ew-resize;
 	top: 0;
-	width: var(--sash-size);
+	width: var(--vscode-sash-size);
 	height: 100%;
 }
 
 .monaco-sash.horizontal {
 	cursor: ns-resize;
 	left: 0;
 	width: 100%;
-	height: var(--sash-size);
+	height: var(--vscode-sash-size);
 }
 
 .monaco-sash:not(.disabled) > .orthogonal-drag-handle {
 	content: " ";
-	height: calc(var(--sash-size) * 2);
-	width: calc(var(--sash-size) * 2);
+	height: calc(var(--vscode-sash-size) * 2);
+	width: calc(var(--vscode-sash-size) * 2);
 	z-index: 100;
 	display: block;
 	cursor: all-scroll;
@@ -85,20 +85,20 @@
 }
 
 .monaco-sash.vertical > .orthogonal-drag-handle.start {
-	left: calc(var(--sash-size) * -0.5);
-	top: calc(var(--sash-size) * -1);
+	left: calc(var(--vscode-sash-size) * -0.5);
+	top: calc(var(--vscode-sash-size) * -1);
 }
 .monaco-sash.vertical > .orthogonal-drag-handle.end {
-	left: calc(var(--sash-size) * -0.5);
-	bottom: calc(var(--sash-size) * -1);
+	left: calc(var(--vscode-sash-size) * -0.5);
+	bottom: calc(var(--vscode-sash-size) * -1);
 }
 .monaco-sash.horizontal > .orthogonal-drag-handle.start {
-	top: calc(var(--sash-size) * -0.5);
-	left: calc(var(--sash-size) * -1);
+	top: calc(var(--vscode-sash-size) * -0.5);
+	left: calc(var(--vscode-sash-size) * -1);
 }
 .monaco-sash.horizontal > .orthogonal-drag-handle.end {
-	top: calc(var(--sash-size) * -0.5);
-	right: calc(var(--sash-size) * -1);
+	top: calc(var(--vscode-sash-size) * -0.5);
+	right: calc(var(--vscode-sash-size) * -1);
 }
 
 .monaco-sash:before {
@@ -117,13 +117,13 @@
 }
 
 .monaco-sash.vertical:before {
-	width: var(--sash-hover-size);
-	left: calc(50% - (var(--sash-hover-size) / 2));
+	width: var(--vscode-sash-hover-size);
+	left: calc(50% - (var(--vscode-sash-hover-size) / 2));
 }
 
 .monaco-sash.horizontal:before {
-	height: var(--sash-hover-size);
-	top: calc(50% - (var(--sash-hover-size) / 2));
+	height: var(--vscode-sash-hover-size);
+	top: calc(50% - (var(--vscode-sash-hover-size) / 2));
 }
 
 .pointer-events-disabled {

src/vs/base/browser/ui/table/table.css

@@ -46,7 +46,7 @@
 .monaco-table > .monaco-split-view2 .monaco-sash.vertical::before {
 	content: "";
 	position: absolute;
-	left: calc(var(--sash-size) / 2);
+	left: calc(var(--vscode-sash-size) / 2);
 	width: 0;
 	border-left: 1px solid transparent;
 }

src/vs/workbench/contrib/sash/browser/sash.ts

@@ -34,8 +34,8 @@ export class SashSettingsController implements IWorkbenchContribution, IDisposab
 		const size = clamp(configuredSize, 4, 20);
 		const hoverSize = clamp(configuredSize, 1, 8);
 
-		document.documentElement.style.setProperty('--sash-size', size + 'px');
-		document.documentElement.style.setProperty('--sash-hover-size', hoverSize + 'px');
+		document.documentElement.style.setProperty('--vscode-sash-size', size + 'px');
+		document.documentElement.style.setProperty('--vscode-sash-hover-size', hoverSize + 'px');
 		setGlobalSashSize(size);
 	}