ar-design 0.2.83 → 0.2.85
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/dist/assets/css/components/feedback/tooltip/styles.css +9 -12
- package/dist/assets/css/components/form/checkbox/checkbox.css +18 -0
- package/dist/assets/css/components/form/checkbox/core/border.css +198 -121
- package/dist/assets/css/components/form/radio/core/border.css +252 -0
- package/dist/assets/css/components/form/radio/radio.css +2 -2
- package/dist/assets/css/components/form/switch/styles.css +46 -32
- package/dist/assets/css/core/variants/filled.css +1 -1
- package/dist/assets/css/core/variants/outlined.css +11 -0
- package/dist/assets/css/core/variants/surface.css +11 -11
- package/dist/components/data-display/table/index.js +2 -2
- package/dist/components/feedback/popup/index.js +3 -3
- package/dist/components/feedback/tooltip/index.js +17 -20
- package/dist/components/form/checkbox/index.js +4 -4
- package/dist/components/form/radio/IProps.d.ts +2 -2
- package/dist/components/form/radio/index.js +2 -2
- package/dist/components/form/text-editor/index.js +1 -1
- package/dist/components/icons/Compiler.d.ts +1 -5
- package/dist/components/icons/Compiler.js +70 -108
- package/dist/components/icons/index.js +1 -1
- package/dist/libs/types/index.d.ts +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,252 @@
|
|
|
1
|
+
/* #region Border Color -> BLUE */
|
|
2
|
+
.ar-radio-wrapper {
|
|
3
|
+
> label {
|
|
4
|
+
> input[type="radio"] {
|
|
5
|
+
&:checked {
|
|
6
|
+
+ span {
|
|
7
|
+
> .ar-radio.filled.blue::before {
|
|
8
|
+
border-right-color: var(--white);
|
|
9
|
+
border-bottom-color: var(--white);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
> .ar-radio.filled.blue {
|
|
13
|
+
background-color: var(--blue-500);
|
|
14
|
+
box-shadow: 0 0 0 3.5px var(--blue-100);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
/* #endregion */
|
|
22
|
+
/* Border Color -> BLUE */
|
|
23
|
+
|
|
24
|
+
/* #region Border Color -> PURPLE */
|
|
25
|
+
.ar-radio-wrapper {
|
|
26
|
+
> label {
|
|
27
|
+
> input[type="radio"] {
|
|
28
|
+
&:checked {
|
|
29
|
+
+ span {
|
|
30
|
+
> .ar-radio.filled.purple::before {
|
|
31
|
+
border-right-color: var(--white);
|
|
32
|
+
border-bottom-color: var(--white);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
> .ar-radio.filled.purple {
|
|
36
|
+
background-color: var(--purple-500);
|
|
37
|
+
box-shadow: 0 0 0 3.5px var(--purple-100);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
/* #endregion */
|
|
45
|
+
/* Border Color -> PURPLE */
|
|
46
|
+
|
|
47
|
+
/* #region Border Color -> PINK */
|
|
48
|
+
.ar-radio-wrapper {
|
|
49
|
+
> label {
|
|
50
|
+
> input[type="radio"] {
|
|
51
|
+
&:checked {
|
|
52
|
+
+ span {
|
|
53
|
+
> .ar-radio.filled.pink::before {
|
|
54
|
+
border-right-color: var(--white);
|
|
55
|
+
border-bottom-color: var(--white);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
> .ar-radio.filled.pink {
|
|
59
|
+
background-color: var(--pink-500);
|
|
60
|
+
box-shadow: 0 0 0 3.5px var(--pink-100);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
/* #endregion */
|
|
68
|
+
/* Border Color -> PINK */
|
|
69
|
+
|
|
70
|
+
/* #region Border Color -> RED */
|
|
71
|
+
.ar-radio-wrapper {
|
|
72
|
+
> label {
|
|
73
|
+
> input[type="radio"] {
|
|
74
|
+
&:checked {
|
|
75
|
+
+ span {
|
|
76
|
+
> .ar-radio.filled.red::before {
|
|
77
|
+
border-right-color: var(--white);
|
|
78
|
+
border-bottom-color: var(--white);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
> .ar-radio.filled.red {
|
|
82
|
+
background-color: var(--red-500);
|
|
83
|
+
box-shadow: 0 0 0 3.5px var(--red-100);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
/* #endregion */
|
|
91
|
+
/* Border Color -> RED */
|
|
92
|
+
|
|
93
|
+
/* #region Border Color -> ORANGE */
|
|
94
|
+
.ar-radio-wrapper {
|
|
95
|
+
> label {
|
|
96
|
+
> input[type="radio"] {
|
|
97
|
+
&:checked {
|
|
98
|
+
+ span {
|
|
99
|
+
> .ar-radio.filled.orange::before {
|
|
100
|
+
border-right-color: var(--white);
|
|
101
|
+
border-bottom-color: var(--white);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
> .ar-radio.filled.orange {
|
|
105
|
+
background-color: var(--orange-500);
|
|
106
|
+
box-shadow: 0 0 0 3.5px var(--orange-100);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
/* #endregion */
|
|
114
|
+
/* Border Color -> ORANGE */
|
|
115
|
+
|
|
116
|
+
/* #region Border Color -> YELLOW */
|
|
117
|
+
.ar-radio-wrapper {
|
|
118
|
+
> label {
|
|
119
|
+
> input[type="radio"] {
|
|
120
|
+
&:checked {
|
|
121
|
+
+ span {
|
|
122
|
+
> .ar-radio.filled.yellow::before {
|
|
123
|
+
border-right-color: var(--white);
|
|
124
|
+
border-bottom-color: var(--white);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
> .ar-radio.filled.yellow {
|
|
128
|
+
background-color: var(--yellow-500);
|
|
129
|
+
box-shadow: 0 0 0 3.5px var(--yellow-100);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
/* #endregion */
|
|
137
|
+
/* Border Color -> YELLOW */
|
|
138
|
+
|
|
139
|
+
/* #region Border Color -> GREEN */
|
|
140
|
+
.ar-radio-wrapper {
|
|
141
|
+
> label {
|
|
142
|
+
> input[type="radio"] {
|
|
143
|
+
&:checked {
|
|
144
|
+
+ span {
|
|
145
|
+
> .ar-radio.filled.green::before {
|
|
146
|
+
border-right-color: var(--white);
|
|
147
|
+
border-bottom-color: var(--white);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
> .ar-radio.filled.green {
|
|
151
|
+
background-color: var(--green-500);
|
|
152
|
+
box-shadow: 0 0 0 3.5px var(--green-100);
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
/* #endregion */
|
|
160
|
+
/* Border Color -> GREEN */
|
|
161
|
+
|
|
162
|
+
/* #region Border Color -> TEAL */
|
|
163
|
+
.ar-radio-wrapper {
|
|
164
|
+
> label {
|
|
165
|
+
> input[type="radio"] {
|
|
166
|
+
&:checked {
|
|
167
|
+
+ span {
|
|
168
|
+
> .ar-radio.filled.teal::before {
|
|
169
|
+
border-right-color: var(--white);
|
|
170
|
+
border-bottom-color: var(--white);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
> .ar-radio.filled.teal {
|
|
174
|
+
background-color: var(--teal-500);
|
|
175
|
+
box-shadow: 0 0 0 3.5px var(--teal-100);
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
/* #endregion */
|
|
183
|
+
/* Border Color -> TEAL */
|
|
184
|
+
|
|
185
|
+
/* #region Border Color -> CYAN */
|
|
186
|
+
.ar-radio-wrapper {
|
|
187
|
+
> label {
|
|
188
|
+
> input[type="radio"] {
|
|
189
|
+
&:checked {
|
|
190
|
+
+ span {
|
|
191
|
+
> .ar-radio.filled.cyan::before {
|
|
192
|
+
border-right-color: var(--white);
|
|
193
|
+
border-bottom-color: var(--white);
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
> .ar-radio.filled.cyan {
|
|
197
|
+
background-color: var(--cyan-500);
|
|
198
|
+
box-shadow: 0 0 0 3.5px var(--cyan-100);
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
/* #endregion */
|
|
206
|
+
/* Border Color -> CYAN */
|
|
207
|
+
|
|
208
|
+
/* #region Border Color -> GRAY */
|
|
209
|
+
.ar-radio-wrapper {
|
|
210
|
+
> label {
|
|
211
|
+
> input[type="radio"] {
|
|
212
|
+
&:checked {
|
|
213
|
+
+ span {
|
|
214
|
+
> .ar-radio.filled.gray::before {
|
|
215
|
+
border-right-color: var(--white);
|
|
216
|
+
border-bottom-color: var(--white);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
> .ar-radio.filled.gray {
|
|
220
|
+
background-color: var(--gray-500);
|
|
221
|
+
box-shadow: 0 0 0 3.5px var(--gray-100);
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
/* #endregion */
|
|
229
|
+
/* Border Color -> GRAY */
|
|
230
|
+
|
|
231
|
+
/* #region Border Color -> LIGHT */
|
|
232
|
+
.ar-radio-wrapper {
|
|
233
|
+
> label {
|
|
234
|
+
> input[type="radio"] {
|
|
235
|
+
&:checked {
|
|
236
|
+
+ span {
|
|
237
|
+
> .ar-radio.filled.light::before {
|
|
238
|
+
border-right-color: var(--white);
|
|
239
|
+
border-bottom-color: var(--white);
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
> .ar-radio.filled.light {
|
|
243
|
+
background-color: var(--light-500);
|
|
244
|
+
box-shadow: 0 0 0 3.5px var(--light-100);
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
/* #endregion */
|
|
252
|
+
/* Border Color -> LIGHT */
|
|
@@ -19,8 +19,6 @@
|
|
|
19
19
|
min-height: 1rem;
|
|
20
20
|
}
|
|
21
21
|
.ar-radio-wrapper > label > :is(input[type="radio"]):checked + span > .ar-radio {
|
|
22
|
-
background-color: var(--primary);
|
|
23
|
-
box-shadow: 0 0 0 3.5px rgba(var(--primary-rgb), 0.25);
|
|
24
22
|
z-index: 2;
|
|
25
23
|
}
|
|
26
24
|
.ar-radio-wrapper > label > :is(input[type="radio"]):checked + span > .ar-radio::before {
|
|
@@ -49,3 +47,5 @@
|
|
|
49
47
|
border-radius: var(--border-radius-pill);
|
|
50
48
|
z-index: 1;
|
|
51
49
|
}
|
|
50
|
+
|
|
51
|
+
@import url("./core/border.css");
|
|
@@ -4,40 +4,54 @@
|
|
|
4
4
|
align-items: center;
|
|
5
5
|
width: 100%;
|
|
6
6
|
height: var(--input-height);
|
|
7
|
-
}
|
|
8
|
-
.ar-switch-wrapper > label {
|
|
9
|
-
display: flex;
|
|
10
|
-
flex-direction: row;
|
|
11
|
-
align-items: center;
|
|
12
|
-
gap: 0 0.5rem;
|
|
13
|
-
user-select: none;
|
|
14
|
-
}
|
|
15
|
-
.ar-switch-wrapper > label > input[type="checkbox"] {
|
|
16
|
-
display: none;
|
|
17
|
-
}
|
|
18
7
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
8
|
+
> label {
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: row;
|
|
11
|
+
align-items: center;
|
|
12
|
+
gap: 0 0.5rem;
|
|
13
|
+
font-weight: 400;
|
|
14
|
+
user-select: none;
|
|
26
15
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
16
|
+
> input[type="checkbox"] {
|
|
17
|
+
display: none;
|
|
18
|
+
|
|
19
|
+
+ .ar-switch {
|
|
20
|
+
> .handle {
|
|
21
|
+
position: absolute;
|
|
22
|
+
top: 50%;
|
|
23
|
+
left: 0;
|
|
24
|
+
transform: translateY(-50%);
|
|
25
|
+
display: inline-block;
|
|
26
|
+
content: "";
|
|
27
|
+
background-color: var(--white);
|
|
28
|
+
width: 1rem;
|
|
29
|
+
height: 1rem;
|
|
30
|
+
border: solid 1px var(--gray-300);
|
|
31
|
+
box-shadow: 0 0 0 0 rgba(var(--black-rgb), 0.2);
|
|
32
|
+
transition: left 150ms, width 150ms 150ms, height 150ms 150ms, box-shadow 150ms 150ms ease-in-out;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&.checked {
|
|
37
|
+
+ .ar-switch {
|
|
38
|
+
> .handle {
|
|
39
|
+
left: calc(2.25rem - 1rem);
|
|
40
|
+
border: none;
|
|
41
|
+
box-shadow: 0 0 0 5px rgba(var(--black-rgb), 0.2);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
> .ar-switch {
|
|
48
|
+
position: relative;
|
|
49
|
+
display: inline-block;
|
|
50
|
+
width: 2.25rem;
|
|
51
|
+
height: 1rem;
|
|
52
|
+
transition: box-shadow 250ms ease-in-out;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
41
55
|
}
|
|
42
56
|
|
|
43
57
|
@import url("./core/border.css");
|
|
@@ -24,6 +24,7 @@ iframe.outlined:not(.disabled),
|
|
|
24
24
|
|
|
25
25
|
button.outlined:not(.disabled) {
|
|
26
26
|
&.blue {
|
|
27
|
+
border-color: var(--blue-500);
|
|
27
28
|
color: var(--blue-500);
|
|
28
29
|
|
|
29
30
|
&:hover,
|
|
@@ -61,6 +62,7 @@ iframe.outlined:not(.disabled),
|
|
|
61
62
|
|
|
62
63
|
button.outlined:not(.disabled) {
|
|
63
64
|
&.purple {
|
|
65
|
+
border-color: var(--purple-500);
|
|
64
66
|
color: var(--purple-500);
|
|
65
67
|
|
|
66
68
|
&:hover,
|
|
@@ -98,6 +100,7 @@ iframe.outlined:not(.disabled),
|
|
|
98
100
|
|
|
99
101
|
button.outlined:not(.disabled) {
|
|
100
102
|
&.pink {
|
|
103
|
+
border-color: var(--pink-500);
|
|
101
104
|
color: var(--pink-500);
|
|
102
105
|
|
|
103
106
|
&:hover,
|
|
@@ -135,6 +138,7 @@ iframe.outlined:not(.disabled),
|
|
|
135
138
|
|
|
136
139
|
button.outlined:not(.disabled) {
|
|
137
140
|
&.red {
|
|
141
|
+
border-color: var(--red-500);
|
|
138
142
|
color: var(--red-500);
|
|
139
143
|
|
|
140
144
|
&:hover,
|
|
@@ -172,6 +176,7 @@ iframe.outlined:not(.disabled),
|
|
|
172
176
|
|
|
173
177
|
button.outlined:not(.disabled) {
|
|
174
178
|
&.orange {
|
|
179
|
+
border-color: var(--orange-500);
|
|
175
180
|
color: var(--orange-500);
|
|
176
181
|
|
|
177
182
|
&:hover,
|
|
@@ -209,6 +214,7 @@ iframe.outlined:not(.disabled),
|
|
|
209
214
|
|
|
210
215
|
button.outlined:not(.disabled) {
|
|
211
216
|
&.yellow {
|
|
217
|
+
border-color: var(--yellow-500);
|
|
212
218
|
color: var(--yellow-500);
|
|
213
219
|
|
|
214
220
|
&:hover,
|
|
@@ -246,6 +252,7 @@ iframe.outlined:not(.disabled),
|
|
|
246
252
|
|
|
247
253
|
button.outlined:not(.disabled) {
|
|
248
254
|
&.green {
|
|
255
|
+
border-color: var(--green-500);
|
|
249
256
|
color: var(--green-500);
|
|
250
257
|
|
|
251
258
|
&:hover,
|
|
@@ -283,6 +290,7 @@ iframe.outlined:not(.disabled),
|
|
|
283
290
|
|
|
284
291
|
button.outlined:not(.disabled) {
|
|
285
292
|
&.teal {
|
|
293
|
+
border-color: var(--teal-500);
|
|
286
294
|
color: var(--teal-500);
|
|
287
295
|
|
|
288
296
|
&:hover,
|
|
@@ -320,6 +328,7 @@ iframe.outlined:not(.disabled),
|
|
|
320
328
|
|
|
321
329
|
button.outlined:not(.disabled) {
|
|
322
330
|
&.cyan {
|
|
331
|
+
border-color: var(--cyan-500);
|
|
323
332
|
color: var(--cyan-500);
|
|
324
333
|
|
|
325
334
|
&:hover,
|
|
@@ -357,6 +366,7 @@ iframe.outlined:not(.disabled),
|
|
|
357
366
|
|
|
358
367
|
button.outlined:not(.disabled) {
|
|
359
368
|
&.gray {
|
|
369
|
+
border-color: var(--gray-500);
|
|
360
370
|
color: var(--gray-500);
|
|
361
371
|
|
|
362
372
|
&:hover,
|
|
@@ -394,6 +404,7 @@ iframe.outlined:not(.disabled),
|
|
|
394
404
|
|
|
395
405
|
button.outlined:not(.disabled) {
|
|
396
406
|
&.light {
|
|
407
|
+
border-color: var(--light-500);
|
|
397
408
|
color: var(--light-500);
|
|
398
409
|
|
|
399
410
|
&:hover,
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
&.blue {
|
|
4
4
|
background-color: var(--blue-100);
|
|
5
5
|
border: solid 1px var(--blue-300);
|
|
6
|
-
color: var(--blue-
|
|
6
|
+
color: var(--blue-500);
|
|
7
7
|
|
|
8
8
|
&.active {
|
|
9
9
|
animation: clicked-blue ease-in-out 750ms 0s 1 normal both;
|
|
@@ -27,7 +27,7 @@ button.surface:not(.disabled) {
|
|
|
27
27
|
&.purple {
|
|
28
28
|
background-color: var(--purple-100);
|
|
29
29
|
border: solid 1px var(--purple-300);
|
|
30
|
-
color: var(--purple-
|
|
30
|
+
color: var(--purple-500);
|
|
31
31
|
|
|
32
32
|
&.active {
|
|
33
33
|
animation: clicked-purple ease-in-out 750ms 0s 1 normal both;
|
|
@@ -51,7 +51,7 @@ button.surface:not(.disabled) {
|
|
|
51
51
|
&.pink {
|
|
52
52
|
background-color: var(--pink-100);
|
|
53
53
|
border: solid 1px var(--pink-300);
|
|
54
|
-
color: var(--pink-
|
|
54
|
+
color: var(--pink-500);
|
|
55
55
|
|
|
56
56
|
&.active {
|
|
57
57
|
animation: clicked-pink ease-in-out 750ms 0s 1 normal both;
|
|
@@ -75,7 +75,7 @@ button.surface:not(.disabled) {
|
|
|
75
75
|
&.red {
|
|
76
76
|
background-color: var(--red-100);
|
|
77
77
|
border: solid 1px var(--red-300);
|
|
78
|
-
color: var(--red-
|
|
78
|
+
color: var(--red-500);
|
|
79
79
|
|
|
80
80
|
&.active {
|
|
81
81
|
animation: clicked-red ease-in-out 750ms 0s 1 normal both;
|
|
@@ -99,7 +99,7 @@ button.surface:not(.disabled) {
|
|
|
99
99
|
&.orange {
|
|
100
100
|
background-color: var(--orange-100);
|
|
101
101
|
border: solid 1px var(--orange-300);
|
|
102
|
-
color: var(--orange-
|
|
102
|
+
color: var(--orange-500);
|
|
103
103
|
|
|
104
104
|
&.active {
|
|
105
105
|
animation: clicked-orange ease-in-out 750ms 0s 1 normal both;
|
|
@@ -123,7 +123,7 @@ button.surface:not(.disabled) {
|
|
|
123
123
|
&.yellow {
|
|
124
124
|
background-color: var(--yellow-100);
|
|
125
125
|
border: solid 1px var(--yellow-300);
|
|
126
|
-
color: var(--yellow-
|
|
126
|
+
color: var(--yellow-500);
|
|
127
127
|
|
|
128
128
|
&.active {
|
|
129
129
|
animation: clicked-yellow ease-in-out 750ms 0s 1 normal both;
|
|
@@ -147,7 +147,7 @@ button.surface:not(.disabled) {
|
|
|
147
147
|
&.green {
|
|
148
148
|
background-color: var(--green-100);
|
|
149
149
|
border: solid 1px var(--green-300);
|
|
150
|
-
color: var(--green-
|
|
150
|
+
color: var(--green-500);
|
|
151
151
|
|
|
152
152
|
&.active {
|
|
153
153
|
animation: clicked-green ease-in-out 750ms 0s 1 normal both;
|
|
@@ -171,7 +171,7 @@ button.surface:not(.disabled) {
|
|
|
171
171
|
&.teal {
|
|
172
172
|
background-color: var(--teal-100);
|
|
173
173
|
border: solid 1px var(--teal-300);
|
|
174
|
-
color: var(--teal-
|
|
174
|
+
color: var(--teal-500);
|
|
175
175
|
|
|
176
176
|
&.active {
|
|
177
177
|
animation: clicked-teal ease-in-out 750ms 0s 1 normal both;
|
|
@@ -195,7 +195,7 @@ button.surface:not(.disabled) {
|
|
|
195
195
|
&.cyan {
|
|
196
196
|
background-color: var(--cyan-100);
|
|
197
197
|
border: solid 1px var(--cyan-300);
|
|
198
|
-
color: var(--cyan-
|
|
198
|
+
color: var(--cyan-500);
|
|
199
199
|
|
|
200
200
|
&.active {
|
|
201
201
|
animation: clicked-cyan ease-in-out 750ms 0s 1 normal both;
|
|
@@ -219,7 +219,7 @@ button.surface:not(.disabled) {
|
|
|
219
219
|
&.gray {
|
|
220
220
|
background-color: var(--gray-100);
|
|
221
221
|
border: solid 1px var(--gray-300);
|
|
222
|
-
color: var(--gray-
|
|
222
|
+
color: var(--gray-500);
|
|
223
223
|
|
|
224
224
|
&.active {
|
|
225
225
|
animation: clicked-gray ease-in-out 750ms 0s 1 normal both;
|
|
@@ -243,7 +243,7 @@ button.surface:not(.disabled) {
|
|
|
243
243
|
&.light {
|
|
244
244
|
background-color: var(--light-100);
|
|
245
245
|
border: solid 1px var(--light-300);
|
|
246
|
-
color: var(--light-
|
|
246
|
+
color: var(--light-500);
|
|
247
247
|
|
|
248
248
|
&.active {
|
|
249
249
|
animation: clicked-light ease-in-out 750ms 0s 1 normal both;
|
|
@@ -510,8 +510,8 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
|
|
|
510
510
|
if (actions.import && actions.import.onClick)
|
|
511
511
|
actions.import.onClick(formData, files);
|
|
512
512
|
}, config: { buttons: { okay: "Yükle", cancel: "İptal" } }, windowBlur: true },
|
|
513
|
-
React.createElement(Button, { variant: "outlined", color: "
|
|
514
|
-
actions.create && (React.createElement(Button, { variant: "outlined", icon: { element: React.createElement(ARIcon, { icon: "Add", size:
|
|
513
|
+
React.createElement(Button, { variant: "outlined", color: "purple", icon: { element: React.createElement(ARIcon, { icon: "Upload" }) }, tooltip: { text: actions.import.tooltip, direction: "top" } }))),
|
|
514
|
+
actions.create && (React.createElement(Button, { variant: "outlined", color: "green", icon: { element: React.createElement(ARIcon, { icon: "Add", size: 24 }) }, tooltip: { text: actions.create.tooltip, direction: "top" }, onClick: actions.create.onClick }))))))),
|
|
515
515
|
React.createElement("div", { ref: _tableContent, className: "content", onScroll: handleScroll },
|
|
516
516
|
React.createElement("table", { ref: ref },
|
|
517
517
|
React.createElement("thead", null,
|
|
@@ -32,13 +32,13 @@ const Popup = ({ title, message, status, isOpen, buttons }) => {
|
|
|
32
32
|
const buttonIcons = () => {
|
|
33
33
|
switch (status) {
|
|
34
34
|
case "success":
|
|
35
|
-
return React.createElement(ARIcon, { icon: "
|
|
35
|
+
return React.createElement(ARIcon, { icon: "CheckAll", fill: "var(--white)", size: 64 });
|
|
36
36
|
case "warning":
|
|
37
|
-
return React.createElement(ARIcon, {
|
|
37
|
+
return React.createElement(ARIcon, { variant: "fill", icon: "ExclamationDiamond", fill: "var(--white)", size: 48 });
|
|
38
38
|
case "information":
|
|
39
39
|
return "information";
|
|
40
40
|
case "error":
|
|
41
|
-
return React.createElement(ARIcon, {
|
|
41
|
+
return React.createElement(ARIcon, { variant: "fill", icon: "XCircle", fill: "var(--white)", size: 48 });
|
|
42
42
|
default:
|
|
43
43
|
return "light";
|
|
44
44
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import React, { useEffect, useRef, useState } from "react";
|
|
2
|
+
import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
3
3
|
import ReactDOM from "react-dom";
|
|
4
4
|
import "../../../assets/css/components/feedback/tooltip/styles.css";
|
|
5
5
|
const Tooltip = ({ children, text, direction = "top" }) => {
|
|
@@ -9,11 +9,11 @@ const Tooltip = ({ children, text, direction = "top" }) => {
|
|
|
9
9
|
// states
|
|
10
10
|
const [mouseEnter, setMouseEnter] = useState(false);
|
|
11
11
|
// methods
|
|
12
|
-
const handlePosition = () => {
|
|
12
|
+
const handlePosition = useCallback(() => {
|
|
13
13
|
if (_children.current && _arTooltip.current) {
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
if (
|
|
14
|
+
const childRect = _children.current.getBoundingClientRect();
|
|
15
|
+
const tooltipRect = _arTooltip.current.getBoundingClientRect();
|
|
16
|
+
if (childRect) {
|
|
17
17
|
const sx = window.scrollX || document.documentElement.scrollLeft;
|
|
18
18
|
const sy = window.scrollY || document.documentElement.scrollTop;
|
|
19
19
|
// Tooltip konumunu ayarlama için ortak bir fonksiyon.
|
|
@@ -23,51 +23,48 @@ const Tooltip = ({ children, text, direction = "top" }) => {
|
|
|
23
23
|
_arTooltip.current.style.top = `${top + sy}px`;
|
|
24
24
|
_arTooltip.current.style.left = `${left + sx}px`;
|
|
25
25
|
};
|
|
26
|
-
const positonT = buttonR.top;
|
|
27
|
-
const positonL = buttonR.left + (sx == 0 ? 5.5 : 0);
|
|
28
|
-
const centerBX = buttonR.width / 2;
|
|
29
|
-
const centerBY = buttonR.height / 2;
|
|
30
|
-
const centerV = positonL - tooltipR.width + tooltipR.width / 2 + centerBX;
|
|
31
26
|
const margin = 17.5;
|
|
27
|
+
let top = 0;
|
|
28
|
+
let left = 0;
|
|
32
29
|
switch (direction) {
|
|
33
30
|
case "top":
|
|
34
31
|
{
|
|
35
|
-
|
|
36
|
-
|
|
32
|
+
top = childRect.top - tooltipRect.height - margin;
|
|
33
|
+
left = childRect.left + childRect.width / 2 - tooltipRect.width / 2;
|
|
37
34
|
setTooltipPosition(top, left);
|
|
38
35
|
}
|
|
39
36
|
break;
|
|
40
37
|
case "right":
|
|
41
38
|
{
|
|
42
|
-
|
|
43
|
-
|
|
39
|
+
top = childRect.top + childRect.height / 2 - tooltipRect.height / 2;
|
|
40
|
+
left = childRect.right + margin;
|
|
44
41
|
setTooltipPosition(top, left);
|
|
45
42
|
}
|
|
46
43
|
break;
|
|
47
44
|
case "bottom":
|
|
48
45
|
{
|
|
49
|
-
|
|
50
|
-
|
|
46
|
+
top = childRect.bottom + margin;
|
|
47
|
+
left = childRect.left + childRect.width / 2 - tooltipRect.width / 2;
|
|
51
48
|
setTooltipPosition(top, left);
|
|
52
49
|
}
|
|
53
50
|
break;
|
|
54
51
|
case "left":
|
|
55
52
|
{
|
|
56
|
-
|
|
57
|
-
|
|
53
|
+
top = childRect.top + childRect.height / 2 - tooltipRect.height / 2;
|
|
54
|
+
left = childRect.left - tooltipRect.width - margin;
|
|
58
55
|
setTooltipPosition(top, left);
|
|
59
56
|
}
|
|
60
57
|
break;
|
|
61
58
|
}
|
|
62
59
|
}
|
|
63
60
|
}
|
|
64
|
-
};
|
|
61
|
+
}, []);
|
|
65
62
|
//useEffects
|
|
66
63
|
useEffect(() => {
|
|
67
64
|
if (mouseEnter)
|
|
68
65
|
setTimeout(() => handlePosition(), 0);
|
|
69
66
|
}, [mouseEnter]);
|
|
70
|
-
return (React.createElement("div", {
|
|
67
|
+
return (React.createElement("div", { className: "ar-tooltip-wrapper" },
|
|
71
68
|
React.createElement("div", { ref: _children, onMouseEnter: () => setMouseEnter(true), onMouseLeave: () => setMouseEnter(false) }, children),
|
|
72
69
|
mouseEnter &&
|
|
73
70
|
ReactDOM.createPortal(React.createElement("div", { ref: _arTooltip, className: `ar-tooltip ${direction}` }, Array.isArray(text) ? (text.map((t) => (React.createElement("span", { className: "text" },
|
|
@@ -2,17 +2,17 @@
|
|
|
2
2
|
import Utils from "../../../libs/infrastructure/shared/Utils";
|
|
3
3
|
import React, { forwardRef, useRef } from "react";
|
|
4
4
|
import "../../../assets/css/components/form/checkbox/checkbox.css";
|
|
5
|
-
const Checkbox = forwardRef(({ label, size = "normal", color, border = { radius: "sm" }, upperCase, ...attributes }, ref) => {
|
|
5
|
+
const Checkbox = forwardRef(({ label, size = "normal", color = "blue", border = { radius: "sm" }, upperCase, ...attributes }, ref) => {
|
|
6
6
|
// refs
|
|
7
7
|
const _checkbox = useRef(null);
|
|
8
8
|
const _checkboxClassName = ["ar-checkbox"];
|
|
9
|
-
|
|
10
|
-
_checkboxClassName.push(...Utils.GetClassName("filled", undefined, isChecked ? color : "light", border, size, undefined, attributes.className));
|
|
9
|
+
_checkboxClassName.push(...Utils.GetClassName("filled", undefined, attributes.checked ? color : "light", border, size, undefined, attributes.className));
|
|
11
10
|
return (React.createElement("div", { className: "ar-checkbox-wrapper" },
|
|
12
11
|
React.createElement("label", null,
|
|
13
12
|
React.createElement("input", { ref: ref, type: "checkbox", ...attributes, size: 0, onChange: (event) => {
|
|
14
13
|
// (() => {
|
|
15
|
-
//
|
|
14
|
+
// const _current = _checkbox.current;
|
|
15
|
+
// if (!_current) return;
|
|
16
16
|
// })();
|
|
17
17
|
(() => attributes.onChange && attributes.onChange(event))();
|
|
18
18
|
} }),
|