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

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

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;