105 lines
1.9 KiB
CSS
105 lines
1.9 KiB
CSS
/* 可展开搜索框组件样式 */
|
|
|
|
/* 只读标题样式（当没有搜索功能时） */
|
|
.expand-search-readonly {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.expand-search-readonly h3 {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
}
|
|
|
|
.expand-search-readonly svg {
|
|
color: #667eea;
|
|
}
|
|
|
|
/* 可展开的紧凑搜索框 */
|
|
.expand-search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0.85rem;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
background: #f8fafc;
|
|
cursor: pointer;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
width: fit-content;
|
|
max-width: 150px;
|
|
height: 40px;
|
|
}
|
|
|
|
.expand-search-box .search-icon {
|
|
color: #667eea;
|
|
flex-shrink: 0;
|
|
transition: color 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.expand-search-box:hover:not(.expanded) {
|
|
border-color: #cbd5e1;
|
|
background: white;
|
|
}
|
|
|
|
.expand-search-box:hover:not(.expanded) .search-icon {
|
|
color: #5a67d8;
|
|
}
|
|
|
|
.expand-search-box .search-placeholder {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
white-space: nowrap;
|
|
user-select: none;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* 展开状态 */
|
|
.expand-search-box.expanded {
|
|
cursor: text;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
border-color: #e2e8f0;
|
|
background: white;
|
|
}
|
|
|
|
.expand-search-box.expanded .search-icon {
|
|
color: #667eea;
|
|
}
|
|
|
|
/* Ant Design Input 样式定制 */
|
|
.expand-search-box .search-input-antd {
|
|
flex: 1;
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.expand-search-box .search-input-antd .ant-input {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* 移除默认的焦点阴影，使用自定义样式 */
|
|
.expand-search-box .search-input-antd:focus,
|
|
.expand-search-box .search-input-antd:focus-within {
|
|
border-color: #667eea;
|
|
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
.expand-search-box {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.expand-search-box.expanded {
|
|
width: 100%;
|
|
}
|
|
}
|