@ardium-ui/ui 5.0.0-alpha.66 → 5.0.0-alpha.68

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 (41) hide show
  1. package/fesm2022/ardium-ui-ui.mjs +85 -56
  2. package/fesm2022/ardium-ui-ui.mjs.map +1 -1
  3. package/lib/form-field-frame/form-field-frame.component.d.ts +1 -0
  4. package/lib/inputs/date-input/date-range-input.component.d.ts +1 -0
  5. package/lib/inputs/date-input/multipage-date-range-input.component.d.ts +1 -0
  6. package/lib/inputs/input-utils.d.ts +8 -3
  7. package/lib/inputs/number-input/number-input.component.d.ts +3 -1
  8. package/lib/inputs/number-input/number-input.defaults.d.ts +2 -0
  9. package/lib/inputs/number-input/number-input.types.d.ts +6 -0
  10. package/package.json +1 -1
  11. package/prebuilt-themes/default/core.css +13 -2
  12. package/prebuilt-themes/default/core.css.map +1 -1
  13. package/prebuilt-themes/default/form-field-frame.css +12 -12
  14. package/prebuilt-themes/default/form-field-frame.css.map +1 -1
  15. package/prebuilt-themes/default/inputs/autocomplete-input.css +22 -5
  16. package/prebuilt-themes/default/inputs/autocomplete-input.css.map +1 -1
  17. package/prebuilt-themes/default/inputs/date-input.css +22 -5
  18. package/prebuilt-themes/default/inputs/date-input.css.map +1 -1
  19. package/prebuilt-themes/default/inputs/file-input.css +21 -6
  20. package/prebuilt-themes/default/inputs/file-input.css.map +1 -1
  21. package/prebuilt-themes/default/inputs/hex-input.css +20 -5
  22. package/prebuilt-themes/default/inputs/hex-input.css.map +1 -1
  23. package/prebuilt-themes/default/inputs/input.css +20 -5
  24. package/prebuilt-themes/default/inputs/input.css.map +1 -1
  25. package/prebuilt-themes/default/inputs/number-input.css +53 -21
  26. package/prebuilt-themes/default/inputs/number-input.css.map +1 -1
  27. package/prebuilt-themes/default/inputs/password-input.css +20 -5
  28. package/prebuilt-themes/default/inputs/password-input.css.map +1 -1
  29. package/themes/default/core.scss +13 -2
  30. package/themes/default/form-field-frame.scss +15 -12
  31. package/themes/default/inputs/_shared.scss +28 -7
  32. package/themes/default/inputs/autocomplete-input.scss +18 -4
  33. package/themes/default/inputs/date-input.scss +16 -4
  34. package/themes/default/inputs/file-input.scss +17 -5
  35. package/themes/default/inputs/hex-input.scss +16 -4
  36. package/themes/default/inputs/input.scss +16 -4
  37. package/themes/default/inputs/number-input.scss +52 -22
  38. package/themes/default/inputs/password-input.scss +16 -4
  39. package/prebuilt-themes/default/inputs/search-bar.css +0 -135
  40. package/prebuilt-themes/default/inputs/search-bar.css.map +0 -1
  41. package/themes/default/inputs/search-bar.scss +0 -55
package/prebuilt-themes/default/inputs/number-input.css CHANGED
@@ -7,6 +7,7 @@
7
7
  --ard-number-input-line-height-compact: 1;
8
8
  --ard-number-input-font-weight: 400;
9
9
  --ard-number-input-placeholder-opacity: 60%;
10
+ --ard-number-input-disabled-opacity: 50%;
10
11
  --ard-number-input-rounded-border-radius: 8px;
11
12
  }
12
13
 
@@ -27,7 +28,10 @@ ard-number-input {
27
28
  font-size: var(--ard-number-input-font-size, var(--ard-form-field-font-size, 1rem));
28
29
  line-height: var(--ard-number-input-line-height, 1.25);
29
30
  font-weight: var(--ard-number-input-font-weight, 400);
30
- padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem));
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));
31
35
  color: var(--ard-number-input-color, var(--ard-text));
32
36
  gap: 0;
33
37
  width: 100%;
@@ -37,6 +41,16 @@ ard-number-input {
37
41
  text-size-adjust: 100%;
38
42
  display: flex;
39
43
  align-items: center;
44
+ height: 100%;
45
+ }
46
+ .ard-number-input .ard-input-container > * {
47
+ position: absolute;
48
+ inset: 0;
49
+ padding-left: var(--ard-number-input-padding-left, var(--ard-form-field-padding-left, 0.375rem));
50
+ padding-right: var(--ard-number-input-padding-right, var(--ard-form-field-padding-right, 0.375rem));
51
+ padding-top: var(--ard-number-input-padding-top, var(--ard-form-field-padding-top, 0));
52
+ padding-bottom: var(--ard-number-input-padding-bottom, var(--ard-form-field-padding-bottom, 0));
53
+ max-width: 100%;
40
54
  }
