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

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 (37) hide show
  1. package/fesm2022/ardium-ui-ui.mjs +19 -8
  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/package.json +1 -1
  7. package/prebuilt-themes/default/core.css +13 -2
  8. package/prebuilt-themes/default/core.css.map +1 -1
  9. package/prebuilt-themes/default/form-field-frame.css +12 -12
  10. package/prebuilt-themes/default/form-field-frame.css.map +1 -1
  11. package/prebuilt-themes/default/inputs/autocomplete-input.css +22 -5
  12. package/prebuilt-themes/default/inputs/autocomplete-input.css.map +1 -1
  13. package/prebuilt-themes/default/inputs/date-input.css +22 -5
  14. package/prebuilt-themes/default/inputs/date-input.css.map +1 -1
  15. package/prebuilt-themes/default/inputs/file-input.css +21 -6
  16. package/prebuilt-themes/default/inputs/file-input.css.map +1 -1
  17. package/prebuilt-themes/default/inputs/hex-input.css +20 -5
  18. package/prebuilt-themes/default/inputs/hex-input.css.map +1 -1
  19. package/prebuilt-themes/default/inputs/input.css +20 -5
  20. package/prebuilt-themes/default/inputs/input.css.map +1 -1
  21. package/prebuilt-themes/default/inputs/number-input.css +20 -5
  22. package/prebuilt-themes/default/inputs/number-input.css.map +1 -1
  23. package/prebuilt-themes/default/inputs/password-input.css +20 -5
  24. package/prebuilt-themes/default/inputs/password-input.css.map +1 -1
  25. package/themes/default/core.scss +13 -2
  26. package/themes/default/form-field-frame.scss +15 -12
  27. package/themes/default/inputs/_shared.scss +28 -7
  28. package/themes/default/inputs/autocomplete-input.scss +18 -4
  29. package/themes/default/inputs/date-input.scss +16 -4
  30. package/themes/default/inputs/file-input.scss +17 -5
  31. package/themes/default/inputs/hex-input.scss +16 -4
  32. package/themes/default/inputs/input.scss +16 -4
  33. package/themes/default/inputs/number-input.scss +17 -5
  34. package/themes/default/inputs/password-input.scss +16 -4
  35. package/prebuilt-themes/default/inputs/search-bar.css +0 -135
  36. package/prebuilt-themes/default/inputs/search-bar.css.map +0 -1
  37. package/themes/default/inputs/search-bar.scss +0 -55
@@ -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;
@@ -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"}
@@ -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
 
@@ -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
  }
@@ -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
  }
@@ -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
  }
@@ -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%)
@@ -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;
@@ -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%)
@@ -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%)
@@ -13,8 +13,14 @@
13
13
  --ard-number-input-line-height: 1.25;
14
14
  --ard-number-input-line-height-compact: 1;
15
15
  --ard-number-input-font-weight: 400;
16
- // --ard-number-input-padding: ;
17
- // --ard-number-input-padding-compact: ;
16
+ // --ard-number-input-padding-top: ;
17
+ // --ard-number-input-padding-right: ;
18
+ // --ard-number-input-padding-bottom: ;
19
+ // --ard-number-input-padding-left: ;
20
+ // --ard-number-input-padding-top-compact: ;
21
+ // --ard-number-input-padding-right-compact: ;
22
+ // --ard-number-input-padding-bottom-compact: ;
23
+ // --ard-number-input-padding-left-compact: ;
18
24
  // --ard-number-input-color: ;
19
25
  // --ard-number-input-placeholder-color: ;
20
26
  --ard-number-input-placeholder-opacity: 60%;
