benivo-ui-library 1.9.62 → 1.9.64

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 (10) hide show
  1. package/autoComplete.less +22 -0
  2. package/benivo-ui-lib.less +5 -3
  3. package/checkbox.less +6 -2
  4. package/countryFlag.less +5 -0
  5. package/currencyInput.less +177 -0
  6. package/index.js +1 -1
  7. package/index.js.LICENSE.txt +1 -1
  8. package/package.json +8 -5
  9. package/phoneNumber.less +171 -0
  10. package/select.less +6 -0
package/autoComplete.less CHANGED
@@ -41,6 +41,10 @@
41
41
  vertical-align: -2px;
42
42
  }
43
43
 
44
+ &.with-country-flag:before {
45
+ content: none;
46
+ }
47
+
44
48
  &:last-child {
45
49
  border-bottom: solid 1px var(--border-200);
46
50
  .border-radius(0 0 @form-border-radius @form-border-radius);
@@ -72,10 +76,20 @@
72
76
  vertical-align: -2px;
73
77
  }
74
78
 
79
+ &.with-country-flag:before {
80
+ content: none;
81
+ }
82
+
75
83
  &.loading:before {
76
84
  content: none;
77
85
  }
78
86
 
87
+ .suggestion-item-content {
88
+ display: inline-flex;
89
+ align-items: center;
90
+ gap: 6px;
91
+ }
92
+
79
93
  &:last-child {
80
94
  border-bottom: solid 1px var(--border-200);
81
95
  .border-radius(0 0 @form-border-radius @form-border-radius);
@@ -85,6 +99,14 @@
85
99
  .border-radius(@form-border-radius @form-border-radius 0 0);
86
100
  }
87
101
  }
102
+
103
+ .suggestion-item--active {
104
+ .suggestion-item-content {
105
+ display: inline-flex;
106
+ align-items: center;
107
+ gap: 6px;
108
+ }
109
+ }
88
110
  }
89
111
  }
90
112
 
package/benivo-ui-lib.less CHANGED
@@ -1,5 +1,5 @@
1
- @import "../components/input/input.less";
2
- @import "../components/tooltip/tooltip.less";
1
+ @import '../components/input/input.less';
2
+ @import '../components/tooltip/tooltip.less';
3
3
  @import '../components/button/button.less';
4
4
  @import '../components/spinner/spinner.less';
5
5
  @import '../components/fantasyButton/fantasyButton.less';
@@ -11,7 +11,9 @@
11
11
  @import '../components/swiperSlider/swiper/swiper.less';
12
12
  @import '../components/select/TagsSelect/tagsSelect.less';
13
13
  @import '../components/copyInput/copyInput.less';
14
+ @import '../components/currencyInput/currencyInput.less';
15
+ @import '../components/phoneNumber/phoneNumber.less';
14
16
  @import './forms.less';
15
17
  @import './spacing.less';
16
18
  @import './typography.less';
17
- @import './typography-helper.less';
19
+ @import './typography-helper.less';
package/checkbox.less CHANGED
@@ -14,7 +14,7 @@
14
14
  padding-left: 1.5rem;
15
15
 
16
16
  .checkbox-box {
17
- top: 0.25rem;
17
+ top: 0.125rem;
18
18
  width: 1rem;
19
19
  height: 1rem;
20
20
  min-width: 16px;
@@ -218,7 +218,7 @@
218
218
  .checkbox-box {
219
219
  position: absolute;
220
220
  left: 0;
221
- top: 0.25rem;
221
+ top: 0.125rem;
222
222
  height: 1.25rem;
223
223
  width: 1.25rem;
224
224
  min-width: 20px;
@@ -234,6 +234,10 @@
234
234
  outline: none;
235
235
  box-shadow: 0 0 0 4px rgba(152, 162, 179, 0.14);
236
236
  }
237
+
238
+ &+.form-check-label {
239
+ line-height: 1.4;
240
+ }
237
241
  }
238
242
 
239
243
  label[data-focus-click]:focus-visible:before {
package/countryFlag.less CHANGED
@@ -9,6 +9,9 @@
9
9
  background-repeat: no-repeat;
10
10
  display: inline-block;
11
11
  vertical-align: bottom;
12
+ width: 32px;
13
+ height: 32px;
14
+ flex-shrink: 0;
12
15
  }
13
16
 
14
17
  .country-flag-icon-32-_ASEAN {
@@ -991,6 +994,7 @@
991
994
  vertical-align: text-top;
992
995
  width: 24px;
993
996
  height: 20px;
997
+ flex-shrink: 0;
994
998
  }
995
999
 
996
1000
  .country-flag-icon-24-_ASEAN {
@@ -1975,6 +1979,7 @@
1975
1979
  vertical-align: bottom;
1976
1980
  width: 16px;
1977
1981
  height: 16px;
1982
+ flex-shrink: 0;
1978
1983
  }
1979
1984
 
