chore: 右键菜单支持多主题配置 (#3880)

* docs: 剔除多余注释

* fix: 右键菜单支持多主题配置
This commit is contained in:
刘丹 2022-03-29 11:36:33 +08:00 committed by GitHub
parent 3966403cd7
commit 0c382bac23
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 61 additions and 33 deletions

View File

@ -1,15 +1,3 @@
$menu-background: #fff;
$menu-box-shadow: 0 2px 8px 0 rgba(7, 12, 20, 0.12);
$menu-border-radius: 4px;
$menu-font-color: #151b26;
$menu-font-family: PingFangSC-Regular;
$menu-border-color: #e8e9eb; // 默认的边框色
$menu-active-color: #2468f2;
$menu-hover-bg-color: #e6f0ff;
$menu-disabled-color: #b8babf; // 禁用文字颜色
$default-icon-color: #84868c; // 默认的icon颜色
$default-padding: 4px 12px; // 6px 12px
// 为了提示用户这不是系统菜单
@keyframes contextMenuInSpecial {
from {
@ -71,11 +59,11 @@ $default-padding: 4px 12px; // 6px 12px
margin: 0;
padding: 0;
background: $menu-background;
box-shadow: $menu-box-shadow;
background: var(--menu-background);
box-shadow: var(--menu-box-shadow);
color: $menu-font-color;
font-family: $menu-font-family;
color: var(--menu-font-color);
font-family: var(--menu-font-family);
font-size: 12px;
line-height: 20px;
@ -89,8 +77,8 @@ $default-padding: 4px 12px; // 6px 12px
bottom: -1px;
right: -1px;
border-radius: $menu-border-radius;
border: 1px solid $menu-border-color;
border-radius: var(--menu-border-radius);
border: 1px solid var(--menu-border-color);
z-index: -1;
}
}
@ -98,7 +86,7 @@ $default-padding: 4px 12px; // 6px 12px
&-divider {
border: none;
height: 1px;
background: $menu-border-color;
background: var(--menu-border-color);
margin: 4px 1px;
padding: 0;
}
@ -116,7 +104,7 @@ $default-padding: 4px 12px; // 6px 12px
> a {
white-space: nowrap;
display: block;
padding: $default-padding;
padding: var(--default-padding);
color: inherit;
border-top: none;
border-bottom: none;
@ -124,15 +112,15 @@ $default-padding: 4px 12px; // 6px 12px
&:not(.is-disabled):hover > a {
text-decoration: none;
color: $menu-active-color;
background: $menu-hover-bg-color;
color: var(--menu-active-color);
background: var(--menu-hover-bg-color);
cursor: pointer;
border-top: none;
border-bottom: none;
}
&.is-disabled > a {
color: $menu-disabled-color;
color: var(--menu-disabled-color);
pointer-events: none;
}
@ -142,8 +130,9 @@ $default-padding: 4px 12px; // 6px 12px
height: 0;
border-width: 4px 7px;
border-style: solid;
border-color: transparent transparent transparent $default-icon-color;
text-shadow: $menu-box-shadow;
border-color: transparent transparent transparent
var(--default-icon-color);
text-shadow: var(--menu-box-shadow);
position: absolute;
top: 50%;
right: 0;
@ -151,7 +140,7 @@ $default-padding: 4px 12px; // 6px 12px
}
&.has-child:hover > a::after {
border-color: transparent transparent transparent $menu-active-color;
border-color: transparent transparent transparent var(--menu-active-color);
}
}
@ -178,12 +167,12 @@ $default-padding: 4px 12px; // 6px 12px
margin: 0;
padding: 0;
background: $menu-background;
box-shadow: $menu-box-shadow;
border-radius: $menu-border-radius;
background: var(--menu-background);
box-shadow: var(--menu-box-shadow);
border-radius: var(--menu-border-radius);
color: $menu-font-color;
font-family: $menu-font-family;
color: var(--menu-font-color);
font-family: var(--menu-font-family);
font-size: 12px;
line-height: 20px;
@ -201,8 +190,8 @@ $default-padding: 4px 12px; // 6px 12px
bottom: -1px;
right: -1px;
border-radius: $menu-border-radius;
border: 1px solid $menu-border-color;
border-radius: var(--menu-border-radius);
border: 1px solid var(--menu-border-color);
z-index: -1;
}
}

View File

@ -168,4 +168,17 @@ $link-color: $info;
--Table-onChecked-borderColor: var(--Table-borderColor);
--Switch-bgColor: #bfbfbf;
// ContextMenu
--menu-background: #fff;
--menu-box-shadow: 0 2px 8px 0 rgba(7, 12, 20, 0.12);
--menu-border-radius: 4px;
--menu-font-color: #151b26;
--menu-font-family: PingFangSC-Regular;
--menu-border-color: #e8e9eb; // 默认的边框色
--menu-active-color: #2468f2;
--menu-hover-bg-color: #e6f0ff;
--menu-disabled-color: #b8babf; // 禁用文字颜色
--default-icon-color: #84868c; // 默认的icon颜色
--default-padding: 4px 12px; // 6px 12px
}

View File

@ -648,4 +648,17 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
--ResultBox-value-bg: #{$G10};
--ResultBox-value-clear-bg: #{$G8};
--ResultBox-value-clear-hover-bg: #{$G9};
// ContextMenu
--menu-background: #fff;
--menu-box-shadow: 0 2px 8px 0 rgba(7, 12, 20, 0.12);
--menu-border-radius: 4px;
--menu-font-color: #151b26;
--menu-font-family: PingFangSC-Regular;
--menu-border-color: #e8e9eb; // 默认的边框色
--menu-active-color: #2468f2;
--menu-hover-bg-color: #e6f0ff;
--menu-disabled-color: #b8babf; // 禁用文字颜色
--default-icon-color: #84868c; // 默认的icon颜色
--default-padding: 4px 12px; // 6px 12px
}

View File

@ -126,4 +126,17 @@ $link-color: $info;
// timeline
--TimelineItem--text-primary-color: #{$text-color};
// ContextMenu
--menu-background: #fff;
--menu-box-shadow: 0 2px 8px 0 rgba(7, 12, 20, 0.12);
--menu-border-radius: 4px;
--menu-font-color: #151b26;
--menu-font-family: PingFangSC-Regular;
--menu-border-color: #e8e9eb; // 默认的边框色
--menu-active-color: #2468f2;
--menu-hover-bg-color: #e6f0ff;
--menu-disabled-color: #b8babf; // 禁用文字颜色
--default-icon-color: #84868c; // 默认的icon颜色
--default-padding: 4px 12px; // 6px 12px
}