@ardium-ui/ui 5.0.0-alpha.36 → 5.0.0-alpha.38
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.
- package/fesm2022/ardium-ui-ui.mjs +2842 -1364
- package/fesm2022/ardium-ui-ui.mjs.map +1 -1
- package/lib/_internal/utils/date.utils.d.ts +16 -0
- package/lib/buttons/_button-base.d.ts +9 -6
- package/lib/buttons/_button-base.defaults.d.ts +3 -2
- package/lib/buttons/button/button.component.d.ts +3 -4
- package/lib/buttons/button/button.defaults.d.ts +0 -2
- package/lib/buttons/button/button.directive.d.ts +17 -0
- package/lib/buttons/button/button.module.d.ts +3 -2
- package/lib/buttons/button/index.d.ts +1 -0
- package/lib/buttons/fab/fab.component.d.ts +3 -1
- package/lib/buttons/icon-button/icon-button.component.d.ts +2 -1
- package/lib/buttons/icon-button/icon-button.defaults.d.ts +2 -1
- package/lib/calendar/abstract-calendar.d.ts +127 -0
- package/lib/calendar/calendar.component.d.ts +8 -97
- package/lib/calendar/calendar.defaults.d.ts +12 -1
- package/lib/calendar/calendar.internal-directives.d.ts +24 -8
- package/lib/calendar/calendar.internal-types.d.ts +1 -0
- package/lib/calendar/calendar.module.d.ts +4 -9
- package/lib/calendar/calendar.types.d.ts +19 -5
- package/lib/calendar/index.d.ts +3 -0
- package/lib/calendar/range-calendar.component.d.ts +16 -0
- package/lib/calendar/range-calendar.directives.d.ts +51 -0
- package/lib/calendar/range-calendar.module.d.ts +10 -0
- package/lib/calendar/views/calendar-views.module.d.ts +13 -0
- package/lib/calendar/views/days-view/days-view.component.d.ts +20 -2
- package/lib/calendar/views/days-view/days-view.helpers.d.ts +2 -2
- package/lib/calendar/views/months-view/months-view.component.d.ts +15 -3
- package/lib/calendar/views/years-view/years-view.component.d.ts +15 -3
- package/lib/inputs/date-input/abstract-date-input.d.ts +112 -0
- package/lib/inputs/date-input/date-input.component.d.ts +19 -82
- package/lib/inputs/date-input/date-input.defaults.d.ts +21 -3
- package/lib/inputs/date-input/{date-input.directive.d.ts → date-input.directives.d.ts} +2 -2
- package/lib/inputs/date-input/date-input.module.d.ts +5 -4
- package/lib/inputs/date-input/date-input.serializers.d.ts +4 -2
- package/lib/inputs/date-input/date-input.types.d.ts +5 -4
- package/lib/inputs/date-input/date-range-input.component.d.ts +29 -0
- package/lib/inputs/date-input/date-range-input.directives.d.ts +82 -0
- package/lib/inputs/date-input/date-range-input.module.d.ts +17 -0
- package/lib/inputs/date-input/index.d.ts +7 -1
- package/lib/inputs/date-input/multipage-date-range-input.component.d.ts +44 -0
- package/lib/inputs/date-input/multipage-date-range-input.directives.d.ts +82 -0
- package/lib/inputs/date-input/multipage-date-range-input.module.d.ts +17 -0
- package/lib/inputs/number-input/number-input.component.d.ts +3 -2
- package/package.json +1 -1
- package/prebuilt-themes/default/buttons/button.css +26 -37
- package/prebuilt-themes/default/buttons/button.css.map +1 -1
- package/prebuilt-themes/default/buttons/fab.css +27 -33
- package/prebuilt-themes/default/buttons/fab.css.map +1 -1
- package/prebuilt-themes/default/buttons/icon-button.css +23 -30
- package/prebuilt-themes/default/buttons/icon-button.css.map +1 -1
- package/prebuilt-themes/default/calendar.css +134 -54
- package/prebuilt-themes/default/calendar.css.map +1 -1
- package/prebuilt-themes/default/checkbox-list.css +4 -4
- package/prebuilt-themes/default/checkbox.css +4 -4
- package/prebuilt-themes/default/chips.css +8 -8
- package/prebuilt-themes/default/inputs/autocomplete-input.css +69 -24
- package/prebuilt-themes/default/inputs/autocomplete-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/color-input.css +4 -43
- package/prebuilt-themes/default/inputs/color-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/date-input.css +76 -20
- package/prebuilt-themes/default/inputs/date-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/file-input.css +109 -61
- package/prebuilt-themes/default/inputs/file-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/hex-input.css +42 -17
- package/prebuilt-themes/default/inputs/hex-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/input.css +36 -13
- package/prebuilt-themes/default/inputs/input.css.map +1 -1
- package/prebuilt-themes/default/inputs/number-input.css +26 -21
- package/prebuilt-themes/default/inputs/number-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/password-input.css +64 -21
- package/prebuilt-themes/default/inputs/password-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/search-bar.css +38 -15
- package/prebuilt-themes/default/inputs/search-bar.css.map +1 -1
- package/prebuilt-themes/default/radio.css +4 -4
- package/prebuilt-themes/default/segment.css +4 -4
- package/prebuilt-themes/default/select.css +4 -4
- package/prebuilt-themes/default/slide-toggle.css +4 -4
- package/prebuilt-themes/default/slider.css +4 -4
- package/prebuilt-themes/default/stars.css +4 -4
- package/prebuilt-themes/default/statebox.css +4 -4
- package/prebuilt-themes/default/tabber.css +4 -4
- package/themes/default/_mixins.scss +4 -4
- package/themes/default/buttons/_button-mixins.scss +13 -16
- package/themes/default/buttons/button.scss +8 -17
- package/themes/default/buttons/fab.scss +12 -17
- package/themes/default/buttons/icon-button.scss +7 -12
- package/themes/default/calendar.scss +146 -55
- package/themes/default/inputs/_shared.scss +27 -8
- package/themes/default/inputs/autocomplete-input.scss +68 -14
- package/themes/default/inputs/color-input.scss +1 -1
- package/themes/default/inputs/date-input.scss +54 -5
- package/themes/default/inputs/file-input.scss +83 -23
- package/themes/default/inputs/hex-input.scss +42 -7
- package/themes/default/inputs/input.scss +37 -3
- package/themes/default/inputs/number-input.scss +30 -14
- package/themes/default/inputs/password-input.scss +70 -15
- package/themes/default/inputs/search-bar.scss +39 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/file-input.scss","../../../../../projects/ui/src/themes/default/_coloring.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/file-input.scss","../../../../../projects/ui/src/themes/default/_coloring.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACE;;;AAGJ;ED/BE,QCiCE;EDhCF;EACA;EACA;EACA;EACA;EACA,KC6BE;ED5BF;EACA;EACA,WC2BE;ED1BF,aC4BE;ED3BF,aC6BE;ED5BF,SC6BE;EAOF;EACA;EACA;EACA;EACA;;ADtCA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA,SCuBF;EDtBE,OCqBF;EDpBE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE,QCTA;EDUA,WCPA;EDQA,aCNA;EDOA,SCJA;;AC3DF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AD5DF;EACE;EACA;;AAGF;EACE;;AAIF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EE3FF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFoFI;EACA;;AAGA;EACE;;AAIF;EACE;;AAIF;EACE;;AAIF;EACE;;AG1HN;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;EDvBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;ECgBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;ED7CN;EACA;EACA,yBACE;EC4CI;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;AHiEN;EACE;;AAEF;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;;AAEF;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;;AAIN;EACE;;;AAIE;AAAA;EAEE","file":"file-input.css"}
|
|
@@ -1,20 +1,43 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Should be applied to the first element in the component's template.
|
|
3
3
|
*/
|
|
4
|
+
:root {
|
|
5
|
+
--ard-hex-input-height: var(--ard-form-field-height, 2.3125rem);
|
|
6
|
+
--ard-hex-input-height-compact: var(--ard-form-field-height-compact, 1.6875rem);
|
|
7
|
+
--ard-hex-input-gap: 0.625rem;
|
|
8
|
+
--ard-hex-input-font-size: var(--ard-form-field-font-size, 1rem);
|
|
9
|
+
--ard-hex-input-font-size-compact: var(--ard-form-field-font-size-compact, 0.875rem);
|
|
10
|
+
--ard-hex-input-line-height: 1.25;
|
|
11
|
+
--ard-hex-input-line-height-compact: 1;
|
|
12
|
+
--ard-hex-input-font-weight: 400;
|
|
13
|
+
--ard-hex-input-padding: var(--ard-form-field-padding, 0 0.375rem);
|
|
14
|
+
--ard-hex-input-padding-compact: var(--ard-form-field-padding-compact, 0 0.375rem);
|
|
15
|
+
--ard-hex-input-color: var(--ard-text);
|
|
16
|
+
--ard-hex-input-placeholder-color: var(--ard-text);
|
|
17
|
+
--ard-hex-input-placeholder-opacity: 60%;
|
|
18
|
+
--ard-hex-input-min-width: 10rem;
|
|
19
|
+
--ard-hex-input-max-width: 100%;
|
|
20
|
+
--ard-hex-input-hash-margin: 0 0 -0.5rem 0;
|
|
21
|
+
--ard-hex-input-hash-color: var(--ard-text);
|
|
22
|
+
--ard-hex-input-hash-opacity: 70%;
|
|
23
|
+
}
|
|
24
|
+
|
|
4
25
|
.ard-hex-input {
|
|
26
|
+
height: var(--ard-autocomplete-input-height, var(--ard-form-field-height, 2.3125rem));
|
|
5
27
|
position: relative;
|
|
6
28
|
font-family: var(--ard-font-family);
|
|
7
29
|
display: flex;
|
|
8
30
|
align-items: center;
|
|
9
31
|
justify-content: stretch;
|
|
10
|
-
gap: 0.
|
|
32
|
+
gap: var(--ard-autocomplete-input-gap, 0.625rem);
|
|
11
33
|
cursor: text;
|
|
12
34
|
box-sizing: border-box;
|
|
13
|
-
font-size: 1rem;
|
|
14
|
-
line-height: 1.
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
35
|
+
font-size: var(--ard-autocomplete-input-font-size, var(--ard-form-field-font-size, 1rem));
|
|
36
|
+
line-height: var(--ard-autocomplete-input-line-height, 1.25);
|
|
37
|
+
font-weight: var(--ard-autocomplete-input-font-weight, 400);
|
|
38
|
+
padding: var(--ard-autocomplete-input-padding, var(--ard-form-field-padding, 0 0.375rem));
|
|
39
|
+
min-width: var(--ard-hex-input-min-width, 10rem);
|
|
40
|
+
max-width: var(--ard-hex-input-max-width, 100%);
|
|
18
41
|
}
|
|
19
42
|
.ard-hex-input .ard-input-container {
|
|
20
43
|
flex-grow: 1;
|
|
@@ -24,7 +47,8 @@
|
|
|
24
47
|
}
|
|
25
48
|
.ard-hex-input .ard-input-container .ard-placeholder {
|
|
26
49
|
font: inherit;
|
|
27
|
-
opacity: 60
|
|
50
|
+
opacity: var(--ard-autocomplete-input-placeholder-opacity, 60%);
|
|
51
|
+
color: var(--ard-autocomplete-input-placeholder-color, var(--ard-text));
|
|
28
52
|
white-space: nowrap;
|
|
29
53
|
overflow: hidden;
|
|
30
54
|
text-overflow: ellipsis;
|
|
@@ -41,9 +65,10 @@
|
|
|
41
65
|
width: 100%;
|
|
42
66
|
}
|
|
43
67
|
.ard-hex-input.ard-compact {
|
|
44
|
-
height: 1.
|
|
45
|
-
font-size: 0.
|
|
46
|
-
line-height: 1;
|
|
68
|
+
height: var(--ard-autocomplete-input-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
|
|
69
|
+
font-size: var(--ard-autocomplete-input-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
|
|
70
|
+
line-height: var(--ard-autocomplete-input-line-height-compact, 1);
|
|
71
|
+
padding: var(--ard-autocomplete-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
|
|
47
72
|
}
|
|
48
73
|
.ard-hex-input ard-clear-button {
|
|
49
74
|
height: var(--ard-clear-button-size);
|
|
@@ -77,10 +102,10 @@
|
|
|
77
102
|
}
|
|
78
103
|
.ard-hex-input .ard-clear-btn-wrapper .ard-focus-overlay {
|
|
79
104
|
position: absolute;
|
|
80
|
-
top: -1px;
|
|
81
|
-
bottom: -1px;
|
|
82
|
-
left: -1px;
|
|
83
|
-
right: -1px;
|
|
105
|
+
top: calc(-1 * 1px);
|
|
106
|
+
bottom: calc(-1 * 1px);
|
|
107
|
+
left: calc(-1 * 1px);
|
|
108
|
+
right: calc(-1 * 1px);
|
|
84
109
|
opacity: 0;
|
|
85
110
|
border-radius: inherit;
|
|
86
111
|
pointer-events: none;
|
|
@@ -113,9 +138,9 @@
|
|
|
113
138
|
font-family: var(--ard-font-family-mono);
|
|
114
139
|
}
|
|
115
140
|
.ard-hex-input .ard-hash-container {
|
|
116
|
-
margin
|
|
117
|
-
color: var(--ard-
|
|
118
|
-
opacity: 70
|
|
141
|
+
margin: var(--ard-hex-input-hash-margin, 0 0 -0.5rem 0);
|
|
142
|
+
color: var(--ard-hex-input-hash-color, var(--ard-text));
|
|
143
|
+
opacity: var(--ard-hex-input-hash-opacity, 70%);
|
|
119
144
|
user-select: none;
|
|
120
145
|
font-family: var(--ard-font-family-mono);
|
|
121
146
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/hex-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;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/hex-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;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAGF;EDPE,QCSE;EDRF;EACA;EACA;EACA;EACA;EACA,KCKE;EDJF;EACA;EACA,WCGE;EDFF,aCIE;EDHF,aCKE;EDJF,SCKE;EAMF;EACA;;ADVA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA,SCDF;EDEE,OCHF;EDIE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE,QCjCA;EDkCA,WC/BA;EDgCA,aC9BA;ED+BA,SC5BA;;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;;ADnBJ;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA","file":"hex-input.css"}
|
|
@@ -1,19 +1,40 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Should be applied to the first element in the component's template.
|
|
3
3
|
*/
|
|
4
|
+
:root {
|
|
5
|
+
--ard-input-height: var(--ard-form-field-height, 2.3125rem);
|
|
6
|
+
--ard-input-height-compact: var(--ard-form-field-height-compact, 1.6875rem);
|
|
7
|
+
--ard-input-gap: 0.625rem;
|
|
8
|
+
--ard-input-font-size: var(--ard-form-field-font-size, 1rem);
|
|
9
|
+
--ard-input-font-size-compact: var(--ard-form-field-font-size-compact, 0.875rem);
|
|
10
|
+
--ard-input-line-height: 1.25;
|
|
11
|
+
--ard-input-line-height-compact: 1;
|
|
12
|
+
--ard-input-font-weight: 400;
|
|
13
|
+
--ard-input-padding: var(--ard-form-field-padding, 0 0.375rem);
|
|
14
|
+
--ard-input-padding-compact: var(--ard-form-field-padding-compact, 0 0.375rem);
|
|
15
|
+
--ard-input-color: var(--ard-text);
|
|
16
|
+
--ard-input-placeholder-color: var(--ard-text);
|
|
17
|
+
--ard-input-placeholder-opacity: 60%;
|
|
18
|
+
--ard-input-min-width: 10rem;
|
|
19
|
+
--ard-input-max-width: 100%;
|
|
20
|
+
}
|
|
21
|
+
|
|
4
22
|
.ard-input {
|
|
23
|
+
height: var(--ard-input-height, var(--ard-form-field-height, 2.3125rem));
|
|
5
24
|
position: relative;
|
|
6
25
|
font-family: var(--ard-font-family);
|
|
7
26
|
display: flex;
|
|
8
27
|
align-items: center;
|
|
9
28
|
justify-content: stretch;
|
|
10
|
-
gap: 0.
|
|
29
|
+
gap: var(--ard-input-gap, 0.625rem);
|
|
11
30
|
cursor: text;
|
|
12
31
|
box-sizing: border-box;
|
|
13
|
-
font-size: 1rem;
|
|
14
|
-
line-height: 1.
|
|
15
|
-
|
|
16
|
-
|
|
32
|
+
font-size: var(--ard-input-font-size, var(--ard-form-field-font-size, 1rem));
|
|
33
|
+
line-height: var(--ard-input-line-height, 1.25);
|
|
34
|
+
font-weight: var(--ard-input-font-weight, 400);
|
|
35
|
+
padding: var(--ard-input-padding, var(--ard-form-field-padding, 0 0.375rem));
|
|
36
|
+
min-width: var(--ard-input-min-width, 10rem);
|
|
37
|
+
max-width: var(--ard-input-max-width, 100%);
|
|
17
38
|
}
|
|
18
39
|
.ard-input .ard-input-container {
|
|
19
40
|
flex-grow: 1;
|
|
@@ -23,7 +44,8 @@
|
|
|
23
44
|
}
|
|
24
45
|
.ard-input .ard-input-container .ard-placeholder {
|
|
25
46
|
font: inherit;
|
|
26
|
-
opacity: 60
|
|
47
|
+
opacity: var(--ard-input-placeholder-opacity, 60%);
|
|
48
|
+
color: var(--ard-input-placeholder-color, var(--ard-text));
|
|
27
49
|
white-space: nowrap;
|
|
28
50
|
overflow: hidden;
|
|
29
51
|
text-overflow: ellipsis;
|
|
@@ -40,9 +62,10 @@
|
|
|
40
62
|
width: 100%;
|
|
41
63
|
}
|
|
42
64
|
.ard-input.ard-compact {
|
|
43
|
-
height: 1.
|
|
44
|
-
font-size: 0.
|
|
45
|
-
line-height: 1;
|
|
65
|
+
height: var(--ard-input-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
|
|
66
|
+
font-size: var(--ard-input-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
|
|
67
|
+
line-height: var(--ard-input-line-height-compact, 1);
|
|
68
|
+
padding: var(--ard-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
|
|
46
69
|
}
|
|
47
70
|
.ard-input ard-clear-button {
|
|
48
71
|
height: var(--ard-clear-button-size);
|
|
@@ -76,10 +99,10 @@
|
|
|
76
99
|
}
|
|
77
100
|
.ard-input .ard-clear-btn-wrapper .ard-focus-overlay {
|
|
78
101
|
position: absolute;
|
|
79
|
-
top: -1px;
|
|
80
|
-
bottom: -1px;
|
|
81
|
-
left: -1px;
|
|
82
|
-
right: -1px;
|
|
102
|
+
top: calc(-1 * 1px);
|
|
103
|
+
bottom: calc(-1 * 1px);
|
|
104
|
+
left: calc(-1 * 1px);
|
|
105
|
+
right: calc(-1 * 1px);
|
|
83
106
|
opacity: 0;
|
|
84
107
|
border-radius: inherit;
|
|
85
108
|
pointer-events: none;
|
|
@@ -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;
|
|
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;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAGF;EDJE,QCME;EDLF;EACA;EACA;EACA;EACA;EACA,KCEE;EDDF;EACA;EACA;EACA,aCCE;EDAF,aCEE;EDDF,SCEE;EAMF;EACA;;ADPA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA,SCJF;EDKE,OCNF;EDOE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE,QCpCA;EDqCA,WClCA;EDmCA,aCjCA;EDkCA,SC/BA;;AC/BF;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"}
|
|
@@ -2,13 +2,20 @@
|
|
|
2
2
|
* Should be applied to the first element in the component's template.
|
|
3
3
|
*/
|
|
4
4
|
:root {
|
|
5
|
+
--ard-number-input-height: var(--ard-form-field-height, 2.3125rem);
|
|
6
|
+
--ard-number-input-height-compact: var(--ard-form-field-height-compact, 1.6875rem);
|
|
7
|
+
--ard-number-input-gap: 0.625rem;
|
|
8
|
+
--ard-number-input-font-size: var(--ard-form-field-font-size, 1rem);
|
|
9
|
+
--ard-number-input-font-size-compact: var(--ard-form-field-font-size-compact, 0.875rem);
|
|
10
|
+
--ard-number-input-line-height: 1.25;
|
|
11
|
+
--ard-number-input-line-height-compact: 1;
|
|
12
|
+
--ard-number-input-font-weight: 400;
|
|
13
|
+
--ard-number-input-padding: var(--ard-form-field-padding, 0 0.375rem);
|
|
14
|
+
--ard-number-input-padding-compact: var(--ard-form-field-padding-compact, 0 0.375rem);
|
|
15
|
+
--ard-number-input-color: var(--ard-text);
|
|
16
|
+
--ard-number-input-placeholder-color: var(--ard-text);
|
|
17
|
+
--ard-number-input-placeholder-opacity: 60%;
|
|
5
18
|
--ard-number-input-width: 9.5rem;
|
|
6
|
-
--ard-number-input-height: var(--ard-form-field-height);
|
|
7
|
-
--ard-number-input-height-compact: var(--ard-form-field-height-compact);
|
|
8
|
-
--ard-number-input-font-size: var(--ard-form-field-font-size);
|
|
9
|
-
--ard-number-input-font-size-compact: var(--ard-form-field-font-size-compact);
|
|
10
|
-
--ard-number-input-padding: var(--ard-form-field-padding);
|
|
11
|
-
--ard-number-input-padding-compact: var(--ard-form-field-padding-compact);
|
|
12
19
|
--ard-number-input-rounded-border-radius: 8px;
|
|
13
20
|
}
|
|
14
21
|
|
|
@@ -17,21 +24,22 @@ ard-number-input {
|
|
|
17
24
|
}
|
|
18
25
|
|
|
19
26
|
.ard-number-input {
|
|
27
|
+
height: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
|
|
20
28
|
position: relative;
|
|
21
29
|
font-family: var(--ard-font-family);
|
|
22
30
|
display: flex;
|
|
23
31
|
align-items: center;
|
|
24
32
|
justify-content: stretch;
|
|
25
|
-
gap: 0.
|
|
33
|
+
gap: var(--ard-number-input-gap, 0.625rem);
|
|
26
34
|
cursor: text;
|
|
27
35
|
box-sizing: border-box;
|
|
28
|
-
font-size: 1rem;
|
|
29
|
-
line-height: 1.
|
|
36
|
+
font-size: var(--ard-number-input-font-size, var(--ard-form-field-font-size, 1rem));
|
|
37
|
+
line-height: var(--ard-number-input-line-height, 1.25);
|
|
38
|
+
font-weight: var(--ard-number-input-font-weight, 400);
|
|
39
|
+
padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem));
|
|
30
40
|
min-height: var(--ard-form-field-height, var(--ard-number-input-height, 2.3125rem));
|
|
31
|
-
height: var(--ard-form-field-height, var(--ard-number-input-height, 2.3125rem));
|
|
32
41
|
gap: 0;
|
|
33
42
|
width: 100%;
|
|
34
|
-
font-size: var(--ard-number-input-font-size, var(--ard-form-field-font-size, 1rem));
|
|
35
43
|
}
|
|
36
44
|
.ard-number-input .ard-input-container {
|
|
37
45
|
flex-grow: 1;
|
|
@@ -41,7 +49,8 @@ ard-number-input {
|
|
|
41
49
|
}
|
|
42
50
|
.ard-number-input .ard-input-container .ard-placeholder {
|
|
43
51
|
font: inherit;
|
|
44
|
-
opacity: 60
|
|
52
|
+
opacity: var(--ard-number-input-placeholder-opacity, 60%);
|
|
53
|
+
color: var(--ard-number-input-placeholder-color, var(--ard-text));
|
|
45
54
|
white-space: nowrap;
|
|
46
55
|
overflow: hidden;
|
|
47
56
|
text-overflow: ellipsis;
|
|
@@ -58,9 +67,10 @@ ard-number-input {
|
|
|
58
67
|
width: 100%;
|
|
59
68
|
}
|
|
60
69
|
.ard-number-input.ard-compact {
|
|
61
|
-
height: 1.
|
|
62
|
-
font-size: 0.
|
|
63
|
-
line-height: 1;
|
|
70
|
+
height: var(--ard-number-input-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
|
|
71
|
+
font-size: var(--ard-number-input-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
|
|
72
|
+
line-height: var(--ard-number-input-line-height-compact, 1);
|
|
73
|
+
padding: var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
|
|
64
74
|
}
|
|
65
75
|
.ard-number-input.ard-appearance-outlined {
|
|
66
76
|
--ard-appearance-background: var(--ard-bg);
|
|
@@ -166,11 +176,6 @@ ard-number-input {
|
|
|
166
176
|
background: var(--ard-appearance-background);
|
|
167
177
|
border: var(--ard-appearance-border);
|
|
168
178
|
}
|
|
169
|
-
.ard-number-input.ard-compact {
|
|
170
|
-
min-height: var(--ard-form-field-height-compact, var(--ard-number-input-height-compact, 1.6875rem));
|
|
171
|
-
height: var(--ard-form-field-height-compact, var(--ard-number-input-height-compact, 1.6875rem));
|
|
172
|
-
font-size: var(--ard-number-input-font-size-compact, var(--ard-form-field-font-size-compact, 0.9375rem));
|
|
173
|
-
}
|
|
174
179
|
.ard-number-input.ard-compact .ard-input-container {
|
|
175
180
|
padding: var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
|
|
176
181
|
}
|
|
@@ -178,7 +183,7 @@ ard-number-input {
|
|
|
178
183
|
padding: var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
|
|
179
184
|
}
|
|
180
185
|
.ard-number-input.ard-compact .ard-quick-change-button {
|
|
181
|
-
min-width: var(--ard-
|
|
186
|
+
min-width: var(--ard-number-input-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
|
|
182
187
|
}
|
|
183
188
|
|
|
184
189
|
.ard-disabled > .ard-number-input {
|
|
@@ -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;ACEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;
|
|
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;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAGF;EACE;;;AAGF;EDPE,QCSE;EDRF;EACA;EACA;EACA;EACA;EACA,KCKE;EDJF;EACA;EACA,WCGE;EDFF,aCIE;EDHF,aCKE;EDJF,SCKE;EAOF;EACA;EACA;;ADZA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA,SCDF;EDEE,OCHF;EDIE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE,QCjCA;EDkCA,WC/BA;EDgCA,aC9BA;ED+BA,SC5BA;;ACIF;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;;ADvBF;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,YElKG;;AF8JH;EACE","file":"number-input.css"}
|
|
@@ -1,20 +1,54 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Should be applied to the first element in the component's template.
|
|
3
3
|
*/
|
|
4
|
+
:root {
|
|
5
|
+
--ard-password-input-height: var(--ard-form-field-height, 2.3125rem);
|
|
6
|
+
--ard-password-input-height-compact: var(--ard-form-field-height-compact, 1.6875rem);
|
|
7
|
+
--ard-password-input-gap: 0.625rem;
|
|
8
|
+
--ard-password-input-font-size: var(--ard-form-field-font-size, 1rem);
|
|
9
|
+
--ard-password-input-font-size-compact: var(--ard-form-field-font-size-compact, 0.875rem);
|
|
10
|
+
--ard-password-input-line-height: 1.25;
|
|
11
|
+
--ard-password-input-line-height-compact: 1;
|
|
12
|
+
--ard-password-input-font-weight: 400;
|
|
13
|
+
--ard-password-input-padding: var(--ard-form-field-padding, 0 0.375rem);
|
|
14
|
+
--ard-password-input-padding-compact: var(--ard-form-field-padding-compact, 0 0.375rem);
|
|
15
|
+
--ard-password-input-color: var(--ard-text);
|
|
16
|
+
--ard-password-input-placeholder-color: var(--ard-text);
|
|
17
|
+
--ard-password-input-placeholder-opacity: 60%;
|
|
18
|
+
--ard-password-input-min-width: 10rem;
|
|
19
|
+
--ard-password-input-max-width: 100%;
|
|
20
|
+
--ard-password-input-disabled-opacity: 50%;
|
|
21
|
+
--ard-password-input-reveal-button-margin: 0.125rem;
|
|
22
|
+
--ard-password-input-reveal-button-font-size: 0.8rem;
|
|
23
|
+
--ard-password-input-reveal-button-height: calc(100% - 0.25rem);
|
|
24
|
+
--ard-password-input-reveal-button-width: unset;
|
|
25
|
+
--ard-password-input-reveal-button-aspect-ratio: 1;
|
|
26
|
+
--ard-password-input-reveal-button-padding: 0;
|
|
27
|
+
--ard-password-input-reveal-button-color: var(--ard-text);
|
|
28
|
+
--ard-password-input-reveal-button-border-radius: 9999px;
|
|
29
|
+
--ard-password-input-reveal-button-border: none;
|
|
30
|
+
--ard-password-input-reveal-button-background: transparent;
|
|
31
|
+
--ard-password-input-reveal-button-hover-background: rgba(0, 0, 0, 4%);
|
|
32
|
+
--ard-password-input-reveal-button-focus-background: rgba(0, 0, 0, 12%);
|
|
33
|
+
--ard-password-input-reveal-button-active-background: rgba(0, 0, 0, 20%);
|
|
34
|
+
}
|
|
35
|
+
|
|
4
36
|
.ard-password-input {
|
|
37
|
+
height: var(--ard-password-input-height, var(--ard-form-field-height, 2.3125rem));
|
|
5
38
|
position: relative;
|
|
6
39
|
font-family: var(--ard-font-family);
|
|
7
40
|
display: flex;
|
|
8
41
|
align-items: center;
|
|
9
42
|
justify-content: stretch;
|
|
10
|
-
gap: 0.
|
|
43
|
+
gap: var(--ard-password-input-gap, 0.625rem);
|
|
11
44
|
cursor: text;
|
|
12
45
|
box-sizing: border-box;
|
|
13
|
-
font-size: 1rem;
|
|
14
|
-
line-height: 1.
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
46
|
+
font-size: var(--ard-password-input-font-size, var(--ard-form-field-font-size, 1rem));
|
|
47
|
+
line-height: var(--ard-password-input-line-height, 1.25);
|
|
48
|
+
font-weight: var(--ard-password-input-font-weight, 400);
|
|
49
|
+
padding: var(--ard-password-input-padding, var(--ard-form-field-padding, 0 0.375rem));
|
|
50
|
+
min-width: var(--ard-password-input-min-width, 10rem);
|
|
51
|
+
max-width: var(--ard-password-input-max-width, 100%);
|
|
18
52
|
}
|
|
19
53
|
.ard-password-input .ard-input-container {
|
|
20
54
|
flex-grow: 1;
|
|
@@ -24,7 +58,8 @@
|
|
|
24
58
|
}
|
|
25
59
|
.ard-password-input .ard-input-container .ard-placeholder {
|
|
26
60
|
font: inherit;
|
|
27
|
-
opacity: 60
|
|
61
|
+
opacity: var(--ard-password-input-placeholder-opacity, 60%);
|
|
62
|
+
color: var(--ard-password-input-placeholder-color, var(--ard-text));
|
|
28
63
|
white-space: nowrap;
|
|
29
64
|
overflow: hidden;
|
|
30
65
|
text-overflow: ellipsis;
|
|
@@ -41,9 +76,10 @@
|
|
|
41
76
|
width: 100%;
|
|
42
77
|
}
|
|
43
78
|
.ard-password-input.ard-compact {
|
|
44
|
-
height: 1.
|
|
45
|
-
font-size: 0.
|
|
46
|
-
line-height: 1;
|
|
79
|
+
height: var(--ard-password-input-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
|
|
80
|
+
font-size: var(--ard-password-input-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
|
|
81
|
+
line-height: var(--ard-password-input-line-height-compact, 1);
|
|
82
|
+
padding: var(--ard-password-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
|
|
47
83
|
}
|
|
48
84
|
.ard-password-input.ard-revealable {
|
|
49
85
|
padding-right: 0;
|
|
@@ -52,26 +88,33 @@
|
|
|
52
88
|
display: flex;
|
|
53
89
|
align-items: center;
|
|
54
90
|
justify-content: center;
|
|
55
|
-
padding: 0;
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
91
|
+
padding: var(--ard-password-input-reveal-button-padding, 0);
|
|
92
|
+
color: var(--ard-password-input-reveal-button-color, var(--ard-text));
|
|
93
|
+
margin: var(--ard-password-input-reveal-button-margin, 0.125rem);
|
|
94
|
+
height: var(--ard-password-input-reveal-button-height, calc(100% - 0.25rem));
|
|
95
|
+
width: var(--ard-password-input-reveal-button-width, unset);
|
|
96
|
+
aspect-ratio: var(--ard-password-input-reveal-button-aspect-ratio, 1);
|
|
97
|
+
font-size: var(--ard-password-input-reveal-button-font-size, 0.8rem);
|
|
98
|
+
border-radius: var(--ard-password-input-reveal-button-border-radius, 9999px);
|
|
99
|
+
border: var(--ard-password-input-reveal-button-border, none);
|
|
100
|
+
background: var(--ard-password-input-reveal-button-background, transparent);
|
|
63
101
|
outline: none;
|
|
64
102
|
cursor: pointer;
|
|
65
103
|
transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
66
104
|
}
|
|
67
105
|
.ard-password-input .ard-reveal-button:hover {
|
|
68
|
-
background: rgba(0, 0, 0, 0.04);
|
|
106
|
+
background: var(--ard-password-input-reveal-button-hover-background, rgba(0, 0, 0, 0.04));
|
|
69
107
|
}
|
|
70
108
|
.ard-password-input .ard-reveal-button:focus {
|
|
71
|
-
background: rgba(0, 0, 0, 0.12);
|
|
109
|
+
background: var(--ard-password-input-reveal-button-focus-background, rgba(0, 0, 0, 0.12));
|
|
72
110
|
}
|
|
73
111
|
.ard-password-input .ard-reveal-button:active {
|
|
74
|
-
background: rgba(0, 0, 0, 0.2);
|
|
112
|
+
background: var(--ard-password-input-reveal-button-active-background, rgba(0, 0, 0, 0.2));
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.ard-disabled .ard-password-input {
|
|
116
|
+
pointer-events: none;
|
|
117
|
+
opacity: var(--ard-password-input-disabled-opacity, 50%);
|
|
75
118
|
}
|
|
76
119
|
|
|
77
120
|
/*# sourceMappingURL=password-input.css.map */
|
|
@@ -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;ACGA;
|
|
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;ACGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EDlBE,QCoBE;EDnBF;EACA;EACA;EACA;EACA;EACA,KCgBE;EDfF;EACA;EACA,WCcE;EDbF,aCeE;EDdF,aCgBE;EDfF,SCgBE;EAMF;EACA;;ADrBA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA,SCUF;EDTE,OCQF;EDPE;EACA;EACA;EACA;EACA;;AAGF;EACE;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,20 +1,41 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Should be applied to the first element in the component's template.
|
|
3
3
|
*/
|
|
4
|
+
:root {
|
|
5
|
+
--ard-search-bar-height: var(--ard-form-field-height, 2.3125rem);
|
|
6
|
+
--ard-search-bar-height-compact: var(--ard-form-field-height-compact, 1.6875rem);
|
|
7
|
+
--ard-search-bar-gap: 0.625rem;
|
|
8
|
+
--ard-search-bar-font-size: var(--ard-form-field-font-size, 1rem);
|
|
9
|
+
--ard-search-bar-font-size-compact: var(--ard-form-field-font-size-compact, 0.875rem);
|
|
10
|
+
--ard-search-bar-line-height: 1.25;
|
|
11
|
+
--ard-search-bar-line-height-compact: 1;
|
|
12
|
+
--ard-search-bar-font-weight: 400;
|
|
13
|
+
--ard-search-bar-padding: var(--ard-form-field-padding, 0 0.375rem);
|
|
14
|
+
--ard-search-bar-padding-compact: var(--ard-form-field-padding-compact, 0 0.375rem);
|
|
15
|
+
--ard-search-bar-color: var(--ard-text);
|
|
16
|
+
--ard-search-bar-placeholder-color: var(--ard-text);
|
|
17
|
+
--ard-search-bar-placeholder-opacity: 60%;
|
|
18
|
+
--ard-search-bar-min-width: 10rem;
|
|
19
|
+
--ard-search-bar-max-width: 100%;
|
|
20
|
+
--ard-search-bar-disabled-opacity: 50%;
|
|
21
|
+
}
|
|
22
|
+
|
|
4
23
|
.ard-search-bar {
|
|
24
|
+
height: var(--ard-search-bar-height, var(--ard-form-field-height, 2.3125rem));
|
|
5
25
|
position: relative;
|
|
6
26
|
font-family: var(--ard-font-family);
|
|
7
27
|
display: flex;
|
|
8
28
|
align-items: center;
|
|
9
29
|
justify-content: stretch;
|
|
10
|
-
gap: 0.
|
|
30
|
+
gap: var(--ard-search-bar-gap, 0.625rem);
|
|
11
31
|
cursor: text;
|
|
12
32
|
box-sizing: border-box;
|
|
13
|
-
font-size: 1rem;
|
|
14
|
-
line-height: 1.
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
33
|
+
font-size: var(--ard-search-bar-font-size, var(--ard-form-field-font-size, 1rem));
|
|
34
|
+
line-height: var(--ard-search-bar-line-height, 1.25);
|
|
35
|
+
font-weight: var(--ard-search-bar-font-weight, 400);
|
|
36
|
+
padding: var(--ard-search-bar-padding, var(--ard-form-field-padding, 0 0.375rem));
|
|
37
|
+
min-width: var(--ard-search-bar-min-width, 10rem);
|
|
38
|
+
max-width: var(--ard-search-bar-max-width, 100%);
|
|
18
39
|
}
|
|
19
40
|
.ard-search-bar .ard-input-container {
|
|
20
41
|
flex-grow: 1;
|
|
@@ -24,7 +45,8 @@
|
|
|
24
45
|
}
|
|
25
46
|
.ard-search-bar .ard-input-container .ard-placeholder {
|
|
26
47
|
font: inherit;
|
|
27
|
-
opacity: 60
|
|
48
|
+
opacity: var(--ard-search-bar-placeholder-opacity, 60%);
|
|
49
|
+
color: var(--ard-search-bar-placeholder-color, var(--ard-text));
|
|
28
50
|
white-space: nowrap;
|
|
29
51
|
overflow: hidden;
|
|
30
52
|
text-overflow: ellipsis;
|
|
@@ -41,9 +63,10 @@
|
|
|
41
63
|
width: 100%;
|
|
42
64
|
}
|
|
43
65
|
.ard-search-bar.ard-compact {
|
|
44
|
-
height: 1.
|
|
45
|
-
font-size: 0.
|
|
46
|
-
line-height: 1;
|
|
66
|
+
height: var(--ard-search-bar-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
|
|
67
|
+
font-size: var(--ard-search-bar-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
|
|
68
|
+
line-height: var(--ard-search-bar-line-height-compact, 1);
|
|
69
|
+
padding: var(--ard-search-bar-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
|
|
47
70
|
}
|
|
48
71
|
.ard-search-bar ard-clear-button {
|
|
49
72
|
height: var(--ard-clear-button-size);
|
|
@@ -77,10 +100,10 @@
|
|
|
77
100
|
}
|
|
78
101
|
.ard-search-bar .ard-clear-btn-wrapper .ard-focus-overlay {
|
|
79
102
|
position: absolute;
|
|
80
|
-
top: -1px;
|
|
81
|
-
bottom: -1px;
|
|
82
|
-
left: -1px;
|
|
83
|
-
right: -1px;
|
|
103
|
+
top: calc(-1 * 1px);
|
|
104
|
+
bottom: calc(-1 * 1px);
|
|
105
|
+
left: calc(-1 * 1px);
|
|
106
|
+
right: calc(-1 * 1px);
|
|
84
107
|
opacity: 0;
|
|
85
108
|
border-radius: inherit;
|
|
86
109
|
pointer-events: none;
|
|
@@ -112,7 +135,7 @@
|
|
|
112
135
|
|
|
113
136
|
.ard-disabled .ard-search-bar {
|
|
114
137
|
pointer-events: none;
|
|
115
|
-
opacity: 50
|
|
138
|
+
opacity: var(--ard-search-bar-disabled-opacity, 50%);
|
|
116
139
|
}
|
|
117
140
|
|
|
118
141
|
/*# sourceMappingURL=search-bar.css.map */
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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;ACGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EDLE,QCOE;EDNF;EACA;EACA;EACA;EACA;EACA,KCGE;EDFF;EACA;EACA,WCCE;EDAF,aCEE;EDDF,aCGE;EDFF,SCGE;EAMF;EACA;;ADRA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA,SCHF;EDIE,OCLF;EDME;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE,QCnCA;EDoCA,WCjCA;EDkCA,aChCA;EDiCA,SC9BA;;AChCF;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;;;ADpBN;EACE;EACA","file":"search-bar.css"}
|
|
@@ -180,10 +180,10 @@ ard-radio {
|
|
|
180
180
|
}
|
|
181
181
|
.ard-radio > .ard-radio-circles > .ard-focus-overlay {
|
|
182
182
|
position: absolute;
|
|
183
|
-
top: -0.375em;
|
|
184
|
-
bottom: -0.375em;
|
|
185
|
-
left: -0.375em;
|
|
186
|
-
right: -0.375em;
|
|
183
|
+
top: calc(-1 * 0.375em);
|
|
184
|
+
bottom: calc(-1 * 0.375em);
|
|
185
|
+
left: calc(-1 * 0.375em);
|
|
186
|
+
right: calc(-1 * 0.375em);
|
|
187
187
|
opacity: 0;
|
|
188
188
|
border-radius: inherit;
|
|
189
189
|
pointer-events: none;
|
|
@@ -204,10 +204,10 @@
|
|
|
204
204
|
}
|
|
205
205
|
.ard-segment-container .ard-focus-overlay {
|
|
206
206
|
position: absolute;
|
|
207
|
-
top: -0;
|
|
208
|
-
bottom: -0;
|
|
209
|
-
left: -0;
|
|
210
|
-
right: -0;
|
|
207
|
+
top: calc(-1 * 0);
|
|
208
|
+
bottom: calc(-1 * 0);
|
|
209
|
+
left: calc(-1 * 0);
|
|
210
|
+
right: calc(-1 * 0);
|
|
211
211
|
opacity: 0;
|
|
212
212
|
border-radius: inherit;
|
|
213
213
|
pointer-events: none;
|
|
@@ -85,10 +85,10 @@
|
|
|
85
85
|
}
|
|
86
86
|
.ard-select .ard-clear-btn-wrapper .ard-focus-overlay {
|
|
87
87
|
position: absolute;
|
|
88
|
-
top: -1px;
|
|
89
|
-
bottom: -1px;
|
|
90
|
-
left: -1px;
|
|
91
|
-
right: -1px;
|
|
88
|
+
top: calc(-1 * 1px);
|
|
89
|
+
bottom: calc(-1 * 1px);
|
|
90
|
+
left: calc(-1 * 1px);
|
|
91
|
+
right: calc(-1 * 1px);
|
|
92
92
|
opacity: 0;
|
|
93
93
|
border-radius: inherit;
|
|
94
94
|
pointer-events: none;
|
|
@@ -181,10 +181,10 @@
|
|
|
181
181
|
}
|
|
182
182
|
.ard-slide-toggle .ard-slide-toggle-handle .ard-focus-overlay {
|
|
183
183
|
position: absolute;
|
|
184
|
-
top: -0;
|
|
185
|
-
bottom: -0;
|
|
186
|
-
left: -0;
|
|
187
|
-
right: -0;
|
|
184
|
+
top: calc(-1 * 0);
|
|
185
|
+
bottom: calc(-1 * 0);
|
|
186
|
+
left: calc(-1 * 0);
|
|
187
|
+
right: calc(-1 * 0);
|
|
188
188
|
opacity: 0;
|
|
189
189
|
border-radius: inherit;
|
|
190
190
|
pointer-events: none;
|
|
@@ -269,10 +269,10 @@
|
|
|
269
269
|
.ard-slider-container-master .ard-slider-handle .ard-focus-overlay,
|
|
270
270
|
.ard-range-slider-container-master .ard-slider-handle .ard-focus-overlay {
|
|
271
271
|
position: absolute;
|
|
272
|
-
top: -var(--ard-slider-handle-overlay-size, 0.5em);
|
|
273
|
-
bottom: -var(--ard-slider-handle-overlay-size, 0.5em);
|
|
274
|
-
left: -var(--ard-slider-handle-overlay-size, 0.5em);
|
|
275
|
-
right: -var(--ard-slider-handle-overlay-size, 0.5em);
|
|
272
|
+
top: calc(-1 * var(--ard-slider-handle-overlay-size, 0.5em));
|
|
273
|
+
bottom: calc(-1 * var(--ard-slider-handle-overlay-size, 0.5em));
|
|
274
|
+
left: calc(-1 * var(--ard-slider-handle-overlay-size, 0.5em));
|
|
275
|
+
right: calc(-1 * var(--ard-slider-handle-overlay-size, 0.5em));
|
|
276
276
|
opacity: 0;
|
|
277
277
|
border-radius: inherit;
|
|
278
278
|
pointer-events: none;
|