@terraware/web-components 3.9.11 → 3.9.12

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 (28) hide show
  1. package/components/AntSwitch/styles.scss +3 -3
  2. package/components/Autocomplete/styles.scss +52 -52
  3. package/components/Button/styles.scss +141 -141
  4. package/components/DatePicker/styles.scss +31 -31
  5. package/components/DialogBox/styles.scss +35 -35
  6. package/components/EditableTable/index.d.ts +86 -0
  7. package/components/EditableTable/index.d.ts.map +1 -0
  8. package/components/EditableTable/index.js +179 -0
  9. package/components/ErrorBox/styles.scss +16 -16
  10. package/components/Icon/styles.scss +9 -9
  11. package/components/Map/styles.scss +20 -20
  12. package/components/Markdown/styles.scss +37 -37
  13. package/components/Message/styles.scss +63 -63
  14. package/components/MultiSelect/styles.scss +66 -66
  15. package/components/Navbar/styles.scss +39 -39
  16. package/components/Pill/styles.scss +10 -10
  17. package/components/PillList/styles.scss +2 -2
  18. package/components/PopoverMultiSelect/styles.scss +4 -4
  19. package/components/ProgressCircle/styles.scss +24 -24
  20. package/components/Select/styles.scss +107 -107
  21. package/components/Textfield/styles.scss +108 -108
  22. package/components/TimelineSlider/styles.scss +18 -18
  23. package/components/ViewPhotosDialog/styles.scss +3 -3
  24. package/license-report.html +1 -1
  25. package/package.json +2 -1
  26. package/stories/EditableTable.stories.d.ts +14 -0
  27. package/stories/EditableTable.stories.d.ts.map +1 -0
  28. package/style-dictionary-dist/terraware.scss +2 -1
package/components/Markdown/styles.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use 'sass:math';
2
2
 
3
- @import '../../style-dictionary-dist/terraware.scss';
3
+ @use '../../style-dictionary-dist/terraware.scss';
4
4
 
