indexes-anchor.wxss 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. .t-float-left {
  2. float: left;
  3. }
  4. .t-float-right {
  5. float: right;
  6. }
  7. @keyframes tdesign-fade-out {
  8. from {
  9. opacity: 1;
  10. }
  11. to {
  12. opacity: 0;
  13. }
  14. }
  15. .hotspot-expanded.relative {
  16. position: relative;
  17. }
  18. .hotspot-expanded::after {
  19. content: '';
  20. display: block;
  21. position: absolute;
  22. left: 0;
  23. top: 0;
  24. right: 0;
  25. bottom: 0;
  26. transform: scale(1.5);
  27. }
  28. .t-indexes-anchor {
  29. color: var(--td-indexes-anchor-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
  30. font-size: var(--td-indexes-anchor-font-size, 28rpx);
  31. line-height: var(--td-indexes-anchor-line-height, 44rpx);
  32. }
  33. .t-indexes-anchor__header {
  34. display: none;
  35. padding: 8rpx 32rpx;
  36. background-color: var(--td-indexes-anchor-bg-color, var(--td-gray-color-1, #f3f3f3));
  37. }
  38. .t-indexes-anchor__header--active {
  39. background-color: var(--td-indexes-anchor-active-bg-color, var(--td-bg-color-block, #fff));
  40. position: relative;
  41. }
  42. .t-indexes-anchor__header--active::after {
  43. content: '';
  44. display: block;
  45. position: absolute;
  46. top: unset;
  47. bottom: 0;
  48. left: unset;
  49. right: unset;
  50. background-color: var(--td-gray-color-1, #f3f3f3);
  51. }
  52. .t-indexes-anchor__header--active::after {
  53. height: 1px;
  54. left: 0;
  55. right: 0;
  56. transform: scaleY(0.5);
  57. }
  58. .t-indexes-anchor__slot {
  59. overflow: hidden;
  60. }
  61. .t-indexes-anchor__slot:empty + .t-indexes-anchor__header {
  62. display: block;
  63. }
  64. .t-indexes-anchor__wrapper {
  65. will-change: transform;
  66. }
  67. .t-indexes-anchor__wrapper--sticky {
  68. position: fixed;
  69. top: 0;
  70. left: 0;
  71. width: 100%;
  72. z-index: 1;
  73. }
  74. .t-indexes-anchor__wrapper--active {
  75. color: var(--td-indexes-anchor-active-color, var(--td-primary-color, #0052d9));
  76. font-weight: var(--td-indexes-anchor-active-font-weight, 600);
  77. }