refactor(style): remove tailwind css

src/design/global.less

@@ -0,0 +1,50 @@
+@import './helper/distance.less';
+// 生成样式
+.distance();
+
+.hidden {
+  display: none !important;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-start {
+  justify-content: start;
+}
+
+.justify-end {
+  justify-content: end;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.relative {
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-wrap: normal;
+  white-space: nowrap;
+}

src/design/helper/distance.less

@@ -0,0 +1,38 @@
+@import 'loop.less';
+// margin 步长
+@margin-size-base: 4;
+
+// 最大生成
+@margin-size-max: 10;
+
+// padding步长
+@padding-size-base: 4;
+
+// 最大生成
+@padding-size-max: 10;
+
+.distance() {
+  // 生成margin
+  .loop (m, margin, 1, @margin-size-base, @margin-size-max);
+  .loop (mt, margin-top, 1, @margin-size-base, @margin-size-max);
+  .loop (mr, margin-right, 1, @margin-size-base, @margin-size-max);
+  .loop (mb, margin-bottom, 1, @margin-size-base, @margin-size-max);
+  .loop (ml, margin-left, 1, @margin-size-base, @margin-size-max);
+  .loop (my, margin, 1, @margin-size-base, @margin-size-max, y);
+  .loop (mx, margin, 1, @margin-size-base, @margin-size-max, x);
+  .loop (mx-auto, margin, 1, @padding-size-base, @padding-size-max, autoX);
+  .loop (my-auto, margin, 1, @padding-size-base, @padding-size-max, autoY);
+  .loop (m-auto, margin, 1, @padding-size-base, @padding-size-max, auto);
+
+  // 生成padding
+  .loop (p, padding, 1, @padding-size-base, @padding-size-max);
+  .loop (pt, padding-top, 1, @padding-size-base, @padding-size-max);
+  .loop (pr, padding-right, 1, @padding-size-base, @padding-size-max);
+  .loop (pb, padding-bottom, 1, @padding-size-base, @padding-size-max);
+  .loop (pl, padding-left, 1, @padding-size-base, @padding-size-max);
+  .loop (py, padding, 1, @padding-size-base, @padding-size-max, y);
+  .loop (px, padding, 1, @padding-size-base, @padding-size-max, x);
+  .loop (px-auto, padding, 1, @padding-size-base, @padding-size-max, autoX);
+  .loop (py-auto, padding, 1, @padding-size-base, @padding-size-max, autoY);
+  .loop (p-auto, padding, 1, @padding-size-base, @padding-size-max, auto);
+}

src/design/helper/loop.less

@@ -0,0 +1,67 @@
+.loop (@style-name, @tag-name, @i,@base-size, @max:10,@xy:none) when (@i <= @max) {
+  @next: @i+1;
+  .fn() when (@xy =none) {
+    @size: @base-size * @i;
+
+    .@{style-name}-@{i} {
+      @{tag-name}: ~'@{size}px ';
+    }
+    .loop(@style-name, @tag-name, @next, @base-size, @max, @xy);
+  }
+
+  .fn() when (@xy =x) {
+    @size: @base-size * @i;
+
+    @tnl: ~'@{tag-name}-left';
+    @tnr: ~'@{tag-name}-right';
+
+    .@{style-name}-@{i} {
+      @{tnl}: ~'@{size}px';
+      @{tnr}: ~'@{size}px';
+    }
+    .loop(@style-name, @tag-name, @next, @base-size, @max, @xy);
+  }
+  .fn() when (@xy =y) {
+    @size: @base-size * @i;
+
+    @tnt: ~'@{tag-name}-top';
+    @tnb: ~'@{tag-name}-bottom';
+
+    .@{style-name}-@{i} {
+      @{tnt}: ~'@{size}px';
+      @{tnb}: ~'@{size}px';
+    }
+    .loop(@style-name, @tag-name, @next, @base-size, @max, @xy);
+  }
+  .fn() when (@xy =auto) {
+    @tnt: ~'@{tag-name}-top';
+    @tnb: ~'@{tag-name}-bottom';
+    @tnl: ~'@{tag-name}-left';
+    @tnr: ~'@{tag-name}-right';
+    .@{style-name} {
+      @{tnl}: ~'auto';
+      @{tnr}: ~'auto';
+      @{tnt}: ~'auto';
+      @{tnb}: ~'auto';
+    }
+  }
+
+  .fn() when (@xy =autoX) {
+    @tnl: ~'@{tag-name}-left';
+    @tnr: ~'@{tag-name}-right';
+    .@{style-name} {
+      @{tnl}: ~'auto';
+      @{tnr}: ~'auto';
+    }
+  }
+
+  .fn() when (@xy =autoY) {
+    @tnt: ~'@{tag-name}-top';
+    @tnb: ~'@{tag-name}-bottom';
+    .@{style-name} {
+      @{tnt}: ~'auto';
+      @{tnb}: ~'auto';
+    }
+  }
+  .fn();
+}

src/design/index.less

@@ -3,6 +3,7 @@
 @import 'public.less';
 @import 'mixins.less';
 @import 'ant/index.less';
+@import './global.less';
 
 *,
 *::before,

src/design/main.postcss

@@ -1,3 +0,0 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';

src/design/mixins.less

@@ -42,13 +42,6 @@
   user-select: none;
 }
 
-.ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-wrap: normal;
-  white-space: nowrap;
-}
-
 /* 适用于webkit内核和移动端 */
 .ellipsis-multiple(@num: 1) {
   display: -webkit-box;
@@ -56,3 +49,54 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: @num;
 }
+
+.respond-to (small, @content) {
+  @media only screen and (min-width: @screen-sm-min) {
+    @content();
+  }
+}
+.respond-to (medium, @content) {
+  @media only screen and (min-width: @screen-md-min) {
+    @content();
+  }
+}
+.respond-to (large, @content) {
+  @media only screen and (min-width: @screen-lg-min) {
+    @content();
+  }
+}
+.respond-to (xlarge, @content) {
+  @media only screen and (min-width: @screen-xl-min) {
+    @content();
+  }
+}
+.respond-to (xsmall-only, @content) {
+  @media only screen and (max-width: @screen-xs-max) {
+    @content();
+  }
+}
+.respond-to (small-only, @content) {
+  @media only screen and (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+    @content();
+  }
+}
+.respond-to (medium-only, @content) {
+  @media only screen and (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+    @content();
+  }
+}
+.respond-to (large-only, @content) {
+  @media only screen and (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
+    @content();
+  }
+}
+.respond-to (xsmall-and-small, @content) {
+  @media only screen and (max-width: @screen-sm-max) {
+    @content();
+  }
+}
+.respond-to (small-and-medium, @content) {
+  @media only screen and (min-width: @screen-sm-min) and (max-width: @screen-md-max) {
+    @content();
+  }
+}