@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/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/input.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../../projects/ui/src/themes/_variables.scss","../../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACKA;EAGE;EAGA;EACA;EACA;EAWA;EAEA;EACA;;;AAGF;EDNE,QCQE;EDPF;EACA;EACA;EACA;EACA;EACA,KCIE;EDHF;EACA;EACA,WCEE;EDDF,aCGE;EDFF,aCIE;EDHF,cCOE;EDNF,eCIE;EDHF,aCEE;EDDF,gBCGE;EDFF,OCQE;EAIF;EACA;;ADXA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA,SCRF;EDSE,OCVF;EDWE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE,QC9CA;ED+CA,WC5CA;ED6CA,aC3CA;ED4CA,cCnCA;EDoCA,eCtCA;EDuCA,aCxCA;EDyCA,gBCvCA;;AC5CF;EACE,QCmCgB;EDlChB,OCkCgB;EDjChB;;AAGF;EACE;EACA;EACA,OCGK;EDFL,OC0BgB;EDzBhB,QCyBgB;EDxBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EEvBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFgBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EE7CN;EACA;EACA,yBACE;EF4CI;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE","file":"input.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/input.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../../projects/ui/src/themes/_variables.scss","../../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACGA;EAGE;IAGE;IAGA;IACA;IACA;IAWA;IAEA;IACA;;EAGF;IDPA,QCSI;IDRJ;IACA;IACA;IACA;IACA;IACA,KCKI;IDJJ;IACA;IACA,WCGI;IDFJ,aCII;IDHJ,aCKI;IDJJ,cCQI;IDPJ,eCKI;IDJJ,aCGI;IDFJ,gBCII;IDHJ,OCSI;IAIF;IACA;;EDZF;IACE;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;;EAEF;IACE;IACA,SCPA;IDQA,OCTA;IDUA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;EAIJ;IACE,QC7CE;ID8CF,WC3CE;ID4CF,aC1CE;ID2CF,cClCE;IDmCF,eCrCE;IDsCF,aCvCE;IDwCF,gBCtCE;;EC7CJ;IACE,QCmCgB;IDlChB,OCkCgB;IDjChB;;EAGF;IACE;IACA;IACA,OCGK;IDFL,OC0BgB;IDzBhB,QCyBgB;IDxBhB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;;EAGF;IEvBF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IFgBI;;EAGF;IACE;IACA;IACA;IACA;;EAEA;IACE;IE7CN;IACA;IACA,yBACE;IF4CI;;EAKF;IACE;;EAKF;IACE;;EAKF;IACE","file":"input.css"}
@@ -1,220 +1,219 @@
1
1
  /**
2
2
  * Should be applied to the first element in the component's template.
3
3
  */
