acud 0.0.66 → 0.0.67

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -26,8 +26,6 @@ export interface ModalProps {
26
26
  afterClose?: () => void;
27
27
  /** 弹框宽度 */
28
28
  width?: number;
29
- /** 弹框高度 */
30
- height?: number;
31
29
  /** 底部内容 */
32
30
  footer?: React.ReactNode;
33
31
  /** 确认按钮文字 */
@@ -55,26 +55,46 @@
55
55
  -webkit-overflow-scrolling: touch;
56
56
  z-index: 1000;
57
57
  }
58
- .acud-modal-sm > .acud-modal-content {
58
+ .acud-modal-sm {
59
59
  width: 520px;
60
60
  min-height: 240px;
61
61
  max-height: 560px;
62
62
  }
63
- .acud-modal-md > .acud-modal-content {
63
+ .acud-modal-sm > .acud-modal-content {
64
+ width: 100%;
65
+ min-height: 240px;
66
+ max-height: 560px;
67
+ }
68
+ .acud-modal-md {
64
69
  width: 800px;
65
70
  min-height: 400px;
66
71
  max-height: 560px;
67
72
  }
68
- .acud-modal-lg > .acud-modal-content {
73
+ .acud-modal-md > .acud-modal-content {
74
+ width: 100%;
75
+ min-height: 400px;
76
+ max-height: 560px;
77
+ }
78
+ .acud-modal-lg {
69
79
  width: 1120px;
70
80
  min-height: 480px;
71
81
  max-height: 560px;
72
82
  }
73
- .acud-modal-xl > .acud-modal-content {
83
+ .acud-modal-lg > .acud-modal-content {
84
+ width: 100%;
85
+ min-height: 480px;
86
+ max-height: 560px;
87
+ }
88
+ .acud-modal-xl {
74
89
  width: 1200px;
75
90
  min-height: 480px;
76
91
  max-height: 560px;
77
92
  }
93
+ .acud-modal-xl > .acud-modal-content {
94
+ width: 100%;
95
+ min-height: 480px;
96
+ max-height: 560px;
97
+ }
78
98
  .acud-modal-content {
79
99
  position: relative;
80
100
  background-color: #FFFFFF;
@@ -130,13 +150,14 @@
130
150
  word-wrap: break-word;
131
151
  }
132
152
  .acud-modal-body {
133
- padding: 16px 24px 24px;
153
+ margin: 16px 24px 24px;
134
154
  font-size: 12px;
135
155
  font-weight: 400;
136
156
  line-height: 20px;
137
157
  word-wrap: break-word;
138
158
  color: #151B26;
139
159
  flex: 1;
160
+ overflow-y: auto;
140
161
  }
141
162
  .acud-modal-footer {
142
163
  padding: 0 24px 24px;
@@ -171,14 +192,13 @@
171
192
  padding-right: 12px;
172
193
  }
173
194
  .acud-modal-dialogbox-content {
174
- width: 400px;
195
+ width: 100%;
175
196
  padding-left: 32px;
176
197
  }
177
198
  .acud-modal-dialogbox .acud-modal-title .acudicon {
178
199
  font-size: 20px;
179
200
  }
180
201
  .acud-modal-dialogbox > .acud-modal-content {
181
- width: 400px;
182
202
  min-height: 184px;
183
203
  }
184
204
  .acud-modal-dialogbox-warning .acud-modal-dialogbox-icon {
@@ -18,20 +18,36 @@
18
18
  width: auto;
19
19
  max-width: calc(100vw - 32px);
20
20
 
21
+ &-sm {
22
+ .modal-size-config(sm, false);
23
+ }
24
+
21
25
  &-sm > &-content {
22
- .modal-size-config(sm);
26
+ .modal-size-config(sm, true);
27
+ }
28
+
29
+ &-md {
30
+ .modal-size-config(md, false);
23
31
  }
24
32
 
25
33
  &-md > &-content {
26
- .modal-size-config(md);
34
+ .modal-size-config(md, true);
35
+ }
36
+
37
+ &-lg {
38
+ .modal-size-config(lg, false);
27
39
  }
28
40
 
29
41
  &-lg > &-content {
30
- .modal-size-config(lg);
42
+ .modal-size-config(lg, true);
43
+ }
44
+
45
+ &-xl {
46
+ .modal-size-config(xl, false);
31
47
  }
32
48
 
33
49
  &-xl > &-content {
34
- .modal-size-config(xl);
50
+ .modal-size-config(xl, true);
35
51
  }
36
52
 
37
53
  // 弹框内容
@@ -100,13 +116,14 @@
100
116
 
101
117
  // 内容body部分
102
118
  &-body {
103
- padding: @modal-body-padding;
119
+ margin: @modal-body-margin;
104
120
  font-size: @modal-body-font-size;
105
121
  font-weight: @modal-body-font-weight;
106
122
  line-height: @modal-body-line-height;
107
123
  word-wrap: break-word;
108
124
  color: @modal-body-font-color;
109
125
  flex: 1;
126
+ overflow-y: auto;
110
127
  }
111
128
 
112
129
  // 内容footer部分
@@ -150,7 +167,7 @@
150
167
  }
151
168
 
152
169
  &-content {
153
- width: @P * 100;
170
+ width: 100%;
154
171
  padding-left: @P * 3 + @T6;
155
172
  }
156
173
 
@@ -161,7 +178,6 @@
161
178
  }
162
179
 
163
180
  & > .@{modal-prefix-cls}-content {
164
- width: @P * 100;
165
181
  min-height: @P * 46;
166
182
  }
167
183
  }
@@ -37,11 +37,11 @@
37
37
  }
38
38
  }
