xdesign-vue-next/esm/_common/style/web/_global.less

XDesign Component for vue-next

@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");
    }
  }
}

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

// x-icon style 
@keyframes x-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.x-icon {
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
}
.x-icon::before {
  font-family: unset;
}
.x-icon-loading {
  animation: x-spin 1s linear infinite;
}
.x-icon {
  fill: currentColor;
}
.x-icon.x-size-s,
i.x-size-s {
  font-size: 14px;
}
.x-icon.x-size-m,
i.x-size-m {
  font-size: 16px;
}
.x-icon.x-size-l,
i.x-size-l {
  font-size: 18px;
}