benivo-ui-library 1.9.65 → 1.9.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.
@@ -14,6 +14,12 @@
14
14
  border-color 150ms ease,
15
15
  box-shadow 150ms ease;
16
16
 
17
+ .currency-input-status-icon.error {
18
+ &:before {
19
+ color: var(--error-main);
20
+ font-size: 14px;
21
+ }
22
+ }
17
23
  &:hover:not(.disabled) {
18
24
  border-color: var(--border-300, var(--border-200));
19
25
  }
@@ -75,6 +81,17 @@
75
81
  &::placeholder {
76
82
  color: var(--text-300);
77
83
  }
84
+ // Hide number input spinner arrows
85
+ &::-webkit-outer-spin-button,
86
+ &::-webkit-inner-spin-button {
87
+ -webkit-appearance: none;
88
+ margin: 0;
89
+ }
90
+
91
+ &[type='number'] {
92
+ -moz-appearance: textfield;
93
+ appearance: textfield;
94
+ }
78
95
  }
79
96
 
80
97
  .currency-input-status-icon {
@@ -134,39 +151,6 @@
134
151
  }
135
152
  }
136
153
 
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
154
  .currency-input-hint {
171
155
  display: block;
172
156
  margin-top: 0.25rem;
@@ -175,3 +159,44 @@
175
159
  color: var(--text-300);
176
160
  }
177
161
  }
162
+
163
+ // Menu is rendered through a portal into document.body, so its styles must live
164
+ // at the top level rather than nested under .currency-input.
165
+ .currency-input-menu {
166
+ position: absolute;
167
+ top: ~'calc(100% + 6px)';
168
+ right: 0;
169
+ min-width: 100%;
170
+ margin: 0;
171
+ padding: 0.25rem 0;
172
+ list-style: none;
173
+ z-index: @zindex-dropdown;
174
+ background: var(--white);
175
+ border: 1px solid var(--border-200);
176
+ .border-radius(@form-border-radius);
177
+ .box-shadow(0 4px 12px 0 rgba(16, 24, 40, 0.12));
178
+ max-height: 240px;
179
+ overflow-y: auto;
180
+
181
+ &.currency-input-menu--portal {
182
+ position: fixed;
183
+ top: auto;
184
+ z-index: @zindex-modal;
185
+ }
186
+ }
187
+
188
+ .currency-input-option {
189
+ padding: 0.5rem 0.75rem;
190
+ font-size: @font-size-sm;
191
+ cursor: pointer;
192
+ white-space: nowrap;
193
+
194
+ &:hover {
195
+ background: var(--bg-50);
196
+ }
197
+
198
+ &.selected {
199
+ font-weight: @font-weight-semibold;
200
+ background: var(--bg-50);
201
+ }
202
+ }