39
39
 
40
- .modal-size-config(@type) {
40
+ .modal-size-config(@type, @content) {
41
41
  @width: ~'modal-width-@{type}';
42
42
  @min-height: ~'modal-height-@{type}';
43
43
  @max-height: ~'modal-max-height-@{type}';
44
- width: @@width;
44
+ width: if(@content, 100%, @@width);
45
45
  min-height: @@min-height;
46
46
  max-height: @@max-height;
47
47
  }
@@ -41,7 +41,7 @@
41
41
  @modal-close-font-size: @T4;
42
42
 
43
43
  // Body
44
- @modal-body-padding: 6*@P 8*@P;
44
+ @modal-body-margin: 4*@P 6*@P 6*@P;
45
45
  @modal-body-bg-color: @G11;
46
46
  @modal-body-font-size: @T2;
47
47
  @modal-body-line-height: 5*@P;
@@ -42,7 +42,7 @@
42
42
  @modal-close-font-size: @T4;
43
43
 
44
44
  // Body
45
- @modal-body-padding: 4*@P 6*@P 6*@P;
45
+ @modal-body-margin: 4*@P 6*@P 6*@P;
46
46
  @modal-body-bg-color: @G11;
47
47
  @modal-body-font-color: @G2;
48
48
  @modal-body-font-size: @T2;
@@ -362,9 +362,9 @@ function TabNavList(props, ref) {
362
362
 
363
363
  if (btnNode) {
364
364
  newSizes.set(key, {
365
- width: btnNode.offsetWidth,
365
+ width: btnNode.offsetWidth - 32,
366
366
  height: btnNode.offsetHeight,
367
- left: btnNode.offsetLeft,
367
+ left: btnNode.offsetLeft + 16,
368
368
  top: btnNode.offsetTop
369
369
  });
370
370
  }
@@ -556,7 +556,6 @@
556
556
  }
557
557
  .acud-tabs-tab-active {
558
558
  color: #2468F2;
559
- background: #FFFFFF;
560
559
  }
561
560
  .acud-tabs-tab-btn {
562
561
  outline: none;
@@ -155,7 +155,6 @@
155
155
 
156
156
  &-active {
157
157
  color: @tabs-active-color;
158
- background: @tabs-card-head-background;
159
158
  }
160
159
 
161
160
  &-btn {
@@ -26,8 +26,6 @@ export interface ModalProps {
26
26
  afterClose?: () => void;
27
27
  /** 弹框宽度 */
28
28
  width?: number;
29
- /** 弹框高度 */
30
- height?: number;
31
29
  /** 底部内容 */
32
30
  footer?: React.ReactNode;
33
31
  /** 确认按钮文字 */
@@ -55,26 +55,46 @@
55
55
  -webkit-overflow-scrolling: touch;
56
56
  z-index: 1000;
57
57
  }
58
- .acud-modal-sm > .acud-modal-content {
58
+ .acud-modal-sm {
59
59
  width: 520px;
60
60
  min-height: 240px;
61
61
  max-height: 560px;
62
62
  }
63
- .acud-modal-md > .acud-modal-content {
63
+ .acud-modal-sm > .acud-modal-content {
64
+ width: 100%;
65
+ min-height: 240px;
66
+ max-height: 560px;
67
+ }
68
+ .acud-modal-md {
64
69
  width: 800px;
65
70
  min-height: 400px;
66
71
  max-height: 560px;
67
72
  }
68
- .acud-modal-lg > .acud-modal-content {
73
+ .acud-modal-md > .acud-modal-content {
74
+ width: 100%;
75
+ min-height: 400px;
76
+ max-height: 560px;
77
+ }
78
+ .acud-modal-lg {
69
79
  width: 1120px;
70
80
  min-height: 480px;
71
81
  max-height: 560px;
72
82
  }
73
- .acud-modal-xl > .acud-modal-content {
83
+ .acud-modal-lg > .acud-modal-content {
84
+ width: 100%;
85
+ min-height: 480px;
86
+ max-height: 560px;
87
+ }
88
+ .acud-modal-xl {
74
89
  width: 1200px;
75
90
  min-height: 480px;
76
91
  max-height: 560px;
77
92
  }
93
+ .acud-modal-xl > .acud-modal-content {
94
+ width: 100%;
95
+ min-height: 480px;
96
+ max-height: 560px;
97
+ }
78
98
  .acud-modal-content {
79
99
  position: relative;
80
100
  background-color: #FFFFFF;
@@ -130,13 +150,14 @@
130
150
  word-wrap: break-word;
131
151
  }
132
152
  .acud-modal-body {
133
- padding: 16px 24px 24px;
153
+ margin: 16px 24px 24px;
134
154
  font-size: 12px;
135
155
  font-weight: 400;
136
156
  line-height: 20px;
137
157
  word-wrap: break-word;
138
158
  color: #151B26;
139
159
  flex: 1;
160
+ overflow-y: auto;
140
161
  }
141
162
  .acud-modal-footer {
142
163
  padding: 0 24px 24px;
@@ -171,14 +192,13 @@
171
192
  padding-right: 12px;
172
193
  }
173
194
  .acud-modal-dialogbox-content {
174
- width: 400px;
195
+ width: 100%;
175
196
  padding-left: 32px;
176
197
  }
177
198
  .acud-modal-dialogbox .acud-modal-title .acudicon {
178
199
  font-size: 20px;
179
200
  }
180
201
  .acud-modal-dialogbox > .acud-modal-content {
181
- width: 400px;
182
202
  min-height: 184px;
183
203
  }
184
204
  .acud-modal-dialogbox-warning .acud-modal-dialogbox-icon {
@@ -18,20 +18,36 @@
18
18
  width: auto;
19
19
  max-width: calc(100vw - 32px);
20
20
 
21
+ &-sm {
22
+ .modal-size-config(sm, false);
23
+ }
24
+
21
25
  &-sm > &-content {
22
- .modal-size-config(sm);
26
+ .modal-size-config(sm, true);
27
+ }
28
+
29
+ &-md {
30
+ .modal-size-config(md, false);
23
31
  }
24
32
 
25
33
  &-md > &-content {
26
- .modal-size-config(md);
34
+ .modal-size-config(md, true);
35
+ }
36
+
37
+ &-lg {
38
+ .modal-size-config(lg, false);
27
39
  }
28
40
 
29
41
  &-lg > &-content {
30
- .modal-size-config(lg);
42
+ .modal-size-config(lg, true);
43
+ }
44
+
45
+ &-xl {
46
+ .modal-size-config(xl, false);
31
47
  }
32
48
 
33
49
  &-xl > &-content {
34
- .modal-size-config(xl);
50
+ .modal-size-config(xl, true);
35
51
  }
36
52
 
37
53
  // 弹框内容
@@ -100,13 +116,14 @@
100
116
 
101
117
  // 内容body部分
102
118
  &-body {
103
- padding: @modal-body-padding;
119
+ margin: @modal-body-margin;
104
120
  font-size: @modal-body-font-size;
105
121
  font-weight: @modal-body-font-weight;
106
122
  line-height: @modal-body-line-height;
107
123
  word-wrap: break-word;
108
124
  color: @modal-body-font-color;
109
125
  flex: 1;
126
+ overflow-y: auto;
110
127
  }
111
128
 
112
129
  // 内容footer部分
@@ -150,7 +167,7 @@
150
167
  }
151
168
 
152
169
  &-content {
153
- width: @P * 100;
170
+ width: 100%;
154
171
  padding-left: @P * 3 + @T6;
155
172
  }
156
173
 
@@ -161,7 +178,6 @@
161
178
  }
162
179
 
163
180
  & > .@{modal-prefix-cls}-content {
164
- width: @P * 100;
165
181
  min-height: @P * 46;
166
182
  }
167
183
  }
@@ -37,11 +37,11 @@
37
37
  }
38
38
  }
39
39
 
40
- .modal-size-config(@type) {
40
+ .modal-size-config(@type, @content) {
41
41
  @width: ~'modal-width-@{type}';
42
42
  @min-height: ~'modal-height-@{type}';
43
43
  @max-height: ~'modal-max-height-@{type}';
44
- width: @@width;
44
+ width: if(@content, 100%, @@width);
45
45
  min-height: @@min-height;
46
46
  max-height: @@max-height;
47
47
  }
@@ -41,7 +41,7 @@
41
41
  @modal-close-font-size: @T4;
42
42
 
43
43
  // Body
44
- @modal-body-padding: 6*@P 8*@P;
44
+ @modal-body-margin: 4*@P 6*@P 6*@P;
45
45
  @modal-body-bg-color: @G11;
46
46
  @modal-body-font-size: @T2;
47
47
  @modal-body-line-height: 5*@P;
@@ -42,7 +42,7 @@
42
42
  @modal-close-font-size: @T4;
43
43
 
44
44
  // Body
45
- @modal-body-padding: 4*@P 6*@P 6*@P;
45
+ @modal-body-margin: 4*@P 6*@P 6*@P;
46
46
  @modal-body-bg-color: @G11;
47
47
  @modal-body-font-color: @G2;
48
48
  @modal-body-font-size: @T2;
@@ -396,9 +396,9 @@ function TabNavList(props, ref) {
396
396
 
397
397
  if (btnNode) {
398
398
  newSizes.set(key, {
399
- width: btnNode.offsetWidth,
399
+ width: btnNode.offsetWidth - 32,
400
400
  height: btnNode.offsetHeight,
401
- left: btnNode.offsetLeft,
401
+ left: btnNode.offsetLeft + 16,
402
402
  top: btnNode.offsetTop
403
403
  });
404
404
  }
@@ -556,7 +556,6 @@
556
556
  }
557
557
  .acud-tabs-tab-active {
558
558
  color: #2468F2;
559
- background: #FFFFFF;
560
559
  }
561
560
  .acud-tabs-tab-btn {
562
561
  outline: none;
@@ -155,7 +155,6 @@
155
155
 
156
156
  &-active {
157
157
  color: @tabs-active-color;
158
- background: @tabs-card-head-background;
159
158
  }
160
159
 
161
160
  &-btn {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "acud",
3
- "version": "0.0.66",
3
+ "version": "0.0.67",
4
4
  "description": "acg react 组件库",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",