@acorex/styles 6.5.28 → 6.5.31

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.
Files changed (30) hide show
  1. package/fonts/font-awesome/fa-brands-400.svg +3570 -3570
  2. package/fonts/font-awesome/fa-duotone-900.svg +15055 -15055
  3. package/fonts/font-awesome/fa-light-300.svg +12330 -12330
  4. package/fonts/font-awesome/fa-regular-400.svg +11256 -11256
  5. package/fonts/font-awesome/fa-solid-900.svg +9588 -9588
  6. package/fonts/font-awesome/font-awesome.css +16960 -16960
  7. package/package.json +11 -11
  8. package/scss/buttons.scss +69 -69
  9. package/scss/calendar.scss +143 -143
  10. package/scss/checkbox.scss +46 -46
  11. package/scss/context-menu.scss +74 -74
  12. package/scss/data-grid.scss +117 -117
  13. package/scss/drawer.scss +138 -138
  14. package/scss/fieldset.scss +22 -22
  15. package/scss/forms.scss +515 -515
  16. package/scss/list.scss +47 -47
  17. package/scss/master.scss +329 -329
  18. package/scss/menu.scss +130 -130
  19. package/scss/mixin.scss +11 -11
  20. package/scss/page.scss +53 -53
  21. package/scss/progress.scss +10 -10
  22. package/scss/selection-list.scss +104 -104
  23. package/scss/style.scss +47 -47
  24. package/scss/tab-strip.scss +30 -30
  25. package/scss/tab.scss +36 -36
  26. package/scss/toast.scss +46 -46
  27. package/scss/tooltip.scss +54 -54
  28. package/scss/treeview.scss +151 -151
  29. package/scss/upload.scss +169 -169
  30. package/scss/variables.scss +139 -139
