Update checkbox to use icon font check #86708

microsoft · Dec 11, 2019 · cc70266 · cc70266 · miguelsolorio · Dec 11, 2019
1 parent a4880b1
commit cc70266
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 13 deletions.
diff --git a/src/vs/base/browser/ui/checkbox/check-dark.svg b/src/vs/base/browser/ui/checkbox/check-dark.svg
diff --git a/src/vs/base/browser/ui/checkbox/check-light.svg b/src/vs/base/browser/ui/checkbox/check-light.svg
diff --git a/src/vs/base/browser/ui/checkbox/checkbox.css b/src/vs/base/browser/ui/checkbox/checkbox.css
@@ -44,10 +44,7 @@
 	background-size: 16px !important;
 }
 
-.monaco-custom-checkbox.monaco-simple-checkbox.checked {
-	background: url('check-light.svg') center center no-repeat;
-}
-
-.monaco-custom-checkbox.monaco-simple-checkbox.checked {
-	background: url('check-dark.svg') center center no-repeat;
+/* hide check when unchecked */
+.monaco-custom-checkbox.monaco-simple-checkbox.unchecked:not(.checked)::before {
+	visibility: hidden;;
 }
diff --git a/src/vs/base/browser/ui/checkbox/checkbox.ts b/src/vs/base/browser/ui/checkbox/checkbox.ts
@@ -192,7 +192,7 @@ export class SimpleCheckbox extends Widget {
 	constructor(private title: string, private isChecked: boolean) {
 		super();
 
-		this.checkbox = new Checkbox({ title: this.title, isChecked: this.isChecked, actionClassName: 'monaco-simple-checkbox' });
+		this.checkbox = new Checkbox({ title: this.title, isChecked: this.isChecked, actionClassName: 'monaco-simple-checkbox codicon-check' });
 
 		this.domNode = this.checkbox.domNode;