@@ -37,8 +43,14 @@ ard-number-input {
37
43
  var(--ard-number-input-line-height, 1.25),
38
44
  var(--ard-number-input-line-height-compact, 1),
39
45
  var(--ard-number-input-font-weight, 400),
40
- var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem)),
41
- var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem)),
46
+ var(--ard-number-input-padding-top, var(--ard-form-field-padding-top, 0)),
47
+ var(--ard-number-input-padding-right, var(--ard-form-field-padding-right, 0.375rem)),
48
+ var(--ard-number-input-padding-bottom, var(--ard-form-field-padding-bottom, 0)),
49
+ var(--ard-number-input-padding-left, var(--ard-form-field-padding-left, 0.375rem)),
50
+ var(--ard-number-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0)),
51
+ var(--ard-number-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem)),
52
+ var(--ard-number-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0)),
53
+ var(--ard-number-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
42
54
  var(--ard-number-input-color, #{ARD.$text}),
43
55
  var(--ard-number-input-placeholder-color, #{ARD.$text}),
44
56
  var(--ard-number-input-placeholder-opacity, 60%)
@@ -50,7 +62,7 @@ ard-number-input {
50
62
  .ard-input-container {
51
63
  height: 100%;
52
64
  max-width: 100%;
53
- padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem));
65
+ padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem)); // TODO
54
66
 
55
67
  & > input {
56
68
  width: 100%;
@@ -14,8 +14,14 @@
14
14
  --ard-password-input-line-height: 1.25;
15
15
  --ard-password-input-line-height-compact: 1;
16
16
  --ard-password-input-font-weight: 400;
17
- // --ard-password-input-padding: ;
18
- // --ard-password-input-padding-compact: ;
17
+ // --ard-password-input-padding-top: ;
18
+ // --ard-password-input-padding-right: ;
19
+ // --ard-password-input-padding-bottom: ;
20
+ // --ard-password-input-padding-left: ;
21
+ // --ard-password-input-padding-top-compact: ;
22
+ // --ard-password-input-padding-right-compact: ;
23
+ // --ard-password-input-padding-bottom-compact: ;
24
+ // --ard-password-input-padding-left-compact: ;
19
25
  // --ard-password-input-color: ;
20
26
  // --ard-password-input-placeholder-color: ;
21
27
  --ard-password-input-placeholder-opacity: 60%;
@@ -48,8 +54,14 @@
48
54
  var(--ard-password-input-line-height, 1.25),
49
55
  var(--ard-password-input-line-height-compact, 1),
50
56
  var(--ard-password-input-font-weight, 400),
51
- var(--ard-password-input-padding, var(--ard-form-field-padding, 0 0.375rem)),
52
- var(--ard-password-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem)),
57
+ var(--ard-password-input-padding-top, var(--ard-form-field-padding-top, 0)),
58
+ var(--ard-password-input-padding-right, var(--ard-form-field-padding-right, 0.375rem)),
59
+ var(--ard-password-input-padding-bottom, var(--ard-form-field-padding-bottom, 0)),
60
+ var(--ard-password-input-padding-left, var(--ard-form-field-padding-left, 0.375rem)),
61
+ var(--ard-password-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0)),
62
+ var(--ard-password-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem)),
63
+ var(--ard-password-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0)),
64
+ var(--ard-password-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
53
65
  var(--ard-password-input-color, #{ARD.$text}),
54
66
  var(--ard-password-input-placeholder-color, #{ARD.$text}),
55
67
  var(--ard-password-input-placeholder-opacity, 60%)
@@ -1,135 +0,0 @@
1
- /**
2
- * Should be applied to the first element in the component's template.
3
- */
4
- :root {
5
- --ard-search-bar-gap: 0.625rem;
6
- --ard-search-bar-line-height: 1.25;
7
- --ard-search-bar-line-height-compact: 1;
8
- --ard-search-bar-font-weight: 400;
9
- --ard-search-bar-placeholder-opacity: 60%;
10
- --ard-search-bar-min-width: 10rem;
11
- --ard-search-bar-max-width: 100%;
12
- --ard-search-bar-disabled-opacity: 50%;
13
- }
14
-
15
- .ard-search-bar {
16
- height: var(--ard-search-bar-height, var(--ard-form-field-height, 2.3125rem));
17
- position: relative;
18
- font-family: var(--ard-font-family);
19
- display: flex;
20
- align-items: center;
21
- justify-content: stretch;
22
- gap: var(--ard-search-bar-gap, 0.625rem);
23
- cursor: text;
24
- box-sizing: border-box;
25
- font-size: var(--ard-search-bar-font-size, var(--ard-form-field-font-size, 1rem));
26
- line-height: var(--ard-search-bar-line-height, 1.25);
27
- font-weight: var(--ard-search-bar-font-weight, 400);
28
- padding: var(--ard-search-bar-padding, var(--ard-form-field-padding, 0 0.375rem));
29
- color: var(--ard-search-bar-color, var(--ard-text));
30
- min-width: var(--ard-search-bar-min-width, 10rem);
31
- max-width: var(--ard-search-bar-max-width, 100%);
32
- }
33
- .ard-search-bar .ard-input-container {
34
- flex-grow: 1;
35
- text-size-adjust: 100%;
36
- display: flex;
37
- align-items: center;
38
- }
39
- .ard-search-bar .ard-input-container .ard-placeholder {
40
- font: inherit;
41
- opacity: var(--ard-search-bar-placeholder-opacity, 60%);
42
- color: var(--ard-search-bar-placeholder-color, var(--ard-text));
43
- white-space: nowrap;
44
- overflow: hidden;
45
- text-overflow: ellipsis;
46
- max-width: 100%;
47
- pointer-events: none;
48
- }
49
- .ard-search-bar .ard-input-container input {
50
- border: none;
51
- background: transparent;
52
- outline: none;
53
- font: inherit;
54
- padding: 0;
55
- color: inherit;
56
- display: block;
57
- width: 100%;
58
- }
59
- .ard-search-bar.ard-compact {
60
- height: var(--ard-search-bar-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
61
- font-size: var(--ard-search-bar-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
62
- line-height: var(--ard-search-bar-line-height-compact, 1);
63
- padding: var(--ard-search-bar-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
64
- }
65
- .ard-search-bar ard-clear-button {
66
- height: var(--ard-clear-button-size);
67
- width: var(--ard-clear-button-size);
68
- position: relative;
69
- }
70
- .ard-search-bar .ard-clear-btn-wrapper {
71
- cursor: pointer;
72
- font-size: medium;
73
- color: var(--ard-detail);
74
- width: var(--ard-clear-button-size);
75
- height: var(--ard-clear-button-size);
76
- line-height: 1em;
77
- border-radius: 999px;
78
- border: none;
79
- padding: 0;
80
- background: transparent;
81
- position: absolute;
82
- left: 50%;
83
- top: 50%;
84
- transform: translate(-50%, -50%);
85
- outline: none;
86
- color: inherit;
87
- }
88
- .ard-search-bar .ard-clear-btn-wrapper .ard-hitbox {
89
- position: absolute;
90
- left: -1px;
91
- right: -1px;
92
- top: -1px;
93
- bottom: -1px;
94
- }
95
- .ard-search-bar .ard-clear-btn-wrapper .ard-focus-overlay {
96
- position: absolute;
97
- top: calc(-1 * 1px);
98
- bottom: calc(-1 * 1px);
99
- left: calc(-1 * 1px);
100
- right: calc(-1 * 1px);
101
- opacity: 0;
102
- border-radius: inherit;
103
- pointer-events: none;
104
- transition: opacity 0.2s ease;
105
- background: currentColor;
106
- }
107
- .ard-search-bar .ard-clear-btn-wrapper .ard-clear-btn {
108
- position: absolute;
109
- left: 50%;
110
- top: 50%;
111
- transform: translate(-50%, -50%);
112
- }
113
- .ard-search-bar .ard-clear-btn-wrapper .ard-clear-btn::before {
114
- content: "close";
115
- font-family: "Material Symbols Outlined";
116
- font-size: 1.5em;
117
- font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
118
- font-size: 70%;
119
- }
120
- .ard-search-bar .ard-clear-btn-wrapper:hover .ard-focus-overlay {
121
- opacity: 5%;
122
- }
123
- .ard-search-bar .ard-clear-btn-wrapper:focus .ard-focus-overlay {
124
- opacity: 8%;
125
- }
126
- .ard-search-bar .ard-clear-btn-wrapper:active .ard-focus-overlay {
127
- opacity: 15%;
128
- }
129
-
130
- .ard-disabled .ard-search-bar {
131
- pointer-events: none;
132
- opacity: var(--ard-search-bar-disabled-opacity, 50%);
133
- }
134
-
135
- /*# sourceMappingURL=search-bar.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/search-bar.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;EAKA;EAEA;EACA;EACA;;;AAGF;EDPE,QCSE;EDRF;EACA;EACA;EACA;EACA;EACA,KCKE;EDJF;EACA;EACA,WCGE;EDFF,aCIE;EDHF,aCKE;EDJF,SCKE;EDJF,OCME;EAIF;EACA;;ADTA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA,SCFF;EDGE,OCJF;EDKE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE,QCnCA;EDoCA,WCjCA;EDkCA,aChCA;EDiCA,SC9BA;;AClCF;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;;;ADlBN;EACE;EACA","file":"search-bar.css"}