5
5
  @font-face {
6
6
  font-family: 'Inter';
@@ -10,83 +10,83 @@
10
10
  .markdown {
11
11
  display: flex;
12
12
  flex-flow: column;
13
- font-family: $tw-fnt-frm-fld-text-value-font-family;
14
- color: $tw-clr-txt;
15
- padding: $tw-spc-base-x-small 0;
13
+ font-family: terraware.$tw-fnt-frm-fld-text-value-font-family;
14
+ color: terraware.$tw-clr-txt;
15
+ padding: terraware.$tw-spc-base-x-small 0;
16
16
  margin: 0;
17
17
 
18
18
  h1 {
19
- font-size: $tw-fnt-base-headline-01-semi-bold-font-size;
20
- font-weight: $tw-fnt-base-headline-01-semi-bold-font-weight;
21
- line-height: $tw-fnt-base-headline-01-semi-bold-line-height;
19
+ font-size: terraware.$tw-fnt-base-headline-01-semi-bold-font-size;
20
+ font-weight: terraware.$tw-fnt-base-headline-01-semi-bold-font-weight;
21
+ line-height: terraware.$tw-fnt-base-headline-01-semi-bold-line-height;
22
22
  padding: 0;
23
23
  margin: 0;
24
24
  }
25
25
  h2 {
26
- font-size: $tw-fnt-base-headline-02-semi-bold-font-size;
27
- font-weight: $tw-fnt-base-headline-02-semi-bold-font-weight;
28
- line-height: $tw-fnt-base-headline-02-semi-bold-line-height;
26
+ font-size: terraware.$tw-fnt-base-headline-02-semi-bold-font-size;
27
+ font-weight: terraware.$tw-fnt-base-headline-02-semi-bold-font-weight;
28
+ line-height: terraware.$tw-fnt-base-headline-02-semi-bold-line-height;
29
29
  padding: 0;
30
30
  margin: 0;
31
31
  }
32
32
  h3 {
33
- font-size: $tw-fnt-base-headline-03-semi-bold-font-size;
34
- font-weight: $tw-fnt-base-headline-03-semi-bold-font-weight;
35
- line-height: $tw-fnt-base-headline-03-semi-bold-line-height;
33
+ font-size: terraware.$tw-fnt-base-headline-03-semi-bold-font-size;
34
+ font-weight: terraware.$tw-fnt-base-headline-03-semi-bold-font-weight;
35
+ line-height: terraware.$tw-fnt-base-headline-03-semi-bold-line-height;
36
36
  padding: 0;
37
37
  margin: 0;
38
38
  }
39
39
  h4 {
40
- font-size: $tw-fnt-base-headline-04-semi-bold-font-size;
41
- font-weight: $tw-fnt-base-headline-04-semi-bold-font-weight;
42
- line-height: $tw-fnt-base-headline-04-semi-bold-line-height;
40
+ font-size: terraware.$tw-fnt-base-headline-04-semi-bold-font-size;
41
+ font-weight: terraware.$tw-fnt-base-headline-04-semi-bold-font-weight;
42
+ line-height: terraware.$tw-fnt-base-headline-04-semi-bold-line-height;
43
43
  padding: 0;
44
44
  margin: 0;
45
45
  }
46
46
  h5 {
47
- font-size: $tw-fnt-base-headline-05-semi-bold-font-size;
48
- font-weight: $tw-fnt-base-headline-05-semi-bold-font-weight;
49
- line-height: $tw-fnt-base-headline-05-semi-bold-line-height;
47
+ font-size: terraware.$tw-fnt-base-headline-05-semi-bold-font-size;
48
+ font-weight: terraware.$tw-fnt-base-headline-05-semi-bold-font-weight;
49
+ line-height: terraware.$tw-fnt-base-headline-05-semi-bold-line-height;
50
50
  padding: 0;
51
51
  margin: 0;
52
52
  }
53
53
  h6 {
54
- font-size: $tw-fnt-base-headline-06-semi-bold-font-size;
55
- font-weight: $tw-fnt-base-headline-06-semi-bold-font-weight;
56
- line-height: $tw-fnt-base-headline-06-semi-bold-line-height;
54
+ font-size: terraware.$tw-fnt-base-headline-06-semi-bold-font-size;
55
+ font-weight: terraware.$tw-fnt-base-headline-06-semi-bold-font-weight;
56
+ line-height: terraware.$tw-fnt-base-headline-06-semi-bold-line-height;
57
57
  padding: 0;
58
58
  margin: 0;
59
59
  }
60
60
 
61
61
  p {
62
- font-size: $tw-fnt-frm-fld-text-value-font-size;
63
- font-weight: $tw-fnt-frm-fld-text-value-font-weight;
64
- line-height: $tw-fnt-frm-fld-text-value-line-height;
62
+ font-size: terraware.$tw-fnt-frm-fld-text-value-font-size;
63
+ font-weight: terraware.$tw-fnt-frm-fld-text-value-font-weight;
64
+ line-height: terraware.$tw-fnt-frm-fld-text-value-line-height;
65
65
  padding: 0;
66
66
  margin: 0;
67
67
  }
68
68
 
69
69
  a {
70
- color: $tw-clr-txt-brand;
70
+ color: terraware.$tw-clr-txt-brand;
71
71
  text-decoration: underline;
72
72
  &:hover {
73
- color: $tw-clr-txt-brand;
73
+ color: terraware.$tw-clr-txt-brand;
74
74
  }
75
75
  }
76
76
 
77
77
  code {
78
78
  font-family: 'Fira Code', monospace;
79
- background: $tw-clr-bg-secondary;
80
- color: $tw-clr-txt-secondary;
79
+ background: terraware.$tw-clr-bg-secondary;
80
+ color: terraware.$tw-clr-txt-secondary;
81
81
  }
82
82
 
83
83
  pre code {
84
84
  display: block;
85
85
  padding: 4px;
86
86
  overflow-x: auto;
87
- background: $tw-clr-bg-secondary;
88
- color: $tw-clr-txt-secondary;
89
- border-color: $tw-clr-brdr-secondary;
87
+ background: terraware.$tw-clr-bg-secondary;
88
+ color: terraware.$tw-clr-txt-secondary;
89
+ border-color: terraware.$tw-clr-brdr-secondary;
90
90
  border-radius: 8px;
91
91
  }
92
92
 
@@ -104,26 +104,26 @@
104
104
 
105
105
  thead {
106
106
  tr {
107
- background-color: $tw-clr-base-gray-050;
107
+ background-color: terraware.$tw-clr-base-gray-050;
108
108
  }
109
109
  }
110
110
 
111
111
  tbody {
112
112
  tr {
113
113
  &:nth-child(odd) {
114
- background-color: $tw-clr-base-white;
114
+ background-color: terraware.$tw-clr-base-white;
115
115
  }
116
116
 
117
117
  &:nth-child(even) {
118
- background-color: $tw-clr-base-gray-050;
118
+ background-color: terraware.$tw-clr-base-gray-050;
119
119
  }
120
120
  }
121
121
  }
122
122
 
123
123
  blockquote {
124
- border-left: 4px solid $tw-clr-brdr-brand;
124
+ border-left: 4px solid terraware.$tw-clr-brdr-brand;
125
125
  padding-left: 1em;
126
126
  margin: 1em 0;
127
- color: $tw-clr-txt-secondary;
127
+ color: terraware.$tw-clr-txt-secondary;
128
128
  }
129
129
  }
package/components/Message/styles.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '../../style-dictionary-dist/terraware.scss';
1
+ @use '../../style-dictionary-dist/terraware.scss';
2
2
 
3
3
  @font-face {
4
4
  font-family: 'Inter';
@@ -9,14 +9,14 @@
9
9
  &.tw-message--page {
10
10
  width: 100%;
11
11
  &.tw-message--container {
12
- margin: $tw-spc-base-small 0;
12
+ margin: terraware.$tw-spc-base-small 0;
13
13
  }
14
14
  &.tw-message--title-container {
15
15
  display: flex;
16
16
  }
17
17
  }
18
18
 
19
- border-radius: $tw-sz-base-small;
19
+ border-radius: terraware.$tw-sz-base-small;
20
20
  display: flex;
21
21
  width: 480px;
22
22
 
@@ -25,24 +25,24 @@
25
25
  }
26
26
 
27
27
  &.tw-message--toast {
28
- box-shadow: 0 $tw-sz-base-x-small $tw-sz-base-small 0 rgba($tw-clr-base-gray-800, $tw-opcty-base-020);
28
+ box-shadow: 0 terraware.$tw-sz-base-x-small terraware.$tw-sz-base-small 0 rgba(terraware.$tw-clr-base-gray-800, terraware.$tw-opcty-base-020);
29
29
  }
30
30
 
31
31
  &--container {
32
- margin: $tw-spc-base-small;
32
+ margin: terraware.$tw-spc-base-small;
33
33
  display: flex;
34
34
  justify-content: space-between;
35
35
  width: 100%;
36
36
  }
37
37
  &--title-container {
38
38
  h4 {
39
- font-family: $tw-fnt-mssg-title-font-family;
40
- font-size: $tw-fnt-mssg-title-font-size;
41
- font-weight: $tw-fnt-mssg-title-font-weight;
42
- line-height: $tw-fnt-mssg-title-line-height;
43
- color: $tw-clr-txt;
39
+ font-family: terraware.$tw-fnt-mssg-title-font-family;
40
+ font-size: terraware.$tw-fnt-mssg-title-font-size;
41
+ font-weight: terraware.$tw-fnt-mssg-title-font-weight;
42
+ line-height: terraware.$tw-fnt-mssg-title-line-height;
43
+ color: terraware.$tw-clr-txt;
44
44
  padding: 0;
45
- margin: 0 0 $tw-spc-base-x-small;
45
+ margin: 0 0 terraware.$tw-spc-base-x-small;
46
46
  }
47
47
  }
48
48
 
@@ -51,19 +51,19 @@
51
51
  width: 100%;
52
52
 
53
53
  p {
54
- font-family: $tw-fnt-mssg-body-font-family;
55
- font-size: $tw-fnt-mssg-body-font-size;
56
- font-weight: $tw-fnt-mssg-body-font-weight;
57
- line-height: $tw-fnt-mssg-body-line-height;
58
- color: $tw-clr-txt;
54
+ font-family: terraware.$tw-fnt-mssg-body-font-family;
55
+ font-size: terraware.$tw-fnt-mssg-body-font-size;
56
+ font-weight: terraware.$tw-fnt-mssg-body-font-weight;
57
+ line-height: terraware.$tw-fnt-mssg-body-line-height;
58
+ color: terraware.$tw-clr-txt;
59
59
  padding: 0;
60
60
  margin: 0;
61
61
  }
62
62
 
63
63
  .main-content--icon {
64
- width: $tw-sz-base-medium;
65
- height: $tw-sz-base-medium;
66
- margin-right: $tw-spc-base-small;
64
+ width: terraware.$tw-sz-base-medium;
65
+ height: terraware.$tw-sz-base-medium;
66
+ margin-right: terraware.$tw-spc-base-small;
67
67
  }
68
68
  }
