iov-design 2.15.23 → 2.15.25
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.
- package/lib/cascader-panel.js +2 -2
- package/lib/cascader.js +45 -16
- package/lib/index.js +1 -1
- package/lib/iov-design.common.js +61 -40
- package/lib/select.js +12 -20
- package/lib/tag.js +1 -1
- package/lib/theme-chalk/autocomplete.css +1 -1
- package/lib/theme-chalk/cascader-panel.css +1 -1
- package/lib/theme-chalk/cascader.css +1 -1
- package/lib/theme-chalk/date-picker.css +1 -1
- package/lib/theme-chalk/index.css +1 -1
- package/lib/theme-chalk/input-number.css +1 -1
- package/lib/theme-chalk/input.css +1 -1
- package/lib/theme-chalk/message-box.css +1 -1
- package/lib/theme-chalk/pagination.css +1 -1
- package/lib/theme-chalk/select.css +1 -1
- package/lib/theme-chalk/slider.css +1 -1
- package/lib/theme-chalk/table-column.css +1 -1
- package/lib/theme-chalk/table.css +1 -1
- package/lib/theme-chalk/tag.css +1 -1
- package/lib/theme-chalk/time-picker.css +1 -1
- package/lib/theme-chalk/transfer.css +1 -1
- package/package.json +1 -1
- package/packages/cascader/src/cascader.vue +31 -13
- package/packages/cascader-panel/src/cascader-node.vue +2 -2
- package/packages/select/src/select.vue +12 -20
- package/packages/tag/src/tag.vue +1 -1
- package/packages/theme-chalk/src/cascader-panel.scss +31 -18
- package/packages/theme-chalk/src/cascader.scss +50 -20
- package/packages/theme-chalk/src/common/var.scss +8 -11
- package/packages/theme-chalk/src/input.scss +7 -4
- package/packages/theme-chalk/src/select.scss +20 -19
- package/packages/theme-chalk/src/tag.scss +4 -4
- package/src/index.js +1 -1
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
@import "./cascader-panel";
|
|
7
7
|
|
|
8
8
|
@include b(cascader) {
|
|
9
|
-
display:
|
|
9
|
+
display: block;
|
|
10
10
|
position: relative;
|
|
11
|
-
font-size: $--font-size
|
|
11
|
+
font-size: $--input-font-size;
|
|
12
12
|
line-height: $--input-height;
|
|
13
13
|
|
|
14
14
|
&:not(.is-disabled):hover {
|
|
@@ -21,6 +21,9 @@
|
|
|
21
21
|
.el-input {
|
|
22
22
|
cursor: pointer;
|
|
23
23
|
|
|
24
|
+
.el-input__suffix {
|
|
25
|
+
right: 8px;
|
|
26
|
+
}
|
|
24
27
|
.el-input__inner {
|
|
25
28
|
text-overflow: ellipsis;
|
|
26
29
|
|
|
@@ -29,12 +32,15 @@
|
|
|
29
32
|
}
|
|
30
33
|
}
|
|
31
34
|
|
|
32
|
-
.
|
|
35
|
+
.iov-icon-arrow-up {
|
|
36
|
+
padding-right: 0;
|
|
37
|
+
color: $--select-input-color;
|
|
38
|
+
font-size: $--select-icon-size;
|
|
33
39
|
transition: transform .3s;
|
|
34
|
-
|
|
40
|
+
transform: rotateZ(180deg);
|
|
35
41
|
|
|
36
42
|
@include when(reverse) {
|
|
37
|
-
transform: rotateZ(
|
|
43
|
+
transform: rotateZ(0deg);
|
|
38
44
|
}
|
|
39
45
|
}
|
|
40
46
|
|
|
@@ -49,19 +55,36 @@
|
|
|
49
55
|
}
|
|
50
56
|
}
|
|
51
57
|
|
|
58
|
+
.el-tag {
|
|
59
|
+
height: $--input-height - 8px;
|
|
60
|
+
line-height: $--input-height - 8px;
|
|
61
|
+
}
|
|
62
|
+
|
|
52
63
|
@include m(medium) {
|
|
53
64
|
font-size: $--input-medium-font-size;
|
|
54
65
|
line-height: $--input-medium-height;
|
|
66
|
+
.el-tag--medium {
|
|
67
|
+
height: $--input-medium-height - 8px;
|
|
68
|
+
line-height: $--input-medium-height - 8px;
|
|
69
|
+
}
|
|
55
70
|
}
|
|
56
71
|
|
|
57
72
|
@include m(small) {
|
|
58
73
|
font-size: $--input-small-font-size;
|
|
59
74
|
line-height: $--input-small-height;
|
|
75
|
+
.el-tag--small {
|
|
76
|
+
height: $--input-small-height - 8px;
|
|
77
|
+
line-height: $--input-small-height - 8px;
|
|
78
|
+
}
|
|
60
79
|
}
|
|
61
80
|
|
|
62
81
|
@include m(mini) {
|
|
63
82
|
font-size: $--input-mini-font-size;
|
|
64
83
|
line-height: $--input-mini-height;
|
|
84
|
+
.el-tag--mini {
|
|
85
|
+
height: $--input-mini-height - 8px;
|
|
86
|
+
line-height: $--input-mini-height - 8px;
|
|
87
|
+
}
|
|
65
88
|
}
|
|
66
89
|
|
|
67
90
|
@include when(disabled) {
|
|
@@ -72,12 +95,15 @@
|
|
|
72
95
|
}
|
|
73
96
|
|
|
74
97
|
@include e(dropdown) {
|
|
75
|
-
margin:
|
|
98
|
+
margin: 4px 0;
|
|
76
99
|
font-size: $--cascader-menu-font-size;
|
|
77
100
|
background: $--cascader-menu-fill;
|
|
78
101
|
border: $--cascader-menu-border;
|
|
79
102
|
border-radius: $--cascader-menu-radius;
|
|
80
103
|
box-shadow: $--cascader-menu-shadow;
|
|
104
|
+
.popper__arrow {
|
|
105
|
+
display: none;
|
|
106
|
+
}
|
|
81
107
|
}
|
|
82
108
|
|
|
83
109
|
@include e(tags) {
|
|
@@ -91,6 +117,8 @@
|
|
|
91
117
|
line-height: normal;
|
|
92
118
|
text-align: left;
|
|
93
119
|
box-sizing: border-box;
|
|
120
|
+
z-index: 3;
|
|
121
|
+
pointer-events: none;
|
|
94
122
|
|
|
95
123
|
.el-tag {
|
|
96
124
|
display: inline-flex;
|
|
@@ -98,7 +126,13 @@
|
|
|
98
126
|
max-width: 100%;
|
|
99
127
|
margin: 2px 0 2px 6px;
|
|
100
128
|
text-overflow: ellipsis;
|
|
101
|
-
|
|
129
|
+
color: $--color-text-6;
|
|
130
|
+
pointer-events: auto;
|
|
131
|
+
|
|
132
|
+
&.is-disabled {
|
|
133
|
+
color: $--color-text-3;
|
|
134
|
+
background: $--color-fill-3;
|
|
135
|
+
}
|
|
102
136
|
|
|
103
137
|
&:not(.is-hit) {
|
|
104
138
|
border-color: transparent;
|
|
@@ -110,14 +144,8 @@
|
|
|
110
144
|
text-overflow: ellipsis;
|
|
111
145
|
}
|
|
112
146
|
|
|
113
|
-
.
|
|
147
|
+
.iov-icon-close {
|
|
114
148
|
flex: none;
|
|
115
|
-
background-color: $--color-text-placeholder;
|
|
116
|
-
color: $--color-white;
|
|
117
|
-
|
|
118
|
-
&:hover {
|
|
119
|
-
background-color: $--color-text-secondary;
|
|
120
|
-
}
|
|
121
149
|
}
|
|
122
150
|
}
|
|
123
151
|
}
|
|
@@ -129,7 +157,7 @@
|
|
|
129
157
|
@include e(suggestion-list) {
|
|
130
158
|
max-height: 204px;
|
|
131
159
|
margin: 0;
|
|
132
|
-
padding:
|
|
160
|
+
padding: 4px;
|
|
133
161
|
font-size: $--font-size-base;
|
|
134
162
|
color: $--cascader-menu-font-color;
|
|
135
163
|
text-align: center;
|
|
@@ -139,11 +167,12 @@
|
|
|
139
167
|
display: flex;
|
|
140
168
|
justify-content: space-between;
|
|
141
169
|
align-items: center;
|
|
142
|
-
height:
|
|
143
|
-
padding: 0
|
|
170
|
+
height: 32px;
|
|
171
|
+
padding: 0 12px;
|
|
144
172
|
text-align: left;
|
|
145
173
|
outline: none;
|
|
146
174
|
cursor: pointer;
|
|
175
|
+
border-radius: 2px;
|
|
147
176
|
|
|
148
177
|
&:hover, &:focus {
|
|
149
178
|
background: $--cascader-node-background-hover;
|
|
@@ -151,7 +180,8 @@
|
|
|
151
180
|
|
|
152
181
|
&.is-checked {
|
|
153
182
|
color: $--cascader-menu-selected-font-color;
|
|
154
|
-
font-weight:
|
|
183
|
+
font-weight: 500;
|
|
184
|
+
background: $--color-primary-1;
|
|
155
185
|
}
|
|
156
186
|
|
|
157
187
|
> span {
|
|
@@ -160,7 +190,7 @@
|
|
|
160
190
|
}
|
|
161
191
|
|
|
162
192
|
@include e(empty-text) {
|
|
163
|
-
margin:
|
|
193
|
+
margin: 8px 0;
|
|
164
194
|
color: $--cascader-color-empty;
|
|
165
195
|
}
|
|
166
196
|
|
|
@@ -168,7 +198,7 @@
|
|
|
168
198
|
flex: 1;
|
|
169
199
|
height: 24px;
|
|
170
200
|
min-width: 60px;
|
|
171
|
-
margin: 2px 0 2px
|
|
201
|
+
margin: 2px 0 2px 12px;
|
|
172
202
|
padding: 0;
|
|
173
203
|
color: $--cascader-menu-font-color;
|
|
174
204
|
border: none;
|
|
@@ -413,19 +413,16 @@ $--input-mini-height: 26px !default;
|
|
|
413
413
|
|
|
414
414
|
/* Cascader
|
|
415
415
|
-------------------------- */
|
|
416
|
-
|
|
417
|
-
$--cascader-menu-font-color: $--color-text-
|
|
418
|
-
/// color||Color|0
|
|
419
|
-
$--cascader-menu-selected-font-color: $--color-primary !default;
|
|
416
|
+
$--cascader-menu-font-color: $--color-text-6 !default;
|
|
417
|
+
$--cascader-menu-selected-font-color: $--color-text-6 !default;
|
|
420
418
|
$--cascader-menu-fill: $--fill-base !default;
|
|
421
|
-
$--cascader-menu-font-size: $--font-size-
|
|
419
|
+
$--cascader-menu-font-size: $--font-size-small !default;
|
|
422
420
|
$--cascader-menu-radius: $--border-radius-base !default;
|
|
423
|
-
$--cascader-menu-border: solid 1px $--
|
|
424
|
-
$--cascader-menu-shadow:
|
|
425
|
-
$--cascader-node-background-hover: $--
|
|
426
|
-
$--cascader-node-color-disabled
|
|
427
|
-
$--cascader-color-empty
|
|
428
|
-
$--cascader-tag-background: #f0f2f5;
|
|
421
|
+
$--cascader-menu-border: solid 1px $--color-line-2 !default;
|
|
422
|
+
$--cascader-menu-shadow: 0px 2px 8px 0px rgba(73, 75, 83, 0.12) !default;
|
|
423
|
+
$--cascader-node-background-hover: $--color-fill-1 !default;
|
|
424
|
+
$--cascader-node-color-disabled: $--color-text-2 !default;
|
|
425
|
+
$--cascader-color-empty: $--color-text-placeholder !default;
|
|
429
426
|
|
|
430
427
|
/* Group
|
|
431
428
|
-------------------------- */
|
|
@@ -157,7 +157,13 @@
|
|
|
157
157
|
box-shadow: $--input-box-shadow;
|
|
158
158
|
}
|
|
159
159
|
}
|
|
160
|
-
|
|
160
|
+
@include e((prefix, suffix)) {
|
|
161
|
+
.el-input__icon {
|
|
162
|
+
line-height: $--input-height - 2px;
|
|
163
|
+
display: flex;
|
|
164
|
+
align-items: center;
|
|
165
|
+
}
|
|
166
|
+
}
|
|
161
167
|
@include e(suffix) {
|
|
162
168
|
padding-left: 8px;
|
|
163
169
|
position: absolute;
|
|
@@ -434,9 +440,6 @@
|
|
|
434
440
|
&.is-disabled {
|
|
435
441
|
background-color: $--input-disabled-fill;
|
|
436
442
|
}
|
|
437
|
-
.el-input__icon {
|
|
438
|
-
line-height: $--input-height - 2px;
|
|
439
|
-
}
|
|
440
443
|
.el-input__inner,
|
|
441
444
|
&:focus {
|
|
442
445
|
margin: 0 auto;
|
|
@@ -144,23 +144,6 @@
|
|
|
144
144
|
text-overflow: ellipsis;
|
|
145
145
|
}
|
|
146
146
|
|
|
147
|
-
@include m(large) {
|
|
148
|
-
.el-tag--medium {
|
|
149
|
-
height: 28px;
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
@include m(medium) {
|
|
153
|
-
.el-tag--small {
|
|
154
|
-
height: 24px;
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
@include m(mini) {
|
|
158
|
-
.el-tag--mini {
|
|
159
|
-
height: 18px;
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
|
|
164
147
|
&.is-disabled {
|
|
165
148
|
.el-tag {
|
|
166
149
|
&.el-tag--info {
|
|
@@ -178,13 +161,31 @@
|
|
|
178
161
|
max-width: 100%;
|
|
179
162
|
align-items: center;
|
|
180
163
|
pointer-events: auto;
|
|
164
|
+
height: $--input-height - 8px;
|
|
165
|
+
line-height: $--input-height - 8px;
|
|
181
166
|
&.el-tag--info {
|
|
182
167
|
background: $--color-fill-2;
|
|
183
168
|
color: $--color-text-6;
|
|
184
169
|
border: 0 none;
|
|
185
170
|
}
|
|
186
|
-
|
|
187
|
-
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
@include m(medium) {
|
|
174
|
+
.el-tag--medium {
|
|
175
|
+
height: $--input-medium-height - 8px;
|
|
176
|
+
line-height: $--input-medium-height - 8px;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
@include m(small) {
|
|
180
|
+
.el-tag--small {
|
|
181
|
+
height: $--input-small-height - 8px;
|
|
182
|
+
line-height: $--input-small-height - 8px;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
@include m(mini) {
|
|
186
|
+
.el-tag--mini {
|
|
187
|
+
height: $--input-mini-height - 8px;
|
|
188
|
+
line-height: $--input-mini-height - 8px;
|
|
188
189
|
}
|
|
189
190
|
}
|
|
190
191
|
}
|
|
@@ -247,7 +247,7 @@
|
|
|
247
247
|
font-size: 16px;
|
|
248
248
|
}
|
|
249
249
|
|
|
250
|
-
.
|
|
250
|
+
.iov-icon-close {
|
|
251
251
|
margin-left: 4px;
|
|
252
252
|
border-radius: 50%;
|
|
253
253
|
text-align: center;
|
|
@@ -293,7 +293,7 @@
|
|
|
293
293
|
.el-tag-icon {
|
|
294
294
|
font-size: 16px;
|
|
295
295
|
}
|
|
296
|
-
.
|
|
296
|
+
.iov-icon-close {
|
|
297
297
|
font-size: 12px;
|
|
298
298
|
}
|
|
299
299
|
}
|
|
@@ -308,7 +308,7 @@
|
|
|
308
308
|
font-size: 12px;
|
|
309
309
|
}
|
|
310
310
|
|
|
311
|
-
.
|
|
311
|
+
.iov-icon-close {
|
|
312
312
|
font-size: 10px;
|
|
313
313
|
}
|
|
314
314
|
}
|
|
@@ -323,7 +323,7 @@
|
|
|
323
323
|
font-size: 12px;
|
|
324
324
|
}
|
|
325
325
|
|
|
326
|
-
.
|
|
326
|
+
.iov-icon-close {
|
|
327
327
|
font-size: 10px;
|
|
328
328
|
}
|
|
329
329
|
}
|