@aloudata/aloudata-design 2.15.10 → 2.15.11
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.
|
@@ -15,7 +15,7 @@ import useColor from "../hooks/useColor";
|
|
|
15
15
|
import { genAlphaColor, generateColor, getColorAlpha } from "../util";
|
|
16
16
|
import Dropdown from "../../Dropdown";
|
|
17
17
|
import classNames from 'classnames';
|
|
18
|
-
var prefixCls = 'ald-color-picker';
|
|
18
|
+
var prefixCls = 'ald-color-picker-complex';
|
|
19
19
|
export default function ColorPicker(props) {
|
|
20
20
|
var value = props.value,
|
|
21
21
|
onChange = props.onChange,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.ald-color-picker-wrapper {
|
|
1
|
+
.ald-color-picker-complex-wrapper {
|
|
2
2
|
position: relative;
|
|
3
3
|
width: 258px;
|
|
4
4
|
padding: 12px;
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
.ald-color-picker {
|
|
11
|
+
.ald-color-picker-complex {
|
|
12
12
|
position: absolute;
|
|
13
13
|
z-index: 1;
|
|
14
14
|
display: block;
|
|
@@ -17,42 +17,42 @@
|
|
|
17
17
|
visibility: visible;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
.ald-color-picker-hidden {
|
|
20
|
+
.ald-color-picker-complex-hidden {
|
|
21
21
|
display: none;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
.ald-color-picker-panel {
|
|
24
|
+
.ald-color-picker-complex-panel {
|
|
25
25
|
display: flex;
|
|
26
26
|
flex-direction: column;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
.ald-color-picker-panel-disabled {
|
|
29
|
+
.ald-color-picker-complex-panel-disabled {
|
|
30
30
|
cursor: not-allowed;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
.ald-color-picker-select {
|
|
33
|
+
.ald-color-picker-complex-select {
|
|
34
34
|
margin-bottom: 12px;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
.ald-color-picker-select .ald-color-picker-palette {
|
|
37
|
+
.ald-color-picker-complex-select .ald-color-picker-complex-palette {
|
|
38
38
|
min-height: 160px;
|
|
39
39
|
overflow: hidden;
|
|
40
40
|
border-radius: 4px;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
.ald-color-picker-select
|
|
44
|
-
.ald-color-picker-palette
|
|
45
|
-
> .ald-color-picker-gradient {
|
|
43
|
+
.ald-color-picker-complex-select
|
|
44
|
+
.ald-color-picker-complex-palette
|
|
45
|
+
> .ald-color-picker-complex-gradient {
|
|
46
46
|
border-top-left-radius: 5px;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
.ald-color-picker-saturation {
|
|
49
|
+
.ald-color-picker-complex-saturation {
|
|
50
50
|
position: absolute;
|
|
51
51
|
border-radius: inherit;
|
|
52
52
|
inset: 0;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
-
.ald-color-picker-handler {
|
|
55
|
+
.ald-color-picker-complex-handler {
|
|
56
56
|
box-sizing: border-box;
|
|
57
57
|
width: 16px;
|
|
58
58
|
height: 16px;
|
|
@@ -61,29 +61,29 @@
|
|
|
61
61
|
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.06);
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
.ald-color-picker-handler-sm {
|
|
64
|
+
.ald-color-picker-complex-handler-sm {
|
|
65
65
|
width: 12px;
|
|
66
66
|
height: 12px;
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
.ald-color-picker-slider {
|
|
69
|
+
.ald-color-picker-complex-slider {
|
|
70
70
|
width: 100%;
|
|
71
71
|
margin-bottom: 12px;
|
|
72
72
|
}
|
|
73
73
|
|
|
74
|
-
.ald-color-picker-slider .ald-color-picker-palette {
|
|
74
|
+
.ald-color-picker-complex-slider .ald-color-picker-complex-palette {
|
|
75
75
|
height: 8px;
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
-
.ald-color-picker-slider .ald-color-picker-gradient {
|
|
78
|
+
.ald-color-picker-complex-slider .ald-color-picker-complex-gradient {
|
|
79
79
|
border-radius: 4px;
|
|
80
80
|
}
|
|
81
81
|
|
|
82
|
-
.ald-color-picker-slider-alpha {
|
|
82
|
+
.ald-color-picker-complex-slider-alpha {
|
|
83
83
|
background: url('../alpha.svg');
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
-
.ald-color-picker-color-block {
|
|
86
|
+
.ald-color-picker-complex-color-block {
|
|
87
87
|
position: relative;
|
|
88
88
|
width: 28px;
|
|
89
89
|
height: 28px;
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
border-radius: 4px;
|
|
94
94
|
}
|
|
95
95
|
|
|
96
|
-
.ald-color-picker-color-block-inner {
|
|
96
|
+
.ald-color-picker-complex-color-block-inner {
|
|
97
97
|
box-sizing: border-box;
|
|
98
98
|
width: 100%;
|
|
99
99
|
height: 100%;
|
|
@@ -101,96 +101,98 @@
|
|
|
101
101
|
border-radius: 4px;
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
-
.ald-color-picker-slider-container {
|
|
104
|
+
.ald-color-picker-complex-slider-container {
|
|
105
105
|
display: flex;
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
-
.ald-color-picker-slider-container
|
|
108
|
+
.ald-color-picker-complex-slider-container
|
|
109
|
+
.ald-color-picker-complex-slider-group {
|
|
109
110
|
flex: 1;
|
|
110
111
|
}
|
|
111
112
|
|
|
112
|
-
.ald-color-picker-slider-container
|
|
113
|
-
.ald-color-picker-slider-group-disabled-alpha {
|
|
113
|
+
.ald-color-picker-complex-slider-container
|
|
114
|
+
.ald-color-picker-complex-slider-group-disabled-alpha {
|
|
114
115
|
display: flex;
|
|
115
116
|
align-items: center;
|
|
116
117
|
}
|
|
117
118
|
|
|
118
|
-
.ald-color-picker-slider-container
|
|
119
|
-
.ald-color-picker-slider-group-disabled-alpha
|
|
120
|
-
.ald-color-picker-slider {
|
|
119
|
+
.ald-color-picker-complex-slider-container
|
|
120
|
+
.ald-color-picker-complex-slider-group-disabled-alpha
|
|
121
|
+
.ald-color-picker-complex-slider {
|
|
121
122
|
margin-bottom: 0;
|
|
122
123
|
}
|
|
123
124
|
|
|
124
|
-
.ald-color-picker-input-container {
|
|
125
|
+
.ald-color-picker-complex-input-container {
|
|
125
126
|
display: flex;
|
|
126
127
|
align-items: center;
|
|
127
128
|
gap: 4px;
|
|
128
129
|
}
|
|
129
130
|
|
|
130
|
-
.ald-color-picker-input-container
|
|
131
|
+
.ald-color-picker-complex-input-container
|
|
132
|
+
.ald-color-picker-complex-format-select {
|
|
131
133
|
.ant-select-borderless .ant-select-selector {
|
|
132
134
|
padding: 0;
|
|
133
135
|
}
|
|
134
136
|
}
|
|
135
137
|
|
|
136
|
-
.ald-color-picker-input-container .ald-color-picker-input {
|
|
138
|
+
.ald-color-picker-complex-input-container .ald-color-picker-complex-input {
|
|
137
139
|
width: 0;
|
|
138
140
|
flex: 1;
|
|
139
141
|
|
|
140
|
-
.ald-color-picker-hsb-input,
|
|
141
|
-
.ald-color-picker-rgb-input {
|
|
142
|
+
.ald-color-picker-complex-hsb-input,
|
|
143
|
+
.ald-color-picker-complex-rgb-input {
|
|
142
144
|
display: flex;
|
|
143
145
|
align-items: center;
|
|
144
146
|
gap: 4px;
|
|
145
147
|
}
|
|
146
148
|
}
|
|
147
149
|
|
|
148
|
-
.ald-color-picker-input-container
|
|
149
|
-
.ald-color-picker-steppers.ald-color-picker-alpha-input {
|
|
150
|
+
.ald-color-picker-complex-input-container
|
|
151
|
+
.ald-color-picker-complex-steppers.ald-color-picker-complex-alpha-input {
|
|
150
152
|
width: 44px;
|
|
151
153
|
}
|
|
152
154
|
|
|
153
|
-
.ald-color-picker-trigger-wrapper {
|
|
155
|
+
.ald-color-picker-complex-trigger-wrapper {
|
|
154
156
|
display: inline-flex;
|
|
155
157
|
padding: 3px;
|
|
156
158
|
border: 1px solid #d1d5db;
|
|
157
159
|
background-color: #fff;
|
|
158
160
|
|
|
159
|
-
.ald-color-picker-trigger-inner {
|
|
161
|
+
.ald-color-picker-complex-trigger-inner {
|
|
160
162
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
161
163
|
}
|
|
162
164
|
}
|
|
163
165
|
|
|
164
|
-
.ald-color-picker-trigger-wrapper-small {
|
|
166
|
+
.ald-color-picker-complex-trigger-wrapper-small {
|
|
165
167
|
width: 28px;
|
|
166
168
|
height: 28px;
|
|
167
169
|
border-radius: 4px;
|
|
168
170
|
|
|
169
|
-
.ald-color-picker-trigger-inner {
|
|
171
|
+
.ald-color-picker-complex-trigger-inner {
|
|
170
172
|
width: 20px;
|
|
171
173
|
height: 20px;
|
|
172
174
|
border-radius: 2px;
|
|
173
175
|
}
|
|
174
176
|
}
|
|
175
177
|
|
|
176
|
-
.ald-color-picker-trigger-wrapper-middle {
|
|
178
|
+
.ald-color-picker-complex-trigger-wrapper-middle {
|
|
177
179
|
width: 32px;
|
|
178
180
|
height: 32px;
|
|
179
181
|
border-radius: 6px;
|
|
180
182
|
|
|
181
|
-
.ald-color-picker-trigger-inner {
|
|
183
|
+
.ald-color-picker-complex-trigger-inner {
|
|
182
184
|
width: 24px;
|
|
183
185
|
height: 24px;
|
|
184
186
|
border-radius: 3px;
|
|
185
187
|
}
|
|
186
188
|
}
|
|
187
189
|
|
|
188
|
-
.ald-color-picker-trigger-wrapper-large {
|
|
190
|
+
.ald-color-picker-complex-trigger-wrapper-large {
|
|
189
191
|
width: 36px;
|
|
190
192
|
height: 36px;
|
|
191
193
|
border-radius: 8px;
|
|
192
194
|
|
|
193
|
-
.ald-color-picker-trigger-inner {
|
|
195
|
+
.ald-color-picker-complex-trigger-inner {
|
|
194
196
|
width: 28px;
|
|
195
197
|
height: 28px;
|
|
196
198
|
border-radius: 4px;
|