@viasat/beam-styles 2.37.0 → 2.38.1
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/components/checkbox.module.scss +1 -1
- package/components/combobox.module.scss +33 -19
- package/components/dateField.module.scss +5 -5
- package/components/input.vars.scss +66 -0
- package/components/nativeSelect.module.scss +11 -7
- package/components/panel.module.scss +61 -16
- package/components/radioButton.module.scss +1 -1
- package/components/search.module.scss +24 -13
- package/components/slider.module.scss +1 -1
- package/components/switch.module.scss +1 -1
- package/components/textArea.module.scss +2 -2
- package/components/textField.module.scss +12 -6
- package/package.json +1 -1
- package/styles.css +613 -159
- package/styles.css.map +1 -1
- package/styles.min.css +13 -11
- package/styles.min.css.map +1 -1
|
@@ -42,7 +42,7 @@ $checkboxStates: (
|
|
|
42
42
|
display: inherit;
|
|
43
43
|
word-break: break-word;
|
|
44
44
|
color: tokens.$bm-comp-input-color-text;
|
|
45
|
-
font: tokens.$bm-comp-input-typo-
|
|
45
|
+
font: tokens.$bm-comp-input-typo-md;
|
|
46
46
|
gap: tokens.$bm-comp-input-space-choice-gap-inside;
|
|
47
47
|
cursor: var(#{$inputChoiceLabelCursor}, pointer);
|
|
48
48
|
}
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
@use '../utils/mixins.scss' as mixins;
|
|
5
5
|
@use '../utils/cursors.scss' as cursors;
|
|
6
6
|
@use './icon.vars.scss' as iconVars;
|
|
7
|
+
@use './input.vars.scss' as inputVars;
|
|
7
8
|
|
|
8
9
|
@import '@viasat/beam-tokens/components/Input';
|
|
9
10
|
|
|
@@ -50,6 +51,8 @@ $stateStyleTokens: (
|
|
|
50
51
|
#{$labelSpaceBottom}: #{tokens.$bm-comp-label-space-bottom};
|
|
51
52
|
#{$helperTextSpaceTop}: #{tokens.$bm-comp-helper-text-space-top};
|
|
52
53
|
|
|
54
|
+
@include inputVars.field-size-scale;
|
|
55
|
+
|
|
53
56
|
&--fluid {
|
|
54
57
|
max-width: 100%;
|
|
55
58
|
}
|
|
@@ -79,11 +82,11 @@ $stateStyleTokens: (
|
|
|
79
82
|
position: relative;
|
|
80
83
|
cursor: var(#{$comboboxCursor}, pointer);
|
|
81
84
|
user-select: none;
|
|
82
|
-
font:
|
|
83
|
-
min-height:
|
|
85
|
+
font: var(#{inputVars.$fieldFont});
|
|
86
|
+
min-height: var(#{inputVars.$fieldHeight});
|
|
84
87
|
gap: tokens.$bm-comp-input-space-field-gap;
|
|
85
88
|
#{iconVars.$iconColor}: tokens.$bm-comp-input-color-icon;
|
|
86
|
-
#{iconVars.$iconSize}:
|
|
89
|
+
#{iconVars.$iconSize}: var(#{inputVars.$fieldIconSize});
|
|
87
90
|
|
|
88
91
|
&__chevron {
|
|
89
92
|
position: absolute;
|
|
@@ -94,12 +97,11 @@ $stateStyleTokens: (
|
|
|
94
97
|
@include mixins.svg-icon($expandIcon, $expandIconWidth $expandIconHeight);
|
|
95
98
|
background-color: tokens.$bm-comp-input-color-icon;
|
|
96
99
|
inset-inline-end: calc(
|
|
97
|
-
|
|
100
|
+
var(#{inputVars.$fieldPaddingX}) -
|
|
98
101
|
(var(#{iconVars.$iconSize}) - $expandIconWidth) / 2
|
|
99
102
|
);
|
|
100
103
|
inset-block-start: calc(
|
|
101
|
-
|
|
102
|
-
2
|
|
104
|
+
var(#{inputVars.$fieldHeight}) / 2 - var(#{iconVars.$iconSize}) / 2
|
|
103
105
|
);
|
|
104
106
|
|
|
105
107
|
transition: transform 0.2s ease;
|
|
@@ -119,26 +121,24 @@ $stateStyleTokens: (
|
|
|
119
121
|
flex: 0 0 auto;
|
|
120
122
|
gap: tokens.$bm-comp-input-space-field-gap;
|
|
121
123
|
min-height: calc(
|
|
122
|
-
|
|
124
|
+
var(#{inputVars.$fieldHeight}) - 2 *
|
|
123
125
|
tokens.$bm-comp-input-border-width-field-default - 2 *
|
|
124
|
-
|
|
126
|
+
var(#{inputVars.$fieldPaddingY})
|
|
125
127
|
);
|
|
126
128
|
line-height: calc(
|
|
127
|
-
|
|
129
|
+
var(#{inputVars.$fieldHeight}) - 2 *
|
|
128
130
|
tokens.$bm-comp-input-border-width-field-default - 2 *
|
|
129
|
-
|
|
131
|
+
var(#{inputVars.$fieldPaddingY})
|
|
130
132
|
);
|
|
131
133
|
}
|
|
132
134
|
|
|
133
135
|
&__input {
|
|
134
136
|
background: transparent;
|
|
135
137
|
min-height: calc(
|
|
136
|
-
|
|
137
|
-
tokens.$bm-comp-input-space-field-y
|
|
138
|
+
var(#{inputVars.$fieldHeight}) - 2 * var(#{inputVars.$fieldPaddingY})
|
|
138
139
|
);
|
|
139
140
|
line-height: calc(
|
|
140
|
-
|
|
141
|
-
tokens.$bm-comp-input-space-field-y
|
|
141
|
+
var(#{inputVars.$fieldHeight}) - 2 * var(#{inputVars.$fieldPaddingY})
|
|
142
142
|
);
|
|
143
143
|
|
|
144
144
|
&::placeholder {
|
|
@@ -171,6 +171,19 @@ $stateStyleTokens: (
|
|
|
171
171
|
margin-block: calc(-1 * tokens.$bm-comp-input-border-width-field-default);
|
|
172
172
|
}
|
|
173
173
|
|
|
174
|
+
// Beam icons in the content slots resize with the field; chips and the
|
|
175
|
+
// chevron are unaffected, per EPTOOLS-1515.
|
|
176
|
+
&__content-before,
|
|
177
|
+
&__content-after {
|
|
178
|
+
svg,
|
|
179
|
+
::slotted([slot*='content']) {
|
|
180
|
+
color: tokens.$bm-comp-input-color-icon;
|
|
181
|
+
height: tokens.$bm-primitive-dimension-100;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
@include inputVars.field-content-icon;
|
|
185
|
+
}
|
|
186
|
+
|
|
174
187
|
&__input {
|
|
175
188
|
flex: 1;
|
|
176
189
|
cursor: var(#{$comboboxInputCursor}, pointer);
|
|
@@ -181,7 +194,7 @@ $stateStyleTokens: (
|
|
|
181
194
|
outline: 0;
|
|
182
195
|
margin: 0;
|
|
183
196
|
padding: 0;
|
|
184
|
-
font:
|
|
197
|
+
font: var(#{inputVars.$fieldFont});
|
|
185
198
|
|
|
186
199
|
width: 100%;
|
|
187
200
|
min-width: 3rem;
|
|
@@ -231,13 +244,14 @@ $stateStyleTokens: (
|
|
|
231
244
|
tokens.$bm-sem-space-0
|
|
232
245
|
);
|
|
233
246
|
|
|
234
|
-
padding-block:
|
|
235
|
-
padding-inline:
|
|
247
|
+
padding-block: var(#{inputVars.$fieldPaddingY});
|
|
248
|
+
padding-inline: var(#{inputVars.$fieldPaddingX})
|
|
236
249
|
calc(
|
|
237
|
-
#{$expandIconWidth} + #{tokens.$bm-comp-input-space-field-gap} +
|
|
250
|
+
#{$expandIconWidth} + #{tokens.$bm-comp-input-space-field-gap} +
|
|
251
|
+
var(#{inputVars.$fieldPaddingX})
|
|
238
252
|
);
|
|
239
253
|
|
|
240
|
-
min-height:
|
|
254
|
+
min-height: var(#{inputVars.$fieldHeight});
|
|
241
255
|
|
|
242
256
|
&:focus-within {
|
|
243
257
|
@include mixins.simulated-inset-outline(
|
|
@@ -85,9 +85,9 @@ $stateStyleTokens: (
|
|
|
85
85
|
gap: tokens.$bm-comp-input-space-field-gap;
|
|
86
86
|
box-shadow: tokens.$bm-comp-input-shadow-field;
|
|
87
87
|
background-color: tokens.$bm-comp-input-color-bg;
|
|
88
|
-
height: tokens.$bm-comp-input-size-field-md
|
|
89
|
-
padding-block: tokens.$bm-comp-input-space-field-y;
|
|
90
|
-
padding-inline: tokens.$bm-comp-input-space-field-x;
|
|
88
|
+
height: tokens.$bm-comp-input-size-field-height-md;
|
|
89
|
+
padding-block: tokens.$bm-comp-input-space-field-y-md;
|
|
90
|
+
padding-inline: tokens.$bm-comp-input-space-field-x-md;
|
|
91
91
|
|
|
92
92
|
&:focus-within {
|
|
93
93
|
@include mixins.simulated-inset-outline(
|
|
@@ -103,7 +103,7 @@ $stateStyleTokens: (
|
|
|
103
103
|
display: inline-flex;
|
|
104
104
|
align-items: baseline;
|
|
105
105
|
color: tokens.$bm-comp-input-color-text;
|
|
106
|
-
font: tokens.$bm-comp-input-typo-
|
|
106
|
+
font: tokens.$bm-comp-input-typo-md;
|
|
107
107
|
font-variant-numeric: tabular-nums;
|
|
108
108
|
gap: tokens.$bm-sem-space-12;
|
|
109
109
|
}
|
|
@@ -140,7 +140,7 @@ $stateStyleTokens: (
|
|
|
140
140
|
|
|
141
141
|
&__field &__separator {
|
|
142
142
|
color: tokens.$bm-comp-input-color-text;
|
|
143
|
-
font: tokens.$bm-comp-input-typo-
|
|
143
|
+
font: tokens.$bm-comp-input-typo-md;
|
|
144
144
|
user-select: none;
|
|
145
145
|
}
|
|
146
146
|
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
@use 'sass:map';
|
|
2
|
+
@use '../utils/constants.scss';
|
|
3
|
+
@use '../utils/tokens.scss' as tokens;
|
|
4
|
+
@use './icon.vars.scss' as iconVars;
|
|
5
|
+
|
|
6
|
+
// Shared CSS custom-property names for the input field size scale. These are
|
|
7
|
+
// deliberately distinct from the generic icon size var so a Beam `<Icon>` placed
|
|
8
|
+
// in a field slot resizes with the field even when it carries its own size prop.
|
|
9
|
+
$fieldHeight: '--#{constants.$prefix}input-field-height';
|
|
10
|
+
$fieldPaddingX: '--#{constants.$prefix}input-field-padding-x';
|
|
11
|
+
$fieldPaddingY: '--#{constants.$prefix}input-field-padding-y';
|
|
12
|
+
$fieldFont: '--#{constants.$prefix}input-field-font';
|
|
13
|
+
$fieldIconSize: '--#{constants.$prefix}input-field-icon-size';
|
|
14
|
+
|
|
15
|
+
// Shared sm / md / lg size scale for every Beam input component (TextField,
|
|
16
|
+
// NativeSelect, Select, Autocomplete, Search). md uses the existing input
|
|
17
|
+
// component tokens; sm + lg use semantic tokens until the component tokens land.
|
|
18
|
+
// TODO(EPTOOLS-1515): replace the sm/lg semantic tokens with
|
|
19
|
+
// bm-comp-input-size-field-{sm,lg}-* component tokens once PR #1315 merges.
|
|
20
|
+
$sizes: (
|
|
21
|
+
'sm': (
|
|
22
|
+
'height': tokens.$bm-comp-input-size-field-height-sm,
|
|
23
|
+
'padding-y': tokens.$bm-comp-input-space-field-y-sm,
|
|
24
|
+
'padding-x': tokens.$bm-comp-input-space-field-x-sm,
|
|
25
|
+
'icon': tokens.$bm-comp-input-size-field-icon-sm,
|
|
26
|
+
'font': tokens.$bm-comp-input-typo-sm,
|
|
27
|
+
),
|
|
28
|
+
'md': (
|
|
29
|
+
'height': tokens.$bm-comp-input-size-field-height-md,
|
|
30
|
+
'padding-y': tokens.$bm-comp-input-space-field-y-md,
|
|
31
|
+
'padding-x': tokens.$bm-comp-input-space-field-x-md,
|
|
32
|
+
'icon': tokens.$bm-comp-input-size-field-icon-md,
|
|
33
|
+
'font': tokens.$bm-comp-input-typo-md,
|
|
34
|
+
),
|
|
35
|
+
'lg': (
|
|
36
|
+
'height': tokens.$bm-comp-input-size-field-height-lg,
|
|
37
|
+
'padding-y': tokens.$bm-comp-input-space-field-y-lg,
|
|
38
|
+
'padding-x': tokens.$bm-comp-input-space-field-x-lg,
|
|
39
|
+
'icon': tokens.$bm-comp-input-size-field-icon-lg,
|
|
40
|
+
'font': tokens.$bm-comp-input-typo-lg,
|
|
41
|
+
),
|
|
42
|
+
);
|
|
43
|
+
// Emits the per-size field custom properties. Include inside an input
|
|
44
|
+
// component's root block.
|
|
45
|
+
@mixin field-size-scale {
|
|
46
|
+
@each $size, $props in $sizes {
|
|
47
|
+
&--#{$size} &__field {
|
|
48
|
+
#{$fieldHeight}: #{map.get($props, 'height')};
|
|
49
|
+
#{$fieldPaddingY}: #{map.get($props, 'padding-y')};
|
|
50
|
+
#{$fieldPaddingX}: #{map.get($props, 'padding-x')};
|
|
51
|
+
#{$fieldFont}: #{map.get($props, 'font')};
|
|
52
|
+
#{$fieldIconSize}: #{map.get($props, 'icon')};
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// Resize rule for Beam icons (.bm-icon) inside an input content slot: they track
|
|
58
|
+
// the field icon size via the dedicated var, which an Icon's own size prop cannot
|
|
59
|
+
// shadow. Non-Beam (third-party) SVGs are left untouched. Include inside the
|
|
60
|
+
// component's content-slot selector.
|
|
61
|
+
@mixin field-content-icon {
|
|
62
|
+
.#{iconVars.$iconBaseClass} {
|
|
63
|
+
width: var(#{$fieldIconSize});
|
|
64
|
+
height: var(#{$fieldIconSize});
|
|
65
|
+
}
|
|
66
|
+
}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
@use '../utils/tokens.scss' as tokens;
|
|
4
4
|
@use '../utils/mixins.scss' as mixins;
|
|
5
5
|
@use '../utils/cursors.scss' as cursors;
|
|
6
|
+
@use './input.vars.scss' as inputVars;
|
|
6
7
|
|
|
7
8
|
@import '@viasat/beam-tokens/components/Input';
|
|
8
9
|
|
|
@@ -46,6 +47,8 @@ $stateStyleTokens: (
|
|
|
46
47
|
#{$labelSpaceBottom}: #{tokens.$bm-comp-label-space-bottom};
|
|
47
48
|
#{$helperTextSpaceTop}: #{tokens.$bm-comp-helper-text-space-top};
|
|
48
49
|
|
|
50
|
+
@include inputVars.field-size-scale;
|
|
51
|
+
|
|
49
52
|
&--fluid {
|
|
50
53
|
max-width: 100%;
|
|
51
54
|
}
|
|
@@ -69,9 +72,9 @@ $stateStyleTokens: (
|
|
|
69
72
|
|
|
70
73
|
@include mixins.svg-icon($expandIcon);
|
|
71
74
|
background-color: tokens.$bm-comp-input-color-icon;
|
|
72
|
-
inset-inline-end:
|
|
75
|
+
inset-inline-end: var(#{inputVars.$fieldPaddingX});
|
|
73
76
|
inset-block-start: calc(
|
|
74
|
-
#{
|
|
77
|
+
var(#{inputVars.$fieldPaddingX}) + #{$expandIconHeight} / 2
|
|
75
78
|
);
|
|
76
79
|
}
|
|
77
80
|
}
|
|
@@ -110,21 +113,22 @@ $stateStyleTokens: (
|
|
|
110
113
|
border-width: tokens.$bm-comp-input-border-width-field-default;
|
|
111
114
|
|
|
112
115
|
color: tokens.$bm-comp-input-color-text;
|
|
113
|
-
font:
|
|
116
|
+
font: var(#{inputVars.$fieldFont});
|
|
114
117
|
cursor: var(#{$selectInputCursor}, pointer);
|
|
115
118
|
box-shadow: tokens.$bm-comp-input-shadow-field;
|
|
116
119
|
background-color: tokens.$bm-comp-input-color-bg;
|
|
117
|
-
height:
|
|
120
|
+
height: var(#{inputVars.$fieldHeight});
|
|
118
121
|
transform: translate3d(
|
|
119
122
|
tokens.$bm-sem-space-0,
|
|
120
123
|
tokens.$bm-sem-space-0,
|
|
121
124
|
tokens.$bm-sem-space-0
|
|
122
125
|
);
|
|
123
126
|
|
|
124
|
-
padding-block:
|
|
125
|
-
padding-inline:
|
|
127
|
+
padding-block: var(#{inputVars.$fieldPaddingY});
|
|
128
|
+
padding-inline: var(#{inputVars.$fieldPaddingX})
|
|
126
129
|
calc(
|
|
127
|
-
#{$expandIconWidth} + #{tokens.$bm-comp-input-space-field-gap} +
|
|
130
|
+
#{$expandIconWidth} + #{tokens.$bm-comp-input-space-field-gap} +
|
|
131
|
+
var(#{inputVars.$fieldPaddingX})
|
|
128
132
|
);
|
|
129
133
|
|
|
130
134
|
&:focus {
|
|
@@ -22,7 +22,7 @@ $panel-sizes: (
|
|
|
22
22
|
display: flex;
|
|
23
23
|
flex-direction: column;
|
|
24
24
|
|
|
25
|
-
background-color: tokens.$bm-
|
|
25
|
+
background-color: tokens.$bm-comp-panel-color-bg;
|
|
26
26
|
|
|
27
27
|
&--inline {
|
|
28
28
|
position: relative;
|
|
@@ -70,16 +70,31 @@ $panel-sizes: (
|
|
|
70
70
|
|
|
71
71
|
$floating-positions: (
|
|
72
72
|
'start': (
|
|
73
|
-
'x': (
|
|
74
|
-
|
|
73
|
+
'x': (
|
|
74
|
+
'left',
|
|
75
|
+
),
|
|
76
|
+
'y': (
|
|
77
|
+
'top',
|
|
78
|
+
'bottom',
|
|
79
|
+
),
|
|
75
80
|
),
|
|
76
81
|
'end': (
|
|
77
|
-
'x': (
|
|
78
|
-
|
|
82
|
+
'x': (
|
|
83
|
+
'right',
|
|
84
|
+
),
|
|
85
|
+
'y': (
|
|
86
|
+
'top',
|
|
87
|
+
'bottom',
|
|
88
|
+
),
|
|
79
89
|
),
|
|
80
90
|
'bottom': (
|
|
81
|
-
'x': (
|
|
82
|
-
|
|
91
|
+
'x': (
|
|
92
|
+
'left',
|
|
93
|
+
'right',
|
|
94
|
+
),
|
|
95
|
+
'y': (
|
|
96
|
+
'bottom',
|
|
97
|
+
),
|
|
83
98
|
),
|
|
84
99
|
);
|
|
85
100
|
|
|
@@ -308,9 +323,27 @@ $panel-sizes: (
|
|
|
308
323
|
$panelResizeHandleSize: 0.75rem;
|
|
309
324
|
|
|
310
325
|
$resize-handle-positions: (
|
|
311
|
-
'start':
|
|
312
|
-
|
|
313
|
-
|
|
326
|
+
'start': (
|
|
327
|
+
cursor: col-resize,
|
|
328
|
+
size-prop: width,
|
|
329
|
+
stretch: inset-block,
|
|
330
|
+
placement: inset-inline-end,
|
|
331
|
+
border-side: inline-end,
|
|
332
|
+
),
|
|
333
|
+
'end': (
|
|
334
|
+
cursor: col-resize,
|
|
335
|
+
size-prop: width,
|
|
336
|
+
stretch: inset-block,
|
|
337
|
+
placement: inset-inline-start,
|
|
338
|
+
border-side: inline-start,
|
|
339
|
+
),
|
|
340
|
+
'bottom': (
|
|
341
|
+
cursor: row-resize,
|
|
342
|
+
size-prop: height,
|
|
343
|
+
stretch: inset-inline,
|
|
344
|
+
placement: inset-block-start,
|
|
345
|
+
border-side: block-start,
|
|
346
|
+
),
|
|
314
347
|
);
|
|
315
348
|
|
|
316
349
|
@each $pos, $cfg in $resize-handle-positions {
|
|
@@ -337,11 +370,15 @@ $resize-handle-positions: (
|
|
|
337
370
|
&[data-status='open'] {
|
|
338
371
|
transition: $prop $duration ease-out;
|
|
339
372
|
#{$prop}: $visible;
|
|
340
|
-
@media (prefers-reduced-motion: reduce) {
|
|
373
|
+
@media (prefers-reduced-motion: reduce) {
|
|
374
|
+
transition: none;
|
|
375
|
+
}
|
|
341
376
|
}
|
|
342
377
|
&[data-status='close'] {
|
|
343
378
|
transition: $prop $duration ease-in;
|
|
344
|
-
@media (prefers-reduced-motion: reduce) {
|
|
379
|
+
@media (prefers-reduced-motion: reduce) {
|
|
380
|
+
transition: none;
|
|
381
|
+
}
|
|
345
382
|
}
|
|
346
383
|
}
|
|
347
384
|
|
|
@@ -370,13 +407,17 @@ $resize-handle-positions: (
|
|
|
370
407
|
&[data-status] {
|
|
371
408
|
width: 0;
|
|
372
409
|
transition: width $panel-transition-duration ease-in;
|
|
373
|
-
@media (prefers-reduced-motion: reduce) {
|
|
410
|
+
@media (prefers-reduced-motion: reduce) {
|
|
411
|
+
transition: none;
|
|
412
|
+
}
|
|
374
413
|
}
|
|
375
414
|
|
|
376
415
|
&[data-status='open'] {
|
|
377
416
|
width: var(#{$panelSizeVar}, #{tokens.$bm-comp-panel-size-md});
|
|
378
417
|
transition: width $panel-transition-duration ease-out;
|
|
379
|
-
@media (prefers-reduced-motion: reduce) {
|
|
418
|
+
@media (prefers-reduced-motion: reduce) {
|
|
419
|
+
transition: none;
|
|
420
|
+
}
|
|
380
421
|
}
|
|
381
422
|
|
|
382
423
|
&[data-position='bottom'][data-status] {
|
|
@@ -388,14 +429,18 @@ $resize-handle-positions: (
|
|
|
388
429
|
.#{$panelBaseClass}__inline-wrapper-content {
|
|
389
430
|
transform: translateY(100%);
|
|
390
431
|
transition: transform $panel-transition-duration ease-in;
|
|
391
|
-
@media (prefers-reduced-motion: reduce) {
|
|
432
|
+
@media (prefers-reduced-motion: reduce) {
|
|
433
|
+
transition: none;
|
|
434
|
+
}
|
|
392
435
|
}
|
|
393
436
|
|
|
394
437
|
&[data-position='bottom'][data-status='open']
|
|
395
438
|
.#{$panelBaseClass}__inline-wrapper-content {
|
|
396
439
|
transform: translateY(0);
|
|
397
440
|
transition: transform $panel-transition-duration ease-out;
|
|
398
|
-
@media (prefers-reduced-motion: reduce) {
|
|
441
|
+
@media (prefers-reduced-motion: reduce) {
|
|
442
|
+
transition: none;
|
|
443
|
+
}
|
|
399
444
|
}
|
|
400
445
|
}
|
|
401
446
|
|
|
@@ -42,7 +42,7 @@ $radioButtonStates: (
|
|
|
42
42
|
display: inherit;
|
|
43
43
|
word-break: break-word;
|
|
44
44
|
color: tokens.$bm-comp-input-color-text;
|
|
45
|
-
font: tokens.$bm-comp-input-typo-
|
|
45
|
+
font: tokens.$bm-comp-input-typo-md;
|
|
46
46
|
gap: tokens.$bm-comp-input-space-choice-gap-inside;
|
|
47
47
|
cursor: var(#{$inputChoiceLabelCursor}, pointer);
|
|
48
48
|
pointer-events: var(#{$inputChoiceLabelPointerEvents}, auto);
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
@use '../utils/cursors.scss' as cursors;
|
|
6
6
|
@use './icon.vars.scss' as iconVars;
|
|
7
7
|
@use './actionList.vars.scss' as actionListVars;
|
|
8
|
+
@use './input.vars.scss' as inputVars;
|
|
8
9
|
|
|
9
10
|
@import '@viasat/beam-tokens/components/Input';
|
|
10
11
|
|
|
@@ -47,6 +48,8 @@ $stateStyleTokens: (
|
|
|
47
48
|
|
|
48
49
|
#{$labelSpaceBottom}: #{tokens.$bm-comp-label-space-bottom};
|
|
49
50
|
|
|
51
|
+
@include inputVars.field-size-scale;
|
|
52
|
+
|
|
50
53
|
&--fluid {
|
|
51
54
|
max-width: 100%;
|
|
52
55
|
}
|
|
@@ -59,11 +62,11 @@ $stateStyleTokens: (
|
|
|
59
62
|
position: relative;
|
|
60
63
|
cursor: var(#{$searchCursor}, pointer);
|
|
61
64
|
user-select: none;
|
|
62
|
-
font:
|
|
63
|
-
min-height:
|
|
65
|
+
font: var(#{inputVars.$fieldFont});
|
|
66
|
+
min-height: var(#{inputVars.$fieldHeight});
|
|
64
67
|
gap: tokens.$bm-comp-input-space-field-gap;
|
|
65
68
|
#{iconVars.$iconColor}: tokens.$bm-comp-input-color-icon;
|
|
66
|
-
#{iconVars.$iconSize}:
|
|
69
|
+
#{iconVars.$iconSize}: var(#{inputVars.$fieldIconSize});
|
|
67
70
|
|
|
68
71
|
&__input {
|
|
69
72
|
display: flex;
|
|
@@ -71,14 +74,18 @@ $stateStyleTokens: (
|
|
|
71
74
|
flex: 0 0 auto;
|
|
72
75
|
gap: tokens.$bm-comp-input-space-field-gap;
|
|
73
76
|
background: transparent;
|
|
74
|
-
min-height: calc(
|
|
75
|
-
|
|
77
|
+
min-height: calc(
|
|
78
|
+
var(#{inputVars.$fieldHeight}) - 2 * var(#{inputVars.$fieldPaddingY})
|
|
79
|
+
);
|
|
80
|
+
line-height: calc(
|
|
81
|
+
var(#{inputVars.$fieldHeight}) - 2 * var(#{inputVars.$fieldPaddingY})
|
|
82
|
+
);
|
|
76
83
|
|
|
77
84
|
&::-webkit-search-decoration,
|
|
78
85
|
&::-webkit-search-cancel-button,
|
|
79
86
|
&::-webkit-search-results-button,
|
|
80
87
|
&::-webkit-search-results-decoration {
|
|
81
|
-
-webkit-appearance:none;
|
|
88
|
+
-webkit-appearance: none;
|
|
82
89
|
}
|
|
83
90
|
|
|
84
91
|
&::placeholder {
|
|
@@ -94,14 +101,15 @@ $stateStyleTokens: (
|
|
|
94
101
|
outline: 0;
|
|
95
102
|
margin: 0;
|
|
96
103
|
padding: 0;
|
|
97
|
-
font:
|
|
104
|
+
font: var(#{inputVars.$fieldFont});
|
|
98
105
|
|
|
99
106
|
width: 100%;
|
|
100
107
|
min-width: $searchInputMinWidth;
|
|
101
108
|
}
|
|
102
109
|
}
|
|
103
110
|
|
|
104
|
-
&--disabled,
|
|
111
|
+
&--disabled,
|
|
112
|
+
&--disabled &__field {
|
|
105
113
|
#{$searchCursor}: not-allowed;
|
|
106
114
|
#{$searchInputCursor}: not-allowed;
|
|
107
115
|
}
|
|
@@ -148,10 +156,10 @@ $stateStyleTokens: (
|
|
|
148
156
|
tokens.$bm-sem-space-0
|
|
149
157
|
);
|
|
150
158
|
|
|
151
|
-
padding-block:
|
|
152
|
-
padding-inline:
|
|
159
|
+
padding-block: var(#{inputVars.$fieldPaddingY});
|
|
160
|
+
padding-inline: var(#{inputVars.$fieldPaddingX});
|
|
153
161
|
|
|
154
|
-
min-height:
|
|
162
|
+
min-height: var(#{inputVars.$fieldHeight});
|
|
155
163
|
|
|
156
164
|
&:focus-within {
|
|
157
165
|
@include mixins.simulated-inset-outline(
|
|
@@ -176,9 +184,12 @@ $stateStyleTokens: (
|
|
|
176
184
|
svg,
|
|
177
185
|
::slotted([slot*='content']) {
|
|
178
186
|
color: tokens.$bm-comp-input-color-icon;
|
|
179
|
-
|
|
180
|
-
height: tokens.$bm-comp-input-size-field-icon;
|
|
187
|
+
height: tokens.$bm-primitive-dimension-100;
|
|
181
188
|
}
|
|
189
|
+
|
|
190
|
+
// Beam icons resize with the field; third-party SVGs keep the fixed size
|
|
191
|
+
// set above, per EPTOOLS-1515 acceptance criteria.
|
|
192
|
+
@include inputVars.field-content-icon;
|
|
182
193
|
}
|
|
183
194
|
|
|
184
195
|
&__dropdown {
|
|
@@ -42,7 +42,7 @@ $switchStates: (
|
|
|
42
42
|
gap: tokens.$bm-comp-input-space-choice-gap-inside;
|
|
43
43
|
min-width: tokens.$bm-comp-input-size-choice-switch-width;
|
|
44
44
|
min-height: tokens.$bm-comp-input-size-choice-switch-height;
|
|
45
|
-
font: tokens.$bm-comp-input-typo-
|
|
45
|
+
font: tokens.$bm-comp-input-typo-md;
|
|
46
46
|
color: tokens.$bm-comp-input-color-text;
|
|
47
47
|
cursor: var(#{$inputChoiceLabelCursor}, pointer);
|
|
48
48
|
pointer-events: var(#{$inputChoiceLabelPointerEvents}, auto);
|
|
@@ -151,12 +151,12 @@ $stateStyleTokens: (
|
|
|
151
151
|
border-width: tokens.$bm-comp-input-border-width-field-default;
|
|
152
152
|
|
|
153
153
|
color: tokens.$bm-comp-input-color-text;
|
|
154
|
-
font: tokens.$bm-comp-input-typo-
|
|
154
|
+
font: tokens.$bm-comp-input-typo-md;
|
|
155
155
|
cursor: var(#{$textAreaInputCursor}, text);
|
|
156
156
|
box-shadow: tokens.$bm-comp-input-shadow-field;
|
|
157
157
|
background-color: tokens.$bm-comp-input-color-bg;
|
|
158
158
|
min-height: tokens.$bm-comp-input-size-field-text-area-height;
|
|
159
|
-
padding: tokens.$bm-comp-input-space-field-y tokens.$bm-comp-input-space-field-x;
|
|
159
|
+
padding: tokens.$bm-comp-input-space-field-y-md tokens.$bm-comp-input-space-field-x-md;
|
|
160
160
|
transform: translate3d(
|
|
161
161
|
tokens.$bm-sem-space-0,
|
|
162
162
|
tokens.$bm-sem-space-0,
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
@use '../utils/mixins.scss' as mixins;
|
|
4
4
|
@use '../utils/tokens.scss' as tokens;
|
|
5
5
|
@use '../utils/cursors.scss' as cursors;
|
|
6
|
+
@use './input.vars.scss' as inputVars;
|
|
6
7
|
|
|
7
8
|
@import '@viasat/beam-tokens/components/Input';
|
|
8
9
|
|
|
@@ -44,6 +45,8 @@ $stateStyleTokens: (
|
|
|
44
45
|
#{$labelSpaceBottom}: #{tokens.$bm-comp-label-space-bottom};
|
|
45
46
|
#{$helperTextSpaceTop}: #{tokens.$bm-comp-helper-text-space-top};
|
|
46
47
|
|
|
48
|
+
@include inputVars.field-size-scale;
|
|
49
|
+
|
|
47
50
|
@each $state, $styleTokens in $stateStyleTokens {
|
|
48
51
|
&--#{$state} &__field {
|
|
49
52
|
border-color: map.get($styleTokens, borderColor);
|
|
@@ -109,8 +112,8 @@ $stateStyleTokens: (
|
|
|
109
112
|
gap: tokens.$bm-comp-input-space-field-gap;
|
|
110
113
|
box-shadow: tokens.$bm-comp-input-shadow-field;
|
|
111
114
|
background-color: tokens.$bm-comp-input-color-bg;
|
|
112
|
-
height:
|
|
113
|
-
padding:
|
|
115
|
+
height: var(#{inputVars.$fieldHeight});
|
|
116
|
+
padding: var(#{inputVars.$fieldPaddingY}) var(#{inputVars.$fieldPaddingX});
|
|
114
117
|
|
|
115
118
|
&:focus-within {
|
|
116
119
|
@include mixins.simulated-inset-outline(
|
|
@@ -130,7 +133,7 @@ $stateStyleTokens: (
|
|
|
130
133
|
width: 100%;
|
|
131
134
|
padding: tokens.$bm-sem-space-0;
|
|
132
135
|
color: tokens.$bm-comp-input-color-text;
|
|
133
|
-
font:
|
|
136
|
+
font: var(#{inputVars.$fieldFont});
|
|
134
137
|
cursor: var(#{$textFieldInputCursor}, text);
|
|
135
138
|
|
|
136
139
|
&:-webkit-autofill {
|
|
@@ -138,7 +141,7 @@ $stateStyleTokens: (
|
|
|
138
141
|
-webkit-text-fill-color: tokens.$bm-comp-input-color-text;
|
|
139
142
|
|
|
140
143
|
@include mixins.simulated-inset-border(
|
|
141
|
-
|
|
144
|
+
var(#{inputVars.$fieldHeight}),
|
|
142
145
|
tokens.$bm-comp-input-color-bg
|
|
143
146
|
);
|
|
144
147
|
}
|
|
@@ -155,8 +158,11 @@ $stateStyleTokens: (
|
|
|
155
158
|
svg,
|
|
156
159
|
::slotted([slot*='content']) {
|
|
157
160
|
color: tokens.$bm-comp-input-color-icon;
|
|
158
|
-
|
|
159
|
-
height: tokens.$bm-comp-input-size-field-icon;
|
|
161
|
+
height: tokens.$bm-primitive-dimension-100;
|
|
160
162
|
}
|
|
163
|
+
|
|
164
|
+
// Beam icons resize with the field; third-party SVGs keep the fixed size
|
|
165
|
+
// set above, per EPTOOLS-1515 acceptance criteria.
|
|
166
|
+
@include inputVars.field-content-icon;
|
|
161
167
|
}
|
|
162
168
|
}
|