41
55
  .ard-number-input .ard-input-container .ard-placeholder {
42
56
  font: inherit;
@@ -45,24 +59,26 @@ ard-number-input {
45
59
  white-space: nowrap;
46
60
  overflow: hidden;
47
61
  text-overflow: ellipsis;
48
- max-width: 100%;
49
62
  pointer-events: none;
63
+ display: flex;
64
+ align-items: center;
50
65
  }
51
66
  .ard-number-input .ard-input-container input {
52
67
  border: none;
53
68
  background: transparent;
54
69
  outline: none;
55
70
  font: inherit;
56
- padding: 0;
57
71
  color: inherit;
58
72
  display: block;
59
- width: 100%;
60
73
  }
61
74
  .ard-number-input.ard-compact {
62
75
  height: var(--ard-number-input-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
63
76
  font-size: var(--ard-number-input-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
64
77
  line-height: var(--ard-number-input-line-height-compact, 1);
65
- padding: var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
78
+ padding-left: var(--ard-number-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem));
79
+ padding-right: var(--ard-number-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem));
80
+ padding-top: var(--ard-number-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0));
81
+ padding-bottom: var(--ard-number-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0));
66
82
  }
67
83
  .ard-number-input.ard-appearance-outlined {
68
84
  --ard-appearance-background: var(--ard-bg);
@@ -93,16 +109,32 @@ ard-number-input {
93
109
  --ard-appearance-background: transparent;
94
110
  --ard-appearance-border: none;
95
111
  }
96
- .ard-number-input .ard-input-container {
112
+ .ard-number-input .ard-number-input-wrapper {
113
+ flex-grow: 1;
114
+ text-size-adjust: 100%;
115
+ display: flex;
116
+ align-items: center;
97
117
  height: 100%;
98
- max-width: 100%;
99
- padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem));
100
118
  }
101
- .ard-number-input .ard-input-container > input {
102
- width: 100%;
119
+ .ard-number-input .ard-input-container {
120
+ position: relative;
121
+ padding-left: var(--ard-number-input-padding-left, var(--ard-form-field-padding-left, 0.375rem));
122
+ padding-right: var(--ard-number-input-padding-right, var(--ard-form-field-padding-right, 0.375rem));
123
+ padding-top: var(--ard-number-input-padding-top, var(--ard-form-field-padding-top, 0));
124
+ padding-bottom: var(--ard-number-input-padding-bottom, var(--ard-form-field-padding-bottom, 0));
125
+ }
126
+ .ard-number-input .ard-number-input-prefix-container,
127
+ .ard-number-input .ard-number-input-suffix-container {
128
+ height: max-content;
129
+ max-height: 100%;
130
+ display: flex;
131
+ align-items: center;
103
132
  }
104
- .ard-number-input .ard-placeholder {
105
- padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem));
133
+ .ard-number-input .ard-number-input-prefix-container {
134
+ padding-left: var(--ard-number-input-padding-left, 0.375rem);
135
+ }
136
+ .ard-number-input .ard-number-input-suffix-container {
137
+ padding-right: var(--ard-number-input-padding-right, 0.375rem);
106
138
  }
