.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: 16px; 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: #eeeeee; border-radius: 2px; 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: 16px; border-radius: 2px; } .t-skeleton--type-rect { width: 100%; height: 16px; border-radius: 4px; } .t-skeleton--type-circle { width: 48px; height: 48px; border-radius: 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), 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: rgba(230, 230, 230, 0.3); opacity: 0.3; } 100% { opacity: 1; } }