consolidate stylings and fix color when item is active and focused

This commit is contained in:
SteVen Batten
2022-01-11 10:55:07 -08:00
parent fc4984b160
commit 48ba3cf869
2 changed files with 46 additions and 67 deletions
@@ -156,30 +156,6 @@ registerThemingParticipant((theme, collector) => {
`);
}
// Title focus
const focusBorderColor = theme.getColor(focusBorder);
if (focusBorderColor) {
collector.addRule(`
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .active-item-indicator:before {
border-top-color: ${focusBorderColor};
}
`);
collector.addRule(`
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus {
outline: none;
}
`);
}
const titleActiveBorder = theme.getColor(PANEL_ACTIVE_TITLE_BORDER);
if (titleActiveBorder) {
collector.addRule(`
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .active-item-indicator:before {
border-top-color: ${titleActiveBorder};
}
`);
}
// Styling with Outline color (e.g. high contrast theme)
const outline = theme.getColor(activeContrastBorder);
if (outline) {
@@ -1015,49 +1015,6 @@ registerThemingParticipant((theme, collector) => {
`);
}
// Title focus
const focusBorderColor = theme.getColor(focusBorder);
if (focusBorderColor) {
collector.addRule(`
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .active-item-indicator:before {
border-top-color: ${focusBorderColor};
}
`);
collector.addRule(`
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus {
outline: none;
}
`);
}
const titleActiveBorder = theme.getColor(PANEL_ACTIVE_TITLE_BORDER);
if (titleActiveBorder) {
collector.addRule(`
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .active-item-indicator:before {
border-top-color: ${titleActiveBorder};
}
`);
}
// Styling with Outline color (e.g. high contrast theme)
const outline = theme.getColor(activeContrastBorder);
if (outline) {
collector.addRule(`
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label,
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label {
outline-color: ${outline};
outline-width: 1px;
outline-style: solid;
border-bottom: none;
outline-offset: -2px;
}
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:not(.checked):hover .action-label {
outline-style: dashed;
}
`);
}
const inputBorder = theme.getColor(PANEL_INPUT_BORDER);
if (inputBorder) {
collector.addRule(`
@@ -1066,4 +1023,50 @@ registerThemingParticipant((theme, collector) => {
}
`);
}
// Base Panel Styles
// Title focus
const focusBorderColor = theme.getColor(focusBorder);
if (focusBorderColor) {
collector.addRule(`
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .active-item-indicator:before {
border-top-color: ${focusBorderColor};
}
`);
collector.addRule(`
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus {
outline: none;
}
`);
}
const titleActiveBorder = theme.getColor(PANEL_ACTIVE_TITLE_BORDER);
if (titleActiveBorder) {
collector.addRule(`
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked:not(:focus) .active-item-indicator:before,
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked.clicked:focus .active-item-indicator:before {
border-top-color: ${titleActiveBorder};
}
`);
}
// Styling with Outline color (e.g. high contrast theme)
const outline = theme.getColor(activeContrastBorder);
if (outline) {
collector.addRule(`
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label,
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label {
outline-color: ${outline};
outline-width: 1px;
outline-style: solid;
border-bottom: none;
outline-offset: -2px;
}
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:not(.checked):hover .action-label {
outline-style: dashed;
}
`);
}
});