package/scss/forms.scss CHANGED
@@ -1,515 +1,515 @@
1
- @import "./mixin.scss";
2
- .ax {
3
- font-size: 0.875rem;
4
- &.form-control {
5
- &.disabled {
6
- background: var(--ax-gray-light-color) !important;
7
- .chips-container {
8
- background-color: var(--ax-gray-light-color-color);
9
- }
10
- }
11
- }
12
- &.items-wrapper {
13
- display: inline-flex;
14
- flex-direction: row;
15
- .button {
16
- margin: 0 !important;
17
- border-radius: 0 !important;
18
- height: 100% !important;
19
- border: none !important;
20
- min-width: 40px;
21
- }
22
- .arrow-number {
23
- display: flex;
24
- flex-direction: column;
25
- justify-content: space-between;
26
- position: relative;
27
- width: calc(var(--ax-base-size) * var(--ax-base-ratio));
28
- height: 100%;
29
- ax-button {
30
- button {
31
- height: 50% !important;
32
- position: absolute;
33
- }
34
- &:first-child {
35
- button {
36
- top: 0;
37
- }
38
- }
39
- &:last-child {
40
- button {
41
- bottom: 0;
42
- }
43
- }
44
- }
45
- }
46
- }
47
- .currency {
48
- display: flex;
49
- align-items: center;
50
- padding: 0px 10px 0px 10px;
51
- background-color: var(--ax-primary-color);
52
- color: white;
53
- }
54
- &.error-state {
55
- border-color: var(--ax-danger-color) !important;
56
- & > input {
57
- &::-webkit-input-placeholder {
58
- color: var(--ax-danger-color) !important;
59
- }
60
- &:-ms-input-placeholder {
61
- color: var(--ax-danger-color) !important;
62
- }
63
- &::placeholder {
64
- color: var(--ax-danger-color) !important;
65
- }
66
- }
67
- }
68
- &.error-text {
69
- color: var(--ax-danger-color) !important;
70
- }
71
- &.input {
72
- position: relative;
73
- display: inline-flex;
74
- color: var(--ax-dark-dark-color);
75
-
76
- &.icon {
77
- input {
78
- padding-inline-start: 2.1rem;
79
- padding-inline-end: 0.5em;
80
- }
81
- .text-left {
82
- padding-inline-start: 0.5em !important;
83
- }
84
- .text-right {
85
- padding-inline-end: 0.5em !important;
86
- }
87
- & > i.icon {
88
- cursor: default;
89
- position: absolute;
90
- text-align: center;
91
- top: 0;
92
- inset-inline-start: 0;
93
- margin: 0;
94
- height: 100%;
95
- width: 2.67142857em;
96
- opacity: 0.5;
97
- @include ax-border-radius(var(--ax-size-border-radius));
98
- -webkit-transition: opacity 0.3s ease;
99
- transition: opacity 0.3s ease;
100
- }
101
- }
102
- &.disabled {
103
- & > input {
104
- background: var(--ax-gray-light-color) !important;
105
- color: var(--ax-gray-fore-color);
106
- cursor: not-allowed !important;
107
- }
108
- }
109
- & > input {
110
- margin: 0;
111
- max-width: 100%;
112
- flex: 1 0 auto;
113
- font-family: inherit;
114
- font-size: 0.875rem;
115
- outline: 0;
116
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
117
- text-align: start;
118
- background: #fff;
119
- border: none !important;
120
- color: rgba(0, 0, 0, 0.87);
121
- box-shadow: none !important;
122
- -webkit-appearance: none !important;
123
- @include ax-border-radius(var(--ax-size-border-radius));
124
- &::-webkit-input-placeholder {
125
- color: var(--ax-gray-dark-color) !important;
126
- }
127
- &:-ms-input-placeholder {
128
- color: var(--ax-gray-dark-color) !important;
129
- }
130
- &::placeholder {
131
- color: var(--ax-gray-dark-color) !important;
132
- }
133
-
134
- // &.clear {
135
- // margin-inline-end: 3em !important;
136
- // }
137
- &.text-left {
138
- text-align: left !important;
139
- direction: ltr !important;
140
- &:placeholder {
141
- text-align: left !important;
142
- }
143
- &::-webkit-input-placeholder {
144
- text-align: left !important;
145
- }
146
- &:-moz-placeholder {
147
- text-align: left !important;
148
- }
149
- &::-moz-placeholder {
150
- text-align: left !important;
151
- }
152
- &:-ms-input-placeholder {
153
- text-align: left !important;
154
- }
155
- &::-ms-input-placeholder {
156
- text-align: left !important;
157
- }
158
- ::placeholder {
159
- text-align: left !important;
160
- }
161
- }
162
- &.text-right {
163
- text-align: right !important;
164
- direction: rtl !important;
165
- &::-webkit-input-placeholder {
166
- text-align: right !important;
167
- }
168
- &:-moz-placeholder {
169
- text-align: right !important;
170
- }
171
- &::-moz-placeholder {
172
- text-align: right !important;
173
- }
174
- &:-ms-input-placeholder {
175
- text-align: right !important;
176
- }
177
- &::-ms-input-placeholder {
178
- text-align: right !important;
179
- }
180
- &::placeholder {
181
- text-align: right !important;
182
- }
183
- }
184
- &:focus {
185
- border-color: var(--ax-primary-color);
186
- color: rgba(0, 0, 0, 0.8);
187
- -webkit-box-shadow: none;
188
- box-shadow: none;
189
- @include ax-transition-all();
190
- & + i.icon {
191
- opacity: 1 !important;
192
- color: var(--ax-primary-color);
193
- }
194
- }
195
- }
196
- i {
197
- position: absolute;
198
- height: 100%;
199
- top: 0;
200
- inset-inline-start: 0;
201
- display: flex;
202
- justify-content: center;
203
- align-items: center;
204
- width: 2.771429em;
205
- color: var(--ax-gray-dark-color);
206
- background-color: var(--ax-white-color);
207
- }
208
- }
209
- &.form-group-label {
210
- display: block;
211
- font-size: 0.875rem;
212
- font-weight: 500;
213
- padding: 0.5rem 0;
214
- }
215
- &.form-group {
216
- display: inline-flex;
217
- flex-direction: column;
218
- width: 100%;
219
- }
220
- &.form-item {
221
- background-color: var(--ax-white-color);
222
- position: relative;
223
- display: flex;
224
- flex-wrap: wrap;
225
- align-items: stretch;
226
- width: 100%;
227
- overflow: hidden;
228
- border: 1px solid;
229
- border-color: var(--ax-border-color);
230
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
231
-
232
- box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
233
- &:focus-within {
234
- border-color: var(--ax-primary-color);
235
- box-shadow: 0px 0px 0px 1px var(--ax-primary-color);
236
- .input {
237
- i {
238
- color: var(--ax-primary-color) !important;
239
- }
240
- }
241
- }
242
-
243
- &.required-state {
244
- border-inline-start-width: 2px;
245
- border-inline-start-style: solid;
246
- border-inline-start-color: var(--ax-warning-color) !important;
247
- &:focus-within {
248
- border-color: var(--ax-warning-color);
249
- box-shadow: 0px 0px 0px 1px var(--ax-warning-color);
250
- .input {
251
- i {
252
- color: var(--ax-warning-color) !important;
253
- }
254
- }
255
- }
256
- }
257
- &.success-state {
258
- border-inline-start-width: 2px;
259
- border-inline-start-style: solid;
260
- border-inline-start-color: var(--ax-success-color) !important;
261
- &:focus-within {
262
- border-color: var(--ax-success-color);
263
- box-shadow: 0px 0px 0px 1px var(--ax-success-color);
264
- .input {
265
- i {
266
- color: var(--ax-success-color) !important;
267
- }
268
- }
269
- }
270
- }
271
- &.error-state {
272
- border-inline-start-width: 2px;
273
- border-inline-start-style: solid;
274
- border-inline-start-color: var(--ax-danger-color) !important;
275
- &::before {
276
- border-inline-start-color: var(--ax-danger-trans-dark-color);
277
- }
278
- &::after {
279
- color: var(--ax-danger-dark-color);
280
- }
281
- &:focus-within {
282
- border-color: var(--ax-danger-color);
283
- box-shadow: 0px 0px 0px 1px var(--ax-danger-color);
284
- .input {
285
- i {
286
- color: var(--ax-danger-color) !important;
287
- }
288
- }
289
- }
290
- }
291
- @include ax-border-radius(var(--ax-size-border-radius));
292
- &.disabled {
293
- background: var(--ax-gray-light-color) !important;
294
- cursor: not-allowed !important;
295
- }
296
- .readonly {
297
- opacity: 0.8;
298
-
299
- input {
300
- cursor: no-drop;
301
- }
302
- .button {
303
- &.disabled {
304
- background: transparent !important;
305
- }
306
- }
307
- }
308
-
309
- .form-item {
310
- &:not(.error) {
311
- border: none;
312
- box-shadow: none;
313
- }
314
- }
315
- .content {
316
- border: none;
317
- position: relative;
318
- flex: 1 1 auto;
319
- width: 1%;
320
- min-width: 0;
321
- margin-bottom: 0;
322
- .form-item {
323
- border-radius: 0 !important;
324
- }
325
- .input {
326
- width: 100%;
327
- input {
328
- border: none !important;
329
- border-radius: 0;
330
- height: 100%;
331
- }
332
- textarea {
333
- border: none !important;
334
- width: 100%;
335
- outline: transparent;
336
- padding: 0.5em;
337
- font-family: inherit;
338
- font-size: 0.875rem;
339
- height: 100%;
340
- &.text-left {
341
- text-align: left !important;
342
- direction: ltr !important;
343
- &:placeholder {
344
- text-align: left !important;
345
- }
346
- &::-webkit-input-placeholder {
347
- text-align: left !important;
348
- }
349
- &:-moz-placeholder {
350
- text-align: left !important;
351
- }
352
- &::-moz-placeholder {
353
- text-align: left !important;
354
- }
355
- &:-ms-input-placeholder {
356
- text-align: left !important;
357
- }
358
- &::-ms-input-placeholder {
359
- text-align: left !important;
360
- }
361
- ::placeholder {
362
- text-align: left !important;
363
- }
364
- }
365
- &.text-right {
366
- text-align: right !important;
367
- direction: rtl !important;
368
- &::-webkit-input-placeholder {
369
- text-align: right !important;
370
- }
371
- &:-moz-placeholder {
372
- text-align: right !important;
373
- }
374
- &::-moz-placeholder {
375
- text-align: right !important;
376
- }
377
- &:-ms-input-placeholder {
378
- text-align: right !important;
379
- }
380
- &::-ms-input-placeholder {
381
- text-align: right !important;
382
- }
383
- &::placeholder {
384
- text-align: right !important;
385
- }
386
- }
387
- }
388
- }
389
- }
390
- .button {
391
- border-radius: 0 !important;
392
- height: 100% !important;
393
- }
394
- }
395
- &.chips-container {
396
- display: flex;
397
- align-items: center;
398
- flex-wrap: nowrap;
399
- flex-grow: 1;
400
- overflow-x: hidden;
401
- overflow-y: hidden;
402
- &:hover {
403
- overflow-x: overlay;
404
- }
405
- &::-webkit-scrollbar {
406
- height: 3px;
407
- }
408
- /* Track */
409
- &::-webkit-scrollbar-track {
410
- background: #f1f1f1;
411
- }
412
- /* Handle */
413
- &::-webkit-scrollbar-thumb {
414
- background: #888;
415
- }
416
- /* Handle on hover */
417
- &::-webkit-scrollbar-thumb:hover {
418
- background: #555;
419
- }
420
- .search-wrapper {
421
- width: 30%;
422
- }
423
- .chips {
424
- display: inline-flex;
425
- overflow: hidden;
426
- background: rgba(0, 0, 0, 0.04);
427
- padding: 0.2rem 0.5rem;
428
- margin: 0 0.2rem;
429
- border-radius: var(--ax-size-border-radius);
430
- color: var(--ax-gray-fore-color);
431
- border: 1px solid var(--ax-border-color);
432
- flex: none;
433
- min-width: fit-content;
434
- max-width: 7rem;
435
- white-space: nowrap;
436
- .chips-text {
437
- display: inline-block;
438
- vertical-align: middle;
439
- overflow: hidden;
440
- white-space: nowrap;
441
- vertical-align: middle;
442
- text-overflow: ellipsis;
443
- font-size: 0.875rem;
444
- direction: inherit;
445
- text-align: inherit;
446
- }
447
- .close-icon {
448
- vertical-align: middle;
449
- display: flex;
450
- align-items: center;
451
- margin-inline-start: 0.25rem;
452
- cursor: pointer;
453
- }
454
- // font-size: inherit;
455
- // background: rgba(0, 0, 0, 0.04);
456
- // color: var(--ax-gray-fore-color);
457
- // border: 1px solid var(--ax-border-color);
458
- // padding: 0.2em 0.4em;
459
- // @include ax-border-radius(var(--ax-size-border-radius));
460
- // margin: 0 0.5em;
461
- // display: inline-block;
462
- // cursor: pointer;
463
- // flex: unset;
464
- // white-space: nowrap;
465
- // // overflow: hidden;
466
- // // text-overflow: ellipsis;
467
- // .chips-text {
468
- // display: inline-block;
469
- // vertical-align: middle;
470
- // overflow: hidden;
471
- // white-space: nowrap;
472
- // vertical-align: middle;
473
- // text-overflow: ellipsis;
474
- // font-size: 0.875rem;
475
- // min-width: fit-content;
476
- // max-width: 110px;
477
- // direction: inherit;
478
- // text-align: inherit;
479
- // }
480
- // .close-icon {
481
- // vertical-align: middle;
482
- // }
483
- // i {
484
- // color: var(--ax-gray-dark-color);
485
- // margin-inline-start: 0.3em;
486
- // @include ax-transition-all();
487
- // &:hover {
488
- // color: var(--ax-danger-color);
489
- // }
490
- // }
491
- &:hover {
492
- background-color: var(--ax-primary-trans-light-color);
493
- color: var(--ax-primary-color);
494
- i {
495
- color: var(--ax-primary-color);
496
- &:hover {
497
- color: var(--ax-danger-color);
498
- }
499
- }
500
- }
501
- }
502
- .chips-blank {
503
- border: none;
504
- background-color:transparent;
505
- flex: unset;
506
- &:hover {
507
- border: none;
508
- background-color: transparent;
509
- }
510
- }
511
- & > div {
512
- flex: 1 1 auto;
513
- }
514
- }
515
- }
1
+ @import "./mixin.scss";
2
+ .ax {
3
+ font-size: 0.875rem;
4
+ &.form-control {
5
+ &.disabled {
6
+ background: var(--ax-gray-light-color) !important;
7
+ .chips-container {
8
+ background-color: var(--ax-gray-light-color-color);
9
+ }
10
+ }
11
+ }
12
+ &.items-wrapper {
13
+ display: inline-flex;
14
+ flex-direction: row;
15
+ .button {
16
+ margin: 0 !important;
17
+ border-radius: 0 !important;
18
+ height: 100% !important;
19
+ border: none !important;
20
+ min-width: 40px;
21
+ }
22
+ .arrow-number {
23
+ display: flex;
24
+ flex-direction: column;
25
+ justify-content: space-between;
26
+ position: relative;
27
+ width: calc(var(--ax-base-size) * var(--ax-base-ratio));
28
+ height: 100%;
29
+ ax-button {
30
+ button {
31
+ height: 50% !important;
32
+ position: absolute;
33
+ }
34
+ &:first-child {
35
+ button {
36
+ top: 0;
37
+ }
38
+ }
39
+ &:last-child {
40
+ button {
41
+ bottom: 0;
42
+ }
43
+ }
44
+ }
45
+ }
46
+ }
47
+ .currency {
48
+ display: flex;
49
+ align-items: center;
50
+ padding: 0px 10px 0px 10px;
51
+ background-color: var(--ax-primary-color);
52
+ color: white;
53
+ }
54
+ &.error-state {
55
+ border-color: var(--ax-danger-color) !important;
56
+ & > input {
57
+ &::-webkit-input-placeholder {
58
+ color: var(--ax-danger-color) !important;
59
+ }
60
+ &:-ms-input-placeholder {
61
+ color: var(--ax-danger-color) !important;
62
+ }
63
+ &::placeholder {
64
+ color: var(--ax-danger-color) !important;
65
+ }
66
+ }
67
+ }
68
+ &.error-text {
69
+ color: var(--ax-danger-color) !important;
70
+ }
71
+ &.input {
72
+ position: relative;
73
+ display: inline-flex;
74
+ color: var(--ax-dark-dark-color);
75
+
76
+ &.icon {
77
+ input {
78
+ padding-inline-start: 2.1rem;
79
+ padding-inline-end: 0.5em;
80
+ }
81
+ .text-left {
82
+ padding-inline-start: 0.5em !important;
83
+ }
84
+ .text-right {
85
+ padding-inline-end: 0.5em !important;
86
+ }
87
+ & > i.icon {
88
+ cursor: default;
89
+ position: absolute;
90
+ text-align: center;
91
+ top: 0;
92
+ inset-inline-start: 0;
93
+ margin: 0;
94
+ height: 100%;
95
+ width: 2.67142857em;
96
+ opacity: 0.5;
97
+ @include ax-border-radius(var(--ax-size-border-radius));
98
+ -webkit-transition: opacity 0.3s ease;
99
+ transition: opacity 0.3s ease;
100
+ }
101
+ }
102
+ &.disabled {
103
+ & > input {
104
+ background: var(--ax-gray-light-color) !important;
105
+ color: var(--ax-gray-fore-color);
106
+ cursor: not-allowed !important;
107
+ }
108
+ }
109
+ & > input {
110
+ margin: 0;
111
+ max-width: 100%;
112
+ flex: 1 0 auto;
113
+ font-family: inherit;
114
+ font-size: 0.875rem;
115
+ outline: 0;
116
+ -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
117
+ text-align: start;
118
+ background: #fff;
119
+ border: none !important;
120
+ color: rgba(0, 0, 0, 0.87);
121
+ box-shadow: none !important;
122
+ -webkit-appearance: none !important;
123
+ @include ax-border-radius(var(--ax-size-border-radius));
124
+ &::-webkit-input-placeholder {
125
+ color: var(--ax-gray-dark-color) !important;
126
+ }
127
+ &:-ms-input-placeholder {
128
+ color: var(--ax-gray-dark-color) !important;
129
+ }
130
+ &::placeholder {
131
+ color: var(--ax-gray-dark-color) !important;
132
+ }
133
+
134
+ // &.clear {
135
+ // margin-inline-end: 3em !important;
136
+ // }
137
+ &.text-left {
138
+ text-align: left !important;
139
+ direction: ltr !important;
140
+ &:placeholder {
141
+ text-align: left !important;
142
+ }
143
+ &::-webkit-input-placeholder {
144
+ text-align: left !important;
145
+ }
146
+ &:-moz-placeholder {
147
+ text-align: left !important;
148
+ }
149
+ &::-moz-placeholder {
150
+ text-align: left !important;
151
+ }
152
+ &:-ms-input-placeholder {
153
+ text-align: left !important;
154
+ }
155
+ &::-ms-input-placeholder {
156
+ text-align: left !important;
157
+ }
158
+ ::placeholder {
159
+ text-align: left !important;
160
+ }
161
+ }
162
+ &.text-right {
163
+ text-align: right !important;
164
+ direction: rtl !important;
165
+ &::-webkit-input-placeholder {
166
+ text-align: right !important;
167
+ }
168
+ &:-moz-placeholder {
169
+ text-align: right !important;
170
+ }
171
+ &::-moz-placeholder {
172
+ text-align: right !important;
173
+ }
174
+ &:-ms-input-placeholder {
175
+ text-align: right !important;
176
+ }
177
+ &::-ms-input-placeholder {
178
+ text-align: right !important;
179
+ }
180
+ &::placeholder {
181
+ text-align: right !important;
182
+ }
183
+ }
184
+ &:focus {
185
+ border-color: var(--ax-primary-color);
186
+ color: rgba(0, 0, 0, 0.8);
187
+ -webkit-box-shadow: none;
188
+ box-shadow: none;
189
+ @include ax-transition-all();
190
+ & + i.icon {
191
+ opacity: 1 !important;
192
+ color: var(--ax-primary-color);
193
+ }
194
+ }
195
+ }
196
+ i {
197
+ position: absolute;
198
+ height: 100%;
199
+ top: 0;
200
+ inset-inline-start: 0;
201
+ display: flex;
202
+ justify-content: center;
203
+ align-items: center;
204
+ width: 2.771429em;
205
+ color: var(--ax-gray-dark-color);
206
+ background-color: var(--ax-white-color);
207
+ }
208
+ }
209
+ &.form-group-label {
210
+ display: block;
211
+ font-size: 0.875rem;
212
+ font-weight: 500;
213
+ padding: 0.5rem 0;
214
+ }
215
+ &.form-group {
216
+ display: inline-flex;
217
+ flex-direction: column;
218
+ width: 100%;
219
+ }
220
+ &.form-item {
221
+ background-color: var(--ax-white-color);
222
+ position: relative;
223
+ display: flex;
224
+ flex-wrap: wrap;
225
+ align-items: stretch;
226
+ width: 100%;
227
+ overflow: hidden;
228
+ border: 1px solid;
229
+ border-color: var(--ax-border-color);
230
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
231
+
232
+ box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
233
+ &:focus-within {
234
+ border-color: var(--ax-primary-color);
235
+ box-shadow: 0px 0px 0px 1px var(--ax-primary-color);
236
+ .input {
237
+ i {
238
+ color: var(--ax-primary-color) !important;
239
+ }
240
+ }
241
+ }
242
+
243
+ &.required-state {
244
+ border-inline-start-width: 2px;
245
+ border-inline-start-style: solid;
246
+ border-inline-start-color: var(--ax-warning-color) !important;
247
+ &:focus-within {
248
+ border-color: var(--ax-warning-color);
249
+ box-shadow: 0px 0px 0px 1px var(--ax-warning-color);
250
+ .input {
251
+ i {
252
+ color: var(--ax-warning-color) !important;
253
+ }
254
+ }
255
+ }
256
+ }
257
+ &.success-state {
258
+ border-inline-start-width: 2px;
259
+ border-inline-start-style: solid;
260
+ border-inline-start-color: var(--ax-success-color) !important;
261
+ &:focus-within {
262
+ border-color: var(--ax-success-color);
263
+ box-shadow: 0px 0px 0px 1px var(--ax-success-color);
264
+ .input {
265
+ i {
266
+ color: var(--ax-success-color) !important;
267
+ }
268
+ }
269
+ }
270
+ }
271
+ &.error-state {
272
+ border-inline-start-width: 2px;
273
+ border-inline-start-style: solid;
274
+ border-inline-start-color: var(--ax-danger-color) !important;
275
+ &::before {
276
+ border-inline-start-color: var(--ax-danger-trans-dark-color);
277
+ }
278
+ &::after {
279
+ color: var(--ax-danger-dark-color);
280
+ }
281
+ &:focus-within {
282
+ border-color: var(--ax-danger-color);
283
+ box-shadow: 0px 0px 0px 1px var(--ax-danger-color);
284
+ .input {
285
+ i {
286
+ color: var(--ax-danger-color) !important;
287
+ }
288
+ }
289
+ }
290
+ }
291
+ @include ax-border-radius(var(--ax-size-border-radius));
292
+ &.disabled {
293
+ background: var(--ax-gray-light-color) !important;
294
+ cursor: not-allowed !important;
295
+ }
296
+ .readonly {
297
+ opacity: 0.8;
298
+
299
+ input {
300
+ cursor: no-drop;
301
+ }
302
+ .button {
303
+ &.disabled {
304
+ background: transparent !important;
305
+ }
306
+ }
307
+ }
308
+
309
+ .form-item {
310
+ &:not(.error) {
311
+ border: none;
312
+ box-shadow: none;
313
+ }
314
+ }
315
+ .content {
316
+ border: none;
317
+ position: relative;
318
+ flex: 1 1 auto;
319
+ width: 1%;
320
+ min-width: 0;
321
+ margin-bottom: 0;
322
+ .form-item {
323
+ border-radius: 0 !important;
324
+ }
325
+ .input {
326
+ width: 100%;
327
+ input {
328
+ border: none !important;
329
+ border-radius: 0;
330
+ height: 100%;
331
+ }
332
+ textarea {
333
+ border: none !important;
334
+ width: 100%;
335
+ outline: transparent;
336
+ padding: 0.5em;
337
+ font-family: inherit;
338
+ font-size: 0.875rem;
339
+ height: 100%;
340
+ &.text-left {
341
+ text-align: left !important;
342
+ direction: ltr !important;
343
+ &:placeholder {
344
+ text-align: left !important;
345
+ }
346
+ &::-webkit-input-placeholder {
347
+ text-align: left !important;
348
+ }
349
+ &:-moz-placeholder {
350
+ text-align: left !important;
351
+ }
352
+ &::-moz-placeholder {
353
+ text-align: left !important;
354
+ }
355
+ &:-ms-input-placeholder {
356
+ text-align: left !important;
357
+ }
358
+ &::-ms-input-placeholder {
359
+ text-align: left !important;
360
+ }
361
+ ::placeholder {
362
+ text-align: left !important;
363
+ }
364
+ }
365
+ &.text-right {
366
+ text-align: right !important;
367
+ direction: rtl !important;
368
+ &::-webkit-input-placeholder {
369
+ text-align: right !important;
370
+ }
371
+ &:-moz-placeholder {
372
+ text-align: right !important;
373
+ }
374
+ &::-moz-placeholder {
375
+ text-align: right !important;
376
+ }
377
+ &:-ms-input-placeholder {
378
+ text-align: right !important;
379
+ }
380
+ &::-ms-input-placeholder {
381
+ text-align: right !important;
382
+ }
383
+ &::placeholder {
384
+ text-align: right !important;
385
+ }
386
+ }
387
+ }
388
+ }
389
+ }
390
+ .button {
391
+ border-radius: 0 !important;
392
+ height: 100% !important;
393
+ }
394
+ }
395
+ &.chips-container {
396
+ display: flex;
397
+ align-items: center;
398
+ flex-wrap: nowrap;
399
+ flex-grow: 1;
400
+ overflow-x: hidden;
401
+ overflow-y: hidden;
402
+ &:hover {
403
+ overflow-x: overlay;
404
+ }
405
+ &::-webkit-scrollbar {
406
+ height: 3px;
407
+ }
408
+ /* Track */
409
+ &::-webkit-scrollbar-track {
410
+ background: #f1f1f1;
411
+ }
412
+ /* Handle */
413
+ &::-webkit-scrollbar-thumb {
414
+ background: #888;
415
+ }
416
+ /* Handle on hover */
417
+ &::-webkit-scrollbar-thumb:hover {
418
+ background: #555;
419
+ }
420
+ .search-wrapper {
421
+ width: 30%;
422
+ }
423
+ .chips {
424
+ display: inline-flex;
425
+ overflow: hidden;
426
+ background: rgba(0, 0, 0, 0.04);
427
+ padding: 0.2rem 0.5rem;
428
+ margin: 0 0.2rem;
429
+ border-radius: var(--ax-size-border-radius);
430
+ color: var(--ax-gray-fore-color);
431
+ border: 1px solid var(--ax-border-color);
432
+ flex: none;
433
+ min-width: fit-content;
434
+ max-width: 7rem;
435
+ white-space: nowrap;
436
+ .chips-text {
437
+ display: inline-block;
438
+ vertical-align: middle;
439
+ overflow: hidden;
440
+ white-space: nowrap;
441
+ vertical-align: middle;
442
+ text-overflow: ellipsis;
443
+ font-size: 0.875rem;
444
+ direction: inherit;
445
+ text-align: inherit;
446
+ }
447
+ .close-icon {
448
+ vertical-align: middle;
449
+ display: flex;
450
+ align-items: center;
451
+ margin-inline-start: 0.25rem;
452
+ cursor: pointer;
453
+ }
454
+ // font-size: inherit;
455
+ // background: rgba(0, 0, 0, 0.04);
456
+ // color: var(--ax-gray-fore-color);
457
+ // border: 1px solid var(--ax-border-color);
458
+ // padding: 0.2em 0.4em;
459
+ // @include ax-border-radius(var(--ax-size-border-radius));
460
+ // margin: 0 0.5em;
461
+ // display: inline-block;
462
+ // cursor: pointer;
463
+ // flex: unset;
464
+ // white-space: nowrap;
465
+ // // overflow: hidden;
466
+ // // text-overflow: ellipsis;
467
+ // .chips-text {
468
+ // display: inline-block;
469
+ // vertical-align: middle;
470
+ // overflow: hidden;
471
+ // white-space: nowrap;
472
+ // vertical-align: middle;
473
+ // text-overflow: ellipsis;
474
+ // font-size: 0.875rem;
475
+ // min-width: fit-content;
476
+ // max-width: 110px;
477
+ // direction: inherit;
478
+ // text-align: inherit;
479
+ // }
480
+ // .close-icon {
481
+ // vertical-align: middle;
482
+ // }
483
+ // i {
484
+ // color: var(--ax-gray-dark-color);
485
+ // margin-inline-start: 0.3em;
486
+ // @include ax-transition-all();
487
+ // &:hover {
488
+ // color: var(--ax-danger-color);
489
+ // }
490
+ // }
491
+ &:hover {
492
+ background-color: var(--ax-primary-trans-light-color);
493
+ color: var(--ax-primary-color);
494
+ i {
495
+ color: var(--ax-primary-color);
496
+ &:hover {
497
+ color: var(--ax-danger-color);
498
+ }
499
+ }
500
+ }
501
+ }
502
+ .chips-blank {
503
+ border: none;
504
+ background-color:transparent;
505
+ flex: unset;
506
+ &:hover {
507
+ border: none;
508
+ background-color: transparent;
509
+ }
510
+ }
511
+ & > div {
512
+ flex: 1 1 auto;
513
+ }
514
+ }
515
+ }