opensource/beekeeper-studio
1
0
Fork 0
mirror of https://github.com/beekeeper-studio/beekeeper-studio.git synced 2026-03-13 10:12:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2996 from beekeeper-studio/fix/sqltexteditor-contextmenu

Browse Source 
Fix query editor context menu theme
This commit is contained in:
Matthew Rathbone
2025-04-11 21:56:26 -05:00
committed by GitHub
parent 53130a8e96 967ed4baa0
commit 592cf2f49d
2 changed files with 93 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
apps/studio/src/assets/styles/components/context-menu.scss
View File

@@ -10,8 +10,6 @@
list-style: none;
position: absolute;
z-index: 1000000;
background: color.adjust($theme-bg, $lightness: 5%);
color: $text;
padding: ($gutter-h * 0.75) 0;
border-radius: 6px;
box-shadow: var(--elevation-5);
@@ -30,12 +28,8 @@
padding: 0 $gutter-w;
font-size: 0.9rem;
min-height: 28px;
color: $text-dark;
cursor: pointer;
align-items: center;
&:hover {
background: rgba($theme-base, 0.05);
}
&.disabled {
pointer-events: none;
color: color.adjust($text-dark, $lightness: -25%);
@@ -65,7 +59,6 @@
box-sizing: border-box;
background: transparent;
border: 0;
border-top: 1px solid $border-color;
pointer-events: none;
+ hr, &:last-child {
display: none;
@@ -77,3 +70,29 @@
.vue-simple-context-menu li:last-of-type {
margin-bottom: 0;
}
// ------ Theme Customization ------
.BksContextMenu-list, .vue-simple-context-menu {
background: color.adjust($theme-bg, $lightness: 5%);
color: $text;
}
.BksContextMenu-item, .vue-simple-context-menu__item {
color: $text-dark;
&.disabled {
opacity: 0.5;
}
&:hover {
background: rgba($theme-base, 0.05);
}
}
.BksContextMenu-item-shortcut {
color: $text-dark;
opacity: 0.5;
}
.BksContextMenu-item-divider, .vue-simple-context-menu__divider, hr {
border-top: 1px solid $border-color;
}

121
apps/ui-kit/lib/components/context-menu/context-menu.scss
View File

@@ -24,65 +24,78 @@
min-width: 150px;
border: 0;
@include card-shadow-hover;
&.BksContextMenu-active {
display: block;
}
.BksContextMenu-item {
display: flex;
padding: 0 $gutter-w;
font-size: 0.9rem;
min-height: 28px;
color: $text-dark;
cursor: pointer;
align-items: center;
&:hover {
background-color: rgba($theme-base, 0.05);
}
&.BksContextMenu-item-disabled {
pointer-events: none;
color: color.adjust($text-dark, $lightness: -25%);
background-color: color.adjust(rgba($theme-base, 0.05), $lightness: -25%);
}
.BksContextMenu-item-label {
width: 100%;
}
.BksContextMenu-item-shortcut {
font-size: 0.9rem;
line-height: 1;
color: rgba($text-dark, 0.5);
margin-left: 0.4rem;
}
.BksContextMenu-item-icon-container i {
height: 24px;
line-height: 24px;
width: 24px;
opacity: 0.6;
}
.BksContextMenu-item-submenu-icon i {
width: 14px;
}
.BksContextMenu-checkbox-icon {
margin-left: 0;
}
}
.BksContextMenu-item-divider {
min-height: 0;
width: 100%;
height: 1px;
margin: ($gutter-h * 0.75) 0;
box-sizing: border-box;
background-color: transparent;
border: 0;
border-top: 1px solid $border-color;
pointer-events: none;
&:last-child {
display: none;
}
}
& > li:first-of-type {
&>li:first-of-type {
margin-top: 0;
}
& > li:last-of-type {
&>li:last-of-type {
margin-bottom: 0;
}
}
.BksContextMenu-item {
display: flex;
padding: 0 $gutter-w;
font-size: 0.9rem;
min-height: 28px;
color: $text-dark;
cursor: pointer;
align-items: center;
&:hover {
background-color: rgba($theme-base, 0.05);
}
&.BksContextMenu-item-disabled {
pointer-events: none;
color: color.adjust($text-dark, $lightness: -25%);
background-color: color.adjust(rgba($theme-base, 0.05), $lightness: -25%);
}
}
.BksContextMenu-item-label {
width: 100%;
}
.BksContextMenu-item-shortcut {
font-size: 0.9rem;
line-height: 1;
color: rgba($text-dark, 0.5);
margin-left: 0.4rem;
}
.BksContextMenu-item-icon-container i {
height: 24px;
line-height: 24px;
width: 24px;
opacity: 0.6;
}
.BksContextMenu-item-submenu-icon i {
width: 14px;
}
.BksContextMenu-checkbox-icon {
margin-left: 0;
}
.BksContextMenu-item-divider {
min-height: 0;
width: 100%;
height: 1px;
margin: ($gutter-h * 0.75) 0;
box-sizing: border-box;
background-color: transparent;
border: 0;
border-top: 1px solid $border-color;
pointer-events: none;
&:last-child {
display: none;
}
}