tdesign-react/esm/style/web/_global.less

TDesign Component for React

@import './_variables.less';

@import './mixins/_scrollbar.less';

// 响应式断点 后面支持紧凑模式可以迁移过去
:root {
  --td-screen-xs: @screen-xs;
  --td-screen-sm: @screen-sm;
  --td-screen-md: @screen-md;
  --td-screen-lg: @screen-lg;
  --td-screen-xl: @screen-xl;
  --td-screen-xxl: @screen-xxl;
}

// 统一的scrollbar
.narrow-scrollbar {
  .scrollbar(8px, 2px);
}

// 统一的可旋转箭头
.@{prefix}-fake-arrow {
  path {
    transition: d @anim-duration-base;
    stroke: currentcolor;
  }

  &--active {
    path {
      d: path('M3.75 10.2002L7.99274 5.7998L12.2361 10.0425');
    }
  }
}

// Safari 兼容方案: 使用 transform 而非 d 动画
// Safari 不支持对 path 的 d 属性进行动画
.@{prefix}-fake-arrow.@{prefix}-fake-arrow--transform {
  path {
    transition: transform @anim-duration-base;
    transform-origin: center;
  }
  &.@{prefix}-fake-arrow--active {
    path {
      transform: scaleY(-1);
    }
  }
}

.@{prefix}-slide-down-enter-active,
.@{prefix}-slide-down-leave-active {
  transition:
    height @anim-duration-base @anim-time-fn-easing,
    max-height @anim-duration-base @anim-time-fn-easing;
}