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 @@ - - -