4
- :root {
5
- --ard-number-input-gap: 0.625rem;
6
- --ard-number-input-line-height: 1.25;
7
- --ard-number-input-line-height-compact: 1;
8
- --ard-number-input-font-weight: 400;
9
- --ard-number-input-placeholder-opacity: 60%;
10
- --ard-number-input-disabled-opacity: 50%;
11
- --ard-number-input-rounded-border-radius: 8px;
12
- }
13
-
14
- ard-number-input {
15
- width: var(--ard-number-input-width, unset);
16
- }
17
-
18
- .ard-number-input {
19
- height: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
20
- position: relative;
21
- font-family: var(--ard-font-family);
22
- display: flex;
23
- align-items: center;
24
- justify-content: stretch;
25
- gap: var(--ard-number-input-gap, 0.625rem);
26
- cursor: text;
27
- box-sizing: border-box;
28
- font-size: var(--ard-number-input-font-size, var(--ard-form-field-font-size, 1rem));
29
- line-height: var(--ard-number-input-line-height, 1.25);
30
- font-weight: var(--ard-number-input-font-weight, 400);
31
- padding-left: var(--ard-number-input-padding-left, var(--ard-form-field-padding-left, 0.375rem));
32
- padding-right: var(--ard-number-input-padding-right, var(--ard-form-field-padding-right, 0.375rem));
33
- padding-top: var(--ard-number-input-padding-top, var(--ard-form-field-padding-top, 0));
34
- padding-bottom: var(--ard-number-input-padding-bottom, var(--ard-form-field-padding-bottom, 0));
35
- color: var(--ard-number-input-color, var(--ard-text));
36
- gap: 0;
37
- width: 100%;
38
- }
39
- .ard-number-input .ard-input-container {
40
- flex-grow: 1;
41
- text-size-adjust: 100%;
42
- display: flex;
43
- align-items: center;
44
- height: 100%;
45
- position: relative;
46
- }
47
- .ard-number-input .ard-input-container > * {
48
- position: absolute;
49
- inset: 0;
50
- max-width: 100%;
51
- padding: 0;
52
- }
53
- .ard-number-input .ard-input-container .ard-placeholder {
54
- font: inherit;
55
- opacity: var(--ard-number-input-placeholder-opacity, 60%);
56
- color: var(--ard-number-input-placeholder-color, var(--ard-text));
57
- white-space: nowrap;
58
- overflow: hidden;
59
- text-overflow: ellipsis;
60
- pointer-events: none;
61
- display: flex;
62
- align-items: center;
63
- }
64
- .ard-number-input .ard-input-container input {
65
- border: none;
66
- background: transparent;
67
- outline: none;
68
- font: inherit;
69
- color: inherit;
70
- display: block;
71
- }
72
- .ard-number-input.ard-compact {
73
- height: var(--ard-number-input-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
74
- font-size: var(--ard-number-input-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
75
- line-height: var(--ard-number-input-line-height-compact, 1);
76
- padding-left: var(--ard-number-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem));
77
- padding-right: var(--ard-number-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem));
78
- padding-top: var(--ard-number-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0));
79
- padding-bottom: var(--ard-number-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0));
80
- }
81
- .ard-number-input.ard-appearance-outlined {
82
- --ard-appearance-background: var(--ard-bg);
83
- --ard-appearance-border-color: var(--ard-border);
84
- --ard-appearance-border: 1px solid var(--ard-appearance-border-color);
85
- }
86
- .ard-number-input.ard-appearance-outlined.ard-focused {
87
- --ard-appearance-border-color: var(--ard-border-dark);
88
- }
89
- .ard-number-input.ard-appearance-outlined.ard-is-success {
90
- --ard-appearance-border-color: rgb(var(--ard-success-500));
91
- }
92
- .ard-number-input.ard-appearance-outlined.ard-has-error {
93
- --ard-appearance-background: rgb(var(--ard-danger-50));
94
- --ard-appearance-border-color: rgb(var(--ard-danger-500));
95
- }
96
- .ard-number-input.ard-appearance-filled {
97
- --ard-appearance-background: var(--ard-bg-filled);
98
- --ard-appearance-border: none;
99
- }
100
- .ard-number-input.ard-appearance-filled.ard-is-success {
101
- --ard-appearance-background: rgb(var(--ard-success-50));
102
- }
103
- .ard-number-input.ard-appearance-filled.ard-has-error {
104
- --ard-appearance-background: rgb(var(--ard-danger-50));
105
- }
106
- .ard-number-input.ard-appearance-transparent {
107
- --ard-appearance-background: transparent;
108
- --ard-appearance-border: none;
109
- }
110
- .ard-number-input .ard-number-input-wrapper {
111
- flex-grow: 1;
112
- text-size-adjust: 100%;
113
- display: flex;
114
- align-items: center;
115
- height: 100%;
116
- }
117
- .ard-number-input .ard-input-container {
118
- position: relative;
119
- padding-left: var(--ard-number-input-padding-left, var(--ard-form-field-padding-left, 0.375rem));
120
- padding-right: var(--ard-number-input-padding-right, var(--ard-form-field-padding-right, 0.375rem));
121
- padding-top: var(--ard-number-input-padding-top, var(--ard-form-field-padding-top, 0));
122
- padding-bottom: var(--ard-number-input-padding-bottom, var(--ard-form-field-padding-bottom, 0));
123
- }
124
- .ard-number-input .ard-number-input-prefix-container,
125
- .ard-number-input .ard-number-input-suffix-container {
126
- height: max-content;
127
- max-height: 100%;
128
- display: flex;
129
- align-items: center;
130
- }
131
- .ard-number-input .ard-number-input-prefix-container {
132
- padding-left: var(--ard-number-input-padding-left, 0.375rem);
133
- }
134
- .ard-number-input .ard-number-input-suffix-container {
135
- padding-right: var(--ard-number-input-padding-right, 0.375rem);
136
- }
137
- .ard-number-input .ard-quick-change-button {
138
- position: relative;
139
- min-width: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
140
- }
141
- .ard-number-input .ard-quick-change-button .ard-button {
142
- height: 100%;
143
- aspect-ratio: 1;
144
- padding: 0;
145
- border-color: var(--ard-appearance-border-color);
146
- display: flex;
147
- justify-content: center;
148
- margin: 0;
149
- }
150
- .ard-number-input .ard-quick-change-button.ard-disabled .ard-focus-overlay {
151
- opacity: 0;
152
- }
153
- .ard-number-input .ard-quick-change-button.decrement {
154
- left: 1px;
155
- }
156
- .ard-number-input .ard-quick-change-button.decrement .ard-button {
157
- border-top-right-radius: 0;
158
- border-bottom-right-radius: 0;
159
- }
160
- .ard-number-input .ard-quick-change-button.increment {
161
- right: 1px;
162
- }
163
- .ard-number-input .ard-quick-change-button.increment .ard-button {
164
- border-top-left-radius: 0;
165
- border-bottom-left-radius: 0;
166
- }
167
- .ard-number-input.ard-variant-rounded {
168
- border-radius: var(--ard-number-input-rounded-border-radius, 8px);
169
- }
170
- .ard-number-input.ard-variant-rounded.ard-quick-change-false .ard-number-input-wrapper {
171
- border-radius: var(--ard-number-input-rounded-border-radius, 8px);
172
- }
173
- .ard-number-input.ard-variant-sharp {
174
- border-radius: 0;
175
- }
176
- .ard-number-input.ard-variant-pill {
177
- border-radius: 9999px;
178
- }
179
- .ard-number-input.ard-variant-pill .ard-button {
180
- border-radius: 9999px !important;
181
- width: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
182
- height: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
183
- margin: 0 2px;
184
- }
185
- .ard-number-input.ard-variant-pill.ard-quick-change-false .ard-number-input-wrapper {
186
- border-radius: 9999px;
187
- }
188
- .ard-number-input.ard-variant-rounded:not(.ard-appearance-filled) .ard-number-input-wrapper, .ard-number-input.ard-variant-sharp:not(.ard-appearance-filled) .ard-number-input-wrapper {
189
- box-sizing: border-box;
190
- background: var(--ard-appearance-background);
191
- border: var(--ard-appearance-border);
192
- }
193
- .ard-number-input.ard-variant-rounded.ard-appearance-filled, .ard-number-input.ard-variant-sharp.ard-appearance-filled {
194
- background: var(--ard-appearance-background);
195
- border: var(--ard-appearance-border);
196
- }
197
- .ard-number-input.ard-variant-pill {
198
- background: var(--ard-appearance-background);
199
- border: var(--ard-appearance-border);
200
- }
201
- .ard-number-input.ard-compact .ard-number-input-wrapper {
202
- padding-left: var(--ard-number-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem));
203
- padding-right: var(--ard-number-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem));
204
- padding-top: var(--ard-number-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0));
205
- padding-bottom: var(--ard-number-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0));
206
- }
207
- .ard-number-input.ard-compact .ard-quick-change-button {
208
- min-width: var(--ard-number-input-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
209
- }
210
-
211
- .ard-disabled > .ard-number-input {
212
- pointer-events: none;
213
- opacity: var(--ard-number-input-disabled-opacity, 50%);
214
- background: var(--ard-bg-filled);
215
- }
216
- .ard-disabled > .ard-number-input .ard-button .ard-focus-overlay {
217
- opacity: 0;
4
+ @layer ard-theme {
5
+ :root {
6
+ --ard-number-input-gap: 0.625rem;
7
+ --ard-number-input-line-height: 1.25;
8
+ --ard-number-input-line-height-compact: 1;
9
+ --ard-number-input-font-weight: 400;
10
+ --ard-number-input-placeholder-opacity: 60%;
11
+ --ard-number-input-disabled-opacity: 50%;
12
+ --ard-number-input-rounded-border-radius: 8px;
13
+ }
14
+ ard-number-input {
15
+ width: var(--ard-number-input-width, unset);
16
+ }
17
+ .ard-number-input {
18
+ height: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
19
+ position: relative;
20
+ font-family: var(--ard-font-family);
21
+ display: flex;
22
+ align-items: center;
23
+ justify-content: stretch;
24
+ gap: var(--ard-number-input-gap, 0.625rem);
25
+ cursor: text;
26
+ box-sizing: border-box;
27
+ font-size: var(--ard-number-input-font-size, var(--ard-form-field-font-size, 1rem));
28
+ line-height: var(--ard-number-input-line-height, 1.25);
29
+ font-weight: var(--ard-number-input-font-weight, 400);
30
+ padding-left: var(--ard-number-input-padding-left, var(--ard-form-field-padding-left, 0.375rem));
31
+ padding-right: var(--ard-number-input-padding-right, var(--ard-form-field-padding-right, 0.375rem));
32
+ padding-top: var(--ard-number-input-padding-top, var(--ard-form-field-padding-top, 0));
33
+ padding-bottom: var(--ard-number-input-padding-bottom, var(--ard-form-field-padding-bottom, 0));
34
+ color: var(--ard-number-input-color, var(--ard-text));
35
+ gap: 0;
36
+ width: 100%;
37
+ }
38
+ .ard-number-input .ard-input-container {
39
+ flex-grow: 1;
40
+ text-size-adjust: 100%;
41
+ display: flex;
42
+ align-items: center;
43
+ height: 100%;
44
+ position: relative;
45
+ }
46
+ .ard-number-input .ard-input-container > * {
47
+ position: absolute;
48
+ inset: 0;
49
+ max-width: 100%;
50
+ padding: 0;
51
+ }
52
+ .ard-number-input .ard-input-container .ard-placeholder {
53
+ font: inherit;
54
+ opacity: var(--ard-number-input-placeholder-opacity, 60%);
55
+ color: var(--ard-number-input-placeholder-color, var(--ard-text));
56
+ white-space: nowrap;
57
+ overflow: hidden;
58
+ text-overflow: ellipsis;
59
+ pointer-events: none;
60
+ display: flex;
61
+ align-items: center;
62
+ }
63
+ .ard-number-input .ard-input-container input {
64
+ border: none;
65
+ background: transparent;
66
+ outline: none;
67
+ font: inherit;
68
+ color: inherit;
69
+ display: block;
70
+ }
71
+ .ard-number-input.ard-compact {
72
+ height: var(--ard-number-input-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
73
+ font-size: var(--ard-number-input-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
74
+ line-height: var(--ard-number-input-line-height-compact, 1);
75
+ padding-left: var(--ard-number-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem));
76
+ padding-right: var(--ard-number-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem));
77
+ padding-top: var(--ard-number-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0));
78
+ padding-bottom: var(--ard-number-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0));
79
+ }
80
+ .ard-number-input.ard-appearance-outlined {
81
+ --ard-appearance-background: var(--ard-bg);
82
+ --ard-appearance-border-color: var(--ard-border);
83
+ --ard-appearance-border: 1px solid var(--ard-appearance-border-color);
84
+ }
85
+ .ard-number-input.ard-appearance-outlined.ard-focused {
86
+ --ard-appearance-border-color: var(--ard-border-dark);
87
+ }
88
+ .ard-number-input.ard-appearance-outlined.ard-is-success {
89
+ --ard-appearance-border-color: rgb(var(--ard-success-500));
90
+ }
91
+ .ard-number-input.ard-appearance-outlined.ard-has-error {
92
+ --ard-appearance-background: rgb(var(--ard-danger-50));
93
+ --ard-appearance-border-color: rgb(var(--ard-danger-500));
94
+ }
95
+ .ard-number-input.ard-appearance-filled {
96
+ --ard-appearance-background: var(--ard-bg-filled);
97
+ --ard-appearance-border: none;
98
+ }
99
+ .ard-number-input.ard-appearance-filled.ard-is-success {
100
+ --ard-appearance-background: rgb(var(--ard-success-50));
101
+ }
102
+ .ard-number-input.ard-appearance-filled.ard-has-error {
103
+ --ard-appearance-background: rgb(var(--ard-danger-50));
104
+ }
105
+ .ard-number-input.ard-appearance-transparent {
106
+ --ard-appearance-background: transparent;
107
+ --ard-appearance-border: none;
108
+ }
109
+ .ard-number-input .ard-number-input-wrapper {
110
+ flex-grow: 1;
111
+ text-size-adjust: 100%;
112
+ display: flex;
113
+ align-items: center;
114
+ height: 100%;
115
+ }
116
+ .ard-number-input .ard-input-container {
117
+ position: relative;
118
+ padding-left: var(--ard-number-input-padding-left, var(--ard-form-field-padding-left, 0.375rem));
119
+ padding-right: var(--ard-number-input-padding-right, var(--ard-form-field-padding-right, 0.375rem));
120
+ padding-top: var(--ard-number-input-padding-top, var(--ard-form-field-padding-top, 0));
121
+ padding-bottom: var(--ard-number-input-padding-bottom, var(--ard-form-field-padding-bottom, 0));
122
+ }
123
+ .ard-number-input .ard-number-input-prefix-container,
124
+ .ard-number-input .ard-number-input-suffix-container {
125
+ height: max-content;
126
+ max-height: 100%;
127
+ display: flex;
128
+ align-items: center;
129
+ }
130
+ .ard-number-input .ard-number-input-prefix-container {
131
+ padding-left: var(--ard-number-input-padding-left, 0.375rem);
132
+ }
133
+ .ard-number-input .ard-number-input-suffix-container {
134
+ padding-right: var(--ard-number-input-padding-right, 0.375rem);
135
+ }
136
+ .ard-number-input .ard-quick-change-button {
137
+ position: relative;
138
+ min-width: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
139
+ }
140
+ .ard-number-input .ard-quick-change-button .ard-button {
141
+ height: 100%;
142
+ aspect-ratio: 1;
143
+ padding: 0;
144
+ border-color: var(--ard-appearance-border-color);
145
+ display: flex;
146
+ justify-content: center;
147
+ margin: 0;
148
+ }
149
+ .ard-number-input .ard-quick-change-button.ard-disabled .ard-focus-overlay {
150
+ opacity: 0;
151
+ }
152
+ .ard-number-input .ard-quick-change-button.decrement {
153
+ left: 1px;
154
+ }
155
+ .ard-number-input .ard-quick-change-button.decrement .ard-button {
156
+ border-top-right-radius: 0;
157
+ border-bottom-right-radius: 0;
158
+ }
159
+ .ard-number-input .ard-quick-change-button.increment {
160
+ right: 1px;
161
+ }
162
+ .ard-number-input .ard-quick-change-button.increment .ard-button {
163
+ border-top-left-radius: 0;
164
+ border-bottom-left-radius: 0;
165
+ }
166
+ .ard-number-input.ard-variant-rounded {
167
+ border-radius: var(--ard-number-input-rounded-border-radius, 8px);
168
+ }
169
+ .ard-number-input.ard-variant-rounded.ard-quick-change-false .ard-number-input-wrapper {
170
+ border-radius: var(--ard-number-input-rounded-border-radius, 8px);
171
+ }
172
+ .ard-number-input.ard-variant-sharp {
173
+ border-radius: 0;
174
+ }
175
+ .ard-number-input.ard-variant-pill {
176
+ border-radius: 9999px;
177
+ }
178
+ .ard-number-input.ard-variant-pill .ard-button {
179
+ border-radius: 9999px !important;
180
+ width: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
181
+ height: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
182
+ margin: 0 2px;
183
+ }
184
+ .ard-number-input.ard-variant-pill.ard-quick-change-false .ard-number-input-wrapper {
185
+ border-radius: 9999px;
186
+ }
187
+ .ard-number-input.ard-variant-rounded:not(.ard-appearance-filled) .ard-number-input-wrapper, .ard-number-input.ard-variant-sharp:not(.ard-appearance-filled) .ard-number-input-wrapper {
188
+ box-sizing: border-box;
189
+ background: var(--ard-appearance-background);
190
+ border: var(--ard-appearance-border);
191
+ }
192
+ .ard-number-input.ard-variant-rounded.ard-appearance-filled, .ard-number-input.ard-variant-sharp.ard-appearance-filled {
193
+ background: var(--ard-appearance-background);
194
+ border: var(--ard-appearance-border);
195
+ }
196
+ .ard-number-input.ard-variant-pill {
197
+ background: var(--ard-appearance-background);
198
+ border: var(--ard-appearance-border);
199
+ }
200
+ .ard-number-input.ard-compact .ard-number-input-wrapper {
201
+ padding-left: var(--ard-number-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem));
202
+ padding-right: var(--ard-number-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem));
203
+ padding-top: var(--ard-number-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0));
204
+ padding-bottom: var(--ard-number-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0));
205
+ }
206
+ .ard-number-input.ard-compact .ard-quick-change-button {
207
+ min-width: var(--ard-number-input-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
208
+ }
209
+ .ard-disabled > .ard-number-input {
210
+ pointer-events: none;
211
+ opacity: var(--ard-number-input-disabled-opacity, 50%);
212
+ background: var(--ard-bg-filled);
213
+ }
214
+ .ard-disabled > .ard-number-input .ard-button .ard-focus-overlay {
215
+ opacity: 0;
216
+ }
218
217
  }
