@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 .ald-color-picker-slider-group {
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 .ald-color-picker-format-select {
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;