69
69
 
@@ -77,17 +77,17 @@
77
77
  align-self: end;
78
78
 
79
79
  button:first-child {
80
- margin-right: $tw-spc-base-x-small;
80
+ margin-right: terraware.$tw-spc-base-x-small;
81
81
  }
82
82
  }
83
83
 
84
84
  &--action-text {
85
- font-family: $tw-fnt-mssg-body-font-family;
86
- font-size: $tw-fnt-mssg-body-font-size;
87
- font-weight: $tw-fnt-mssg-body-font-weight;
88
- line-height: $tw-fnt-mssg-body-line-height;
89
- color: $tw-clr-txt-brand;
90
- margin-left: $tw-spc-base-x-small;
85
+ font-family: terraware.$tw-fnt-mssg-body-font-family;
86
+ font-size: terraware.$tw-fnt-mssg-body-font-size;
87
+ font-weight: terraware.$tw-fnt-mssg-body-font-weight;
88
+ line-height: terraware.$tw-fnt-mssg-body-line-height;
89
+ color: terraware.$tw-clr-txt-brand;
90
+ margin-left: terraware.$tw-spc-base-x-small;
91
91
  background: none;
92
92
  border: 0;
93
93
  cursor: pointer;
@@ -95,27 +95,27 @@
95
95
  }
