fix: 修复弹窗关闭按钮hover背景色与图标对齐问题
- 使用flex布局确保叉号图标在按钮中心居中对齐 - 调整按钮尺寸为24x24px,移除padding避免对齐偏差 - 优化字体大小为14px,更合适的图标尺寸 - 添加line-height: 1确保垂直居中 - 添加active状态反馈,提升交互体验 - 添加focus状态视觉反馈,提升可访问性 修复效果: - hover背景色与叉号图标完美对齐 - 更好的视觉反馈和交互体验 - 符合现代UI设计规范
This commit is contained in:
1 parent
f1819d3772
commit
09b3bd5061
1 file changed
+28
-6
@@ -829,16 +829,19 @@
|
||||
.el-message-box .el-message-box__headerbtn .el-message-box__close,
|
||||
.el-message-box__headerbtn .el-message-box__close,
|
||||
.el-dialog__headerbtn .el-dialog__close {
|
||||
display: block !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
color: var(--art-gray-500) !important;
|
||||
font-size: 16px !important;
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
padding: 7px !important;
|
||||
font-size: 14px !important;
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
border-radius: 6px !important;
|
||||
transition: all 0.3s !important;
|
||||
transition: all 0.3s ease !important;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
cursor: pointer !important;
|
||||
@@ -849,14 +852,33 @@
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
bottom: auto !important;
|
||||
box-sizing: border-box !important;
|
||||
line-height: 1 !important;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(var(--art-gray-200-rgb), 0.7) !important;
|
||||
color: var(--art-gray-800) !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: rgba(var(--art-gray-300-rgb), 0.8) !important;
|
||||
transform: scale(0.95) !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none !important;
|
||||
box-shadow: 0 0 0 2px rgba(var(--art-primary), 0.2) !important;
|
||||
}
|
||||
|
||||
// 确保图标居中
|
||||
&::before {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user