@npm_leadtech/legal-lib-components 7.16.0 → 7.17.0
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/dist/css/styles.css
CHANGED
|
@@ -2070,6 +2070,9 @@ h2.react-datepicker__current-month {
|
|
|
2070
2070
|
color: var(--neutral-neutral-1);
|
|
2071
2071
|
font-weight: bold;
|
|
2072
2072
|
}
|
|
2073
|
+
.e-text .e-text__inner {
|
|
2074
|
+
grid-row: 1;
|
|
2075
|
+
}
|
|
2073
2076
|
.e-text .form-group__label-icon {
|
|
2074
2077
|
color: var(--neutral-neutral-1);
|
|
2075
2078
|
font-weight: bold;
|
|
@@ -2154,6 +2157,8 @@ h2.react-datepicker__current-month {
|
|
|
2154
2157
|
}
|
|
2155
2158
|
.e-text--has-prefix {
|
|
2156
2159
|
width: 100%;
|
|
2160
|
+
display: grid;
|
|
2161
|
+
grid-template-columns: 1fr;
|
|
2157
2162
|
}
|
|
2158
2163
|
@media (min-width: 575px) {
|
|
2159
2164
|
.e-text--has-prefix {
|
|
@@ -2162,12 +2167,21 @@ h2.react-datepicker__current-month {
|
|
|
2162
2167
|
}
|
|
2163
2168
|
.e-text--has-prefix .has-currency-prefix {
|
|
2164
2169
|
padding-left: 2rem;
|
|
2170
|
+
grid-column: 1;
|
|
2171
|
+
grid-row: 2;
|
|
2172
|
+
align-self: center;
|
|
2165
2173
|
}
|
|
2166
2174
|
.e-text--has-prefix .has-currency-suffix {
|
|
2167
2175
|
padding-right: 2rem;
|
|
2176
|
+
grid-column: 1;
|
|
2177
|
+
grid-row: 2;
|
|
2178
|
+
align-self: center;
|
|
2168
2179
|
}
|
|
2169
2180
|
.e-text--has-prefix .has-percent-suffix {
|
|
2170
2181
|
padding-left: 0.75rem;
|
|
2182
|
+
grid-column: 1;
|
|
2183
|
+
grid-row: 2;
|
|
2184
|
+
align-self: center;
|
|
2171
2185
|
}
|
|
2172
2186
|
.e-text .input-icon {
|
|
2173
2187
|
position: absolute;
|
|
@@ -2184,25 +2198,26 @@ h2.react-datepicker__current-month {
|
|
|
2184
2198
|
border: none;
|
|
2185
2199
|
}
|
|
2186
2200
|
.e-text .input-icon-currency-suffix {
|
|
2187
|
-
|
|
2188
|
-
|
|
2189
|
-
|
|
2190
|
-
|
|
2191
|
-
|
|
2201
|
+
grid-column: 1;
|
|
2202
|
+
grid-row: 2;
|
|
2203
|
+
align-self: center;
|
|
2204
|
+
margin-left: calc(100% - 30px);
|
|
2205
|
+
width: fit-content;
|
|
2192
2206
|
}
|
|
2193
2207
|
.e-text .input-icon-currency-prefix {
|
|
2194
|
-
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2208
|
+
grid-column: 1;
|
|
2209
|
+
grid-row: 2;
|
|
2210
|
+
align-self: center;
|
|
2211
|
+
z-index: 1;
|
|
2212
|
+
padding-left: 0.87rem;
|
|
2213
|
+
width: fit-content;
|
|
2199
2214
|
}
|
|
2200
2215
|
.e-text .input-icon-percent-suffix {
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2204
|
-
|
|
2205
|
-
|
|
2216
|
+
grid-column: 1;
|
|
2217
|
+
grid-row: 2;
|
|
2218
|
+
align-self: center;
|
|
2219
|
+
margin-left: calc(100% - 30px);
|
|
2220
|
+
width: fit-content;
|
|
2206
2221
|
}
|
|
2207
2222
|
.e-text .formgroup--input__button {
|
|
2208
2223
|
align-self: flex-start;
|
|
@@ -55,6 +55,10 @@
|
|
|
55
55
|
font-weight: bold;
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
+
.e-text__inner {
|
|
59
|
+
grid-row: 1;
|
|
60
|
+
}
|
|
61
|
+
|
|
58
62
|
.form-group__label-icon {
|
|
59
63
|
color: var(--neutral-neutral-1);
|
|
60
64
|
font-weight: bold;
|
|
@@ -150,6 +154,8 @@
|
|
|
150
154
|
|
|
151
155
|
&--has-prefix {
|
|
152
156
|
width: 100%;
|
|
157
|
+
display: grid;
|
|
158
|
+
grid-template-columns: 1fr;
|
|
153
159
|
|
|
154
160
|
@include portrait-tablets {
|
|
155
161
|
width: 50%;
|
|
@@ -157,14 +163,23 @@
|
|
|
157
163
|
|
|
158
164
|
.has-currency-prefix {
|
|
159
165
|
padding-left: 2rem;
|
|
166
|
+
grid-column: 1;
|
|
167
|
+
grid-row: 2;
|
|
168
|
+
align-self: center;
|
|
160
169
|
}
|
|
161
170
|
|
|
162
171
|
.has-currency-suffix {
|
|
163
172
|
padding-right: 2rem;
|
|
173
|
+
grid-column: 1;
|
|
174
|
+
grid-row: 2;
|
|
175
|
+
align-self: center;
|
|
164
176
|
}
|
|
165
177
|
|
|
166
178
|
.has-percent-suffix {
|
|
167
179
|
padding-left: 0.75rem;
|
|
180
|
+
grid-column: 1;
|
|
181
|
+
grid-row: 2;
|
|
182
|
+
align-self: center;
|
|
168
183
|
}
|
|
169
184
|
}
|
|
170
185
|
|
|
@@ -185,27 +200,28 @@
|
|
|
185
200
|
}
|
|
186
201
|
|
|
187
202
|
.input-icon-currency-suffix {
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
203
|
+
grid-column: 1;
|
|
204
|
+
grid-row: 2;
|
|
205
|
+
align-self: center;
|
|
206
|
+
margin-left: calc(100% - 30px);
|
|
207
|
+
width: fit-content;
|
|
193
208
|
}
|
|
194
209
|
|
|
195
210
|
.input-icon-currency-prefix {
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
211
|
+
grid-column: 1;
|
|
212
|
+
grid-row: 2;
|
|
213
|
+
align-self: center;
|
|
214
|
+
z-index: 1;
|
|
215
|
+
padding-left: 0.87rem;
|
|
216
|
+
width: fit-content;
|
|
201
217
|
}
|
|
202
218
|
|
|
203
219
|
.input-icon-percent-suffix {
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
220
|
+
grid-column: 1;
|
|
221
|
+
grid-row: 2;
|
|
222
|
+
align-self: center;
|
|
223
|
+
margin-left: calc(100% - 30px);
|
|
224
|
+
width: fit-content;
|
|
209
225
|
}
|
|
210
226
|
|
|
211
227
|
.formgroup--input__button {
|
|
@@ -124,7 +124,7 @@ export const MaskInput: Story = {
|
|
|
124
124
|
}
|
|
125
125
|
}
|
|
126
126
|
|
|
127
|
-
export const
|
|
127
|
+
export const WithSufixEuro: Story = {
|
|
128
128
|
args: {
|
|
129
129
|
name: 'prefix',
|
|
130
130
|
label: 'Price:',
|
|
@@ -146,7 +146,7 @@ export const WithPrefixNoEuro: Story = {
|
|
|
146
146
|
}
|
|
147
147
|
}
|
|
148
148
|
|
|
149
|
-
export const
|
|
149
|
+
export const WithSufixPercent: Story = {
|
|
150
150
|
args: {
|
|
151
151
|
name: 'prefix',
|
|
152
152
|
label: 'Price:',
|
|
@@ -156,3 +156,14 @@ export const WithPrefixPercent: Story = {
|
|
|
156
156
|
country: 'US'
|
|
157
157
|
}
|
|
158
158
|
}
|
|
159
|
+
|
|
160
|
+
export const WithPrefixPercent: Story = {
|
|
161
|
+
args: {
|
|
162
|
+
name: 'prefix',
|
|
163
|
+
label: 'Price:',
|
|
164
|
+
value: '20.30',
|
|
165
|
+
type: 'text',
|
|
166
|
+
prefix: 'currency',
|
|
167
|
+
country: 'CA'
|
|
168
|
+
}
|
|
169
|
+
}
|