96
96
 
97
97
  &--left-side {
98
- border-radius: ($tw-sz-base-small - 1) 0 0 ($tw-sz-base-small - 1);
99
- padding: $tw-spc-base-small $tw-spc-base-small 0 $tw-spc-base-small;
98
+ border-radius: (terraware.$tw-sz-base-small - 1) 0 0 (terraware.$tw-sz-base-small - 1);
99
+ padding: terraware.$tw-spc-base-small terraware.$tw-spc-base-small 0 terraware.$tw-spc-base-small;
100
100
  .left-side--icon {
101
- fill: $tw-clr-icn-inverse;
102
- width: $tw-sz-base-medium;
103
- height: $tw-sz-base-medium;
101
+ fill: terraware.$tw-clr-icn-inverse;
102
+ width: terraware.$tw-sz-base-medium;
103
+ height: terraware.$tw-sz-base-medium;
104
104
  }
105
105
  }
106
106
 
107
107
  .toast-message--close-icon {
108
- margin-left: $tw-spc-base-x-small;
109
- fill: $tw-clr-icn-secondary;
110
- width: $tw-sz-base-medium;
111
- height: $tw-sz-base-medium;
108
+ margin-left: terraware.$tw-spc-base-x-small;
109
+ fill: terraware.$tw-clr-icn-secondary;
110
+ width: terraware.$tw-sz-base-medium;
111
+ height: terraware.$tw-sz-base-medium;
112
112
  }
113
113
 
