修复选择输入框的样式和拥有者按钮高度

This commit is contained in:
lutinglt
2025-07-07 20:28:27 +08:00
parent 6def81fe26
commit 7248f617c4
5 changed files with 30 additions and 5 deletions

4
.github/release.md vendored
View File

@@ -6,4 +6,6 @@
## 🐞 Fix
- 修复顶部导航栏的菜单按钮悬浮颜色
- 修复顶部导航栏的菜单按钮悬浮颜色
- 修复选择输入框的样式和选中时的背景色
- 修复创建仓库时拥有者按钮的高度

View File

@@ -58,6 +58,7 @@ export const github = {
* @clone `clone` 克隆地址框被选中时的边框颜色
* @issue `comment` 评论框被选中时的边框颜色
* @menu `verticalMenu` 垂直菜单项激活时左侧的伪元素颜色
* @dropdown `selectionDropdown` 选择输入框的内部边框颜色
*/
emphasis: null,
},

View File

@@ -83,8 +83,9 @@ export const dropdown = css`
// 选择框的下拉菜单看起来像普通按钮
export const selectionDropdown = css`
.ui.selection.dropdown,
.ui.selection.dropdown.active {
// 排除可以选择的输入搜索框和创建仓库的拥有者
.ui.selection.dropdown:not(.search):not(.ellipsis-text-items),
.ui.selection.dropdown.active:not(.search):not(.ellipsis-text-items) {
background-color: ${themeVars.color.button};
border-color: ${themeVars.color.light.border};
border-radius: ${otherThemeVars.border.radius};
@@ -104,6 +105,25 @@ export const selectionDropdown = css`
${activeItemAfterStyle};
}
}
// 这个按钮项目前只在创建仓库的拥有者
// 不实现伪元素, 因为 .item 设置溢出的元素会被截断
.ui.selection.dropdown.ellipsis-text-items,
.ui.selection.dropdown.activeellipsis-text-items {
&:focus {
background: ${themeVars.color.button};
border-color: ${themeVars.color.light.border};
}
&:hover {
background: ${themeVars.color.hover.self};
border-color: ${themeVars.color.light.border};
}
}
// 选择输入框效果和输入框效果一样, 但不修改背景色
.ui.selection.dropdown.active.search {
// 向内部添加一个 1px 的边框
box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis};
outline: none;
}
// 排除一些小按钮, 例如软件包类型, 通常相邻有元素
.ui.selection.dropdown.active:not(.small) {
border-bottom-left-radius: ${otherThemeVars.border.radius} !important;

View File

@@ -4,7 +4,8 @@ export const input = css`
input,
textarea,
.ui.input input,
.ui.form input:not([type]),
// 排除可以选择的输入搜索框
.ui.form input:not([type]):not(.search),
.ui.form select,
.ui.form textarea,
.ui.form input[type="date"],

View File

@@ -38,7 +38,8 @@ export const radius = css`
&.table,
&.segment,
&.segments,
&.grid.segment &.selection.dropdown,
&.grid.segment,
&.selection.dropdown,
&.horizontal.segments,
&.active.empty.selection.dropdown {
border-radius: ${otherThemeVars.border.radius};