@vortex-ui/env-puzzle 2.0.0-beta.4 → 2.0.0-beta.5

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.
@@ -1,72 +1,12 @@
1
1
  @import (reference) '~antd/lib/style/themes/index.less';
2
- @import "../../va.less";
3
2
 
4
- .green{
5
- *{
6
- box-sizing: border-box;
7
- }
8
- .ant-modal-body{
9
- padding: 0;
10
- .vtx-form-layout{
11
- //border: 1px solid @border-color;
12
- border-left: 1px solid @border-color;
13
- //border-bottom: none;
14
- padding: 0;
15
- }
16
- .vtx-form-item-col{
17
- background: @normal-item-bg-color;
18
- border: 1px solid @border-color;
19
- border-top:none ;
20
- border-left:none ;
21
- height: 60px;
22
- line-height: 60px;
23
- &.ant-col-12:nth-child(-n+2){
24
- border-top:1px solid @border-color;
25
- }
26
- .ant-form-item{
27
- height: 100%;
28
- margin-bottom: 0;
29
- .ant-form-item-row{
30
- height: 100%;
31
- align-items: center;
32
- .ant-form-item-control{
33
- height: 100%;
34
- background: @bg-color;
35
- >*:only-child {
36
- height: 100%;
37
- }
38
- .ant-form-item-control-input{
39
- height: 100%;
40
- }
41
- :nth-last-child(1)[style]{
42
- position: absolute;
43
- bottom: 0;
44
- left: 5px;
45
- right: 0;
46
- }
47
- }
48
- }
49
-
50
- // 各个表单样式控制
51
- .ant-form-item-control-input-content{
52
- height: 100%;
53
- input {
54
- height: 100%;
55
- border: none;
56
- }
57
- }
3
+ .green {
4
+ .ant-modal-body {
5
+ //>*{
6
+ // box-sizing: border-box;
7
+ //}
58
8
 
59
- .ant-checkbox-wrapper{
60
- padding-left: 10px;
61
- height: 100%;
62
- display: flex;
63
- align-items: center;
64
- }
65
- }
66
- }
67
9
  }
68
-
69
-
70
10
  }
71
11
 
72
12
  .env-create-modal {
@@ -87,20 +27,16 @@
87
27
  align-self: center;
88
28
  }
89
29
  }
90
-
91
30
  &-col + &-col {
92
31
  margin-top: 24px;
93
32
  }
94
-
95
33
  .ant-modal-body {
96
34
  max-height: 600px;
97
35
  overflow-x: hidden;
98
36
  overflow-y: auto;
99
37
  }
100
-
101
38
  .ant-form-item-label {
102
39
  // line-height: 1;
103
-
104
40
  > label {
105
41
  // display: flex;
106
42
  // justify-content: flex-end;
@@ -115,32 +51,28 @@
115
51
  }
116
52
  }
117
53
  }
118
-
119
54
  .ant-form-item-control {
120
55
  // line-height: 1;
121
56
  // width: 0;
122
57
  }
123
-
124
58
  .ant-form-item-control-input-content {
125
59
  > .ant-input-number {
126
60
  width: 100%;
127
61
  }
128
-
129
62
  > .ant-picker {
130
63
  width: 100%;
131
64
  }
132
65
  }
133
66
  .ant-form:not(.ant-form-inline)
134
- .vtx-form-layout-vertical
135
- .vtx-form-item-vertical:not(.vtx-form-item--inline),
67
+ .vtx-form-layout-vertical
68
+ .vtx-form-item-vertical:not(.vtx-form-item--inline),
136
69
  .ant-form-item-row,
137
70
  .ant-form:not(.ant-form-inline)
138
- .vtx-form-layout-vertical
139
- .ant-form-item:not(.vtx-form-item-vertical, .vtx-form-item--view) {
71
+ .vtx-form-layout-vertical
72
+ .ant-form-item:not(.vtx-form-item-vertical, .vtx-form-item--view) {
140
73
  .ant-form-item-row {
141
74
  flex-direction: column;
142
75
  align-items: flex-start;
143
-
144
76
  .ant-form-item-label > label::after {
145
77
  // content: ' ' !important;
146
78
  }
@@ -149,10 +81,9 @@
149
81
  }
150
82
  }
151
83
  }