114
114
  .page-message--close-icon {
115
- margin-left: $tw-spc-base-x-small;
116
- fill: $tw-clr-icn-secondary;
117
- width: $tw-sz-base-medium;
118
- height: $tw-sz-base-medium;
115
+ margin-left: terraware.$tw-spc-base-x-small;
116
+ fill: terraware.$tw-clr-icn-secondary;
117
+ width: terraware.$tw-sz-base-medium;
118
+ height: terraware.$tw-sz-base-medium;
119
119
  }
120
120
 
121
121
  .icon-container {
@@ -126,77 +126,77 @@
126
126
  }
127
127
 
128
128
  &--info {
129
- border: 1px solid $tw-clr-brdr-info;
130
- background-color: $tw-clr-bg-info-tertiary;
129
+ border: 1px solid terraware.$tw-clr-brdr-info;
130
+ background-color: terraware.$tw-clr-bg-info-tertiary;
131
131
 
132
132
  &.tw-message--page {
133
- border: 1px solid $tw-clr-brdr-info;
133
+ border: 1px solid terraware.$tw-clr-brdr-info;
134
134
  .main-content--icon {
135
- fill: $tw-clr-icn-info;
135
+ fill: terraware.$tw-clr-icn-info;
136
136
  }
137
137
  }
138
138
  .tw-message--left-side {
139
- background-color: $tw-clr-bg-info;
139
+ background-color: terraware.$tw-clr-bg-info;
140
140
  }
141
141
  .left-side--icon {
142
- fill: $tw-clr-icn-on-info;
142
+ fill: terraware.$tw-clr-icn-on-info;
143
143
  }
144
144
  }
145
145
 
146
146
  &--critical {
147
- border: 1px solid $tw-clr-brdr-danger;
148
- background-color: $tw-clr-bg-danger-tertiary;
147
+ border: 1px solid terraware.$tw-clr-brdr-danger;
148
+ background-color: terraware.$tw-clr-bg-danger-tertiary;
149
149
 
150
150
  &.tw-message--page {
151
- border: 1px solid $tw-clr-brdr-danger;
151
+ border: 1px solid terraware.$tw-clr-brdr-danger;
152
152
 
153
153
  .main-content--icon {
154
- fill: $tw-clr-icn-danger;
154
+ fill: terraware.$tw-clr-icn-danger;
155
155
  }
156
156
  }
157
157
  .tw-message--left-side {
158
- background-color: $tw-clr-bg-danger;
158
+ background-color: terraware.$tw-clr-bg-danger;
159
159
  }
160
160
  .left-side--icon {
161
- fill: $tw-clr-icn-on-danger;
161
+ fill: terraware.$tw-clr-icn-on-danger;
162
162
  }
163
163
  }
164
164
 
165
165
  &--warning {
166
- border: 1px solid $tw-clr-brdr-warning;
167
- background-color: $tw-clr-bg-warning-tertiary;
166
+ border: 1px solid terraware.$tw-clr-brdr-warning;
167
+ background-color: terraware.$tw-clr-bg-warning-tertiary;
168
168
 
169
169
  &.tw-message--page {
170
- border: 1px solid $tw-clr-brdr-warning;
170
+ border: 1px solid terraware.$tw-clr-brdr-warning;
171
171
 
172
172
  .main-content--icon {
173
- fill: $tw-clr-icn-warning;
173
+ fill: terraware.$tw-clr-icn-warning;
174
174
  }
175
175
  }
176
176
  .tw-message--left-side {
177
- background-color: $tw-clr-bg-warning;
177
+ background-color: terraware.$tw-clr-bg-warning;
178
178
  }
179
179
  .left-side--icon {
180
- fill: $tw-clr-icn-on-warning;
180
+ fill: terraware.$tw-clr-icn-on-warning;
181
181
  }
182
182
  }
183
183
 
