修改动态联调

guoshipeng

2023-08-03 f93b9f80d69fc1d933c672cf516024e332971e13

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
// color 
.bg-white         { background-color: #fff !important; } 
.text-white       { color: #fff !important; } 
 
.for-each(@colors, { 
  .bg-@{adKey}-light       { background-color: extract(@adItem, @color-light-position) !important; } 
  .bg-@{adKey}             { background-color: extract(@adItem, @color-basic-position) !important; } 
  .bg-@{adKey}-dark        { background-color: extract(@adItem, @color-dark-position) !important; } 
 
  .bg-@{adKey}-light-h     { transition: background-color 300ms; &:hover { background-color: extract(@adItem, @color-light-position) !important; } } 
  .bg-@{adKey}-h           { transition: background-color 300ms; &:hover { background-color: extract(@adItem, @color-basic-position) !important; } } 
  .bg-@{adKey}-dark-h      { transition: background-color 300ms; &:hover { background-color: extract(@adItem, @color-dark-position) !important; } } 
 
  .text-@{adKey}-light     { color: extract(@adItem, @color-light-position) !important; } 
  .text-@{adKey}           { color: extract(@adItem, @color-basic-position) !important; } 
  .text-@{adKey}-dark      { color: extract(@adItem, @color-dark-position) !important; } 
}); 
 
.for-each(@aliasColors, { 
  .bg-@{adKey}-light  { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-light-position})` !important; } 
  .bg-@{adKey}        { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-basic-position})` !important; } 
  .bg-@{adKey}-dark   { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-dark-position})` !important; } 
 
  .bg-@{adKey}-light-h  { transition: background-color 300ms; &:hover { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-light-position})` !important; } } 
  .bg-@{adKey}-h        { transition: background-color 300ms; &:hover { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-basic-position})` !important; } } 
  .bg-@{adKey}-dark-h   { transition: background-color 300ms; &:hover { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-dark-position})` !important; } } 
 
  .text-@{adKey}-light  { color: ~`getColor("@{colors}", "@{adValue}", @{color-light-position})` !important; } 
  .text-@{adKey}        { color: ~`getColor("@{colors}", "@{adValue}", @{color-basic-position})` !important; } 
  .text-@{adKey}-dark   { color: ~`getColor("@{colors}", "@{adValue}", @{color-dark-position})` !important; } 
}); 
 
// grey 
.for-each(@greyColorer, { 
  .bg-grey-@{adKey}     { background-color: @adValue !important; } 
  .bg-grey-@{adKey}-h   { &:hover { background-color: @adValue !important; } } 
  .text-grey-@{adKey}   { color: @adValue !important; } 
}); 
 
.all-colors-minin(@enabled) when (@enabled = true) { 
 
  .loop-no(@adKey, @adValue, @i: 1) when (@i =< length(@color-no-list)) { 
    // @color-no-list 
    @name: "@{adKey}-@{i}"; 
    .bg-@{adKey}-@{i}    { background-color: @@name !important; } 
    .bg-@{adKey}-@{i}-h  { transition: background-color 300ms; &:hover { background-color: @@name !important; } } 
    .text-@{adKey}-@{i}  { color: @@name !important; } 
    .loop-no(@adKey, @adValue, @i + 1); 
  } 
 
  .for-each(@colors, { 
    .loop-no(@adKey, @adValue, 1); 
  }); 
 
} 
.all-colors-minin(@enable-all-colors);