107
139
  .ard-number-input .ard-quick-change-button {
108
140
  position: relative;
@@ -137,7 +169,7 @@ ard-number-input {
137
169
  .ard-number-input.ard-variant-rounded {
138
170
  border-radius: var(--ard-number-input-rounded-border-radius, 8px);
139
171
  }
140
- .ard-number-input.ard-variant-rounded.ard-quick-change-false .ard-input-container {
172
+ .ard-number-input.ard-variant-rounded.ard-quick-change-false .ard-number-input-wrapper {
141
173
  border-radius: var(--ard-number-input-rounded-border-radius, 8px);
142
174
  }
143
175
  .ard-number-input.ard-variant-sharp {
@@ -152,10 +184,10 @@ ard-number-input {
152
184
  height: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
153
185
  margin: 0 2px;
154
186
  }
155
- .ard-number-input.ard-variant-pill.ard-quick-change-false .ard-input-container {
187
+ .ard-number-input.ard-variant-pill.ard-quick-change-false .ard-number-input-wrapper {
156
188
  border-radius: 9999px;
157
189
  }
158
- .ard-number-input.ard-variant-rounded:not(.ard-appearance-filled) .ard-input-container, .ard-number-input.ard-variant-sharp:not(.ard-appearance-filled) .ard-input-container {
190
+ .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 {
159
191
  box-sizing: border-box;
160
192
  background: var(--ard-appearance-background);
161
193
  border: var(--ard-appearance-border);
@@ -168,11 +200,11 @@ ard-number-input {
168
200
  background: var(--ard-appearance-background);
169
201
  border: var(--ard-appearance-border);
170
202
  }
171
- .ard-number-input.ard-compact .ard-input-container {
172
- padding: var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
173
- }
174
- .ard-number-input.ard-compact .ard-placeholder {
175
- padding: var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
203
+ .ard-number-input.ard-compact .ard-number-input-wrapper {
204
+ padding-left: var(--ard-number-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem));
205
+ padding-right: var(--ard-number-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem));
206
+ padding-top: var(--ard-number-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0));
207
+ padding-bottom: var(--ard-number-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0));
176
208
  }
177
209
  .ard-number-input.ard-compact .ard-quick-change-button {
178
210
  min-width: var(--ard-number-input-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
@@ -180,7 +212,7 @@ ard-number-input {
180
212
 
181
213
  .ard-disabled > .ard-number-input {
182
214
  pointer-events: none;
183
- opacity: 50%;
215
+ opacity: var(--ard-number-input-disabled-opacity, 50%);
184
216
  background: var(--ard-bg-filled);
185
217
  }
186
218
  .ard-disabled > .ard-number-input .ard-button .ard-focus-overlay {
package/prebuilt-themes/default/inputs/number-input.css.map CHANGED
@@ -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;EAKA;EAGA;;;AAGF;EACE;;;AAGF;EDTE,QCWE;EDVF;EACA;EACA;EACA;EACA;EACA,KCOE;EDNF;EACA;EACA,WCKE;EDJF,aCME;EDLF,aCOE;EDNF,SCOE;EDNF,OCQE;EAKF;EACA;;ADZA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,OCFF;EDGE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE,QCjCA;EDkCA,WC/BA;EDgCA,aC9BA;ED+BA,SC5BA;;ACEF;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;;ADtBF;EACE;EACA;EACA;;AAEA;EACE;;AAGJ;EACE;;AAGF;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;;AAEF;EACE;;AAEF;EACE;;;AAMJ;EACE;EACA;EAMA,YEnKG;;AF+JH;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;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;;AAEA;EACE;EACA;EACA,cCNF;EDOE,eCTF;EDUE,aCXF;EDYE,gBCVF;EDWE;;AAEF;EACE;EACA,SCPF;EDQE,OCTF;EDUE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE,QC7CA;ED8CA,WC3CA;ED4CA,aC1CA;ED2CA,cClCA;EDmCA,eCrCA;EDsCA,aCvCA;EDwCA,gBCtCA;;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"}
package/prebuilt-themes/default/inputs/password-input.css CHANGED
@@ -37,7 +37,10 @@
37
37
  font-size: var(--ard-password-input-font-size, var(--ard-form-field-font-size, 1rem));
38
38
  line-height: var(--ard-password-input-line-height, 1.25);
39
39
  font-weight: var(--ard-password-input-font-weight, 400);
40
- padding: var(--ard-password-input-padding, var(--ard-form-field-padding, 0 0.375rem));
40
+ padding-left: var(--ard-password-input-padding-left, var(--ard-form-field-padding-left, 0.375rem));
41
+ padding-right: var(--ard-password-input-padding-right, var(--ard-form-field-padding-right, 0.375rem));
42
+ padding-top: var(--ard-password-input-padding-top, var(--ard-form-field-padding-top, 0));
43
+ padding-bottom: var(--ard-password-input-padding-bottom, var(--ard-form-field-padding-bottom, 0));
41
44
  color: var(--ard-password-input-color, var(--ard-text));
42
45
  min-width: var(--ard-password-input-min-width, 10rem);
43
46
  max-width: var(--ard-password-input-max-width, 100%);
@@ -47,6 +50,16 @@
47
50
  text-size-adjust: 100%;
48
51
  display: flex;
49
52
  align-items: center;
53
+ height: 100%;
54
+ }
55
+ .ard-password-input .ard-input-container > * {
56
+ position: absolute;
57
+ inset: 0;
58
+ padding-left: var(--ard-password-input-padding-left, var(--ard-form-field-padding-left, 0.375rem));
59
+ padding-right: var(--ard-password-input-padding-right, var(--ard-form-field-padding-right, 0.375rem));
60
+ padding-top: var(--ard-password-input-padding-top, var(--ard-form-field-padding-top, 0));
61
+ padding-bottom: var(--ard-password-input-padding-bottom, var(--ard-form-field-padding-bottom, 0));
62
+ max-width: 100%;
50
63
  }
51
64
  .ard-password-input .ard-input-container .ard-placeholder {
52
65
  font: inherit;
@@ -55,24 +68,26 @@
55
68
  white-space: nowrap;
56
69
  overflow: hidden;
57
70
  text-overflow: ellipsis;
58
- max-width: 100%;
59
71
  pointer-events: none;
72
+ display: flex;
73
+ align-items: center;
60
74
  }
61
75
  .ard-password-input .ard-input-container input {
62
76
  border: none;
63
77
  background: transparent;
64
78
  outline: none;
65
79
  font: inherit;
66
- padding: 0;
67
80
  color: inherit;
68
81
  display: block;
69
- width: 100%;
70
82
  }
71
83
  .ard-password-input.ard-compact {
72
84
  height: var(--ard-password-input-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
73
85
  font-size: var(--ard-password-input-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
74
86
  line-height: var(--ard-password-input-line-height-compact, 1);
75
- padding: var(--ard-password-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
87
+ padding-left: var(--ard-password-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem));
88
+ padding-right: var(--ard-password-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem));
89
+ padding-top: var(--ard-password-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0));
90
+ padding-bottom: var(--ard-password-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0));
76
91
  }
77
92
  .ard-password-input.ard-revealable {
78
93
  padding-right: 0;
package/prebuilt-themes/default/inputs/password-input.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/password-input.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACKA;EAGE;EAGA;EACA;EACA;EAKA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EDpBE,QCsBE;EDrBF;EACA;EACA;EACA;EACA;EACA,KCkBE;EDjBF;EACA;EACA,WCgBE;EDfF,aCiBE;EDhBF,aCkBE;EDjBF,SCkBE;EDjBF,OCmBE;EAIF;EACA;;ADtBA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA,SCWF;EDVE,OCSF;EDRE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE,QCtBA;EDuBA,WCpBA;EDqBA,aCnBA;EDoBA,SCjBA;;AAQF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;;;AAMJ;EACE;EACA","file":"password-input.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/password-input.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACKA;EAGE;EAGA;EACA;EACA;EAWA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EDpBE,QCsBE;EDrBF;EACA;EACA;EACA;EACA;EACA,KCkBE;EDjBF;EACA;EACA,WCgBE;EDfF,aCiBE;EDhBF,aCkBE;EDjBF,cCqBE;EDpBF,eCkBE;EDjBF,aCgBE;EDfF,gBCiBE;EDhBF,OCsBE;EAIF;EACA;;ADzBA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,cCKF;EDJE,eCEF;EDDE;EACA,gBCCF;EDAE;;AAEF;EACE;EACA,SCIF;EDHE,OCEF;EDDE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE,QClCA;EDmCA,WChCA;EDiCA,aC/BA;EDgCA,cCvBA;EDwBA,eC1BA;ED2BA,aC5BA;ED6BA,gBC3BA;;AASF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;;;AAMJ;EACE;EACA","file":"password-input.css"}
package/themes/default/core.scss CHANGED
@@ -46,8 +46,19 @@
46
46
  --ard-form-field-height-compact: 1.6875rem;
47
47
  --ard-form-field-font-size: 1rem;
48
48
  --ard-form-field-font-size-compact: 1rem;
49
- --ard-form-field-padding: 0 0.375rem;
50
- --ard-form-field-padding-compact: 0 0.375rem;
49
+ --ard-form-field-padding-top: 0;
50
+ --ard-form-field-padding-right: 0.375rem;
51
+ --ard-form-field-padding-bottom: 0;
52
+ --ard-form-field-padding-left: 0.375rem;
53
+ --ard-form-field-padding-top-compact: 0;
54
+ --ard-form-field-padding-right-compact: 0.375rem;
55
+ --ard-form-field-padding-bottom-compact: 0;
56
+ --ard-form-field-padding-left-compact: 0.375rem;
57
+ --ard-form-field-transitions-duration: 150ms;
58
+ --ard-form-field-hover-overlay-opacity: 3%;
59
+ --ard-form-field-focus-overlay-opacity: 6%;
60
+ --ard-form-field-disabled-opacity: 50%;
61
+ --ard-form-field-disabled-transparent-overlay-opacity: 4.5%;
51
62
 
52
63
  --ard-rounded-corner-radius: 0.375rem;
53
64
 
package/themes/default/form-field-frame.scss CHANGED
@@ -10,8 +10,6 @@
10
10
  align-items: center;
11
11
  justify-content: stretch;
12
12
  position: relative;
13
- font-size: 1rem;
14
- line-height: 1.25em;
15
13
  font-family: var(--ard-font-family);
16
14
 
17
15
  .ard-form-field-content-container {
@@ -30,17 +28,15 @@
30
28
  align-items: center;
31
29
  }
32
30
  .ard-form-field-prefix-container {
33
- padding-left: 0.375em;
31
+ padding-left: var(--ard-form-field-padding-left, 0.375rem);
34
32
  }
35
33
  .ard-form-field-suffix-container {
36
- padding-right: 0.375em;
34
+ padding-right: var(--ard-form-field-padding-right, 0.375rem);
37
35
  }
38
36
 
39
37
  //! compact
40
38
  &.ard-compact {
41
39
  min-height: ARD.$form-field-compact-height;
42
- font-size: 0.85rem;
43
- line-height: 1;
44
40
  }
45
41
 
46
42
  //! appearance & variant
@@ -48,32 +44,39 @@
48
44
  @include defaultMixins.formVariants();
49
45
  background: var(--ard-appearance-background);
50
46
  border: var(--ard-appearance-border);
51
- transition: border-color 0.15s ARD.$timing-fn;
52
47
 
53
48
  .ard-form-field-overlay {
54
49
  background: ARD.$overlay;
55
50
  opacity: 0;
56
- transition: opacity 0.15s ARD.$timing-fn, background-color 0.15s ARD.$timing-fn;
57
51
  }
58
52
 
59
53
  &:hover {
60
54
  .ard-form-field-overlay {
61
- opacity: 3%;
55
+ opacity: var(--ard-form-field-hover-overlay-opacity, 3%);
62
56
  }
63
57
  }
64
58
  &.ard-focused {
65
59
  .ard-form-field-overlay {
66
- opacity: 6%;
60
+ opacity: var(--ard-form-field-focus-overlay-opacity, 6%);
61
+ }
62
+ }
63
+ &.ard-enable-transitions {
64
+ transition: border-color var(--ard-form-field-transitions-duration, 150ms) ARD.$timing-fn;
65
+
66
+ .ard-form-field-overlay {
67
+ transition:
68
+ opacity var(--ard-form-field-transitions-duration, 150ms) ARD.$timing-fn,
69
+ background-color var(--ard-form-field-transitions-duration, 150ms) ARD.$timing-fn;
67
70
  }
68
71
  }
69
72
  }
70
73
  .ard-disabled .ard-form-field-frame {
71
74
  pointer-events: none;
72
- opacity: 50%;
75
+ opacity: var(--ard-form-field-disabled-opacity, 50%);
73
76
 
74
77
  &.ard-appearance-transparent {
75
78
  .ard-form-field-overlay {
76
- opacity: 4.5%;
79
+ opacity: var(--ard-form-field-disabled-transparent-overlay-opacity, 4.5%);
77
80
  }
78
81
  }
79
82
  }
package/themes/default/inputs/_shared.scss CHANGED
@@ -12,8 +12,14 @@
12
12
  $line-height,
13
13
  $line-height-compact,
14
14
  $font-weight,
15
- $padding,
16
- $padding-compact,
15
+ $padding-top,
16
+ $padding-right,
17
+ $padding-bottom,
18
+ $padding-left,
19
+ $padding-top-compact,
20
+ $padding-right-compact,
21
+ $padding-bottom-compact,
22
+ $padding-left-compact,
17
23
  $color,
18
24
  $placeholder-color,
19
25
  $placeholder-opacity
@@ -30,7 +36,10 @@
30
36
  font-size: $font-size;
31
37
  line-height: $line-height;
32
38
  font-weight: $font-weight;
33
- padding: $padding;
39
+ padding-left: $padding-left;
40
+ padding-right: $padding-right;
41
+ padding-top: $padding-top;
42
+ padding-bottom: $padding-bottom;
34
43
  color: $color;
35
44
 
36
45
  .ard-input-container {
@@ -38,7 +47,17 @@
38
47
  text-size-adjust: 100%;
39
48
  display: flex;
40
49
  align-items: center;
50
+ height: 100%;
41
51
 
52
+ > * {
53
+ position: absolute;
54
+ inset: 0;
55
+ padding-left: $padding-left;
56
+ padding-right: $padding-right;
57
+ padding-top: $padding-top;
58
+ padding-bottom: $padding-bottom;
59
+ max-width: 100%;
60
+ }
42
61
  .ard-placeholder {
43
62
  font: inherit;
44
63
  opacity: $placeholder-opacity;
@@ -46,8 +65,9 @@
46
65
  white-space: nowrap;
47
66
  overflow: hidden;
48
67
  text-overflow: ellipsis;
49
- max-width: 100%;
50
68
  pointer-events: none;
69
+ display: flex;
70
+ align-items: center;
51
71
  }
52
72
 
53
73
  input {
@@ -55,10 +75,8 @@
55
75
  background: transparent;
56
76
  outline: none;
57
77
  font: inherit;
58
- padding: 0;
59
78
  color: inherit;
60
79
  display: block;
61
- width: 100%;
62
80
  }
63
81
  }
64
82
  //! compact
@@ -66,6 +84,9 @@
66
84
  height: $height-compact;
67
85
  font-size: $font-size-compact;
68
86
  line-height: $line-height-compact;
69
- padding: $padding-compact;
87
+ padding-left: $padding-left-compact;
88
+ padding-right: $padding-right-compact;
89
+ padding-top: $padding-top-compact;
90
+ padding-bottom: $padding-bottom-compact;
70
91
  }
71
92
  }
package/themes/default/inputs/autocomplete-input.scss CHANGED
@@ -14,8 +14,14 @@
14
14
  --ard-autocomplete-input-line-height: 1.25;
15
15
  --ard-autocomplete-input-line-height-compact: 1;
16
16
  --ard-autocomplete-input-font-weight: 400;
17
- // --ard-autocomplete-input-padding: ;
18
- // --ard-autocomplete-input-padding-compact: ;
17
+ // --ard-autocomplete-input-padding-top: ;
18
+ // --ard-autocomplete-input-padding-right: ;
19
+ // --ard-autocomplete-input-padding-bottom: ;
20
+ // --ard-autocomplete-input-padding-left: ;
21
+ // --ard-autocomplete-input-padding-top-compact: ;
22
+ // --ard-autocomplete-input-padding-right-compact: ;
23
+ // --ard-autocomplete-input-padding-bottom-compact: ;
24
+ // --ard-autocomplete-input-padding-left-compact: ;
19
25
  // --ard-autocomplete-input-color: ;
20
26
  // --ard-autocomplete-input-placeholder-color: ;
21
27
  --ard-autocomplete-input-placeholder-opacity: 60%;
@@ -47,8 +53,14 @@
47
53
  var(--ard-autocomplete-input-line-height, 1.25),
48
54
  var(--ard-autocomplete-input-line-height-compact, 1),
49
55
  var(--ard-autocomplete-input-font-weight, 400),
50
- var(--ard-autocomplete-input-padding, var(--ard-form-field-padding, 0 0.375rem)),
51
- var(--ard-autocomplete-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem)),
56
+ var(--ard-autocomplete-input-padding-top, var(--ard-form-field-padding-top, 0)),
57
+ var(--ard-autocomplete-input-padding-right, var(--ard-form-field-padding-right, 0.375rem)),
58
+ var(--ard-autocomplete-input-padding-bottom, var(--ard-form-field-padding-bottom, 0)),
59
+ var(--ard-autocomplete-input-padding-left, var(--ard-form-field-padding-left, 0.375rem)),
60
+ var(--ard-autocomplete-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0)),
61
+ var(--ard-autocomplete-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem)),
62
+ var(--ard-autocomplete-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0)),
63
+ var(--ard-autocomplete-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
52
64
  var(--ard-autocomplete-input-color, #{ARD.$text}),
53
65
  var(--ard-autocomplete-input-placeholder-color, #{ARD.$text}),
54
66
  var(--ard-autocomplete-input-placeholder-opacity, 60%)
@@ -59,6 +71,8 @@
59
71
  @include CB.clearButton();
60
72
 
61
73
  .ard-autocomplete {
74
+ display: flex;
75
+ align-items: center;
62
76
  opacity: var(--ard-autocomplete-input-autocomplete-opacity, 37.5%);
63
77
  }
64
78
  }
package/themes/default/inputs/date-input.scss CHANGED
@@ -12,11 +12,17 @@
12
12
  --ard-date-input-line-height: 1.25;
13
13
  --ard-date-input-line-height-compact: 1;
14
14
  --ard-date-input-font-weight: 400;
15
- // --ard-date-input-padding-compact: ;
15
+ // --ard-date-input-padding-top: ;
16
+ // --ard-date-input-padding-right: ;
17
+ // --ard-date-input-padding-bottom: ;
18
+ // --ard-date-input-padding-left: ;
19
+ // --ard-date-input-padding-top-compact: ;
20
+ // --ard-date-input-padding-right-compact: ;
21
+ // --ard-date-input-padding-bottom-compact: ;
22
+ // --ard-date-input-padding-left-compact: ;
16
23
  // --ard-date-input-color: ;
17
24
  // --ard-date-input-placeholder-color: ;
18
25
  --ard-date-input-placeholder-opacity: 60%;
19
- // --ard-date-input-padding: ;
20
26
 
21
27
  --ard-date-input-input-padding: 0 2.625rem 0 0.375rem;
22
28
  --ard-date-input-multipage-gap: 0;
@@ -34,8 +40,14 @@ ard-multipage-date-range-input .ard-multipage-date-range-input {
34
40
  var(--ard-date-input-line-height, 1.25),
35
41
  var(--ard-date-input-line-height-compact, 1),
36
42
  var(--ard-date-input-font-weight, 400),
37
- var(--ard-date-input-padding, var(--ard-form-field-padding, 0 0.375rem)),
38
- var(--ard-date-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem)),
43
+ var(--ard-date-input-padding-top, var(--ard-form-field-padding-top, 0)),
44
+ var(--ard-date-input-padding-right, var(--ard-form-field-padding-right, 0.375rem)),
45
+ var(--ard-date-input-padding-bottom, var(--ard-form-field-padding-bottom, 0)),
46
+ var(--ard-date-input-padding-left, var(--ard-form-field-padding-left, 0.375rem)),
47
+ var(--ard-date-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0)),
48
+ var(--ard-date-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem)),
49
+ var(--ard-date-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0)),
50
+ var(--ard-date-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
39
51
  var(--ard-date-input-color, #{ARD.$text}),
40
52
  var(--ard-date-input-placeholder-color, #{ARD.$text}),
41
53
  var(--ard-date-input-placeholder-opacity, 60%)
package/themes/default/inputs/file-input.scss CHANGED
@@ -15,8 +15,14 @@
15
15
  --ard-file-input-line-height: 1.25;
16
16
  --ard-file-input-line-height-compact: 1;
17
17
  --ard-file-input-font-weight: 400;
18
- // --ard-file-input-padding: ;
19
- // --ard-file-input-padding-compact: ;
18
+ // --ard-file-input-padding-top: ;
19
+ // --ard-file-input-padding-right: ;
20
+ // --ard-file-input-padding-bottom: ;
21
+ // --ard-file-input-padding-left: ;
22
+ // --ard-file-input-padding-top-compact: ;
23
+ // --ard-file-input-padding-right-compact: ;
24
+ // --ard-file-input-padding-bottom-compact: ;
25
+ // --ard-file-input-padding-left-compact: ;
20
26
  // --ard-file-input-color: ;
21
27
  // --ard-file-input-placeholder-color: ;
22
28
  --ard-file-input-placeholder-opacity: 60%;
@@ -61,8 +67,14 @@
61
67
  var(--ard-file-input-line-height, 1.25),
62
68
  var(--ard-file-input-line-height-compact, 1),
63
69
  var(--ard-file-input-font-weight, 400),
64
- var(--ard-file-input-padding, var(--ard-form-field-padding, 0 0.375rem)),
65
- var(--ard-file-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem)),
70
+ var(--ard-file-input-padding-top, var(--ard-form-field-padding-top, 0)),
71
+ var(--ard-file-input-padding-right, var(--ard-form-field-padding-right, 0.375rem)),
72
+ var(--ard-file-input-padding-bottom, var(--ard-form-field-padding-bottom, 0)),
73
+ var(--ard-file-input-padding-left, var(--ard-form-field-padding-left, 0.375rem)),
74
+ var(--ard-file-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0)),
75
+ var(--ard-file-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem)),
76
+ var(--ard-file-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0)),
77
+ var(--ard-file-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
66
78
  var(--ard-file-input-color, #{ARD.$text}),
67
79
  var(--ard-file-input-placeholder-color, #{ARD.$text}),
68
80
  var(--ard-file-input-placeholder-opacity, 60%)
@@ -97,7 +109,7 @@
97
109
  border: var(--ard-file-input-browse-button-border, none);
98
110
  border-radius: var(--ard-file-input-browse-button-border-radius, 9999px);
99
111
  background: var(--ard-file-input-browse-button-background, none);
100
- padding: var(--ard-file-input-browse-butto-padding, 0);
112
+ padding: var(--ard-file-input-browse-button-padding, 0);
101
113
  color: var(--ard-file-input-browse-button-color, #{ARD.$text});
102
114
  position: relative;
103
115
  display: flex;
package/themes/default/inputs/hex-input.scss CHANGED
@@ -14,8 +14,14 @@
14
14
  --ard-hex-input-line-height: 1.25;
15
15
  --ard-hex-input-line-height-compact: 1;
16
16
  --ard-hex-input-font-weight: 400;
17
- // --ard-hex-input-padding: ;
18
- // --ard-hex-input-padding-compact: ;
17
+ // --ard-hex-input-padding-top: ;
18
+ // --ard-hex-input-padding-right: ;
19
+ // --ard-hex-input-padding-bottom: ;
20
+ // --ard-hex-input-padding-left: ;
21
+ // --ard-hex-input-padding-top-compact: ;
22
+ // --ard-hex-input-padding-right-compact: ;
23
+ // --ard-hex-input-padding-bottom-compact: ;
24
+ // --ard-hex-input-padding-left-compact: ;
19
25
  // --ard-hex-input-color: ;
20
26
  // --ard-hex-input-placeholder-color: ;
21
27
  --ard-hex-input-placeholder-opacity: 60%;
@@ -37,8 +43,14 @@
37
43
  var(--ard-hex-input-line-height, 1.25),
38
44
  var(--ard-hex-input-line-height-compact, 1),
39
45
  var(--ard-hex-input-font-weight, 400),
40
- var(--ard-hex-input-padding, var(--ard-form-field-padding, 0 0.375rem)),
41
- var(--ard-hex-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem)),
46
+ var(--ard-hex-input-padding-top, var(--ard-form-field-padding-top, 0)),
47
+ var(--ard-hex-input-padding-right, var(--ard-form-field-padding-right, 0.375rem)),
48
+ var(--ard-hex-input-padding-bottom, var(--ard-form-field-padding-bottom, 0)),
49
+ var(--ard-hex-input-padding-left, var(--ard-form-field-padding-left, 0.375rem)),
50
+ var(--ard-hex-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0)),
51
+ var(--ard-hex-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem)),
52
+ var(--ard-hex-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0)),
53
+ var(--ard-hex-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
42
54
  var(--ard-hex-input-color, #{ARD.$text}),
43
55
  var(--ard-hex-input-placeholder-color, #{ARD.$text}),
44
56
  var(--ard-hex-input-placeholder-opacity, 60%)
package/themes/default/inputs/input.scss CHANGED
@@ -14,8 +14,14 @@
14
14
  --ard-input-line-height: 1.25;
15
15
  --ard-input-line-height-compact: 1;
16
16
  --ard-input-font-weight: 400;
17
- // --ard-input-padding: ;
18
- // --ard-input-padding-compact: ;
17
+ // --ard-input-padding-left: ;
18
+ // --ard-input-padding-right: ;
19
+ // --ard-input-padding-top: ;
20
+ // --ard-input-padding-bottom: ;
21
+ // --ard-input-padding-left-compact: ;
22
+ // --ard-input-padding-right-compact: ;
23
+ // --ard-input-padding-top-compact: ;
24
+ // --ard-input-padding-bottom-compact: ;
19
25
  // --ard-input-color: ;
20
26
  // --ard-input-placeholder-color: ;
21
27
  --ard-input-placeholder-opacity: 60%;
@@ -34,8 +40,14 @@
34
40
  var(--ard-input-line-height, 1.25),
35
41
  var(--ard-input-line-height-compact, 1),
36
42
  var(--ard-input-font-weight, 400),
37
- var(--ard-input-padding, var(--ard-form-field-padding, 0 0.375rem)),
38
- var(--ard-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem)),
43
+ var(--ard-input-padding-top, var(--ard-form-field-padding-top, 0)),
44
+ var(--ard-input-padding-right, var(--ard-form-field-padding-right, 0.375rem)),
45
+ var(--ard-input-padding-bottom, var(--ard-form-field-padding-bottom, 0)),
46
+ var(--ard-input-padding-left, var(--ard-form-field-padding-left, 0.375rem)),
47
+ var(--ard-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0)),
48
+ var(--ard-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem)),
49
+ var(--ard-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0)),
50
+ var(--ard-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
39
51
  var(--ard-input-color, #{ARD.$text}),
40
52
  var(--ard-input-placeholder-color, #{ARD.$text}),
41
53
  var(--ard-input-placeholder-opacity, 60%)