184
184
  &--success {
185
- border: 1px solid $tw-clr-brdr-success;
186
- background-color: $tw-clr-bg-success-tertiary;
185
+ border: 1px solid terraware.$tw-clr-brdr-success;
186
+ background-color: terraware.$tw-clr-bg-success-tertiary;
187
187
 
188
188
  &.tw-message--page {
189
- border: 1px solid $tw-clr-brdr-success;
189
+ border: 1px solid terraware.$tw-clr-brdr-success;
190
190
 
191
191
  .main-content--icon {
192
- fill: $tw-clr-icn-success;
192
+ fill: terraware.$tw-clr-icn-success;
193
193
  }
194
194
  }
195
195
  .tw-message--left-side {
196
- background-color: $tw-clr-bg-success;
196
+ background-color: terraware.$tw-clr-bg-success;
197
197
  }
198
198
  .left-side--icon {
199
- fill: $tw-clr-icn-on-success;
199
+ fill: terraware.$tw-clr-icn-on-success;
200
200
  }
201
201
  }
202
202
  }
package/components/MultiSelect/styles.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '../../style-dictionary-dist/terraware.scss';
1
+ @use '../../style-dictionary-dist/terraware.scss';
2
2
 
3
3
  @font-face {
4
4
  font-family: 'Inter';
@@ -22,12 +22,12 @@
22
22
  }
23
23
 
