72 lines
1.2 KiB
CSS
72 lines
1.2 KiB
CSS
/**
|
|
* 状态徽章组件样式
|
|
*/
|
|
|
|
/* 状态徽章基础样式 */
|
|
.status-badge {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
|
}
|
|
|
|
/* 状态徽章尺寸 */
|
|
.status-badge-sm {
|
|
@apply px-2 py-0.5 text-xs;
|
|
}
|
|
|
|
.status-badge-lg {
|
|
@apply px-3 py-1 text-sm;
|
|
}
|
|
|
|
/* 状态徽章类型 */
|
|
.status-badge-success {
|
|
@apply bg-green-100 text-green-800;
|
|
}
|
|
|
|
.status-badge-processing {
|
|
@apply bg-blue-100 text-blue-800;
|
|
}
|
|
|
|
.status-badge-warning {
|
|
@apply bg-yellow-100 text-yellow-800;
|
|
}
|
|
|
|
.status-badge-error {
|
|
@apply bg-red-100 text-red-800;
|
|
}
|
|
|
|
.status-badge-default {
|
|
@apply bg-gray-100 text-gray-800;
|
|
}
|
|
|
|
/* 带图标的状态徽章 */
|
|
.status-badge-with-icon {
|
|
@apply pl-1.5;
|
|
}
|
|
|
|
.status-badge i {
|
|
@apply mr-1;
|
|
}
|
|
|
|
/* 可点击的状态徽章 */
|
|
.status-badge-clickable {
|
|
@apply cursor-pointer transition-colors duration-200;
|
|
}
|
|
|
|
.status-badge-clickable.status-badge-success:hover {
|
|
@apply bg-green-200;
|
|
}
|
|
|
|
.status-badge-clickable.status-badge-processing:hover {
|
|
@apply bg-blue-200;
|
|
}
|
|
|
|
.status-badge-clickable.status-badge-warning:hover {
|
|
@apply bg-yellow-200;
|
|
}
|
|
|
|
.status-badge-clickable.status-badge-error:hover {
|
|
@apply bg-red-200;
|
|
}
|
|
|
|
.status-badge-clickable.status-badge-default:hover {
|
|
@apply bg-gray-200;
|
|
} |