1980
1985
  .country-flag-icon-16-_ASEAN {
package/currencyInput.less ADDED
@@ -0,0 +1,177 @@
1
+ .currency-input {
2
+ .currency-input-control {
3
+ position: relative;
4
+ display: flex;
5
+ align-items: center;
6
+ width: 100%;
7
+ height: 40px;
8
+ box-sizing: border-box;
9
+ background-color: var(--white);
10
+ border: 1px solid var(--border-200);
11
+ .border-radius(@form-border-radius);
12
+ .box-shadow(@form-box-shadow);
13
+ transition:
14
+ border-color 150ms ease,
15
+ box-shadow 150ms ease;
16
+
17
+ &:hover:not(.disabled) {
18
+ border-color: var(--border-300, var(--border-200));
19
+ }
20
+
21
+ &:focus-within:not(.disabled) {
22
+ border-color: var(--primary-main, #2970ff);
23
+ box-shadow: @form-focus-box-shadow;
24
+ }
25
+
26
+ &.disabled {
27
+ pointer-events: none;
28
+ background-color: var(--bg-50);
29
+
30
+ .currency-input-symbol,
31
+ .currency-input-field,
32
+ .currency-input-select-value {
33
+ color: var(--text-300);
34
+ }
35
+ }
36
+
37
+ &.field-invalid {
38
+ border-color: var(--error-main) !important;
39
+
40
+ &:focus-within {
41
+ box-shadow: @form-focus-error-box-shadow;
42
+ }
43
+ }
44
+ }
45
+
46
+ .currency-input-symbol {
47
+ flex-shrink: 0;
48
+ padding-left: 0.75rem;
49
+ font-size: @form-font-size;
50
+ font-weight: @font-weight-semibold;
51
+ color: var(--grey-600);
52
+ pointer-events: none;
53
+ }
54
+
55
+ .currency-input-field {
56
+ flex: 1 1 auto;
57
+ min-width: 0;
58
+ height: 100%;
59
+ padding: 0 0.5rem;
60
+ border: none;
61
+ outline: none;
62
+ background: transparent;
63
+ color: inherit;
64
+ font-family: @form-font-family;
65
+ font-size: @form-font-size;
66
+ font-weight: @form-font-weight;
67
+ box-shadow: none;
68
+
69
+ &:focus,
70
+ &:focus-visible {
71
+ outline: none;
72
+ box-shadow: none;
73
+ }
74
+
75
+ &::placeholder {
76
+ color: var(--text-300);
77
+ }
78
+ }
79
+
80
+ .currency-input-status-icon {
81
+ flex-shrink: 0;
82
+ margin-right: 0.5rem;
83
+ display: inline-flex;
84
+ align-items: center;
85
+ font-size: 18px;
86
+ line-height: 1;
87
+
88
+ &.error {
89
+ color: var(--error-main);
90
+ }
91
+ }
92
+
93
+ .field-tooltip-icon {
94
+ margin-right: 0.5rem;
95
+ }
96
+
97
+ .currency-input-select {
98
+ position: relative;
99
+ flex-shrink: 0;
100
+ height: 100%;
101
+ display: flex;
102
+ align-items: stretch;
103
+ }
104
+
105
+ .currency-input-select-toggle {
106
+ display: inline-flex;
107
+ align-items: center;
108
+ gap: 0.375rem;
109
+ height: 100%;
110
+ padding: 0 0.75rem;
111
+ border: none;
112
+ background: transparent;
113
+ cursor: pointer;
114
+ font-family: @form-font-family;
115
+ font-size: @form-font-size;
116
+ font-weight: @font-weight-medium;
117
+ color: inherit;
118
+
119
+ &:disabled {
120
+ cursor: default;
121
+ }
122
+ }
123
+
124
+ .currency-input-caret {
125
+ width: 0;
126
+ height: 0;
127
+ border-left: 4px solid transparent;
128
+ border-right: 4px solid transparent;
129
+ border-top: 5px solid var(--text-300);
130
+ transition: transform 150ms ease;
131
+
132
+ .open & {
133
+ transform: rotate(180deg);
134
+ }
135
+ }
136
+
137
+ .currency-input-menu {
138
+ position: absolute;
139
+ top: ~'calc(100% + 6px)';
140
+ right: 0;
141
+ min-width: 100%;
142
+ margin: 0;
143
+ padding: 0.25rem 0;
144
+ list-style: none;
145
+ z-index: @zindex-dropdown;
146
+ background: var(--white);
147
+ border: 1px solid var(--border-200);
148
+ .border-radius(@form-border-radius);
149
+ .box-shadow(0 4px 12px 0 rgba(16, 24, 40, 0.12));
150
+ max-height: 240px;
151
+ overflow-y: auto;
152
+ }
153
+
154
+ .currency-input-option {
155
+ padding: 0.5rem 0.75rem;
156
+ font-size: @font-size-sm;
157
+ cursor: pointer;
158
+ white-space: nowrap;
159
+
160
+ &:hover {
161
+ background: var(--bg-50);
162
+ }
163
+
164
+ &.selected {
165
+ font-weight: @font-weight-semibold;
166
+ background: var(--bg-50);
167
+ }
168
+ }
169
+
170
+ .currency-input-hint {
171
+ display: block;
172
+ margin-top: 0.25rem;
173
+ font-size: @font-size-xs;
174
+ line-height: 1.4;
175
+ color: var(--text-300);
176
+ }
177
+ }