@ardium-ui/ui 5.0.0-alpha.75 → 5.0.0-alpha.77

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 (132) hide show
  1. package/fesm2022/ardium-ui-ui.mjs +106 -106
  2. package/fesm2022/ardium-ui-ui.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/prebuilt-themes/default/badge.css +234 -234
  5. package/prebuilt-themes/default/badge.css.map +1 -1
  6. package/prebuilt-themes/default/buttons/button.css +324 -324
  7. package/prebuilt-themes/default/buttons/button.css.map +1 -1
  8. package/prebuilt-themes/default/buttons/fab.css +317 -319
  9. package/prebuilt-themes/default/buttons/fab.css.map +1 -1
  10. package/prebuilt-themes/default/buttons/icon-button.css +299 -300
  11. package/prebuilt-themes/default/buttons/icon-button.css.map +1 -1
  12. package/prebuilt-themes/default/calendar.css +390 -391
  13. package/prebuilt-themes/default/calendar.css.map +1 -1
  14. package/prebuilt-themes/default/card.css +151 -159
  15. package/prebuilt-themes/default/card.css.map +1 -1
  16. package/prebuilt-themes/default/checkbox-list.css +89 -88
  17. package/prebuilt-themes/default/checkbox-list.css.map +1 -1
  18. package/prebuilt-themes/default/checkbox.css +349 -349
  19. package/prebuilt-themes/default/checkbox.css.map +1 -1
  20. package/prebuilt-themes/default/chips.css +412 -412
  21. package/prebuilt-themes/default/chips.css.map +1 -1
  22. package/prebuilt-themes/default/color-display.css +34 -33
  23. package/prebuilt-themes/default/color-display.css.map +1 -1
  24. package/prebuilt-themes/default/color-picker.css +105 -103
  25. package/prebuilt-themes/default/color-picker.css.map +1 -1
  26. package/prebuilt-themes/default/core.css +108 -106
  27. package/prebuilt-themes/default/core.css.map +1 -1
  28. package/prebuilt-themes/default/dialog.css +19 -20
  29. package/prebuilt-themes/default/dialog.css.map +1 -1
  30. package/prebuilt-themes/default/divider.css +84 -83
  31. package/prebuilt-themes/default/divider.css.map +1 -1
  32. package/prebuilt-themes/default/dropdown-panel.css +42 -42
  33. package/prebuilt-themes/default/dropdown-panel.css.map +1 -1
  34. package/prebuilt-themes/default/file-drop-area.css +329 -329
  35. package/prebuilt-themes/default/file-drop-area.css.map +1 -1
  36. package/prebuilt-themes/default/form-field-frame.css +102 -102
  37. package/prebuilt-themes/default/form-field-frame.css.map +1 -1
  38. package/prebuilt-themes/default/form-field.css +148 -151
  39. package/prebuilt-themes/default/form-field.css.map +1 -1
  40. package/prebuilt-themes/default/inputs/autocomplete-input.css +183 -183
  41. package/prebuilt-themes/default/inputs/autocomplete-input.css.map +1 -1
  42. package/prebuilt-themes/default/inputs/color-input.css +99 -98
  43. package/prebuilt-themes/default/inputs/color-input.css.map +1 -1
  44. package/prebuilt-themes/default/inputs/date-input.css +134 -135
  45. package/prebuilt-themes/default/inputs/date-input.css.map +1 -1
  46. package/prebuilt-themes/default/inputs/digit-input.css +120 -122
  47. package/prebuilt-themes/default/inputs/digit-input.css.map +1 -1
  48. package/prebuilt-themes/default/inputs/file-input.css +385 -387
  49. package/prebuilt-themes/default/inputs/file-input.css.map +1 -1
  50. package/prebuilt-themes/default/inputs/hex-input.css +150 -149
  51. package/prebuilt-themes/default/inputs/hex-input.css.map +1 -1
  52. package/prebuilt-themes/default/inputs/input.css +137 -136
  53. package/prebuilt-themes/default/inputs/input.css.map +1 -1
  54. package/prebuilt-themes/default/inputs/number-input.css +213 -214
  55. package/prebuilt-themes/default/inputs/number-input.css.map +1 -1
  56. package/prebuilt-themes/default/inputs/password-input.css +120 -120
  57. package/prebuilt-themes/default/inputs/password-input.css.map +1 -1
  58. package/prebuilt-themes/default/kbd-shortcut.css +14 -13
  59. package/prebuilt-themes/default/kbd-shortcut.css.map +1 -1
  60. package/prebuilt-themes/default/kbd.css +26 -25
  61. package/prebuilt-themes/default/kbd.css.map +1 -1
  62. package/prebuilt-themes/default/modal.css +96 -95
  63. package/prebuilt-themes/default/modal.css.map +1 -1
  64. package/prebuilt-themes/default/progress-bar.css +250 -235
  65. package/prebuilt-themes/default/progress-bar.css.map +1 -1
  66. package/prebuilt-themes/default/progress-circle.css +178 -177
  67. package/prebuilt-themes/default/progress-circle.css.map +1 -1
  68. package/prebuilt-themes/default/radio.css +246 -248
  69. package/prebuilt-themes/default/radio.css.map +1 -1
  70. package/prebuilt-themes/default/segment.css +432 -431
  71. package/prebuilt-themes/default/segment.css.map +1 -1
  72. package/prebuilt-themes/default/select.css +302 -304
  73. package/prebuilt-themes/default/select.css.map +1 -1
  74. package/prebuilt-themes/default/slide-toggle.css +319 -319
  75. package/prebuilt-themes/default/slide-toggle.css.map +1 -1
  76. package/prebuilt-themes/default/slider.css +399 -399
  77. package/prebuilt-themes/default/slider.css.map +1 -1
  78. package/prebuilt-themes/default/snackbar.css +185 -185
  79. package/prebuilt-themes/default/snackbar.css.map +1 -1
  80. package/prebuilt-themes/default/spinner.css +161 -161
  81. package/prebuilt-themes/default/spinner.css.map +1 -1
  82. package/prebuilt-themes/default/stars.css +271 -275
  83. package/prebuilt-themes/default/stars.css.map +1 -1
  84. package/prebuilt-themes/default/tabber.css +250 -250
  85. package/prebuilt-themes/default/tabber.css.map +1 -1
  86. package/prebuilt-themes/default/table-pagination.css +57 -57
  87. package/prebuilt-themes/default/table-pagination.css.map +1 -1
  88. package/prebuilt-themes/default/table.css +464 -463
  89. package/prebuilt-themes/default/table.css.map +1 -1
  90. package/themes/default/badge.scss +112 -110
  91. package/themes/default/buttons/button.scss +91 -89
  92. package/themes/default/buttons/fab.scss +80 -76
  93. package/themes/default/buttons/icon-button.scss +73 -71
  94. package/themes/default/calendar.scss +246 -242
  95. package/themes/default/card.scss +161 -159
  96. package/themes/default/checkbox-list.scss +85 -83
  97. package/themes/default/checkbox.scss +68 -66
  98. package/themes/default/chips.scss +202 -195
  99. package/themes/default/color-display.scss +40 -38
  100. package/themes/default/color-picker.scss +95 -93
  101. package/themes/default/core.scss +124 -121
  102. package/themes/default/dialog.scss +21 -19
  103. package/themes/default/divider.scss +92 -90
  104. package/themes/default/dropdown-panel.scss +49 -47
  105. package/themes/default/file-drop-area.scss +197 -195
  106. package/themes/default/form-field-frame.scss +69 -67
  107. package/themes/default/form-field.scss +135 -133
  108. package/themes/default/inputs/autocomplete-input.scss +99 -97
  109. package/themes/default/inputs/color-input.scss +34 -32
  110. package/themes/default/inputs/date-input.scss +88 -86
  111. package/themes/default/inputs/digit-input.scss +103 -101
  112. package/themes/default/inputs/file-input.scss +158 -156
  113. package/themes/default/inputs/hex-input.scss +66 -64
  114. package/themes/default/inputs/input.scss +52 -50
  115. package/themes/default/inputs/number-input.scss +162 -160
  116. package/themes/default/inputs/password-input.scss +99 -97
  117. package/themes/default/kbd-shortcut.scss +15 -13
  118. package/themes/default/kbd.scss +34 -32
  119. package/themes/default/modal.scss +106 -104
  120. package/themes/default/progress-bar.scss +126 -102
  121. package/themes/default/progress-circle.scss +50 -48
  122. package/themes/default/radio.scss +110 -108
  123. package/themes/default/segment.scss +282 -277
  124. package/themes/default/select.scss +255 -253
  125. package/themes/default/slide-toggle.scss +173 -171
  126. package/themes/default/slider.scss +223 -217
  127. package/themes/default/snackbar.scss +49 -47
  128. package/themes/default/spinner.scss +23 -21
  129. package/themes/default/stars.scss +95 -93
  130. package/themes/default/tabber.scss +105 -103
  131. package/themes/default/table-pagination.scss +60 -59
  132. package/themes/default/table.scss +375 -373
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/file-drop-area.scss","../../../../projects/ui/src/themes/default/_coloring.scss"],"names":[],"mappings":"AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AChEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADxEF;EACE;EACA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;;AAKF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAGF;EACE;EACA;;AAEF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAMN;EAEE;;AAEA;EACE;;AAGJ;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE","file":"file-drop-area.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/file-drop-area.scss","../../../../projects/ui/src/themes/default/_coloring.scss"],"names":[],"mappings":"AAEA;EAGE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;ECjEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EDvEA;IACE;IACA;IACA;IACA;IAEA;IACA;;EAEA;IACE;IACA;;EAGJ;IACE;IACA;IACA;IACA;IACA;IACA;IAKA;IACA;;EAKF;IACE;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;EAGF;IACE;IACA;;EAEF;IACE;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;EAEF;IACE;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;;EAMN;IAEE;;EAEA;IACE;;EAGJ;IACE;;EAGF;IACE;IACA;IACA;;EAEA;IACE","file":"file-drop-area.css"}
@@ -1,105 +1,105 @@
1
- .ard-form-field-frame {
2
- box-sizing: border-box;
3
- min-height: var(--ard-form-field-height);
4
- height: max-content;
5
- max-width: 100%;
6
- display: flex;
7
- align-items: center;
8
- justify-content: stretch;
9
- position: relative;
10
- font-family: var(--ard-font-family);
11
- border-radius: var(--ard-variant-border-radius);
12
- background: var(--ard-appearance-background);
13
- border: var(--ard-appearance-border);
14
- }
15
- .ard-form-field-frame .ard-form-field-content-container {
16
- flex-grow: 1;
17
- min-height: inherit;
18
- }
19
- .ard-form-field-frame .ard-form-field-content-container > * {
20
- min-height: inherit;
21
- }
22
- .ard-form-field-frame .ard-form-field-prefix-container,
23
- .ard-form-field-frame .ard-form-field-suffix-container {
24
- height: max-content;
25
- max-height: 100%;
26
- display: flex;
27
- align-items: center;
28
- }
29
- .ard-form-field-frame .ard-form-field-prefix-container {
30
- padding-left: var(--ard-form-field-padding-left, 0.375rem);
31
- }
32
- .ard-form-field-frame .ard-form-field-suffix-container {
33
- padding-right: var(--ard-form-field-padding-right, 0.375rem);
34
- }
35
- .ard-form-field-frame.ard-compact {
36
- min-height: var(--ard-form-field-height-compact);
37
- }
38
- .ard-form-field-frame.ard-appearance-outlined {
39
- --ard-appearance-background: var(--ard-bg);
40
- --ard-appearance-border-color: var(--ard-border);
41
- --ard-appearance-border: 1px solid var(--ard-appearance-border-color);
42
- }
43
- .ard-form-field-frame.ard-appearance-outlined.ard-focused {
44
- --ard-appearance-border-color: var(--ard-border-dark);
45
- }
46
- .ard-form-field-frame.ard-appearance-outlined.ard-is-success {
47
- --ard-appearance-border-color: rgb(var(--ard-success-500));
48
- }
49
- .ard-form-field-frame.ard-appearance-outlined.ard-has-error {
50
- --ard-appearance-background: rgb(var(--ard-danger-50));
51
- --ard-appearance-border-color: rgb(var(--ard-danger-500));
52
- }
53
- .ard-form-field-frame.ard-appearance-filled {
54
- --ard-appearance-background: var(--ard-bg-filled);
55
- --ard-appearance-border: none;
56
- }
57
- .ard-form-field-frame.ard-appearance-filled.ard-is-success {
58
- --ard-appearance-background: rgb(var(--ard-success-50));
59
- }
60
- .ard-form-field-frame.ard-appearance-filled.ard-has-error {
61
- --ard-appearance-background: rgb(var(--ard-danger-50));
62
- }
63
- .ard-form-field-frame.ard-appearance-transparent {
64
- --ard-appearance-background: transparent;
65
- --ard-appearance-border: none;
66
- }
67
- .ard-form-field-frame.ard-variant-rounded, .ard-form-field-frame.ard-variant-semirounded {
68
- --ard-variant-border-radius: 8px;
69
- }
70
- .ard-form-field-frame.ard-variant-pill {
71
- --ard-variant-border-radius: 9999px;
72
- }
73
- .ard-form-field-frame.ard-variant-sharp {
74
- --ard-variant-border-radius: 0;
75
- }
76
- .ard-form-field-frame .ard-form-field-overlay {
77
- background: var(--ard-overlay);
78
- opacity: 0;
79
- }
80
- .ard-form-field-frame:hover .ard-form-field-overlay {
81
- opacity: var(--ard-form-field-hover-overlay-opacity, 3%);
82
- }
83
- .ard-form-field-frame.ard-focused .ard-form-field-overlay {
84
- opacity: var(--ard-form-field-focus-overlay-opacity, 6%);
85
- }
86
- .ard-form-field-frame.ard-enable-transitions {
87
- transition: border-color var(--ard-form-field-transitions-duration, 150ms) cubic-bezier(0.4, 0, 0.2, 1);
88
- }
89
- .ard-form-field-frame.ard-enable-transitions .ard-form-field-overlay {
90
- transition: opacity var(--ard-form-field-transitions-duration, 150ms) cubic-bezier(0.4, 0, 0.2, 1), background-color var(--ard-form-field-transitions-duration, 150ms) cubic-bezier(0.4, 0, 0.2, 1);
91
- }
92
-
93
- .ard-disabled .ard-form-field-frame {
94
- pointer-events: none;
95
- opacity: var(--ard-form-field-disabled-opacity, 50%);
96
- }
97
- .ard-disabled .ard-form-field-frame.ard-appearance-transparent .ard-form-field-overlay {
98
- opacity: var(--ard-form-field-disabled-transparent-overlay-opacity, 4.5%);
99
- }
100
-
101
- .ard-readonly .ard-form-field-frame:hover .ard-form-field-overlay {
102
- opacity: 0;
1
+ @layer ard-theme {
2
+ .ard-form-field-frame {
3
+ box-sizing: border-box;
4
+ min-height: var(--ard-form-field-height);
5
+ height: max-content;
6
+ max-width: 100%;
7
+ display: flex;
8
+ align-items: center;
9
+ justify-content: stretch;
10
+ position: relative;
11
+ font-family: var(--ard-font-family);
12
+ border-radius: var(--ard-variant-border-radius);
13
+ background: var(--ard-appearance-background);
14
+ border: var(--ard-appearance-border);
15
+ }
16
+ .ard-form-field-frame .ard-form-field-content-container {
17
+ flex-grow: 1;
18
+ min-height: inherit;
19
+ }
20
+ .ard-form-field-frame .ard-form-field-content-container > * {
21
+ min-height: inherit;
22
+ }
23
+ .ard-form-field-frame .ard-form-field-prefix-container,
24
+ .ard-form-field-frame .ard-form-field-suffix-container {
25
+ height: max-content;
26
+ max-height: 100%;
27
+ display: flex;
28
+ align-items: center;
29
+ }
30
+ .ard-form-field-frame .ard-form-field-prefix-container {
31
+ padding-left: var(--ard-form-field-padding-left, 0.375rem);
32
+ }
33
+ .ard-form-field-frame .ard-form-field-suffix-container {
34
+ padding-right: var(--ard-form-field-padding-right, 0.375rem);
35
+ }
36
+ .ard-form-field-frame.ard-compact {
37
+ min-height: var(--ard-form-field-height-compact);
38
+ }
39
+ .ard-form-field-frame.ard-appearance-outlined {
40
+ --ard-appearance-background: var(--ard-bg);
41
+ --ard-appearance-border-color: var(--ard-border);
42
+ --ard-appearance-border: 1px solid var(--ard-appearance-border-color);
43
+ }
44
+ .ard-form-field-frame.ard-appearance-outlined.ard-focused {
45
+ --ard-appearance-border-color: var(--ard-border-dark);
46
+ }
47
+ .ard-form-field-frame.ard-appearance-outlined.ard-is-success {
48
+ --ard-appearance-border-color: rgb(var(--ard-success-500));
49
+ }
50
+ .ard-form-field-frame.ard-appearance-outlined.ard-has-error {
51
+ --ard-appearance-background: rgb(var(--ard-danger-50));
52
+ --ard-appearance-border-color: rgb(var(--ard-danger-500));
53
+ }
54
+ .ard-form-field-frame.ard-appearance-filled {
55
+ --ard-appearance-background: var(--ard-bg-filled);
56
+ --ard-appearance-border: none;
57
+ }
58
+ .ard-form-field-frame.ard-appearance-filled.ard-is-success {
59
+ --ard-appearance-background: rgb(var(--ard-success-50));
60
+ }
61
+ .ard-form-field-frame.ard-appearance-filled.ard-has-error {
62
+ --ard-appearance-background: rgb(var(--ard-danger-50));
63
+ }
64
+ .ard-form-field-frame.ard-appearance-transparent {
65
+ --ard-appearance-background: transparent;
66
+ --ard-appearance-border: none;
67
+ }
68
+ .ard-form-field-frame.ard-variant-rounded, .ard-form-field-frame.ard-variant-semirounded {
69
+ --ard-variant-border-radius: 8px;
70
+ }
71
+ .ard-form-field-frame.ard-variant-pill {
72
+ --ard-variant-border-radius: 9999px;
73
+ }
74
+ .ard-form-field-frame.ard-variant-sharp {
75
+ --ard-variant-border-radius: 0;
76
+ }
77
+ .ard-form-field-frame .ard-form-field-overlay {
78
+ background: var(--ard-overlay);
79
+ opacity: 0;
80
+ }
81
+ .ard-form-field-frame:hover .ard-form-field-overlay {
82
+ opacity: var(--ard-form-field-hover-overlay-opacity, 3%);
83
+ }
84
+ .ard-form-field-frame.ard-focused .ard-form-field-overlay {
85
+ opacity: var(--ard-form-field-focus-overlay-opacity, 6%);
86
+ }
87
+ .ard-form-field-frame.ard-enable-transitions {
88
+ transition: border-color var(--ard-form-field-transitions-duration, 150ms) cubic-bezier(0.4, 0, 0.2, 1);
89
+ }
90
+ .ard-form-field-frame.ard-enable-transitions .ard-form-field-overlay {
91
+ transition: opacity var(--ard-form-field-transitions-duration, 150ms) cubic-bezier(0.4, 0, 0.2, 1), background-color var(--ard-form-field-transitions-duration, 150ms) cubic-bezier(0.4, 0, 0.2, 1);
92
+ }
93
+ .ard-disabled .ard-form-field-frame {
94
+ pointer-events: none;
95
+ opacity: var(--ard-form-field-disabled-opacity, 50%);
96
+ }
97
+ .ard-disabled .ard-form-field-frame.ard-appearance-transparent .ard-form-field-overlay {
98
+ opacity: var(--ard-form-field-disabled-transparent-overlay-opacity, 4.5%);
99
+ }
100
+ .ard-readonly .ard-form-field-frame:hover .ard-form-field-overlay {
101
+ opacity: 0;
102
+ }
103
103
  }
104
104
 
105
105
  /*# sourceMappingURL=form-field-frame.css.map */
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/form-field-frame.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAGA;EACE;EACA,YCqCkB;EDpClB;EACA;EACA;EACA;EACA;EACA;EACA;EEgEA;EFhCA;EACA;;AA/BA;EACE;EACA;;AAEA;EACE;;AAGJ;AAAA;EAEE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE,YCKwB;;ACD1B;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;;AAOF;EAEE;;AAEF;EACE;;AAEF;EACE;;AFvCF;EACE,YC9CM;ED+CN;;AAIA;EACE;;AAIF;EACE;;AAGJ;EACE;;AAEA;EACE,YACE;;;AAKR;EACE;EACA;;AAGE;EACE;;;AAMF;EACE","file":"form-field-frame.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/form-field-frame.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAGA;EACE;IACE;IACA,YCoCgB;IDnChB;IACA;IACA;IACA;IACA;IACA;IACA;IE+DF;IF/BE;IACA;;EA/BA;IACE;IACA;;EAEA;IACE;;EAGJ;AAAA;IAEE;IACA;IACA;IACA;;EAEF;IACE;;EAEF;IACE;;EAIF;IACE,YCIsB;;ECD1B;IACE;IACA;IACA;;EAEA;IACE;;EAEF;IACE;;EAEF;IACE;IACA;;EAGJ;IACE;IACA;;EAEA;IACE;;EAEF;IACE;;EAGJ;IACE;IACA;;EAOF;IAEE;;EAEF;IACE;;EAEF;IACE;;EFtCA;IACE,YC/CI;IDgDJ;;EAIA;IACE;;EAIF;IACE;;EAGJ;IACE;;EAEA;IACE,YACE;;EAKR;IACE;IACA;;EAGE;IACE;;EAMF;IACE","file":"form-field-frame.css"}
@@ -1,155 +1,152 @@
1
- :root {
2
- --ard-form-field-label-padding: 0.25rem 0 0.125rem 0.125rem;
3
- --ard-form-field-label-font-size: 0.9375rem;
4
- --ard-form-field-label-font-weight: 500;
5
- --ard-form-field-label-required-font-weight: 500;
6
- --ard-form-field-label-required-font-size: 112.5%;
7
- --ard-form-field-label-required-color: orangered;
8
- --ard-form-field-label-optional-font-weight: 400;
9
- --ard-form-field-label-optional-font-size: 0.8125rem;
10
- --ard-form-field-label-optional-font-style: italic;
11
- --ard-form-field-hint-padding: 0.125rem 0 0.25rem 0.125rem;
12
- --ard-form-field-hint-font-size: 0.8125rem;
13
- --ard-form-field-hint-line-height: 1.2;
14
- --ard-form-field-hint-right-padding-left: 0.5rem;
15
- --ard-form-field-hint-error-line-height: 1.2;
16
- --ard-form-field-hint-error-gap: 0.375em;
17
- --ard-form-field-label-disabled-opacity: 40%;
18
- --ard-form-field-hint-disabled-opacity: 50%;
19
- --ard-form-field-error-animation-duration: 0.25s;
20
- --ard-horizontal-form-field-gap: 0.5rem;
21
- }
22
-
23
- ard-form-field,
24
- ard-horizontal-form-field {
25
- display: block;
26
- width: 100%;
27
- }
28
-
29
- .ard-form-field,
30
- .ard-horizontal-form-field {
31
- display: flex;
32
- flex-direction: column;
33
- }
34
- .ard-form-field .ard-label,
35
- .ard-horizontal-form-field .ard-label {
36
- padding: var(--ard-form-field-label-padding, 0.25rem 0 0.125rem 0.125rem);
37
- font-size: var(--ard-form-field-label-font-size, 0.9375rem);
38
- font-weight: var(--ard-form-field-label-font-weight, 500);
39
- }
40
- .ard-form-field .ard-label .ard-label__required .ard-label__required-optional-text,
41
- .ard-horizontal-form-field .ard-label .ard-label__required .ard-label__required-optional-text {
42
- font-weight: var(--ard-form-field-label-required-font-weight, 500);
43
- font-size: var(--ard-form-field-label-required-font-size, 112.5%);
44
- color: var(--ard-form-field-label-required-color, orangered);
45
- line-height: 1;
46
- }
47
- .ard-form-field .ard-label .ard-label__optional .ard-label__required-optional-text,
48
- .ard-horizontal-form-field .ard-label .ard-label__optional .ard-label__required-optional-text {
49
- font-weight: var(--ard-form-field-label-optional-font-weight, 400);
50
- font-size: var(--ard-form-field-label-optional-font-size, 0.8125rem);
51
- color: var(--ard-form-field-label-optional-color, var(--ard-text2));
52
- font-style: var(--ard-form-field-label-optional-font-style, italic);
53
- }
54
- .ard-form-field .ard-form-field__hints,
55
- .ard-horizontal-form-field .ard-form-field__hints {
56
- padding: var(--ard-form-field-hint-padding, 0.125rem 0 0.25rem 0.125rem);
57
- font-size: var(--ard-form-field-hint-font-size, 0.8125rem);
58
- line-height: var(--ard-form-field-hint-line-height, 1.1);
59
- }
60
- .ard-form-field .ard-form-field__hints.ard-form-field__reserve-hint-line,
61
- .ard-horizontal-form-field .ard-form-field__hints.ard-form-field__reserve-hint-line {
62
- box-sizing: content-box;
63
- min-height: calc(var(--ard-form-field-hint-line-height, 1.1) * 1em);
64
- }
65
- .ard-form-field .ard-form-field__hints-right > *,
66
- .ard-form-field .ard-form-field__errors-right > *,
67
- .ard-horizontal-form-field .ard-form-field__hints-right > *,
68
- .ard-horizontal-form-field .ard-form-field__errors-right > * {
69
- padding-left: var(--ard-form-field-hint-right-padding-left, 0.5rem);
70
- }
71
- .ard-form-field .ard-hint,
72
- .ard-form-field .ard-error,
73
- .ard-horizontal-form-field .ard-hint,
74
- .ard-horizontal-form-field .ard-error {
75
- font-size: 1em;
76
- line-height: var(--ard-form-field-hint-error-line-height, 1.2);
77
- display: inline-grid;
78
- min-height: calc(var(--ard-form-field-hint-error-line-height, 1.2) * 1em);
79
- }
80
- .ard-form-field .ard-hint,
81
- .ard-horizontal-form-field .ard-hint {
82
- color: var(--ard-form-field-hint-color, var(--ard-text2));
83
- }
84
- .ard-form-field .ard-error:not(.ard-hint-error),
85
- .ard-form-field .ard-form-field__errors .ard-hint-error,
86
- .ard-horizontal-form-field .ard-error:not(.ard-hint-error),
87
- .ard-horizontal-form-field .ard-form-field__errors .ard-hint-error {
88
- color: var(--ard-form-field-error-color, rgb(var(--ard-danger-700)));
89
- overflow: hidden;
90
- }
91
- .ard-form-field .ard-error:not(.ard-hint-error),
92
- .ard-horizontal-form-field .ard-error:not(.ard-hint-error) {
93
- animation: errorAppear var(--ard-form-field-error-animation-duration, 0.25s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
94
- }
95
- .ard-form-field .ard-form-field__default-hint,
96
- .ard-form-field .ard-form-field__default-error,
97
- .ard-horizontal-form-field .ard-form-field__default-hint,
98
- .ard-horizontal-form-field .ard-form-field__default-error {
99
- gap: var(--ard-form-field-hint-error-gap, 0.375em);
100
- }
101
- .ard-form-field.ard-form-field__with-error .ard-label,
102
- .ard-form-field.ard-form-field__with-error ard-label,
103
- .ard-horizontal-form-field.ard-form-field__with-error .ard-label,
104
- .ard-horizontal-form-field.ard-form-field__with-error ard-label {
105
- color: var(--ard-form-field-error-color, rgb(var(--ard-danger-700)));
106
- }
107
- .ard-form-field.ard-form-field__is-success .ard-label,
108
- .ard-form-field.ard-form-field__is-success ard-label,
109
- .ard-horizontal-form-field.ard-form-field__is-success .ard-label,
110
- .ard-horizontal-form-field.ard-form-field__is-success ard-label {
111
- color: var(--ard-form-field-success-color, rgb(var(--ard-success-700)));
112
- }
113
- .ard-form-field.ard-form-field__control-disabled .ard-label,
114
- .ard-horizontal-form-field.ard-form-field__control-disabled .ard-label {
115
- opacity: var(--ard-form-field-label-disabled-opacity, 40%);
116
- }
117
- .ard-form-field.ard-form-field__control-disabled .ard-form-field__hints,
118
- .ard-horizontal-form-field.ard-form-field__control-disabled .ard-form-field__hints {
119
- opacity: var(--ard-form-field-hint-disabled-opacity, 50%);
120
- }
121
-
122
- .ard-horizontal-form-field {
123
- align-items: flex-start;
124
- justify-content: stretch;
125
- flex-direction: row;
126
- gap: var(--ard-horizontal-form-field-gap, 0.5rem);
127
- }
128
- .ard-horizontal-form-field .ard-form-field__label-container {
129
- width: var(--ard-horizontal-form-field-label-width, 12rem);
130
- min-width: var(--ard-horizontal-form-field-label-width, 12rem);
131
- height: var(--ard-form-field-height);
132
- display: flex;
133
- align-items: center;
134
- justify-content: var(--ard-horizontal-form-field-label-align, flex-start);
135
- }
136
- .ard-horizontal-form-field .ard-form-field__non-label {
137
- flex-grow: 1;
138
- }
139
- .ard-horizontal-form-field:has(.ard-form-field__input .ard-compact) .ard-form-field__label-container {
140
- height: var(--ard-form-field-height-compact);
141
- }
142
-
143
- ard-label {
144
- display: flex;
145
- }
146
-
147
- @keyframes errorAppear {
148
- from {
149
- grid-template-rows: 0fr;
1
+ @layer ard-theme {
2
+ :root {
3
+ --ard-form-field-label-padding: 0.25rem 0 0.125rem 0.125rem;
4
+ --ard-form-field-label-font-size: 0.9375rem;
5
+ --ard-form-field-label-font-weight: 500;
6
+ --ard-form-field-label-required-font-weight: 500;
7
+ --ard-form-field-label-required-font-size: 112.5%;
8
+ --ard-form-field-label-required-color: orangered;
9
+ --ard-form-field-label-optional-font-weight: 400;
10
+ --ard-form-field-label-optional-font-size: 0.8125rem;
11
+ --ard-form-field-label-optional-font-style: italic;
12
+ --ard-form-field-hint-padding: 0.125rem 0 0.25rem 0.125rem;
13
+ --ard-form-field-hint-font-size: 0.8125rem;
14
+ --ard-form-field-hint-line-height: 1.2;
15
+ --ard-form-field-hint-right-padding-left: 0.5rem;
16
+ --ard-form-field-hint-error-line-height: 1.2;
17
+ --ard-form-field-hint-error-gap: 0.375em;
18
+ --ard-form-field-label-disabled-opacity: 40%;
19
+ --ard-form-field-hint-disabled-opacity: 50%;
20
+ --ard-form-field-error-animation-duration: 0.25s;
21
+ --ard-horizontal-form-field-gap: 0.5rem;
22
+ }
23
+ ard-form-field,
24
+ ard-horizontal-form-field {
25
+ display: block;
26
+ width: 100%;
27
+ }
28
+ .ard-form-field,
29
+ .ard-horizontal-form-field {
30
+ display: flex;
31
+ flex-direction: column;
32
+ }
33
+ .ard-form-field .ard-label,
34
+ .ard-horizontal-form-field .ard-label {
35
+ padding: var(--ard-form-field-label-padding, 0.25rem 0 0.125rem 0.125rem);
36
+ font-size: var(--ard-form-field-label-font-size, 0.9375rem);
37
+ font-weight: var(--ard-form-field-label-font-weight, 500);
38
+ }
39
+ .ard-form-field .ard-label .ard-label__required .ard-label__required-optional-text,
40
+ .ard-horizontal-form-field .ard-label .ard-label__required .ard-label__required-optional-text {
41
+ font-weight: var(--ard-form-field-label-required-font-weight, 500);
42
+ font-size: var(--ard-form-field-label-required-font-size, 112.5%);
43
+ color: var(--ard-form-field-label-required-color, orangered);
44
+ line-height: 1;
45
+ }
46
+ .ard-form-field .ard-label .ard-label__optional .ard-label__required-optional-text,
47
+ .ard-horizontal-form-field .ard-label .ard-label__optional .ard-label__required-optional-text {
48
+ font-weight: var(--ard-form-field-label-optional-font-weight, 400);
49
+ font-size: var(--ard-form-field-label-optional-font-size, 0.8125rem);
50
+ color: var(--ard-form-field-label-optional-color, var(--ard-text2));
51
+ font-style: var(--ard-form-field-label-optional-font-style, italic);
52
+ }
53
+ .ard-form-field .ard-form-field__hints,
54
+ .ard-horizontal-form-field .ard-form-field__hints {
55
+ padding: var(--ard-form-field-hint-padding, 0.125rem 0 0.25rem 0.125rem);
56
+ font-size: var(--ard-form-field-hint-font-size, 0.8125rem);
57
+ line-height: var(--ard-form-field-hint-line-height, 1.1);
58
+ }
59
+ .ard-form-field .ard-form-field__hints.ard-form-field__reserve-hint-line,
60
+ .ard-horizontal-form-field .ard-form-field__hints.ard-form-field__reserve-hint-line {
61
+ box-sizing: content-box;
62
+ min-height: calc(var(--ard-form-field-hint-line-height, 1.1) * 1em);
63
+ }
64
+ .ard-form-field .ard-form-field__hints-right > *,
65
+ .ard-form-field .ard-form-field__errors-right > *,
66
+ .ard-horizontal-form-field .ard-form-field__hints-right > *,
67
+ .ard-horizontal-form-field .ard-form-field__errors-right > * {
68
+ padding-left: var(--ard-form-field-hint-right-padding-left, 0.5rem);
69
+ }
70
+ .ard-form-field .ard-hint,
71
+ .ard-form-field .ard-error,
72
+ .ard-horizontal-form-field .ard-hint,
73
+ .ard-horizontal-form-field .ard-error {
74
+ font-size: 1em;
75
+ line-height: var(--ard-form-field-hint-error-line-height, 1.2);
76
+ display: inline-grid;
77
+ min-height: calc(var(--ard-form-field-hint-error-line-height, 1.2) * 1em);
78
+ }
79
+ .ard-form-field .ard-hint,
80
+ .ard-horizontal-form-field .ard-hint {
81
+ color: var(--ard-form-field-hint-color, var(--ard-text2));
82
+ }
83
+ .ard-form-field .ard-error:not(.ard-hint-error),
84
+ .ard-form-field .ard-form-field__errors .ard-hint-error,
85
+ .ard-horizontal-form-field .ard-error:not(.ard-hint-error),
86
+ .ard-horizontal-form-field .ard-form-field__errors .ard-hint-error {
87
+ color: var(--ard-form-field-error-color, rgb(var(--ard-danger-700)));
88
+ overflow: hidden;
89
+ }
90
+ .ard-form-field .ard-error:not(.ard-hint-error),
91
+ .ard-horizontal-form-field .ard-error:not(.ard-hint-error) {
92
+ animation: errorAppear var(--ard-form-field-error-animation-duration, 0.25s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
93
+ }
94
+ .ard-form-field .ard-form-field__default-hint,
95
+ .ard-form-field .ard-form-field__default-error,
96
+ .ard-horizontal-form-field .ard-form-field__default-hint,
97
+ .ard-horizontal-form-field .ard-form-field__default-error {
98
+ gap: var(--ard-form-field-hint-error-gap, 0.375em);
99
+ }
100
+ .ard-form-field.ard-form-field__with-error .ard-label,
101
+ .ard-form-field.ard-form-field__with-error ard-label,
102
+ .ard-horizontal-form-field.ard-form-field__with-error .ard-label,
103
+ .ard-horizontal-form-field.ard-form-field__with-error ard-label {
104
+ color: var(--ard-form-field-error-color, rgb(var(--ard-danger-700)));
105
+ }
106
+ .ard-form-field.ard-form-field__is-success .ard-label,
107
+ .ard-form-field.ard-form-field__is-success ard-label,
108
+ .ard-horizontal-form-field.ard-form-field__is-success .ard-label,
109
+ .ard-horizontal-form-field.ard-form-field__is-success ard-label {
110
+ color: var(--ard-form-field-success-color, rgb(var(--ard-success-700)));
111
+ }
112
+ .ard-form-field.ard-form-field__control-disabled .ard-label,
113
+ .ard-horizontal-form-field.ard-form-field__control-disabled .ard-label {
114
+ opacity: var(--ard-form-field-label-disabled-opacity, 40%);
115
+ }
116
+ .ard-form-field.ard-form-field__control-disabled .ard-form-field__hints,
117
+ .ard-horizontal-form-field.ard-form-field__control-disabled .ard-form-field__hints {
118
+ opacity: var(--ard-form-field-hint-disabled-opacity, 50%);
119
+ }
120
+ .ard-horizontal-form-field {
121
+ align-items: flex-start;
122
+ justify-content: stretch;
123
+ flex-direction: row;
124
+ gap: var(--ard-horizontal-form-field-gap, 0.5rem);
125
+ }
126
+ .ard-horizontal-form-field .ard-form-field__label-container {
127
+ width: var(--ard-horizontal-form-field-label-width, 12rem);
128
+ min-width: var(--ard-horizontal-form-field-label-width, 12rem);
129
+ height: var(--ard-form-field-height);
130
+ display: flex;
131
+ align-items: center;
132
+ justify-content: var(--ard-horizontal-form-field-label-align, flex-start);
133
+ }
134
+ .ard-horizontal-form-field .ard-form-field__non-label {
135
+ flex-grow: 1;
136
+ }
137
+ .ard-horizontal-form-field:has(.ard-form-field__input .ard-compact) .ard-form-field__label-container {
138
+ height: var(--ard-form-field-height-compact);
139
+ }
140
+ ard-label {
141
+ display: flex;
150
142
  }
151
- to {
152
- grid-template-rows: 1fr;
143
+ @keyframes errorAppear {
144
+ from {
145
+ grid-template-rows: 0fr;
146
+ }
147
+ to {
148
+ grid-template-rows: 1fr;
149
+ }
153
150
  }
154
151
  }
155
152
 
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/form-field.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAGE;AAAA;EACE;EACA;EACA;EACA;;AAIF;AAAA;EACE;EACA;EACA;EACA;;AAIN;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AAKF;AAAA;AAAA;AAAA;EACE;;AAGJ;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;AAEF;AAAA;EACE;;AAEF;AAAA;AAAA;AAAA;EAEE;EACA;;AAEF;AAAA;EACE;;AAEF;AAAA;AAAA;AAAA;EAEE;;AAIA;AAAA;AAAA;AAAA;EAEE;;AAIF;AAAA;AAAA;AAAA;EAEE;;AAIF;AAAA;EACE;;AAEF;AAAA;EACE;;;AAIN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,QCzFgB;ED0FhB;EACA;EACA;;AAEF;EACE;;AAIA;EACE,QCnGsB;;;ADwG5B;EACE;;;AAGF;EACE;IACE;;EAEF;IACE","file":"form-field.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/form-field.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;EAGE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;AAAA;IAEE;IACA;;EAGF;AAAA;IAEE;IACA;;EAEA;AAAA;IACE;IACA;IACA;;EAGE;AAAA;IACE;IACA;IACA;IACA;;EAIF;AAAA;IACE;IACA;IACA;IACA;;EAIN;AAAA;IACE;IACA;IACA;;EAEA;AAAA;IACE;IACA;;EAKF;AAAA;AAAA;AAAA;IACE;;EAGJ;AAAA;AAAA;AAAA;IAEE;IACA;IACA;IACA;;EAEF;AAAA;IACE;;EAEF;AAAA;AAAA;AAAA;IAEE;IACA;;EAEF;AAAA;IACE;;EAEF;AAAA;AAAA;AAAA;IAEE;;EAIA;AAAA;AAAA;AAAA;IAEE;;EAIF;AAAA;AAAA;AAAA;IAEE;;EAIF;AAAA;IACE;;EAEF;AAAA;IACE;;EAIN;IACE;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA,QC1Fc;ID2Fd;IACA;IACA;;EAEF;IACE;;EAIA;IACE,QCpGoB;;EDyG1B;IACE;;EAGF;IACE;MACE;;IAEF;MACE","file":"form-field.css"}