152
-
153
84
  .ant-form:not(.ant-form-inline)
154
- .vtx-form-layout-vertical
155
- .vtx-form-item-vertical.vtx-form-item--inline {
85
+ .vtx-form-layout-vertical
86
+ .vtx-form-item-vertical.vtx-form-item--inline {
156
87
  .ant-form-item-row {
157
88
  flex-direction: row;
158
89
  }
@@ -162,8 +93,8 @@
162
93
  }
163
94
  .ant-form-inline .vtx-form-layout-vertical .ant-form-item-row,
164
95
  .ant-form-vertical
165
- .vtx-form-item-vertical.vtx-form-item--inline
166
- .ant-form-item-row,
96
+ .vtx-form-item-vertical.vtx-form-item--inline
97
+ .ant-form-item-row,
167
98
  .ant-form-vertical .vtx-form-item--inline.ant-row {
168
99
  flex-direction: row;
169
100
  .ant-form-item-label {
@@ -180,6 +111,7 @@
180
111
  }
181
112
  }
182
113
  }
114
+
183
115
  .env-create-view-modal {
184
116
  .green();
185
117
  .vtx-form-layout .vtx-form-item-col .ant-form-item {
package/lib/global.css CHANGED
@@ -1,3 +1,260 @@
1
1
  .__dumi-default-mobile-demo-layout {
2
2
  padding: 0;
3
3
  }
4
+ .ant-form {
5
+ padding: 0;
6
+ position: relative;
7
+ }
8
+ .ant-form::after {
9
+ content: '';
10
+ position: absolute;
11
+ right: 0;
12
+ top: 0;
13
+ bottom: 0;
14
+ width: 1px;
15
+ background: #e5e9f2;
16
+ }
17
+ .ant-form .vtx-form-layout {
18
+ position: relative;
19
+ padding: 0;
20
+ border-left: 1px solid #e5e9f2;
21
+ border-bottom: 1px solid #e5e9f2;
22
+ }
23
+ .ant-form .vtx-form-layout > .vtx-form-layout {
24
+ border: none;
25
+ }
26
+ .ant-form .vtx-form-layout > .vtx-form-pane:nth-child(1) {
27
+ border-top: 1px solid #e5e9f2;
28
+ }
29
+ .ant-form .vtx-form-layout > .vtx-form-pane:nth-child(1) .vtx-form-pane-title {
30
+ padding-top: 16px;
31
+ }
32
+ .ant-form .vtx-form-layout .vtx-form-item-col {
33
+ position: relative;
34
+ z-index: 9;
35
+ margin-bottom: 0;
36
+ border-right: 1px solid #e5e9f2;
37
+ border-top: 1px solid #e5e9f2;
38
+ min-height: 60px;
39
+ }
40
+ .ant-form .vtx-form-layout .vtx-form-item-col .ant-select-focused,
41
+ .ant-form .vtx-form-layout .vtx-form-item-col .ant-input-number-focused,
42
+ .ant-form .vtx-form-layout .vtx-form-item-col .ant-input-affix-wrapper,
43
+ .ant-form .vtx-form-layout .vtx-form-item-col input:focus,
44
+ .ant-form .vtx-form-layout .vtx-form-item-col textarea:focus {
45
+ outline: none;
46
+ position: relative;
47
+ z-index: 199;
48
+ height: calc(100% - 1px);
49
+ }
50
+ .ant-form .vtx-form-layout .ant-col-8.vtx-form-item-col,
51
+ .ant-form .vtx-form-layout .ant-col-12.vtx-form-item-col,
52
+ .ant-form .vtx-form-layout .ant-col-24.vtx-form-item-col {
53
+ border-bottom: 1px solid #e5e9f2;
54
+ margin-bottom: -1px;
55
+ }
56
+ .ant-form .vtx-form-layout .vtx-form-card {
57
+ border: none;
58
+ }
59
+ .ant-form .vtx-form-layout .vtx-form-pane .ant-divider {
60
+ height: 0;
61
+ border: none;
62
+ }
63
+ .ant-form .vtx-form-layout .ant-card:not(:nth-last-child(1)) .vtx-form-card-content {
64
+ border-bottom: 1px solid #e5e9f2;
65
+ }
66
+ .ant-form .vtx-form-layout .vtx-form-card-content {
67
+ padding: 20px 0 0 0;
68
+ }
69
+ .ant-form .vtx-form-layout .ant-card.vtx-form-card {
70
+ border-bottom: none;
71
+ }
72
+ .ant-form .vtx-form-layout .ant-tabs-tabpane .ant-divider {
73
+ height: 0;
74
+ border: none;
75
+ }
76
+ .ant-form .vtx-form-layout .ant-card-head {
77
+ background: #f2f2f2;
78
+ }
79
+ .ant-form .vtx-form-layout .ant-card-head .ant-card-head-title {
80
+ font-weight: normal;
81
+ color: #333;
82
+ }
83
+ .ant-form .vtx-form-layout .ant-card-head .ant-card-extra span {
84
+ color: #666;
85
+ }
86
+ .ant-form .ant-form-item {
87
+ height: 100%;
88
+ margin-bottom: 0 !important;
89
+ margin-right: 0;
90
+ }
91
+ .ant-form .ant-form-item .ant-form-item-row {
92
+ height: 100%;
93
+ -webkit-box-align: center;
94
+ -ms-flex-align: center;
95
+ align-items: center;
96
+ }
97
+ .ant-form .ant-form-item .ant-form-item-row .ant-form-item-control {
98
+ height: 100%;
99
+ background: #fff;
100
+ }
101
+ .ant-form .ant-form-item .ant-form-item-row .ant-form-item-control > *:only-child {
102
+ height: 100%;
103
+ }
104
+ .ant-form .ant-form-item .ant-form-item-row .ant-form-item-control .ant-form-item-control-input {
105
+ height: 100%;
106
+ }
107
+ .ant-form .ant-form-item .ant-form-item-row .ant-form-item-control .ant-form-item-explain {
108
+ position: absolute;
109
+ bottom: 0;
110
+ left: 5px;
111
+ right: 0;
112
+ }
113
+ .ant-form .ant-form-item .ant-form-item-label {
114
+ background: #f2f2f2;
115
+ height: 100%;
116
+ min-height: 58px;
117
+ display: -webkit-box;
118
+ display: -ms-flexbox;
119
+ display: flex;
120
+ -webkit-box-align: center;
121
+ -ms-flex-align: center;
122
+ align-items: center;
123
+ -webkit-box-pack: end;
124
+ -ms-flex-pack: end;
125
+ justify-content: flex-end;
126
+ }
127
+ .ant-form .ant-form-item .ant-form-item-control-input-content {
128
+ height: 100%;
129
+ display: -webkit-box;
130
+ display: -ms-flexbox;
131
+ display: flex;
132
+ -webkit-box-align: center;
133
+ -ms-flex-align: center;
134
+ align-items: center;
135
+ }
136
+ .ant-form .ant-form-item .ant-form-item-control-input-content > *:nth-child(1):not(.ant-select):not(.vtx-multi-select):not(.vtx-select):not(.vtx-input-textarea) {
137
+ padding-left: 10px;
138
+ }
139
+ .ant-form .ant-form-item .ant-form-item-control-input-content input {
140
+ height: 100%;
141
+ border: none;
142
+ }
143
+ .ant-form .ant-form-item .ant-input-number-disabled {
144
+ height: 100%;
145
+ border: none;
146
+ }
147
+ .ant-form .ant-form-item .ant-input-affix-wrapper {
148
+ height: 100%;
149
+ border: none;
150
+ }
151
+ .ant-form .ant-form-item .ant-checkbox input {
152
+ display: none;
153
+ }
154
+ .ant-form .ant-form-item .vtx-multi-select {
155
+ height: 100%;
156
+ }
157
+ .ant-form .ant-form-item .vtx-multi-select .ant-select {
158
+ height: 100%;
159
+ }
160
+ .ant-form .ant-form-item .vtx-multi-select .ant-select .ant-select-selector {
161
+ height: 100%;
162
+ }
163
+ .ant-form .ant-form-item .vtx-multi-select .ant-select-selector {
164
+ border: none;
165
+ border-right: 1px solid #e5e9f2;
166
+ }
167
+ .ant-form .ant-form-item .vtx-multi-select .ant-btn {
168
+ height: 100%;
169
+ border: none;
170
+ }
171
+ .ant-form .ant-form-item .vtx-input-textarea {
172
+ width: 100%;
173
+ height: 100%;
174
+ }
175
+ .ant-form .ant-form-item input {
176
+ padding-left: 0;
177
+ min-height: 56px;
178
+ }
179
+ .ant-form .ant-form-item textarea,
180
+ .ant-form .ant-form-item .ant-select,
181
+ .ant-form .ant-form-item .ant-input-number,
182
+ .ant-form .ant-form-item .ant-picker {
183
+ height: 100%;
184
+ border: none;
185
+ }
186
+ .ant-form .ant-form-item textarea .ant-input-number-input-wrap,
187
+ .ant-form .ant-form-item .ant-select .ant-input-number-input-wrap,
188
+ .ant-form .ant-form-item .ant-input-number .ant-input-number-input-wrap,
189
+ .ant-form .ant-form-item .ant-picker .ant-input-number-input-wrap {
190
+ height: 100%;
191
+ }
192
+ .ant-form .ant-form-item .ant-select {
193
+ display: -webkit-box;
194
+ display: -ms-flexbox;
195
+ display: flex;
196
+ -webkit-box-align: center;
197
+ -ms-flex-align: center;
198
+ align-items: center;
199
+ }
200
+ .ant-form .ant-form-item .ant-select .ant-select-selector {
201
+ height: 100%;
202
+ width: 100%;
203
+ border: none;
204
+ }
205
+ .ant-form .ant-form-item .ant-select .ant-select-selector input {
206
+ height: 100%;
207
+ overflow: visible;
208
+ }
209
+ .ant-form .ant-form-item .ant-select .ant-select-selection-placeholder,
210
+ .ant-form .ant-form-item .ant-select .ant-select-selection-item {
211
+ height: 100%;
212
+ display: -webkit-box;
213
+ display: -ms-flexbox;
214
+ display: flex;
215
+ -webkit-box-align: center;
216
+ -ms-flex-align: center;
217
+ align-items: center;
218
+ }
219
+ .ant-form .ant-form-item .ant-upload-picture-card-wrapper {
220
+ padding-top: 10px;
221
+ }
222
+ .ant-form .ant-row {
223
+ width: 100%;
224
+ }
225
+ .ant-form .vtx-form-pane-title {
226
+ padding-left: 24px;
227
+ margin-bottom: 0;
228
+ padding-bottom: 24px;
229
+ border-right: 1px solid #e5e9f2;
230
+ }
231
+ .ant-form .ant-col:not(.ant-col-8):not(.ant-col-12):not(.ant-col-24):not(.ant-col-4).ant-form-item-label {
232
+ width: 150px;
233
+ }
234
+ .ant-form .text-node {
235
+ -webkit-box-sizing: border-box;
236
+ box-sizing: border-box;
237
+ padding-left: 10px;
238
+ }
239
+ .ant-form .ant-col:not(:nth-child(1)) .ant-row .ant-col.vtx-form-item-col {
240
+ border-top: none;
241
+ }
242
+ .ant-form .ant-form-item-with-help {
243
+ margin-bottom: 0 !important;
244
+ }
245
+ .ant-tabs-nav-wrap {
246
+ background: #f7f8fa;
247
+ height: 42px;
248
+ }
249
+ .ant-tabs-nav-wrap .ant-tabs-tab-active {
250
+ background: #fff;
251
+ }
252
+ .ant-tabs-nav-wrap .ant-tabs-tab {
253
+ height: 42px;
254
+ padding-left: 18px !important;
255
+ padding-right: 18px !important;
256
+ margin-left: 0;
257
+ }
258
+ .ant-tabs-nav-wrap .ant-tabs-ink-bar.ant-tabs-ink-bar-animated {
259
+ top: 0;
260
+ }
package/lib/global.less CHANGED
@@ -1,5 +1,270 @@
1
+ @import "./va.less";
2
+
1
3
  .__dumi-default-mobile-demo-layout {
2
4
  padding: 0;
3
5
  }
6
+
4
7
  .__dumi-default-previewer-demo {
5
8
  }
9
+
10
+ .ant-form {
11
+ padding: 0;
12
+ position: relative;
13
+ &::after {
14
+ content: '';
15
+ position: absolute;
16
+ right: 0;
17
+ top: 0;
18
+ bottom: 0;
19
+ width: 1px;
20
+ background: @border-color;
21
+ }
22
+ .vtx-form-layout {
23
+ > .vtx-form-layout {
24
+ border: none;
25
+ }
26
+ > .vtx-form-pane:nth-child(1) {
27
+ border-top: 1px solid @border-color;
28
+ .vtx-form-pane-title {
29
+ padding-top: 16px;
30
+ }
31
+ }
32
+ position: relative;
33
+ padding: 0;
34
+ border-left: 1px solid @border-color;
35
+ border-bottom: 1px solid @border-color;
36
+ .vtx-form-item-col {
37
+ position: relative;
38
+ z-index: 9;
39
+ margin-bottom: 0;
40
+ //border-bottom: 1px solid @border-color;
41
+ border-right: 1px solid @border-color;
42
+ border-top: 1px solid @border-color;
43
+ min-height: 60px;
44
+ .ant-select-focused,
45
+ .ant-input-number-focused,
46
+ .ant-input-affix-wrapper,
47
+ input:focus,
48
+ textarea:focus {
49
+ outline: none;
50
+ position: relative;
51
+ z-index: 199;
52
+ //width: calc(~'100% - 1px');
53
+ height: calc(~'100% - 1px');
54
+ }
55
+ }
56
+ .ant-col-8, .ant-col-12, .ant-col-24 {
57
+ &.vtx-form-item-col {
58
+ border-bottom: 1px solid @border-color;
59
+ margin-bottom: -1px;
60
+ }
61
+ }
62
+ .vtx-form-card {
63
+ border: none;
64
+ }
65
+ .vtx-form-pane {
66
+ .ant-divider {
67
+ height: 0;
68
+ border: none;
69
+ }
70
+ }
71
+ .vtx-form-pane-content {
72
+ //border-left: 1px solid @border-color;
73
+ }
74
+ .ant-card:not(:nth-last-child(1)) {
75
+ .vtx-form-card-content {
76
+ border-bottom: 1px solid @border-color;
77
+ }
78
+ }
79
+ .vtx-form-card-content {
80
+ padding: 20px 0 0 0;
81
+ }
82
+ .ant-card.vtx-form-card {
83
+ border-bottom: none;
84
+ }
85
+ .ant-tabs-tabpane {
86
+ .ant-divider {
87
+ height: 0;
88
+ border: none;
89
+ }
90
+ }
91
+ .ant-card-head {
92
+ background: @normal-item-bg-color;
93
+ .ant-card-head-title {
94
+ font-weight: normal;
95
+ color: @text-color;
96
+ }
97
+ .ant-card-extra {
98
+ span {
99
+ color: @middle-font-color;
100
+ }
101
+ }
102
+ }
103
+ }
104
+ .ant-form-item {
105
+ height: 100%;
106
+ margin-bottom: 0 !important;
107
+ margin-right: 0;
108
+ .ant-form-item-row {
109
+ height: 100%;
110
+ align-items: center;
111
+ .ant-form-item-control {
112
+ height: 100%;
113
+ background: @bg-color;
114
+ > *:only-child {
115
+ height: 100%;
116
+ }
117
+ .ant-form-item-control-input {
118
+ height: 100%;
119
+ }
120
+ .ant-form-item-explain {
121
+ position: absolute;
122
+ bottom: 0;
123
+ left: 5px;
124
+ right: 0;
125
+ }
126
+ }
127
+ }
128
+ .ant-form-item-label {
129
+ background: @normal-item-bg-color;
130
+ height: 100%;
131
+ min-height: 58px;
132
+ display: flex;
133
+ align-items: center;
134
+ justify-content: flex-end;
135
+ }
136
+ // 各个表单样式控制
137
+ .ant-form-item-control-input-content {
138
+ > *:nth-child(1):not(.ant-select):not(.vtx-multi-select):not(.vtx-select):not(.vtx-input-textarea) {
139
+ padding-left: 10px;
140
+ }
141
+ height: 100%;
142
+ display: flex;
143
+ align-items: center;
144
+ input {
145
+ height: 100%;
146
+ border: none;
147
+ }
148
+ }
149
+ .ant-input-number-disabled {
150
+ height: 100%;
151
+ border: none;
152
+ }
153
+ .ant-input-affix-wrapper {
154
+ height: 100%;
155
+ border: none;
156
+ }
157
+ .ant-checkbox {
158
+ input {
159
+ display: none;
160
+ }
161
+ }
162
+ .vtx-multi-select {
163
+ height: 100%;
164
+ .ant-select {
165
+ height: 100%;
166
+ .ant-select-selector {
167
+ height: 100%;
168
+ }
169
+ }
170
+ .ant-select-selector {
171
+ border: none;
172
+ border-right: 1px solid @border-color;
173
+ }
174
+ .ant-btn {
175
+ height: 100%;
176
+ border: none;
177
+ }
178
+ }
179
+ .vtx-input-textarea {
180
+ width: 100%;
181
+ height: 100%;
182
+ }
183
+ input {
184
+ padding-left: 0;
185
+ min-height: 56px;
186
+ }
187
+ textarea,
188
+ .ant-select,
189
+ .ant-input-number,
190
+ .ant-picker {
191
+ height: 100%;
192
+ border: none;
193
+ .ant-input-number-input-wrap {
194
+ height: 100%;
195
+ }
196
+ }
197
+ .ant-select {
198
+ display: flex;
199
+ align-items: center;
200
+ .ant-select-selector {
201
+ //height: calc(~'100% - 1px');
202
+ height: 100%;
203
+ width: 100%;
204
+ border: none;
205
+ input {
206
+ height: 100%;
207
+ overflow: visible;
208
+ }
209
+ }
210
+ .ant-select-selection-placeholder, .ant-select-selection-item {
211
+ height: 100%;
212
+ display: flex;
213
+ align-items: center;
214
+ }
215
+ }
216
+ .ant-upload-picture-card-wrapper {
217
+ padding-top: 10px;
218
+ }
219
+ }
220
+ .ant-row {
221
+ width: 100%;
222
+ }
223
+ .vtx-form-pane-title {
224
+ padding-left: 24px;
225
+ margin-bottom: 0;
226
+ padding-bottom: 24px;
227
+ border-right: 1px solid @border-color;
228
+ }
229
+ .ant-col:not(.ant-col-8):not(.ant-col-12):not(.ant-col-24):not(.ant-col-4) {
230
+ &.ant-form-item-label {
231
+ width: 150px;
232
+ }
233
+ }
234
+ .text-node {
235
+ box-sizing: border-box;
236
+ padding-left: 10px;
237
+ }
238
+ .ant-col:not(:nth-child(1)) {
239
+ .ant-row {
240
+ .ant-col.vtx-form-item-col {
241
+ border-top: none;
242
+ }
243
+ }
244
+ }
245
+ .ant-form-item-with-help {
246
+ margin-bottom: 0 !important;
247
+ }
248
+ //.ant-col{
249
+ // max-height: 62px ;
250
+ // overflow: hidden;
251
+ //}
252
+ }
253
+
254
+ .ant-tabs-nav-wrap {
255
+ background: @table-header-bg;
256
+ height: 42px;
257
+ .ant-tabs-tab-active {
258
+ background: #fff;
259
+ }
260
+ .ant-tabs-tab {
261
+ height: 42px;
262
+ padding-left: 18px !important;
263
+ padding-right: 18px !important;
264
+ margin-left: 0;
265
+ }
266
+ .ant-tabs-ink-bar.ant-tabs-ink-bar-animated {
267
+ top: 0;
268
+ }
269
+ }
270
+
@@ -45,6 +45,12 @@
45
45
  -ms-transform: rotate(180deg);
46
46
  transform: rotate(180deg);
47
47
  }
48
+ .env-template .ant-pagination-item-active {
49
+ background: #1890ff;
50
+ }
51
+ .env-template .ant-pagination-item-active a {
52
+ color: #fff;
53
+ }
48
54
  .env-template-table-wrap {
49
55
  height: 100%;
50
56
  display: -webkit-box;
@@ -1,3 +1,9 @@
1
+ .env-template .ant-pagination-item-active {
2
+ background: #1890ff;
3
+ }
4
+ .env-template .ant-pagination-item-active a {
5
+ color: #fff;
6
+ }
1
7
  .env-template-table-wrap {
2
8
  height: 100%;
3
9
  display: -webkit-box;