diff --git a/src/vs/base/browser/ui/checkbox/checkbox.ts b/src/vs/base/browser/ui/checkbox/checkbox.ts
index f5fe47cdd855a..6bc9a8e3d4ced 100644
--- a/src/vs/base/browser/ui/checkbox/checkbox.ts
+++ b/src/vs/base/browser/ui/checkbox/checkbox.ts
@@ -99,7 +99,7 @@ export class Checkbox extends Widget {
this.domNode = document.createElement('div');
this.domNode.title = this._opts.title;
- this.domNode.className = 'monaco-custom-checkbox ' + (this._opts.actionClassName || '') + ' ' + (this._checked ? 'checked' : 'unchecked');
+ this.domNode.className = 'monaco-custom-checkbox codicon ' + (this._opts.actionClassName || '') + ' ' + (this._checked ? 'checked' : 'unchecked');
this.domNode.tabIndex = 0;
this.domNode.setAttribute('role', 'checkbox');
this.domNode.setAttribute('aria-checked', String(this._checked));
diff --git a/src/vs/base/browser/ui/findinput/case-sensitive-dark.svg b/src/vs/base/browser/ui/findinput/case-sensitive-dark.svg
deleted file mode 100644
index 40c9ed3262c44..0000000000000
--- a/src/vs/base/browser/ui/findinput/case-sensitive-dark.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/vs/base/browser/ui/findinput/case-sensitive-hc.svg b/src/vs/base/browser/ui/findinput/case-sensitive-hc.svg
deleted file mode 100644
index 82501418dae80..0000000000000
--- a/src/vs/base/browser/ui/findinput/case-sensitive-hc.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/vs/base/browser/ui/findinput/case-sensitive-light.svg b/src/vs/base/browser/ui/findinput/case-sensitive-light.svg
deleted file mode 100644
index aa1dbd353e447..0000000000000
--- a/src/vs/base/browser/ui/findinput/case-sensitive-light.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/vs/base/browser/ui/findinput/findInputCheckboxes.css b/src/vs/base/browser/ui/findinput/findInputCheckboxes.css
deleted file mode 100644
index c72a7350f6394..0000000000000
--- a/src/vs/base/browser/ui/findinput/findInputCheckboxes.css
+++ /dev/null
@@ -1,56 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-.vs .monaco-custom-checkbox.monaco-case-sensitive {
- background: url('case-sensitive-light.svg') center center no-repeat;
-}
-
-.vs-dark .monaco-custom-checkbox.monaco-case-sensitive {
- background: url('case-sensitive-dark.svg') center center no-repeat;
-}
-
-.hc-black .monaco-custom-checkbox.monaco-case-sensitive,
-.hc-black .monaco-custom-checkbox.monaco-case-sensitive:hover {
- background: url('case-sensitive-hc.svg') center center no-repeat;
-}
-
-.vs .monaco-custom-checkbox.monaco-preserve-case {
- background: url('preserve-case-light.svg') center center no-repeat;
-}
-
-.vs-dark .monaco-custom-checkbox.monaco-preserve-case {
- background: url('preserve-case-dark.svg') center center no-repeat;
-}
-
-.hc-black .monaco-custom-checkbox.monaco-preserve-case,
-.hc-black .monaco-custom-checkbox.monaco-preserve-case:hover {
- background: url('preserve-case-hc.svg') center center no-repeat;
-}
-
-.vs .monaco-custom-checkbox.monaco-whole-word {
- background: url('whole-word-light.svg') center center no-repeat;
-}
-
-.vs-dark .monaco-custom-checkbox.monaco-whole-word {
- background: url('whole-word-dark.svg') center center no-repeat;
-}
-
-.hc-black .monaco-custom-checkbox.monaco-whole-word,
-.hc-black .monaco-custom-checkbox.monaco-whole-word:hover {
- background: url('whole-word-hc.svg') center center no-repeat;
-}
-
-.vs .monaco-custom-checkbox.monaco-regex {
- background: url('regex-light.svg') center center no-repeat;
-}
-
-.vs-dark .monaco-custom-checkbox.monaco-regex {
- background: url('regex-dark.svg') center center no-repeat;
-}
-
-.hc-black .monaco-custom-checkbox.monaco-regex,
-.hc-black .monaco-custom-checkbox.monaco-regex:hover {
- background: url('regex-hc.svg') center center no-repeat;
-}
diff --git a/src/vs/base/browser/ui/findinput/findInputCheckboxes.ts b/src/vs/base/browser/ui/findinput/findInputCheckboxes.ts
index effef734a8c18..b7ca14b0d7af9 100644
--- a/src/vs/base/browser/ui/findinput/findInputCheckboxes.ts
+++ b/src/vs/base/browser/ui/findinput/findInputCheckboxes.ts
@@ -5,7 +5,6 @@
import { Checkbox } from 'vs/base/browser/ui/checkbox/checkbox';
import { Color } from 'vs/base/common/color';
-import 'vs/css!./findInputCheckboxes';
import * as nls from 'vs/nls';
export interface IFindInputCheckboxOpts {
@@ -22,7 +21,7 @@ const NLS_REGEX_CHECKBOX_LABEL = nls.localize('regexDescription', "Use Regular E
export class CaseSensitiveCheckbox extends Checkbox {
constructor(opts: IFindInputCheckboxOpts) {
super({
- actionClassName: 'monaco-case-sensitive',
+ actionClassName: 'codicon-case-sensitive',
title: NLS_CASE_SENSITIVE_CHECKBOX_LABEL + opts.appendTitle,
isChecked: opts.isChecked,
inputActiveOptionBorder: opts.inputActiveOptionBorder,
@@ -34,7 +33,7 @@ export class CaseSensitiveCheckbox extends Checkbox {
export class WholeWordsCheckbox extends Checkbox {
constructor(opts: IFindInputCheckboxOpts) {
super({
- actionClassName: 'monaco-whole-word',
+ actionClassName: 'codicon-whole-word',
title: NLS_WHOLE_WORD_CHECKBOX_LABEL + opts.appendTitle,
isChecked: opts.isChecked,
inputActiveOptionBorder: opts.inputActiveOptionBorder,
@@ -46,7 +45,7 @@ export class WholeWordsCheckbox extends Checkbox {
export class RegexCheckbox extends Checkbox {
constructor(opts: IFindInputCheckboxOpts) {
super({
- actionClassName: 'monaco-regex',
+ actionClassName: 'codicon-regex',
title: NLS_REGEX_CHECKBOX_LABEL + opts.appendTitle,
isChecked: opts.isChecked,
inputActiveOptionBorder: opts.inputActiveOptionBorder,
diff --git a/src/vs/base/browser/ui/findinput/preserve-case-dark.svg b/src/vs/base/browser/ui/findinput/preserve-case-dark.svg
deleted file mode 100644
index 1c87e34716eca..0000000000000
--- a/src/vs/base/browser/ui/findinput/preserve-case-dark.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/src/vs/base/browser/ui/findinput/preserve-case-hc.svg b/src/vs/base/browser/ui/findinput/preserve-case-hc.svg
deleted file mode 100644
index f316948bb9cb9..0000000000000
--- a/src/vs/base/browser/ui/findinput/preserve-case-hc.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/src/vs/base/browser/ui/findinput/preserve-case-light.svg b/src/vs/base/browser/ui/findinput/preserve-case-light.svg
deleted file mode 100644
index 83954b66520b0..0000000000000
--- a/src/vs/base/browser/ui/findinput/preserve-case-light.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/src/vs/base/browser/ui/findinput/regex-dark.svg b/src/vs/base/browser/ui/findinput/regex-dark.svg
deleted file mode 100644
index cf43e9d952e90..0000000000000
--- a/src/vs/base/browser/ui/findinput/regex-dark.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/vs/base/browser/ui/findinput/regex-hc.svg b/src/vs/base/browser/ui/findinput/regex-hc.svg
deleted file mode 100644
index 116c547d15ffa..0000000000000
--- a/src/vs/base/browser/ui/findinput/regex-hc.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/vs/base/browser/ui/findinput/regex-light.svg b/src/vs/base/browser/ui/findinput/regex-light.svg
deleted file mode 100644
index b329c104fa294..0000000000000
--- a/src/vs/base/browser/ui/findinput/regex-light.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/vs/base/browser/ui/findinput/replaceInput.ts b/src/vs/base/browser/ui/findinput/replaceInput.ts
index d597fb8bd49c7..79c3925c930d5 100644
--- a/src/vs/base/browser/ui/findinput/replaceInput.ts
+++ b/src/vs/base/browser/ui/findinput/replaceInput.ts
@@ -41,7 +41,7 @@ export class PreserveCaseCheckbox extends Checkbox {
constructor(opts: IFindInputCheckboxOpts) {
super({
// TODO: does this need its own icon?
- actionClassName: 'monaco-case-sensitive',
+ actionClassName: 'codicon-preserve-case',
title: NLS_PRESERVE_CASE_LABEL + opts.appendTitle,
isChecked: opts.isChecked,
inputActiveOptionBorder: opts.inputActiveOptionBorder
diff --git a/src/vs/base/browser/ui/findinput/whole-word-dark.svg b/src/vs/base/browser/ui/findinput/whole-word-dark.svg
deleted file mode 100644
index 6c38eb215d384..0000000000000
--- a/src/vs/base/browser/ui/findinput/whole-word-dark.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/vs/base/browser/ui/findinput/whole-word-hc.svg b/src/vs/base/browser/ui/findinput/whole-word-hc.svg
deleted file mode 100644
index fc1ff43268b49..0000000000000
--- a/src/vs/base/browser/ui/findinput/whole-word-hc.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/vs/base/browser/ui/findinput/whole-word-light.svg b/src/vs/base/browser/ui/findinput/whole-word-light.svg
deleted file mode 100644
index 345e65b2a5c83..0000000000000
--- a/src/vs/base/browser/ui/findinput/whole-word-light.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/vs/editor/contrib/find/findWidget.css b/src/vs/editor/contrib/find/findWidget.css
index 20d486d1000b3..23cf08a1ca248 100644
--- a/src/vs/editor/contrib/find/findWidget.css
+++ b/src/vs/editor/contrib/find/findWidget.css
@@ -5,7 +5,7 @@
/* Checkbox */
-.monaco-checkbox .label {
+.monaco-checkbox .codicon-selection {
width: 12px;
height: 12px;
border: 1px solid black;
@@ -24,7 +24,7 @@
border: 0;
}
-.monaco-checkbox .checkbox:checked + .label {
+.monaco-checkbox .checkbox:checked + .codicon-selection {
background-color: black;
}
@@ -166,6 +166,9 @@
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.monaco-editor .find-widget .button:not(.disabled):hover {
@@ -200,14 +203,6 @@
display: none;
}
-.monaco-editor .find-widget .previous {
- background-image: url('images/chevron-previous-light.svg');
-}
-
-.monaco-editor .find-widget .next {
- background-image: url('images/chevron-next-light.svg');
-}
-
.monaco-editor .find-widget .disabled {
opacity: 0.3;
cursor: default;
@@ -221,54 +216,32 @@
margin-left: 3px;
}
-.monaco-editor .find-widget .monaco-checkbox .label {
- content: '';
- display: inline-block;
- background-repeat: no-repeat;
- background-position: center;
- background-image: url('images/find-selection-light.svg');
+.monaco-editor .find-widget .monaco-checkbox .codicon-selection {
+ display: flex;
+ align-items: center;
+ justify-content: center;
width: 20px;
height: 20px;
border: none;
}
-.monaco-editor .find-widget .monaco-checkbox .checkbox:disabled + .label {
+.monaco-editor .find-widget .monaco-checkbox .checkbox:disabled + .codicon-selection {
opacity: 0.3;
cursor: default;
}
-.monaco-editor .find-widget .monaco-checkbox .checkbox:not(:disabled) + .label {
+.monaco-editor .find-widget .monaco-checkbox .checkbox:not(:disabled) + .codicon-selection {
cursor: pointer;
}
-.monaco-editor .find-widget .monaco-checkbox .checkbox:not(:disabled):hover:before + .label {
+.monaco-editor .find-widget .monaco-checkbox .checkbox:not(:disabled):hover:before + .codicon-selection {
background-color: #DDD;
}
-.monaco-editor .find-widget .monaco-checkbox .checkbox:checked + .label {
+.monaco-editor .find-widget .monaco-checkbox .checkbox:checked + .codicon-selection {
background-color: rgba(100, 100, 100, 0.2);
}
-.monaco-editor .find-widget .close-fw {
- background-image: url('images/close-light.svg');
-}
-
-.monaco-editor .find-widget .expand {
- background-image: url('images/tree-expanded-light.svg');
-}
-
-.monaco-editor .find-widget .collapse {
- background-image: url('images/tree-collapsed-light.svg');
-}
-
-.monaco-editor .find-widget .replace {
- background-image: url('images/replace-light.svg');
-}
-
-.monaco-editor .find-widget .replace-all {
- background-image: url('images/replace-all-light.svg');
-}
-
.monaco-editor .find-widget > .replace-part {
display: none;
}
@@ -329,52 +302,13 @@
margin-left: -4px;
}
-.monaco-editor.hc-black .find-widget .previous,
-.monaco-editor.vs-dark .find-widget .previous {
- background-image: url('images/chevron-previous-dark.svg');
-}
-
-.monaco-editor.hc-black .find-widget .next,
-.monaco-editor.vs-dark .find-widget .next {
- background-image: url('images/chevron-next-dark.svg');
-}
-
-.monaco-editor.hc-black .find-widget .monaco-checkbox .label,
-.monaco-editor.vs-dark .find-widget .monaco-checkbox .label {
- background-image: url('images/find-selection-dark.svg');
-}
-
-.monaco-editor.vs-dark .find-widget .monaco-checkbox .checkbox:not(:disabled):hover:before + .label {
+.monaco-editor.vs-dark .find-widget .monaco-checkbox .checkbox:not(:disabled):hover:before + .codicon-selection {
background-color: rgba(255, 255, 255, 0.1);
}
-.monaco-editor.hc-black .find-widget .close-fw,
-.monaco-editor.vs-dark .find-widget .close-fw {
- background-image: url('images/close-dark.svg');
-}
-
-.monaco-editor.hc-black .find-widget .replace,
-.monaco-editor.vs-dark .find-widget .replace {
- background-image: url('images/replace-dark.svg');
-}
-
-.monaco-editor.hc-black .find-widget .replace-all,
-.monaco-editor.vs-dark .find-widget .replace-all {
- background-image: url('images/replace-all-dark.svg');
-}
-
-.monaco-editor.hc-black .find-widget .expand,
-.monaco-editor.vs-dark .find-widget .expand {
- background-image: url('images/tree-expanded-dark.svg');
-}
-
-.monaco-editor.hc-black .find-widget .collapse,
-.monaco-editor.vs-dark .find-widget .collapse {
- background-image: url('images/tree-collapsed-dark.svg');
-}
-
.monaco-editor.hc-black .find-widget .button:not(.disabled):hover,
-.monaco-editor.vs-dark .find-widget .button:not(.disabled):hover {
+.monaco-editor.vs-dark .find-widget .button:not(.disabled):hover,
+.monaco-editor.vs-dark .find-widget .monaco-checkbox:not(.disabled):hover {
background-color: rgba(255, 255, 255, 0.1);
}
@@ -384,6 +318,6 @@
left: 2px;
}
-.monaco-editor.hc-black .find-widget .monaco-checkbox .checkbox:checked + .label {
+.monaco-editor.hc-black .find-widget .monaco-checkbox .checkbox:checked + .codicon-selection {
background-color: rgba(255, 255, 255, 0.1);
}
diff --git a/src/vs/editor/contrib/find/findWidget.ts b/src/vs/editor/contrib/find/findWidget.ts
index dc08632b758ae..cb93002ad42f2 100644
--- a/src/vs/editor/contrib/find/findWidget.ts
+++ b/src/vs/editor/contrib/find/findWidget.ts
@@ -453,8 +453,8 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
this._replaceAllBtn.setEnabled(this._isVisible && this._isReplaceVisible && findInputIsNonEmpty);
dom.toggleClass(this._domNode, 'replaceToggled', this._isReplaceVisible);
- this._toggleReplaceBtn.toggleClass('collapse', !this._isReplaceVisible);
- this._toggleReplaceBtn.toggleClass('expand', this._isReplaceVisible);
+ this._toggleReplaceBtn.toggleClass('codicon-chevron-right', !this._isReplaceVisible);
+ this._toggleReplaceBtn.toggleClass('codicon-chevron-down', this._isReplaceVisible);
this._toggleReplaceBtn.setExpanded(this._isReplaceVisible);
let canReplace = !this._codeEditor.getOption(EditorOption.readOnly);
@@ -955,7 +955,7 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
// Previous button
this._prevBtn = this._register(new SimpleButton({
label: NLS_PREVIOUS_MATCH_BTN_LABEL + this._keybindingLabelFor(FIND_IDS.PreviousMatchFindAction),
- className: 'previous',
+ className: 'codicon codicon-arrow-up',
onTrigger: () => {
this._codeEditor.getAction(FIND_IDS.PreviousMatchFindAction).run().then(undefined, onUnexpectedError);
}
@@ -964,7 +964,7 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
// Next button
this._nextBtn = this._register(new SimpleButton({
label: NLS_NEXT_MATCH_BTN_LABEL + this._keybindingLabelFor(FIND_IDS.NextMatchFindAction),
- className: 'next',
+ className: 'codicon codicon-arrow-down',
onTrigger: () => {
this._codeEditor.getAction(FIND_IDS.NextMatchFindAction).run().then(undefined, onUnexpectedError);
}
@@ -1004,7 +1004,7 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
// Close button
this._closeBtn = this._register(new SimpleButton({
label: NLS_CLOSE_BTN_LABEL + this._keybindingLabelFor(FIND_IDS.CloseFindWidgetCommand),
- className: 'close-fw',
+ className: 'codicon codicon-close',
onTrigger: () => {
this._state.change({ isRevealed: false, searchScope: null }, false);
},
@@ -1067,7 +1067,7 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
// Replace one button
this._replaceBtn = this._register(new SimpleButton({
label: NLS_REPLACE_BTN_LABEL + this._keybindingLabelFor(FIND_IDS.ReplaceOneAction),
- className: 'replace',
+ className: 'codicon codicon-replace',
onTrigger: () => {
this._controller.replace();
},
@@ -1082,7 +1082,7 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
// Replace all button
this._replaceAllBtn = this._register(new SimpleButton({
label: NLS_REPLACE_ALL_BTN_LABEL + this._keybindingLabelFor(FIND_IDS.ReplaceAllAction),
- className: 'replace-all',
+ className: 'codicon codicon-replace-all',
onTrigger: () => {
this._controller.replaceAll();
}
@@ -1102,7 +1102,7 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
// Toggle replace button
this._toggleReplaceBtn = this._register(new SimpleButton({
label: NLS_TOGGLE_REPLACE_MODE_BTN_LABEL,
- className: 'toggle left',
+ className: 'codicon toggle left',
onTrigger: () => {
this._state.change({ isReplaceRevealed: !this._isReplaceVisible }, false);
if (this._isReplaceVisible) {
@@ -1112,8 +1112,8 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
this._showViewZone();
}
}));
- this._toggleReplaceBtn.toggleClass('expand', this._isReplaceVisible);
- this._toggleReplaceBtn.toggleClass('collapse', !this._isReplaceVisible);
+ this._toggleReplaceBtn.toggleClass('codicon-chevron-down', this._isReplaceVisible);
+ this._toggleReplaceBtn.toggleClass('codicon-chevron-right', !this._isReplaceVisible);
this._toggleReplaceBtn.setExpanded(this._isReplaceVisible);
// Widget
@@ -1231,7 +1231,7 @@ class SimpleCheckbox extends Widget {
this._checkbox.tabIndex = -1;
this._label = document.createElement('label');
- this._label.className = 'label';
+ this._label.className = 'codicon codicon-selection';
// Connect the label and the checkbox. Checkbox will get checked when the label receives a click.
this._label.htmlFor = this._checkbox.id;
this._label.tabIndex = -1;
diff --git a/src/vs/editor/contrib/find/images/tree-collapsed-dark.svg b/src/vs/editor/contrib/find/images/tree-collapsed-dark.svg
deleted file mode 100644
index 17de497f33659..0000000000000
--- a/src/vs/editor/contrib/find/images/tree-collapsed-dark.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/vs/editor/contrib/find/images/tree-collapsed-light.svg b/src/vs/editor/contrib/find/images/tree-collapsed-light.svg
deleted file mode 100644
index 296499b8e5c1b..0000000000000
--- a/src/vs/editor/contrib/find/images/tree-collapsed-light.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/vs/editor/contrib/find/images/tree-expanded-dark.svg b/src/vs/editor/contrib/find/images/tree-expanded-dark.svg
deleted file mode 100644
index a1df6a8d44ae5..0000000000000
--- a/src/vs/editor/contrib/find/images/tree-expanded-dark.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/vs/editor/contrib/find/images/tree-expanded-light.svg b/src/vs/editor/contrib/find/images/tree-expanded-light.svg
deleted file mode 100644
index e60e357f573d5..0000000000000
--- a/src/vs/editor/contrib/find/images/tree-expanded-light.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-