@terraware/web-components 1.0.56 → 1.0.57

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 (7) hide show
  1. package/components/Button/Button.js +2 -1
  2. package/components/Button/styles.scss +73 -144
  3. package/components/Icon/styles.scss +8 -9
  4. package/components/IconTooltip/index.js +3 -3
  5. package/components/Select/styles.scss +55 -57
  6. package/components/Textfield/styles.scss +53 -43
  7. package/package.json +1 -1
package/components/Button/Button.js CHANGED
@@ -47,7 +47,8 @@ function Button(props) {
47
47
  disabled: disabled
48
48
  }, processing && /*#__PURE__*/_react.default.createElement(_Icon.default, {
49
49
  name: "spinner",
50
- size: size
50
+ size: size,
51
+ className: "icon-spinner"
51
52
  }), !processing && icon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
52
53
  name: icon,
53
54
  size: size
package/components/Button/styles.scss CHANGED
@@ -20,11 +20,14 @@
20
20
  outline-offset: 2px;
21
21
  }
22
22
 
23
-
24
23
  &:disabled {
25
24
  opacity: $tw-opcty-semantic-off;
26
25
  }
27
26
 
27
+ .tw-icon {
28
+ vertical-align: top;
29
+ }
30
+
28
31
  &--small {
29
32
  height: $tw-sz-btn-small-height;
30
33
  font-size: $tw-fnt-btn-label-small-font-size;
@@ -36,18 +39,23 @@
36
39
  calc(#{$tw-sz-btn-small-height}/ 2);
37
40
  border-radius: calc(#{$tw-sz-btn-small-height} / 2);
38
41
 
42
+ .tw-icon--small {
43
+ height: $tw-fnt-btn-label-small-line-height;
44
+ width: $tw-fnt-btn-label-small-line-height;
45
+ margin-right: calc((#{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}) / 2);
46
+
47
+ &.icon-spinner {
48
+ margin-right: 0;
49
+ }
50
+ }
39
51
  &.button-with-icon {
40
52
  padding-left: calc(
41
53
  (#{$tw-sz-btn-small-height} / 2) - (((#{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}) / 2))
42
54
  );
43
-
44
- .tw-icon--small {
45
- margin-right: calc((#{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}) / 2);
46
- }
47
55
  }
48
56
  &.button-no-label.button-with-icon {
49
- padding-left: 6px;
50
- padding-right: 6px;
57
+ padding-left: calc((#{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}) / 2);
58
+ padding-right: calc((#{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}) / 2);
51
59
  .tw-icon--small {
52
60
  margin-right: 0;
53
61
  }
@@ -65,14 +73,20 @@
65
73
  calc(#{$tw-sz-btn-medium-height}/ 2);
66
74
  border-radius: calc(#{$tw-sz-btn-medium-height} / 2);
67
75
 
76
+ .tw-icon--medium {
77
+ height: $tw-fnt-btn-label-medium-line-height;
78
+ width: $tw-fnt-btn-label-medium-line-height;
79
+ margin-right: calc((#{$tw-sz-btn-medium-height} - #{$tw-fnt-btn-label-medium-line-height}) / 2);
80
+
81
+ &.icon-spinner {
82
+ margin-right: 0;
83
+ }
84
+ }
68
85
  &.button-with-icon {
69
86
  padding-left: calc(
70
87
  (#{$tw-sz-btn-medium-height} / 2) -
71
88
  (((#{$tw-sz-btn-medium-height} - #{$tw-fnt-btn-label-medium-line-height}) / 2))
72
89
  );
73
- .tw-icon--medium {
74
- margin-right: calc((#{$tw-sz-btn-medium-height} - #{$tw-fnt-btn-label-medium-line-height}) / 2);
75
- }
76
90
  }
77
91
  &.button-no-label.button-with-icon {
78
92
  padding-left: 8px;
@@ -94,13 +108,19 @@
94
108
  calc(#{$tw-sz-btn-large-height}/ 2);
95
109
  border-radius: calc(#{$tw-sz-btn-large-height} / 2);
96
110
 
111
+ .tw-icon--large {
112
+ height: $tw-fnt-btn-label-large-line-height;
113
+ width: $tw-fnt-btn-label-large-line-height;
114
+ margin-right: calc((#{$tw-sz-btn-large-height} - #{$tw-fnt-btn-label-large-line-height}) / 2);
115
+
116
+ &.icon-spinner {
117
+ margin-right: 0;
118
+ }
119
+ }
97
120
  &.button-with-icon {
98
121
  padding-left: calc(
99
122
  (#{$tw-sz-btn-large-height} / 2) - (((#{$tw-sz-btn-large-height} - #{$tw-fnt-btn-label-large-line-height}) / 2))
100
123
  );
101
- .tw-icon--large {
102
- margin-right: calc((#{$tw-sz-btn-large-height} - #{$tw-fnt-btn-label-large-line-height}) / 2);
103
- }
104
124
  }
105
125
  &.button-no-label.button-with-icon {
106
126
  padding-left: 10px;
@@ -122,16 +142,21 @@
122
142
  calc(#{$tw-sz-btn-x-large-height}/ 2);
123
143
  border-radius: calc(#{$tw-sz-btn-x-large-height} / 2);
124
144
 
145
+ .tw-icon--xlarge {
146
+ height: $tw-fnt-btn-label-x-large-line-height;
147
+ width: $tw-fnt-btn-label-x-large-line-height;
148
+ margin-right: calc((#{$tw-sz-btn-x-large-height} - #{$tw-fnt-btn-label-x-large-line-height}) / 2);
149
+
150
+ &.icon-spinner {
151
+ margin-right: 0;
152
+ }
153
+ }
125
154
  &.button-with-icon {
126
155
  padding-left: calc(
127
156
  (#{$tw-sz-btn-x-large-height} / 2) -
128
157
  (((#{$tw-sz-btn-x-large-height} - #{$tw-fnt-btn-label-x-large-line-height}) / 2))
129
158
  );
130
- .tw-icon--xlarge {
131
- margin-right: calc((#{$tw-sz-btn-x-large-height} - #{$tw-fnt-btn-label-x-large-line-height}) / 2);
132
- }
133
159
  }
134
-
135
160
  &.button-no-label.button-with-icon {
136
161
  padding-left: 12px;
137
162
  padding-right: 12px;
@@ -179,66 +204,6 @@
179
204
  &:active {
180
205
  background-color: $tw-clr-bg-brand-ghost-active;
181
206
  }
182
-
183
- &--small {
184
- padding: calc(
185
- (#{$tw-sz-btn-small-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-small-line-height}) / 2
186
- )
187
- calc((#{$tw-sz-btn-small-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
188
-
189
- &.button-no-label.button-with-icon {
190
- padding-left: 4px;
191
- padding-right: 4px;
192
- .tw-icon--small {
193
- margin-right: 0;
194
- }
195
- }
196
- }
197
-
198
- &--medium {
199
- padding: calc(
200
- (#{$tw-sz-btn-medium-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-medium-line-height}) / 2
201
- )
202
- calc((#{$tw-sz-btn-medium-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
203
-
204
- &.button-no-label.button-with-icon {
205
- padding-left: 6px;
206
- padding-right: 6px;
207
- .tw-icon--medium {
208
- margin-right: 0;
209
- }
210
- }
211
- }
212
-
213
- &--large {
214
- padding: calc(
215
- (#{$tw-sz-btn-large-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-large-line-height}) / 2
216
- )
217
- calc((#{$tw-sz-btn-large-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
218
-
219
- &.button-no-label.button-with-icon {
220
- padding-left: 8px;
221
- padding-right: 8px;
222
- .tw-icon--large {
223
- margin-right: 0;
224
- }
225
- }
226
- }
227
-
228
- &--xlarge {
229
- padding: calc(
230
- (#{$tw-sz-btn-x-large-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-x-large-line-height}) / 2
231
- )
232
- calc((#{$tw-sz-btn-x-large-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
233
-
234
- &.button-no-label.button-with-icon {
235
- padding-left: 10px;
236
- padding-right: 10px;
237
- .tw-icon--xlarge {
238
- margin-right: 0;
239
- }
240
- }
241
- }
242
207
  }
243
208
 
244
209
  .passive-primary {
@@ -254,7 +219,6 @@
254
219
  &:active {
255
220
  background-color: $tw-clr-bg-tertiary-active;
256
221
  }
257
-
258
222
  }
259
223
 
260
224
  .passive-secondary {
@@ -271,66 +235,6 @@
271
235
  &:active {
272
236
  background-color: $tw-clr-bg-ghost-active;
273
237
  }
274
-
275
- &--small {
276
- padding: calc(
277
- (#{$tw-sz-btn-small-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-small-line-height}) / 2
278
- )
279
- calc((#{$tw-sz-btn-small-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
280
-
281
- &.button-no-label.button-with-icon {
282
- padding-left: 4px;
283
- padding-right: 4px;
284
- .tw-icon--small {
285
- margin-right: 0;
286
- }
287
- }
288
- }
289
-
290
- &--medium {
291
- padding: calc(
292
- (#{$tw-sz-btn-medium-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-medium-line-height}) / 2
293
- )
294
- calc((#{$tw-sz-btn-medium-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
295
-
296
- &.button-no-label.button-with-icon {
297
- padding-left: 6px;
298
- padding-right: 6px;
299
- .tw-icon--medium {
300
- margin-right: 0;
301
- }
302
- }
303
- }
304
-
305
- &--large {
306
- padding: calc(
307
- (#{$tw-sz-btn-large-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-large-line-height}) / 2
308
- )
309
- calc((#{$tw-sz-btn-large-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
310
-
311
- &.button-no-label.button-with-icon {
312
- padding-left: 8px;
313
- padding-right: 8px;
314
- .tw-icon--large {
315
- margin-right: 0;
316
- }
317
- }
318
- }
319
-
320
- &--xlarge {
321
- padding: calc(
322
- (#{$tw-sz-btn-x-large-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-x-large-line-height}) / 2
323
- )
324
- calc((#{$tw-sz-btn-x-large-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
325
-
326
- &.button-no-label.button-with-icon {
327
- padding-left: 10px;
328
- padding-right: 10px;
329
- .tw-icon--xlarge {
330
- margin-right: 0;
331
- }
332
- }
333
- }
334
238
  }
335
239
 
336
240
  .destructive-primary {
@@ -363,13 +267,23 @@
363
267
  &:active {
364
268
  background-color: $tw-clr-bg-danger-ghost-active;
365
269
  }
270
+ }
271
+
272
+ .productive-secondary,
273
+ .passive-secondary,
274
+ .destructive-secondary {
366
275
 
367
276
  &--small {
368
277
  padding: calc(
369
278
  (#{$tw-sz-btn-small-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-small-line-height}) / 2
370
279
  )
371
280
  calc((#{$tw-sz-btn-small-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
372
-
281
+
282
+ &.button-with-icon {
283
+ padding-left: calc(
284
+ (#{$tw-sz-btn-small-height} / 2) - #{$tw-sz-btn-stroke} - ((((#{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}) / 2)))
285
+ );
286
+ }
373
287
  &.button-no-label.button-with-icon {
374
288
  padding-left: 4px;
375
289
  padding-right: 4px;
@@ -384,7 +298,12 @@
384
298
  (#{$tw-sz-btn-medium-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-medium-line-height}) / 2
385
299
  )
386
300
  calc((#{$tw-sz-btn-medium-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
387
-
301
+
302
+ &.button-with-icon {
303
+ padding-left: calc(
304
+ (#{$tw-sz-btn-medium-height} / 2) - #{$tw-sz-btn-stroke} - ((((#{$tw-sz-btn-medium-height} - #{$tw-fnt-btn-label-medium-line-height}) / 2)))
305
+ );
306
+ }
388
307
  &.button-no-label.button-with-icon {
389
308
  padding-left: 6px;
390
309
  padding-right: 6px;
@@ -399,7 +318,12 @@
399
318
  (#{$tw-sz-btn-large-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-large-line-height}) / 2
400
319
  )
401
320
  calc((#{$tw-sz-btn-large-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
402
-
321
+
322
+ &.button-with-icon {
323
+ padding-left: calc(
324
+ (#{$tw-sz-btn-large-height} / 2) - #{$tw-sz-btn-stroke} - ((((#{$tw-sz-btn-large-height} - #{$tw-fnt-btn-label-large-line-height}) / 2)))
325
+ );
326
+ }
403
327
  &.button-no-label.button-with-icon {
404
328
  padding-left: 8px;
405
329
  padding-right: 8px;
@@ -414,13 +338,18 @@
414
338
  (#{$tw-sz-btn-x-large-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-x-large-line-height}) / 2
415
339
  )
416
340
  calc((#{$tw-sz-btn-x-large-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
417
-
341
+
342
+ &.button-with-icon {
343
+ padding-left: calc(
344
+ (#{$tw-sz-btn-x-large-height} / 2) - #{$tw-sz-btn-stroke} - ((((#{$tw-sz-btn-x-large-height} - #{$tw-fnt-btn-label-x-large-line-height}) / 2)))
345
+ );
346
+ }
418
347
  &.button-no-label.button-with-icon {
419
348
  padding-left: 10px;
420
349
  padding-right: 10px;
421
- .tw-icon--medium {
350
+ .tw-icon--xlarge {
422
351
  margin-right: 0;
423
352
  }
424
353
  }
425
354
  }
426
- }
355
+ }
package/components/Icon/styles.scss CHANGED
@@ -19,25 +19,24 @@
19
19
  }
20
20
 
21
21
  .tw-icon {
22
- vertical-align: bottom;
23
22
 
24
23
  &--small {
25
- width: $tw-sz-btn-small-icon;
26
- height: $tw-sz-btn-small-icon;
24
+ width: $tw-sz-icon-small;
25
+ height: $tw-sz-icon-small;
27
26
  }
28
27
 
29
28
  &--medium {
30
- width: $tw-sz-btn-medium-icon;
31
- height: $tw-sz-btn-medium-icon;
29
+ width: $tw-sz-icon-medium;
30
+ height: $tw-sz-icon-medium;
32
31
  }
33
32
 
34
33
  &--large {
35
- width: $tw-sz-btn-large-icon;
36
- height: $tw-sz-btn-large-icon;
34
+ width: $tw-sz-icon-large;
35
+ height: $tw-sz-icon-large;
37
36
  }
38
37
 
39
38
  &--xlarge {
40
- width: $tw-sz-btn-x-large-icon;
41
- height: $tw-sz-btn-x-large-icon;
39
+ width: $tw-sz-icon-x-large;
40
+ height: $tw-sz-icon-x-large;
42
41
  }
43
42
  }
package/components/IconTooltip/index.js CHANGED
@@ -25,9 +25,9 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
25
25
  color: theme.palette.ClrBaseGray800
26
26
  },
27
27
  icon: {
28
- fill: theme.palette.ClrBaseGray800,
29
- marginLeft: '.5em',
30
- marginRight: '.5em',
28
+ fill: theme.palette.TwClrIcnSecondary,
29
+ marginLeft: '4px',
30
+ marginRight: '4px',
31
31
  verticalAlign: 'text-top'
32
32
  },
33
33
  tooltip: {
package/components/Select/styles.scss CHANGED
@@ -25,7 +25,7 @@
25
25
  font-size: $tw-fnt-frm-fld-label-font-size;
26
26
  font-weight: $tw-fnt-frm-fld-label-font-weight;
27
27
  line-height: $tw-fnt-frm-fld-label-line-height;
28
- color: $tw-clr-frm-fld-label;
28
+ color: $tw-clr-txt-secondary;
29
29
  margin-bottom: $tw-spc-base-xx-small;
30
30
  display: block;
31
31
  width: 100%;
@@ -44,31 +44,11 @@
44
44
  margin-top: $tw-spc-base-xx-small;
45
45
  }
46
46
 
47
- textarea {
48
- font-family: $tw-fnt-frm-fld-text-value-font-family;
49
- font-size: $tw-fnt-frm-fld-text-value-font-size;
50
- font-weight: $tw-fnt-frm-fld-text-value-font-weight;
51
- line-height: $tw-fnt-frm-fld-text-value-line-height;
52
- color: $tw-clr-txt;
53
- padding-top: 0;
54
- padding-bottom: 0;
55
- &::placeholder {
56
- font-family: $tw-fnt-frm-fld-text-placeholder-font-family;
57
- font-size: $tw-fnt-frm-fld-text-placeholder-font-size;
58
- font-weight: $tw-fnt-frm-fld-text-placeholder-font-weight;
59
- line-height: $tw-fnt-frm-fld-text-placeholder-line-height;
60
- color: $tw-clr-base-gray-300;
61
- }
62
- &:focus-visible {
63
- outline: none;
64
- }
65
- }
66
-
67
47
  .textfield-value {
68
48
  background-color: $tw-clr-bg;
69
49
  border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
70
- padding: $tw-spc-base-x-small;
71
- border-radius: $tw-rds-frm-fld-text-input;
50
+ padding: #{$tw-spc-base-x-small - $tw-sz-frm-fld-text-input-stroke};
51
+ border-radius: $tw-sz-base-xx-small;
72
52
  border-width: $tw-sz-frm-fld-text-input-stroke;
73
53
  display: flex;
74
54
 
@@ -77,13 +57,14 @@
77
57
  }
78
58
 
79
59
  &:active {
80
- border: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-hover;
81
- outline: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-hover;
60
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-active;
61
+ outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-active;
82
62
  }
83
63
 
84
64
  &:focus-within {
85
- border: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-hover;
86
- outline: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-hover;
65
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-active;
66
+ outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-active;
67
+ outline-offset: -$tw-sz-frm-fld-text-input-stroke;
87
68
  }
88
69
 
89
70
  input {
@@ -94,6 +75,7 @@
94
75
  font-weight: $tw-fnt-frm-fld-text-value-font-weight;
95
76
  line-height: $tw-fnt-frm-fld-text-value-line-height;
96
77
  color: $tw-clr-txt;
78
+ cursor: pointer;
97
79
  background: transparent;
98
80
  padding-top: 0;
99
81
  padding-bottom: 0;
@@ -102,7 +84,7 @@
102
84
  font-size: $tw-fnt-frm-fld-text-placeholder-font-size;
103
85
  font-weight: $tw-fnt-frm-fld-text-placeholder-font-weight;
104
86
  line-height: $tw-fnt-frm-fld-text-placeholder-line-height;
105
- color: $tw-clr-base-gray-300;
87
+ color: $tw-clr-txt-tertiary;
106
88
  }
107
89
  &:focus-visible {
108
90
  outline: none;
@@ -114,32 +96,40 @@
114
96
  font-size: $tw-fnt-frm-fld-text-value-font-size;
115
97
  font-weight: $tw-fnt-frm-fld-text-value-font-weight;
116
98
  line-height: $tw-fnt-frm-fld-text-value-line-height;
117
- padding: 0;
99
+ padding: $tw-spc-base-x-small 0;
118
100
  margin: 0;
119
101
  }
120
102
 
121
103
  &--disabled {
122
104
  opacity: $tw-opcty-semantic-off;
123
105
  pointer-events: none;
106
+
124
107
  &:hover {
125
108
  border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
126
109
  }
127
110
 
128
111
  &:active {
129
112
  border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
113
+ outline: 0;
114
+ }
115
+
116
+ &:focus-within {
117
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
118
+ outline: 0;
130
119
  }
131
120
  }
132
121
 
133
122
  &--icon-right {
134
123
  width: $tw-fnt-frm-fld-text-value-line-height;
135
124
  height: $tw-fnt-frm-fld-text-value-line-height;
136
- fill: $tw-clr-txt;
125
+ fill: $tw-clr-icn;
126
+ margin-left: $tw-spc-base-x-small;
137
127
  }
138
128
 
139
129
  &--icon-left {
140
130
  width: $tw-fnt-frm-fld-text-value-line-height;
141
131
  height: $tw-fnt-frm-fld-text-value-line-height;
142
- fill: $tw-clr-txt;
132
+ fill: $tw-clr-icn-secondary;
143
133
  margin-right: $tw-spc-base-x-small;
144
134
  }
145
135
 
@@ -148,17 +138,18 @@
148
138
  background-color: $tw-clr-bg-danger-tertiary;
149
139
 
150
140
  &:hover {
151
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
141
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger-hover;
152
142
  }
153
143
 
154
144
  &:active {
155
- border: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-danger;
156
- outline: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-danger;
145
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger-active;
146
+ outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-danger-active;
157
147
  }
158
-
148
+
159
149
  &:focus-within {
160
- border: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-danger;
161
- outline: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-danger;
150
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger-active;
151
+ outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-danger-active;
152
+ outline-offset: -$tw-sz-frm-fld-text-input-stroke;
162
153
  }
163
154
  }
164
155
 
@@ -167,27 +158,35 @@
167
158
  background-color: $tw-clr-bg-warning-tertiary;
168
159
 
169
160
  &:hover {
170
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning;
161
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning-hover;
171
162
  }
172
163
 
173
164
  &:active {
174
- border: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-warning;
175
- outline: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-warning;
165
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning-active;
166
+ outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-warning-active;
176
167
  }
177
-
168
+
178
169
  &:focus-within {
179
- border: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-warning;
180
- outline: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-warning;
170
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning-active;
171
+ outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-warning-active;
172
+ outline-offset: -$tw-sz-frm-fld-text-input-stroke;
181
173
  }
182
174
  }
183
175
 
184
176
  &--readonly {
177
+ background-color: $tw-clr-bg-secondary;
185
178
  &:hover {
186
179
  border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
187
180
  }
188
181
 
189
182
  &:active {
190
183
  border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
184
+ outline: 0;
185
+ }
186
+
187
+ &:focus-within {
188
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
189
+ outline: 0;
191
190
  }
192
191
  }
193
192
 
@@ -196,6 +195,13 @@
196
195
  }
197
196
  }
198
197
 
198
+ .textfield-label-container {
199
+ position: relative;
200
+ display: flex;
201
+ width: 100%;
202
+ margin-top: $tw-spc-base-xx-small;
203
+ }
204
+
199
205
  .textfield-error-text {
200
206
  font-family: $tw-fnt-frm-fld-error-text-font-family;
201
207
  font-size: $tw-fnt-frm-fld-error-text-font-size;
@@ -207,7 +213,7 @@
207
213
  max-width: 100%;
208
214
 
209
215
  &--icon {
210
- fill: $tw-clr-txt-danger;
216
+ fill: $tw-clr-icn-danger;
211
217
  width: $tw-fnt-frm-fld-error-text-line-height;
212
218
  height: $tw-fnt-frm-fld-error-text-line-height;
213
219
  margin-right: $tw-spc-base-x-small;
@@ -225,34 +231,26 @@
225
231
  max-width: 100%;
226
232
 
227
233
  &--icon {
228
- fill: $tw-clr-txt-warning;
234
+ fill: $tw-clr-icn-warning;
229
235
  width: $tw-fnt-frm-fld-error-text-line-height;
230
236
  height: $tw-fnt-frm-fld-error-text-line-height;
231
237
  margin-right: $tw-spc-base-x-small;
232
238
  }
233
239
  }
234
240
 
235
- .textfield-label-container {
236
- position: relative;
237
- display: flex;
238
- width: 100%;
239
- margin-top: $tw-spc-base-xx-small;
240
- }
241
-
242
241
  .options-container {
243
242
  z-index: 3;
244
- width: 100%;
243
+ width: calc(100% - 2px);
245
244
  position: absolute;
246
- top: 42px;
245
+ top: 44px;
247
246
  list-style-type: none;
248
247
  padding: $tw-spc-base-x-small 0;
249
248
  background: $tw-clr-bg;
250
249
  border: 1px solid $tw-clr-brdr-secondary;
251
- margin: 0;
252
- margin-top: $tw-spc-base-xx-small;
250
+ margin: $tw-spc-base-xx-small 0 0;
253
251
  border-radius: $tw-rds-frm-fld-text-input;
254
252
  max-height: 140px;
255
- overflow: scroll;
253
+ overflow-y: auto;
256
254
 
257
255
  &.fixed-menu {
258
256
  position: fixed;
package/components/Textfield/styles.scss CHANGED
@@ -11,6 +11,7 @@
11
11
  .textfield {
12
12
  display: flex;
13
13
  flex-flow: row wrap;
14
+
14
15
  .textfield-label {
15
16
  font-family: $tw-fnt-frm-fld-label-font-family;
16
17
  font-size: $tw-fnt-frm-fld-label-font-size;
@@ -21,17 +22,6 @@
21
22
  display: block;
22
23
  width: 100%;
23
24
  max-width: 100%;
24
-
25
- &--icon-tooltip-container {
26
- display: inline-block;
27
- margin-left: $tw-spc-base-small;
28
- }
29
-
30
- &--icon-tooltip {
31
- width: $tw-fnt-frm-fld-label-line-height;
32
- height: $tw-fnt-frm-fld-label-line-height;
33
- fill: $tw-clr-txt;
34
- }
35
25
  }
36
26
 
37
27
  .textfield-help-text {
@@ -59,7 +49,7 @@
59
49
  font-size: $tw-fnt-frm-fld-text-placeholder-font-size;
60
50
  font-weight: $tw-fnt-frm-fld-text-placeholder-font-weight;
61
51
  line-height: $tw-fnt-frm-fld-text-placeholder-line-height;
62
- color: $tw-clr-base-gray-300;
52
+ color: $tw-clr-txt-tertiary;
63
53
  }
64
54
  &:focus-visible {
65
55
  outline: none;
@@ -69,9 +59,8 @@
69
59
  .textfield-value {
70
60
  background-color: $tw-clr-bg;
71
61
  border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
72
- padding: $tw-spc-base-x-small;
73
- border-radius: $tw-rds-frm-fld-text-input;
74
- border-width: $tw-sz-frm-fld-text-input-stroke;
62
+ padding: #{$tw-spc-base-x-small - $tw-sz-frm-fld-text-input-stroke};
63
+ border-radius: $tw-sz-base-xx-small;
75
64
  width: 100%;
76
65
  max-width: 100%;
77
66
  display: flex;
@@ -81,13 +70,14 @@
81
70
  }
82
71
 
83
72
  &:active {
84
- border: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-hover;
85
- outline: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-hover;
73
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-hover;
74
+ outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-active;
86
75
  }
87
76
 
88
77
  &:focus-within {
89
- border: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-frm-fld-text-input-stroke-hover;
90
- outline: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-frm-fld-text-input-stroke-hover;
78
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-hover;
79
+ outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-active;
80
+ outline-offset: -$tw-sz-frm-fld-text-input-stroke;
91
81
  }
92
82
 
93
83
  input {
@@ -106,7 +96,7 @@
106
96
  font-size: $tw-fnt-frm-fld-text-placeholder-font-size;
107
97
  font-weight: $tw-fnt-frm-fld-text-placeholder-font-weight;
108
98
  line-height: $tw-fnt-frm-fld-text-placeholder-line-height;
109
- color: $tw-clr-base-gray-300;
99
+ color: $tw-clr-txt-tertiary;
110
100
  }
111
101
  &:focus-visible {
112
102
  outline: none;
@@ -118,36 +108,46 @@
118
108
  font-size: $tw-fnt-frm-fld-text-value-font-size;
119
109
  font-weight: $tw-fnt-frm-fld-text-value-font-weight;
120
110
  line-height: $tw-fnt-frm-fld-text-value-line-height;
121
- padding: 0;
111
+ padding: $tw-spc-base-x-small 0;
122
112
  margin: 0;
123
113
  }
124
114
 
125
115
  &--disabled {
126
116
  opacity: $tw-opcty-semantic-off;
117
+
127
118
  &:hover {
128
119
  border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
129
120
  }
130
121
 
131
122
  &:active {
132
123
  border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
124
+ outline: 0;
125
+ }
126
+
127
+ &:focus-within {
128
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
129
+ outline: 0;
133
130
  }
134
131
  }
135
132
 
136
133
  &--icon-container {
137
134
  background: none;
138
135
  border: 0;
136
+ padding: 0;
139
137
  }
140
138
 
141
139
  &--icon-right {
142
140
  width: $tw-fnt-frm-fld-text-value-line-height;
143
141
  height: $tw-fnt-frm-fld-text-value-line-height;
144
- fill: $tw-clr-txt;
142
+ fill: $tw-clr-icn-secondary;
143
+ margin-left: $tw-spc-base-x-small;
144
+ vertical-align: top;
145
145
  }
146
146
 
147
147
  &--icon-left {
148
148
  width: $tw-fnt-frm-fld-text-value-line-height;
149
149
  height: $tw-fnt-frm-fld-text-value-line-height;
150
- fill: $tw-clr-txt;
150
+ fill: $tw-clr-icn-secondary;
151
151
  margin-right: $tw-spc-base-x-small;
152
152
  }
153
153
 
@@ -156,17 +156,18 @@
156
156
  background-color: $tw-clr-bg-danger-tertiary;
157
157
 
158
158
  &:hover {
159
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
159
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger-hover;
160
160
  }
161
161
 
162
162
  &:active {
163
- border: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-danger;
164
- outline: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-danger;
163
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger-active;
164
+ outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-danger-active;
165
165
  }
166
-
166
+
167
167
  &:focus-within {
168
- border: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-danger;
169
- outline: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-danger;
168
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger-active;
169
+ outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-danger-active;
170
+ outline-offset: -$tw-sz-frm-fld-text-input-stroke;
170
171
  }
171
172
  }
172
173
 
@@ -175,32 +176,47 @@
175
176
  background-color: $tw-clr-bg-warning-tertiary;
176
177
 
177
178
  &:hover {
178
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning;
179
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning-hover;
179
180
  }
180
181
 
181
182
  &:active {
182
- border: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-warning;
183
- outline: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-warning;
183
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning-active;
184
+ outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-warning-active;
184
185
  }
185
-
186
+
186
187
  &:focus-within {
187
- border: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-warning;
188
- outline: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-warning;
188
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning-active;
189
+ outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-warning-active;
190
+ outline-offset: -$tw-sz-frm-fld-text-input-stroke;
189
191
  }
192
+
190
193
  }
191
194
 
192
195
  &--readonly {
193
196
  background-color: $tw-clr-bg-secondary;
197
+
194
198
  &:hover {
195
199
  border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
196
200
  }
197
201
 
198
202
  &:active {
199
203
  border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
204
+ outline: 0;
205
+ }
206
+
207
+ &:focus-within {
208
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
209
+ outline: 0;
200
210
  }
201
211
  }
202
212
  }
203
213
 
214
+ .textfield-label-container {
215
+ display: flex;
216
+ width: 100%;
217
+ margin-top: $tw-spc-base-xx-small;
218
+ }
219
+
204
220
  .textfield-error-text {
205
221
  font-family: $tw-fnt-frm-fld-error-text-font-family;
206
222
  font-size: $tw-fnt-frm-fld-error-text-font-size;
@@ -212,7 +228,7 @@
212
228
  max-width: 100%;
213
229
 
214
230
  &--icon {
215
- fill: $tw-clr-txt-danger;
231
+ fill: $tw-clr-icn-danger;
216
232
  width: $tw-fnt-frm-fld-error-text-line-height;
217
233
  height: $tw-fnt-frm-fld-error-text-line-height;
218
234
  margin-right: $tw-spc-base-x-small;
@@ -230,16 +246,10 @@
230
246
  max-width: 100%;
231
247
 
232
248
  &--icon {
233
- fill: $tw-clr-txt-warning;
249
+ fill: $tw-clr-icn-warning;
234
250
  width: $tw-fnt-frm-fld-error-text-line-height;
235
251
  height: $tw-fnt-frm-fld-error-text-line-height;
236
252
  margin-right: $tw-spc-base-x-small;
237
253
  }
238
254
  }
239
-
240
- .textfield-label-container {
241
- display: flex;
242
- width: 100%;
243
- margin-top: $tw-spc-base-xx-small;
244
- }
245
255
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@terraware/web-components",
3
- "version": "1.0.56",
3
+ "version": "1.0.57",
4
4
  "author": "Terraformation Inc.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {