city-casereport/miniprogram_npm/tdesign-miniprogram/skeleton/skeleton.wxss
2023-12-06 14:22:42 +08:00

104 lines
2.4 KiB
Plaintext

.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
.t-skeleton {
box-sizing: border-box;
}
.t-skeleton__row {
display: flex;
margin-bottom: var(--td-skeleton-row-spacing, var(--td-spacer-2, 32rpx));
align-items: center;
justify-content: space-between;
}
.t-skeleton__row:only-child,
.t-skeleton__row:last-child {
margin-bottom: 0;
}
.t-skeleton__col {
background-color: var(--td-skeleton-bg-color, var(--td-bg-color-page, var(--td-gray-color-1, #f3f3f3)));
display: flex;
align-items: center;
justify-content: center;
}
.t-skeleton__col:first-child:last-child,
.t-skeleton__col:last-child {
margin-right: 0;
}
.t-skeleton--type-text {
width: 100%;
height: var(--td-skeleton-text-height, 32rpx);
border-radius: var(--td-skeleton-text-border-radius, var(--td-radius-small, 6rpx));
}
.t-skeleton--type-rect {
width: 100%;
height: var(--td-skeleton-rect-height, 32rpx);
border-radius: var(--td-skeleton-rect-border-radius, var(--td-radius-default, 12rpx));
}
.t-skeleton--type-circle {
width: var(--td-skeleton-circle-height, 96rpx);
height: var(--td-skeleton-circle-height, 96rpx);
border-radius: var(--td-skeleton-circle-border-radius, var(--td-skeleton-circle-border-radius, var(--td-radius-circle, 50%)));
flex-shrink: 0;
}
.t-skeleton--animation-gradient {
position: relative;
overflow-x: hidden;
}
.t-skeleton--animation-gradient::after {
content: ' ';
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--td-skeleton-animation-gradient, rgba(0, 0, 0, 0.04)), rgba(255, 255, 255, 0));
animation: t-skeleton--gradient 1.5s linear 2s infinite;
}
.t-skeleton--animation-flashed {
animation: t-skeleton--flashed 2s linear 2s infinite;
}
@keyframes t-skeleton--gradient {
0% {
transform: translateX(-100%) skewX(-15deg);
}
100% {
transform: translateX(100%) skewX(-15deg);
}
}
@keyframes t-skeleton--flashed {
0% {
opacity: 1;
}
50% {
background-color: var(--td-skeleton-animation-flashed, rgba(230, 230, 230, 0.3));
opacity: 0.3;
}
100% {
opacity: 1;
}
}