- 所有原子/组合组件添加 import React from 'react'(修复 React is not defined) - 修复 SCSS import 路径:components/ui 和 patterns 需要 ../../../ 而非 ../../ - 修复 action-inbox 页面 SCSS import 层级
76 lines
1.1 KiB
SCSS
76 lines
1.1 KiB
SCSS
@import '../../../styles/variables.scss';
|
|
|
|
@keyframes skeleton-pulse {
|
|
0% { opacity: 1; }
|
|
50% { opacity: 0.4; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
.loading-card-group {
|
|
&--card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tk-gap-md);
|
|
}
|
|
|
|
&--list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tk-gap-sm);
|
|
}
|
|
|
|
&--detail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tk-gap-md);
|
|
}
|
|
}
|
|
|
|
.loading-card {
|
|
background: var(--tk-card-bg);
|
|
border-radius: var(--tk-card-radius);
|
|
padding: var(--tk-card-padding);
|
|
animation: skeleton-pulse 1.5s ease-in-out infinite;
|
|
|
|
&__row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
&__circle {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: $bd-l;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__lines {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
&__line {
|
|
border-radius: 4px;
|
|
background: $bd-l;
|
|
|
|
&--title {
|
|
width: 60%;
|
|
height: 16px;
|
|
}
|
|
|
|
&--text {
|
|
width: 100%;
|
|
height: 12px;
|
|
}
|
|
|
|
&--short {
|
|
width: 40%;
|
|
height: 12px;
|
|
}
|
|
}
|
|
}
|