219
218
 
220
219
  /*# sourceMappingURL=number-input.css.map */
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/number-input.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACIA;EAGE;EAGA;EACA;EACA;EAWA;EACA;EAEA;;;AAGF;EACE;;;AAGF;EDTE,QCWE;EDVF;EACA;EACA;EACA;EACA;EACA,KCOE;EDNF;EACA;EACA,WCKE;EDJF,aCME;EDLF,aCOE;EDNF,cCUE;EDTF,eCOE;EDNF,aCKE;EDJF,gBCME;EDLF,OCWE;EAKF;EACA;;ADfA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA,SCLF;EDME,OCPF;EDQE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE,QC3CA;ED4CA,WCzCA;ED0CA,aCxCA;EDyCA,cChCA;EDiCA,eCnCA;EDoCA,aCrCA;EDsCA,gBCpCA;;ACTF;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;;ADVF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAIF;AAAA;EAEE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;;AAEA;EACE;EACA;;AAGJ;EACE;;AAEA;EACE;EACA;;AAMN;EACE;;AAGE;EACE;;AAIN;EACE;;AAEF;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAIA;EACE;;AAQJ;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAKA;EACE;EACA;EACA;EACA;;AAEF;EACE;;;AAMJ;EACE;EACA;EAMA,YEjMG;;AF6LH;EACE","file":"number-input.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/number-input.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACEA;EAGE;IAGE;IAGA;IACA;IACA;IAWA;IACA;IAEA;;EAGF;IACE;;EAGF;IDVA,QCYI;IDXJ;IACA;IACA;IACA;IACA;IACA,KCQI;IDPJ;IACA;IACA,WCMI;IDLJ,aCOI;IDNJ,aCQI;IDPJ,cCWI;IDVJ,eCQI;IDPJ,aCMI;IDLJ,gBCOI;IDNJ,OCYI;IAKF;IACA;;EDhBF;IACE;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;;EAEF;IACE;IACA,SCJA;IDKA,OCNA;IDOA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;EAIJ;IACE,QC1CE;ID2CF,WCxCE;IDyCF,aCvCE;IDwCF,cC/BE;IDgCF,eClCE;IDmCF,aCpCE;IDqCF,gBCnCE;;ECVJ;IACE;IACA;IACA;;EAEA;IACE;;EAEF;IACE;;EAEF;IACE;IACA;;EAGJ;IACE;IACA;;EAEA;IACE;;EAEF;IACE;;EAGJ;IACE;IACA;;EDTA;IACE;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;;EAIF;AAAA;IAEE;IACA;IACA;IACA;;EAEF;IACE;;EAEF;IACE;;EAIF;IACE;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;;EAGF;IACE;;EAEA;IACE;IACA;;EAGJ;IACE;;EAEA;IACE;IACA;;EAMN;IACE;;EAGE;IACE;;EAIN;IACE;;EAEF;IACE;;EAEA;IACE;IACA;IACA;IACA;;EAIA;IACE;;EAQJ;IACE;IACA;IACA;;EAEF;IACE;IACA;;EAGJ;IACE;IACA;;EAKA;IACE;IACA;IACA;IACA;;EAEF;IACE;;EAMJ;IACE;IACA;IAMA,YElMC;;EF8LD;IACE","file":"number-input.css"}