diff --git a/.github/release.md b/.github/release.md index 17e8d09..539c7ed 100644 --- a/.github/release.md +++ b/.github/release.md @@ -14,3 +14,4 @@ - 修复选择输入框的样式 - 修复创建仓库时拥有者按钮的高度 - 修复一些输入框在整体元素中不居中 +- 修复一些下拉菜单在向上弹出时与向下弹出不一致的问题 diff --git a/TODO.md b/TODO.md index 6e81d94..73a9387 100644 --- a/TODO.md +++ b/TODO.md @@ -3,7 +3,6 @@ - hover 动画迁移 - 列表部分 item 展开动画迁移 - ### 重大 - gitea issue 默认标签颜色匹配使用 github 样式 diff --git a/styles/public/dropdown.tsx b/styles/public/dropdown.tsx index 9f90615..fc3fbfd 100644 --- a/styles/public/dropdown.tsx +++ b/styles/public/dropdown.tsx @@ -8,7 +8,6 @@ export const dropdown = css` .menu { animation: ${animation}; // 统一所有下拉菜单的样式 - margin-top: 0.35em !important; background-color: ${themeVars.color.menu} !important; border: unset !important; border-radius: 12px !important; @@ -58,6 +57,20 @@ export const dropdown = css` } } } + // 向下弹出的下拉菜单向下偏移 + .ui.dropdown:not(.upward), + .ui.menu .ui.dropdown:not(.upward) { + .menu { + margin-top: 0.35em !important; + } + } + // 向上弹出的下拉菜单向上偏移 + .ui.dropdown.upward, + .ui.menu .ui.dropdown.upward { + .menu { + margin-bottom: 0.35em !important; + } + } // 修复下拉菜单元素溢出问题 // 用户菜单 .user-menu>.item, @@ -125,8 +138,12 @@ export const selectionDropdown = css` box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis}; outline: none; } + // 覆盖选择输入框向上弹出时的 hover 效果, 原阴影会覆盖加厚的边框线 + .ui.upward.active.selection.dropdown:hover { + box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis}; + } // 由于之前的排除导致样式优先级变高, 小按钮去除圆角 - .ui.action.input>.dropdown.small:not(:first-child) { + .ui.action.input > .dropdown.small:not(:first-child) { border-radius: 0; } // 排除一些小按钮, 例如软件包类型, 通常相邻有元素 @@ -134,4 +151,10 @@ export const selectionDropdown = css` border-bottom-left-radius: ${otherThemeVars.border.radius} !important; border-bottom-right-radius: ${otherThemeVars.border.radius} !important; } + // 修复选择框的下拉菜单向上显示时的样式问题 + .ui.upward.selection.dropdown.visible:not(.small), + .ui.active.upward.selection.dropdown:not(.small) { + border-top-left-radius: ${otherThemeVars.border.radius}!important; + border-top-right-radius: ${otherThemeVars.border.radius}!important; + } `;