diff --git a/.github/release.md b/.github/release.md index a646ee7..c5f8838 100644 --- a/.github/release.md +++ b/.github/release.md @@ -28,9 +28,11 @@ - 下拉菜单样式同步 - 选择下拉菜单样式同步 - 热力图颜色和样式同步 +- Issue/PR 菜单选项样式同步 ## 🎈 Perf +- 为下拉菜单的激活选项和部分下拉菜单实现 Issue/PR 的菜单选项样式 - Actions 日志页面标题间隔优化 - 管理员后台按钮样式优化 - 信息提示颜色优化 diff --git a/styles/components/issue.tsx b/styles/components/issue.tsx index a694e5b..f3e87fd 100644 --- a/styles/components/issue.tsx +++ b/styles/components/issue.tsx @@ -1,4 +1,5 @@ import { css, themeVars } from "src/types/vars"; +import { activeItemAfterStyle } from "styles/public/menu"; export const button = css` .issue-content-left .field.footer { @@ -99,3 +100,23 @@ export const comment = css` } } `; + +export const dropdown = css` + .repository { + // Issue/PR 列表下的所有筛选菜单 + &.issue-list .ui.dropdown .menu, .ui.menu .ui.dropdown .menu, + // Issue/PR 详情下的右侧的上半部分选项菜单 + &.issue.view .issue-content-right .ui.dropdown .scrolling.menu { + .item { + &.active, + &.selected, + &:hover { + &:after { + content: ""; + ${activeItemAfterStyle} + } + } + } + } + } +`; diff --git a/styles/public/dropdown.tsx b/styles/public/dropdown.tsx index c140aec..33d20a6 100644 --- a/styles/public/dropdown.tsx +++ b/styles/public/dropdown.tsx @@ -1,5 +1,6 @@ import { animation } from "src/core/theme"; import { css, otherThemeVars, themeVars } from "src/types/vars"; +import { activeItemAfterStyle } from "styles/public/menu"; export const dropdown = css` .ui.dropdown, @@ -41,6 +42,13 @@ export const dropdown = css` color: ${themeVars.color.text.light.num1}; margin-right: 0.5rem; } + &.active, + &.selected { + &:after { + content: ""; + ${activeItemAfterStyle}; + } + } } > .divider { margin: 0.5rem 0; @@ -90,8 +98,14 @@ export const selectionDropdown = css` background: ${themeVars.color.hover.self}; border-color: ${themeVars.color.light.border}; } + // 悬停提供伪元素 + .item:hover:after { + content: ""; + ${activeItemAfterStyle}; + } } - .ui.selection.dropdown.active { + // 排除一些小按钮, 例如软件包类型, 通常相邻有元素 + .ui.selection.dropdown.active:not(.small) { border-bottom-left-radius: ${otherThemeVars.border.radius} !important; border-bottom-right-radius: ${otherThemeVars.border.radius} !important; }