hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Menu styles fine-tuning

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-11-08 11:25:51 +03:00
parent 2e54587086
commit adf5e66a8a
4 changed files with 27 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/renderer/components/item-object-list/item-list-layout.scss
View File

@ -58,13 +58,8 @@
} }
.ItemListLayoutVisibilityMenu { .ItemListLayoutVisibilityMenu {
.MenuItem {
padding: 0;
}
.Checkbox { .Checkbox {
width: 100%; --checkbox-color: inherit;
padding: var(--spacing); color: var(--checkbox-color);
cursor: pointer;
} }
} }

36
src/renderer/components/menu/menu.scss
View File

@ -27,10 +27,11 @@
flex-direction: column; flex-direction: column;
background: var(--bgc); background: var(--bgc);
list-style: none; list-style: none;
border: 1px solid $borderColor; border: 1px solid var(--colorVague);
z-index: 101; z-index: 101;
box-shadow: rgba(0,0,0,0.24) 0px 8px 16px 0px; box-shadow: rgb(0 0 0 / 17%) 0px 6px 9px 0px;
border-radius: 4px; border-radius: 4px;
padding: 4px;
&.portal { &.portal {
left: -1000px; left: -1000px;
@ -64,19 +65,27 @@
.MenuItem { .MenuItem {
--color: #{$textColorPrimary}; --color: #{$textColorPrimary};
--color-active: #{$textColorAccent}; --color-active: white;
--bgc-active: #{$menuActiveBackground}; --bgc-active: var(--menuActiveBackground);
--spacing: #{$padding};
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--color); color: var(--color);
padding: var(--spacing); padding: 6px var(--padding);
margin-bottom: 2px;
white-space: nowrap; white-space: nowrap;
transition: 250ms background;
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
border-radius: 3px;
&:last-of-type {
margin-bottom: 0;
}
&:not(.disabled) {
cursor: pointer;
}
&:hover:not(.disabled) { &:hover:not(.disabled) {
color: var(--color-active); color: var(--color-active);
@ -84,14 +93,9 @@
cursor: pointer; cursor: pointer;
} }
&:focus { &.active, &:focus {
outline: 2px solid $colorInfo;
}
&.active {
color: var(--color-active); color: var(--color-active);
background-color: var(--bgc-active); background-color: var(--bgc-active);
cursor: default;
} }
&.disabled { &.disabled {
@ -114,3 +118,9 @@
} }
} }
} }
.theme-light {
.Menu {
border: 1px solid var(--borderColor);
}
}

2
src/renderer/themes/lens-dark.json
View File

@ -124,7 +124,7 @@
"inputControlHoverBorder": "#474a4f", "inputControlHoverBorder": "#474a4f",
"lineProgressBackground": "#414448", "lineProgressBackground": "#414448",
"radioActiveBackground": "#36393e", "radioActiveBackground": "#36393e",
"menuActiveBackground": "#36393e", "menuActiveBackground": "#3d90ce",
"menuSelectedOptionBgc": "#36393e", "menuSelectedOptionBgc": "#36393e",
"scrollBarColor": "#5f6064", "scrollBarColor": "#5f6064",
"settingsBackground": "#262b2e", "settingsBackground": "#262b2e",

2
src/renderer/themes/lens-light.json
View File

@ -125,7 +125,7 @@
"inputControlHoverBorder": "#b9bbbe", "inputControlHoverBorder": "#b9bbbe",
"lineProgressBackground": "#e8e8e8", "lineProgressBackground": "#e8e8e8",
"radioActiveBackground": "#f1f1f1", "radioActiveBackground": "#f1f1f1",
"menuActiveBackground": "#e8e8e8", "menuActiveBackground": "#3d90ce",
"menuSelectedOptionBgc": "#e8e8e8", "menuSelectedOptionBgc": "#e8e8e8",
"scrollBarColor": "#bbbbbb", "scrollBarColor": "#bbbbbb",
"canvasBackground": "#24292e", "canvasBackground": "#24292e",