components.less
3.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
//padding mapping class
@0px:0px;
@marginList:4,8,12,16,20,24,28,32,36,40,44,48,52,56,60,64,72;
@paddinList:4,8,12,16,20,24,28,32,36,40,44,48,52,56,60,64,72;
@directionList:top,right,bottom,left,all;
//padding-random
.padding-loop(@direction,@list, @i: 1,@val:extract(@list,@i)) when ((length(@list) >=@i) and not(@direction = all)) {
.p@{direction}-@{val} {
padding-@{direction}:@val + @0px;
}
.padding-loop(@direction,@list, (@i + 1));
}
.padding-loop(@direction,@list, @i: 1,@val:extract(@list,@i)) when (length(@list) >=@i) and (@direction = all) {
.padding-@{val} {
padding:@val + @0px;
}
.padding-loop(@direction,@list, (@i + 1));
}
.padding-loop(extract(@directionList,1),@paddinList);
.padding-loop(extract(@directionList,2),@paddinList);
.padding-loop(extract(@directionList,3),@paddinList);
.padding-loop(extract(@directionList,4),@paddinList);
.padding-loop(extract(@directionList,5),@paddinList);
//mapping-random
.mapping-loop(@direction,@list, @i: 1,@val:extract(@list,@i)) when ((length(@list) >=@i) and not(@direction = all)) {
.m@{direction}-@{val} {
margin-@{direction}:@val + @0px;
}
.mapping-loop(@direction,@list, (@i + 1));
}
.mapping-loop(@direction,@list, @i: 1,@val:extract(@list,@i)) when (length(@list) >=@i) and (@direction = all) {
.margin-@{val} {
margin:@val + @0px;
}
.mapping-loop(@direction,@list, (@i + 1));
}
.mapping-loop(extract(@directionList,1),@marginList);
.mapping-loop(extract(@directionList,2),@marginList);
.mapping-loop(extract(@directionList,3),@marginList);
.mapping-loop(extract(@directionList,4),@marginList);
.mapping-loop(extract(@directionList,5),@marginList);
//animation
@ease-in-out : cubic-bezier(0.645, 0.045, 0.355, 1);
@animation-duration-slow: 0.3s;
@animation-duration-base: 0.2s;
.show-help-motion(@className, @keyframeName, @duration: @animation-duration-slow) {
.make-motion(@className, @keyframeName, @duration);
.@{className}-enter,
.@{className}-appear {
opacity: 0;
animation-timing-function: @ease-in-out;
}
.@{className}-leave {
animation-timing-function: @ease-in-out;
}
}
.show-help-motion(show-help, antShowHelp, 0.3s);
.motion-common(@duration: @animation-duration-base) {
animation-duration: @duration;
animation-fill-mode: both;
}
.motion-common-leave(@duration: @animation-duration-base) {
animation-duration: @duration;
animation-fill-mode: both;
}
.make-motion(@className, @keyframeName, @duration: @animation-duration-base) {
.@{className}-enter,
.@{className}-appear {
.motion-common(@duration);
animation-play-state: paused;
}
.@{className}-leave {
.motion-common-leave(@duration);
animation-play-state: paused;
}
.@{className}-enter.@{className}-enter-active,
.@{className}-appear.@{className}-appear-active {
animation-name: ~'@{keyframeName}In';
animation-play-state: running;
}
.@{className}-leave.@{className}-leave-active {
animation-name: ~'@{keyframeName}Out';
animation-play-state: running;
pointer-events: none;
}
}
.text-left{
text-align: left;
}
.text-right{
text-align: right;
}
.text-center{
text-align: center;
}