funda-ui 4.7.161 → 4.7.171
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/Select/index.css +32 -4
- package/Select/index.d.ts +6 -12
- package/Select/index.js +199 -308
- package/lib/cjs/Select/index.d.ts +6 -12
- package/lib/cjs/Select/index.js +199 -308
- package/lib/css/Select/index.css +32 -4
- package/lib/esm/Select/index.scss +41 -4
- package/lib/esm/Select/index.tsx +192 -142
- package/package.json +1 -1
package/lib/css/Select/index.css
CHANGED
|
@@ -9,6 +9,8 @@
|
|
|
9
9
|
--cus-sel-control-wrapper-bg: #fff;
|
|
10
10
|
--cus-sel-control-wrapper-border-color: #dee2e6;
|
|
11
11
|
--cus-sel-control-list-bg: #efefef;
|
|
12
|
+
--cus-sel-clear-fill: #a5a5a5;
|
|
13
|
+
--cus-sel-clear-hover-fill: #000;
|
|
12
14
|
--cus-sel-arrow-fill: #a5a5a5;
|
|
13
15
|
--cus-sel-searchbtn-fill: #a5a5a5;
|
|
14
16
|
--cus-sel-searchbtn-hover-fill: #333;
|
|
@@ -17,7 +19,8 @@
|
|
|
17
19
|
position: relative; /* Required */
|
|
18
20
|
/*------ Placeholder for input ------*/
|
|
19
21
|
/*------ Arrow ------*/
|
|
20
|
-
/*------
|
|
22
|
+
/*------ Clear Icon ------*/
|
|
23
|
+
/*------ Clear Trigger ------*/
|
|
21
24
|
/*------ Input ------*/
|
|
22
25
|
/*------ Arrow ------*/
|
|
23
26
|
/*------ Blinking cursor ------*/
|
|
@@ -33,7 +36,32 @@
|
|
|
33
36
|
.custom-select__wrapper .arrow svg .arrow-fill-g {
|
|
34
37
|
fill: var(--cus-sel-arrow-fill);
|
|
35
38
|
}
|
|
36
|
-
.custom-select__wrapper .
|
|
39
|
+
.custom-select__wrapper .custom-select-clear-icon {
|
|
40
|
+
position: absolute;
|
|
41
|
+
top: 50%;
|
|
42
|
+
transform: rotate(0deg) translateY(-50%);
|
|
43
|
+
transform-origin: top;
|
|
44
|
+
right: 1.5rem;
|
|
45
|
+
z-index: 2;
|
|
46
|
+
pointer-events: all;
|
|
47
|
+
}
|
|
48
|
+
.custom-select__wrapper .custom-select-clear-icon button {
|
|
49
|
+
border: none;
|
|
50
|
+
box-shadow: none;
|
|
51
|
+
margin: 0;
|
|
52
|
+
padding: 0;
|
|
53
|
+
background: none;
|
|
54
|
+
}
|
|
55
|
+
.custom-select__wrapper .custom-select-clear-icon.pos-offset {
|
|
56
|
+
right: 2.25rem;
|
|
57
|
+
}
|
|
58
|
+
.custom-select__wrapper .custom-select-clear-icon svg path {
|
|
59
|
+
fill: var(--cus-sel-clear-fill);
|
|
60
|
+
}
|
|
61
|
+
.custom-select__wrapper .custom-select-clear-icon:hover svg path {
|
|
62
|
+
fill: var(--cus-sel-clear-hover-fill);
|
|
63
|
+
}
|
|
64
|
+
.custom-select__wrapper .clear svg .clear-fill-g {
|
|
37
65
|
fill: var(--cus-sel-arrow-fill);
|
|
38
66
|
}
|
|
39
67
|
.custom-select__wrapper [data-select]:focus {
|
|
@@ -392,10 +420,10 @@
|
|
|
392
420
|
font-size: 0.75rem;
|
|
393
421
|
padding: 0.1rem 0.5rem;
|
|
394
422
|
}
|
|
395
|
-
.custom-select__options-wrapper .custom-select-multi__control-option-item--
|
|
423
|
+
.custom-select__options-wrapper .custom-select-multi__control-option-item--clear.hide {
|
|
396
424
|
display: none !important;
|
|
397
425
|
}
|
|
398
|
-
.custom-select__options-wrapper .custom-select-multi__control-option-item--
|
|
426
|
+
.custom-select__options-wrapper .custom-select-multi__control-option-item--clear .btn {
|
|
399
427
|
font-size: 0.75rem;
|
|
400
428
|
padding: 0.1rem 0.5rem;
|
|
401
429
|
}
|
|
@@ -11,6 +11,8 @@
|
|
|
11
11
|
--cus-sel-control-wrapper-bg: #fff;
|
|
12
12
|
--cus-sel-control-wrapper-border-color: #dee2e6;
|
|
13
13
|
--cus-sel-control-list-bg: #efefef;
|
|
14
|
+
--cus-sel-clear-fill: #a5a5a5;
|
|
15
|
+
--cus-sel-clear-hover-fill: #000;
|
|
14
16
|
--cus-sel-arrow-fill: #a5a5a5;
|
|
15
17
|
--cus-sel-searchbtn-fill: #a5a5a5;
|
|
16
18
|
--cus-sel-searchbtn-hover-fill: #333;
|
|
@@ -35,9 +37,44 @@
|
|
|
35
37
|
fill: var(--cus-sel-arrow-fill);
|
|
36
38
|
}
|
|
37
39
|
}
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
40
|
+
|
|
41
|
+
/*------ Clear Icon ------*/
|
|
42
|
+
.custom-select-clear-icon {
|
|
43
|
+
position: absolute;
|
|
44
|
+
top: 50%;
|
|
45
|
+
transform: rotate(0deg) translateY(-50%);
|
|
46
|
+
transform-origin: top;
|
|
47
|
+
right: 1.5rem;
|
|
48
|
+
z-index: 2;
|
|
49
|
+
pointer-events: all;
|
|
50
|
+
|
|
51
|
+
button {
|
|
52
|
+
border: none;
|
|
53
|
+
box-shadow: none;
|
|
54
|
+
margin: 0;
|
|
55
|
+
padding: 0;
|
|
56
|
+
background: none;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
&.pos-offset {
|
|
61
|
+
right: 2.25rem;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
svg path {
|
|
65
|
+
fill: var(--cus-sel-clear-fill);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&:hover {
|
|
69
|
+
svg path {
|
|
70
|
+
fill: var(--cus-sel-clear-hover-fill);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/*------ Clear Trigger ------*/
|
|
76
|
+
.clear {
|
|
77
|
+
svg .clear-fill-g {
|
|
41
78
|
fill: var(--cus-sel-arrow-fill);
|
|
42
79
|
}
|
|
43
80
|
}
|
|
@@ -576,7 +613,7 @@
|
|
|
576
613
|
}
|
|
577
614
|
|
|
578
615
|
/*------ Extended buttons of Single selection ------*/
|
|
579
|
-
.custom-select-multi__control-option-item--
|
|
616
|
+
.custom-select-multi__control-option-item--clear {
|
|
580
617
|
|
|
581
618
|
&.hide {
|
|
582
619
|
display: none !important;
|