97 lines
1.9 KiB
CSS
97 lines
1.9 KiB
CSS
/**
|
|
* 搜索框组件样式
|
|
*/
|
|
|
|
/* 搜索框容器 */
|
|
.search-box {
|
|
@apply relative;
|
|
}
|
|
|
|
/* 搜索框与按钮并排显示 */
|
|
.search-box-row {
|
|
@apply flex items-center;
|
|
}
|
|
|
|
/* .search-box-row .form-input {
|
|
@apply rounded-r-none;
|
|
} */
|
|
|
|
.search-box-row .search-button {
|
|
@apply h-full flex items-center;
|
|
}
|
|
|
|
/* 搜索输入框 */
|
|
.form-input {
|
|
@apply w-full py-2 px-4 border border-gray-200 rounded-md text-sm
|
|
focus:outline-none focus:ring-1 focus:ring-[#00684a] focus:border-[#00684a]
|
|
placeholder-gray-400 transition-all duration-200;
|
|
}
|
|
|
|
/* 搜索按钮 */
|
|
.search-button {
|
|
@apply bg-[#00684a] text-white px-3 py-2 rounded-md border border-[#00684a];
|
|
}
|
|
|
|
.search-button:hover {
|
|
@apply bg-[#005a3f] border-[#005a3f];
|
|
}
|
|
|
|
.search-button i {
|
|
@apply mr-1;
|
|
}
|
|
|
|
/* 仅图标按钮样式 */
|
|
.icon-only-btn {
|
|
@apply px-2;
|
|
}
|
|
|
|
.icon-only-btn i {
|
|
@apply mr-0;
|
|
}
|
|
|
|
/* 搜索框大小 */
|
|
.search-box-sm .form-input {
|
|
@apply py-1.5 text-sm;
|
|
}
|
|
|
|
.search-box-lg .form-input {
|
|
@apply py-2.5 text-base;
|
|
}
|
|
|
|
/* 搜索图标 */
|
|
.search-box-icon {
|
|
@apply absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400;
|
|
}
|
|
|
|
/* 清除按钮 */
|
|
.search-box-clear {
|
|
@apply absolute right-3 top-1/2 transform
|
|
text-gray-400 hover:text-gray-600 cursor-pointer transition-colors duration-200
|
|
border-none bg-transparent p-0 outline-none;
|
|
}
|
|
|
|
/* 当搜索框内有按钮时，调整清除按钮位置和输入框右侧内边距 */
|
|
.search-box:not(.form-input-only) .form-input {
|
|
@apply pr-8;
|
|
}
|
|
|
|
/* 修正当搜索框右侧有搜索按钮时，清除图标的位置，确保它显示在输入框内部 */
|
|
.search-box:not(.form-input-only) .search-box-clear {
|
|
@apply right-20;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* 清除按钮的图标样式 */
|
|
.search-box-clear i {
|
|
@apply text-lg;
|
|
}
|
|
|
|
/* 带边框的搜索框 */
|
|
.search-box-bordered {
|
|
@apply shadow-sm;
|
|
}
|
|
|
|
/* 搜索框禁用状态 */
|
|
.form-input:disabled {
|
|
@apply bg-gray-100 cursor-not-allowed opacity-70;
|
|
} |