24
24
  .multi-select__label {
25
- font-family: $tw-fnt-frm-fld-label-font-family;
26
- font-size: $tw-fnt-frm-fld-label-font-size;
27
- font-weight: $tw-fnt-frm-fld-label-font-weight;
28
- line-height: $tw-fnt-frm-fld-label-line-height;
29
- color: $tw-clr-txt-secondary;
30
- margin-bottom: $tw-spc-base-xx-small;
25
+ font-family: terraware.$tw-fnt-frm-fld-label-font-family;
26
+ font-size: terraware.$tw-fnt-frm-fld-label-font-size;
27
+ font-weight: terraware.$tw-fnt-frm-fld-label-font-weight;
28
+ line-height: terraware.$tw-fnt-frm-fld-label-line-height;
29
+ color: terraware.$tw-clr-txt-secondary;
30
+ margin-bottom: terraware.$tw-spc-base-xx-small;
31
31
  display: block;
32
32
  width: 100%;
33
33
  max-width: 100%;
@@ -36,99 +36,99 @@
36
36
  .multi-select__error {
37
37
  display: flex;
38
38
  width: 100%;
39
- margin-top: $tw-spc-base-xx-small;
39
+ margin-top: terraware.$tw-spc-base-xx-small;
40
40
 
41
41
  &-text {
42
- font-family: $tw-fnt-frm-fld-error-text-font-family;
43
- font-size: $tw-fnt-frm-fld-error-text-font-size;
44
- font-weight: $tw-fnt-frm-fld-error-text-font-weight;
45
- line-height: $tw-fnt-frm-fld-error-text-line-height;
46
- color: $tw-clr-txt-danger;
42
+ font-family: terraware.$tw-fnt-frm-fld-error-text-font-family;
43
+ font-size: terraware.$tw-fnt-frm-fld-error-text-font-size;
44
+ font-weight: terraware.$tw-fnt-frm-fld-error-text-font-weight;
45
+ line-height: terraware.$tw-fnt-frm-fld-error-text-line-height;
46
+ color: terraware.$tw-clr-txt-danger;
47
47
  display: block;
48
48
  width: 100%;
49
49
  max-width: 100%;
50
50
  }
51
51
 
52
52
  &-icon {
53
- fill: $tw-clr-icn-danger;
54
- width: $tw-fnt-frm-fld-error-text-line-height;
55
- height: $tw-fnt-frm-fld-error-text-line-height;
56
- margin-right: $tw-spc-base-x-small;
53
+ fill: terraware.$tw-clr-icn-danger;
54
+ width: terraware.$tw-fnt-frm-fld-error-text-line-height;
55
+ height: terraware.$tw-fnt-frm-fld-error-text-line-height;
56
+ margin-right: terraware.$tw-spc-base-x-small;
57
57
  }
58
58
  }
59
59
 
60
60
  .multi-select__help-text {
61
- font-family: $tw-fnt-frm-fld-help-text-font-family;
62
- font-size: $tw-fnt-frm-fld-help-text-font-size;
63
- font-weight: $tw-fnt-frm-fld-help-text-font-weight;
64
- line-height: $tw-fnt-frm-fld-help-text-line-height;
65
- color: $tw-clr-txt-secondary;
61
+ font-family: terraware.$tw-fnt-frm-fld-help-text-font-family;
62
+ font-size: terraware.$tw-fnt-frm-fld-help-text-font-size;
63
+ font-weight: terraware.$tw-fnt-frm-fld-help-text-font-weight;
64
+ line-height: terraware.$tw-fnt-frm-fld-help-text-line-height;
65
+ color: terraware.$tw-clr-txt-secondary;
66
66
  display: block;
67
67
  width: 100%;
68
68
  max-width: 100%;
69
- margin-top: $tw-spc-base-xx-small;
69
+ margin-top: terraware.$tw-spc-base-xx-small;
70
70
  }
71
71
 
72
72
  .multi-select__placeholder-text {
73
- font-family: $tw-fnt-frm-fld-text-value-font-family;
74
- font-size: $tw-fnt-frm-fld-text-value-font-size;
75
- font-weight: $tw-fnt-frm-fld-text-value-font-weight;
76
- line-height: $tw-fnt-frm-fld-text-value-line-height;
77
- color: $tw-clr-txt-tertiary;
73
+ font-family: terraware.$tw-fnt-frm-fld-text-value-font-family;
74
+ font-size: terraware.$tw-fnt-frm-fld-text-value-font-size;
75
+ font-weight: terraware.$tw-fnt-frm-fld-text-value-font-weight;
76
+ line-height: terraware.$tw-fnt-frm-fld-text-value-line-height;
77
+ color: terraware.$tw-clr-txt-tertiary;
78
78
  margin: 0;
79
79
  }
80
80
 
81
81
  .multi-select__values {
82
- background-color: $tw-clr-bg;
83
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
84
- padding: #{$tw-spc-base-x-small - $tw-sz-frm-fld-text-input-stroke};
85
- border-radius: $tw-sz-base-x-small;
86
- border-width: $tw-sz-frm-fld-text-input-stroke;
82
+ background-color: terraware.$tw-clr-bg;
83
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-secondary;
84
+ padding: #{terraware.$tw-spc-base-x-small - terraware.$tw-sz-frm-fld-text-input-stroke};
85
+ border-radius: terraware.$tw-sz-base-x-small;
86
+ border-width: terraware.$tw-sz-frm-fld-text-input-stroke;
87
87
  display: flex;
88
88
  align-items: flex-start;
89
89
  justify-content: space-between;
90
90
 
91
91
  &:hover {
92
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-hover;
92
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-hover;
93
93
  }
94
94
 
95
95
  &.open {
96
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-active;
97
- outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-active;
98
- outline-offset: -$tw-sz-frm-fld-text-input-stroke;
96
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-active;
97
+ outline: terraware.$tw-sz-frm-fld-text-input-stroke-active solid terraware.$tw-clr-brdr-active;
98
+ outline-offset: -(terraware.$tw-sz-frm-fld-text-input-stroke);
99
99
  }
100
100
 
101
101
  &.error {
102
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
102
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-danger;
103
103
  }
104
104
 
105
105
  &--disabled {
106
- background-color: $tw-clr-bg;
107
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-tertiary;
108
- padding: #{$tw-spc-base-x-small - $tw-sz-frm-fld-text-input-stroke};
109
- border-radius: $tw-sz-base-x-small;
110
- border-width: $tw-sz-frm-fld-text-input-stroke;
106
+ background-color: terraware.$tw-clr-bg;
107
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-tertiary;
108
+ padding: #{terraware.$tw-spc-base-x-small - terraware.$tw-sz-frm-fld-text-input-stroke};
109
+ border-radius: terraware.$tw-sz-base-x-small;
110
+ border-width: terraware.$tw-sz-frm-fld-text-input-stroke;
111
111
  display: flex;
112
112
  align-items: flex-start;
113
113
  justify-content: space-between;
114
114
  }
115
115
 
116
116
  &__icon-button {
117
- width: $tw-fnt-frm-fld-text-value-line-height;
118
- height: $tw-fnt-frm-fld-text-value-line-height;
117
+ width: terraware.$tw-fnt-frm-fld-text-value-line-height;
118
+ height: terraware.$tw-fnt-frm-fld-text-value-line-height;
119
119
  padding: 0;
120
120
  }
121
121
 
122
122
  &__icon-right {
123
- width: $tw-fnt-frm-fld-text-value-line-height;
124
- height: $tw-fnt-frm-fld-text-value-line-height;
125
- fill: $tw-clr-icn;
123
+ width: terraware.$tw-fnt-frm-fld-text-value-line-height;
124
+ height: terraware.$tw-fnt-frm-fld-text-value-line-height;
125
+ fill: terraware.$tw-clr-icn;
126
126
  flex-shrink: 0;
127
127
 
128
128
  &--disabled {
129
- width: $tw-fnt-frm-fld-text-value-line-height;
130
- height: $tw-fnt-frm-fld-text-value-line-height;
131
- fill: $tw-clr-icn-secondary;
129
+ width: terraware.$tw-fnt-frm-fld-text-value-line-height;
130
+ height: terraware.$tw-fnt-frm-fld-text-value-line-height;
131
+ fill: terraware.$tw-clr-icn-secondary;
132
132
  flex-shrink: 0;
133
133
  }
134
134
  }
@@ -145,34 +145,34 @@
145
145
  position: absolute;
146
146
  top: 0px;
147
147
  list-style-type: none;
148
- padding: $tw-spc-base-x-small 0;
149
- background: $tw-clr-bg;
150
- border: 1px solid $tw-clr-brdr-secondary;
151
- margin: $tw-spc-base-xx-small 0 0;
152
- border-radius: $tw-sz-base-x-small;
148
+ padding: terraware.$tw-spc-base-x-small 0;
149
+ background: terraware.$tw-clr-bg;
150
+ border: 1px solid terraware.$tw-clr-brdr-secondary;
151
+ margin: terraware.$tw-spc-base-xx-small 0 0;
152
+ border-radius: terraware.$tw-sz-base-x-small;
153
153
  max-height: 140px;
154
154
  overflow-y: auto;
155
155
 
156
156
  .select-value {
157
- font-family: $tw-fnt-frm-fld-select-value-font-family;
158
- font-size: $tw-fnt-frm-fld-select-value-font-size;
159
- font-weight: $tw-fnt-frm-fld-select-value-font-weight;
160
- line-height: $tw-fnt-frm-fld-select-value-line-height;
161
- padding: $tw-spc-base-x-small $tw-spc-base-small;
157
+ font-family: terraware.$tw-fnt-frm-fld-select-value-font-family;
158
+ font-size: terraware.$tw-fnt-frm-fld-select-value-font-size;
159
+ font-weight: terraware.$tw-fnt-frm-fld-select-value-font-weight;
160
+ line-height: terraware.$tw-fnt-frm-fld-select-value-line-height;
161
+ padding: terraware.$tw-spc-base-x-small terraware.$tw-spc-base-small;
162
162
  cursor: pointer;
163
163
 
164
164
  &:hover {
165
- background-color: $tw-clr-bg-selected-ghost-hover;
166
- color: $tw-clr-txt;
165
+ background-color: terraware.$tw-clr-bg-selected-ghost-hover;
166
+ color: terraware.$tw-clr-txt;
167
167
  }
168
168
 
169
169
  &:active {
170
- background-color: $tw-clr-bg-selected-ghost-active;
171
- color: $tw-clr-txt;
170
+ background-color: terraware.$tw-clr-bg-selected-ghost-active;
171
+ color: terraware.$tw-clr-txt;
172
172
  }
173
173
 
174
174
  &--disabled {
175
- opacity: $tw-opcty-semantic-off;
175
+ opacity: terraware.$tw-opcty-semantic-off;
176
176
  }
177
177
  }
178
178
  }