83 lines
1.3 KiB
CSS
83 lines
1.3 KiB
CSS
/**
|
|
* 状态点组件样式
|
|
*/
|
|
|
|
/* 状态点基础样式 */
|
|
.status-dot {
|
|
@apply inline-block w-2 h-2 rounded-full;
|
|
}
|
|
|
|
/* 状态点类型 */
|
|
.status-dot-success {
|
|
@apply bg-green-500;
|
|
}
|
|
|
|
.status-dot-processing {
|
|
@apply bg-blue-500;
|
|
}
|
|
|
|
.status-dot-warning {
|
|
@apply bg-yellow-500;
|
|
}
|
|
|
|
.status-dot-error {
|
|
@apply bg-red-500;
|
|
}
|
|
|
|
.status-dot-default {
|
|
@apply bg-gray-400;
|
|
}
|
|
|
|
/* 状态点尺寸 */
|
|
.status-dot-sm {
|
|
@apply w-1.5 h-1.5;
|
|
}
|
|
|
|
.status-dot-lg {
|
|
@apply w-3 h-3;
|
|
}
|
|
|
|
/* 带脉冲动画的状态点 */
|
|
.status-dot-pulse {
|
|
@apply relative;
|
|
}
|
|
|
|
.status-dot-pulse::after {
|
|
content: '';
|
|
@apply absolute w-full h-full rounded-full -left-1 -top-1 animate-ping;
|
|
}
|
|
|
|
.status-dot-pulse.status-dot-success::after {
|
|
@apply bg-green-400 opacity-60;
|
|
}
|
|
|
|
.status-dot-pulse.status-dot-processing::after {
|
|
@apply bg-blue-400 opacity-60;
|
|
}
|
|
|
|
.status-dot-pulse.status-dot-warning::after {
|
|
@apply bg-yellow-400 opacity-60;
|
|
}
|
|
|
|
.status-dot-pulse.status-dot-error::after {
|
|
@apply bg-red-400 opacity-60;
|
|
}
|
|
|
|
/* 带文本的状态点 */
|
|
.status-dot-with-text {
|
|
@apply flex items-center justify-center;
|
|
}
|
|
|
|
.status-dot-text {
|
|
@apply ml-1.5 text-sm;
|
|
color: inherit;
|
|
}
|
|
|
|
/* 状态文本颜色 */
|
|
.status-dot-success + .status-dot-text {
|
|
@apply text-green-600;
|
|
}
|
|
|
|
.status-dot-default + .status-dot-text {
|
|
@apply text-gray-500;
|
|
} |