Skip to content

Commit de9337a

Browse files
lazdGarthDB
lazd
authored and
GarthDB
committed
fix: make InputGroup build again
1 parent 4a451c2 commit de9337a

2 files changed

Lines changed: 23 additions & 23 deletions

File tree

‎components/inputgroup/index.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ governing permissions and limitations under the License.
5757
);
5858
--spectrum-datepicker-range-dash-padding-top: 0;
5959
--spectrum-datepicker-range-dash-line-height: calc(
60-
var(--spectrum-textfield-height) - var(--spectrum-global-dimension-size-100)
60+
var(--spectrum-textfield-m-height) - var(--spectrum-global-dimension-size-100)
6161
);
6262

6363
/* be square: we're a little ahead of DNA at the time of writing, but Nate said so */
@@ -66,7 +66,7 @@ governing permissions and limitations under the License.
6666
);
6767

6868
--spectrum-combobox-quiet-button-offset: calc(
69-
var(--spectrum-fieldbutton-min-width) / 2 -
69+
var(--spectrum-actionbutton-m-min-width) / 2 -
7070
var(--spectrum-icon-chevron-down-medium-width) / 2
7171
);
7272
}
@@ -123,7 +123,7 @@ governing permissions and limitations under the License.
123123
--spectrum-combobox-quiet-fieldbutton-padding-right
124124
);
125125

126-
border-block-end: var(--spectrum-textfield-quiet-border-size) solid;
126+
border-block-end: var(--spectrum-textfield-quiet-m-border-size) solid;
127127
border-radius: var(--spectrum-combobox-quiet-fieldbutton-border-radius);
128128

129129
/* More hitarea */

‎components/inputgroup/skin.css‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -15,35 +15,35 @@ governing permissions and limitations under the License.
1515
&:not(.is-invalid) {
1616
.spectrum-InputGroup-textfield {
1717
.spectrum-InputGroup-input {
18-
border-color: var(--spectrum-textfield-border-color-key-focus);
18+
border-color: var(--spectrum-textfield-m-border-color-key-focus);
1919
}
2020
}
2121
.spectrum-InputGroup-button {
22-
border-color: var(--spectrum-textfield-border-color-key-focus);
22+
border-color: var(--spectrum-textfield-m-border-color-key-focus);
2323
}
2424
}
2525
}
2626
&:hover {
2727
&:not(.is-focused):not(.is-keyboardFocused):not(.is-disabled) {
2828
.spectrum-InputGroup-textfield {
2929
.spectrum-InputGroup-input {
30-
border-color: var(--spectrum-textfield-border-color-hover);
30+
border-color: var(--spectrum-textfield-m-border-color-hover);
3131
}
3232
}
3333

3434
.spectrum-InputGroup-button {
35-
border-color: var(--spectrum-textfield-border-color-hover);
35+
border-color: var(--spectrum-textfield-m-border-color-hover);
3636
}
3737

3838
&.is-invalid {
3939
.spectrum-InputGroup-textfield {
4040
.spectrum-InputGroup-input {
41-
border-color: var(--spectrum-textfield-border-color-error-hover);
41+
border-color: var(--spectrum-textfield-m-border-color-error-hover);
4242
}
4343
}
4444

4545
.spectrum-InputGroup-button {
46-
border-color: var(--spectrum-textfield-border-color-error-hover);
46+
border-color: var(--spectrum-textfield-m-border-color-error-hover);
4747
}
4848
}
4949
}
@@ -59,21 +59,21 @@ governing permissions and limitations under the License.
5959
.spectrum-InputGroup.is-focused {
6060
.spectrum-InputGroup-button,
6161
.spectrum-InputGroup-input {
62-
border-color: var(--spectrum-picker-border-color-key-focus);
62+
border-color: var(--spectrum-picker-m-border-color-key-focus);
6363
}
6464

6565
&.is-invalid {
6666
.spectrum-InputGroup-button,
6767
.spectrum-InputGroup-input {
68-
border-color: var(--spectrum-picker-border-color-error);
68+
border-color: var(--spectrum-picker-m-border-color-error);
6969
}
7070
}
7171
}
7272

7373
/* Only add the 2px ring for keyboard focus */
7474
.spectrum-InputGroup:not(.spectrum-InputGroup--quiet).is-keyboardFocused {
7575
& {
76-
box-shadow: 0 0 0 1px var(--spectrum-picker-border-color-key-focus);
76+
box-shadow: 0 0 0 1px var(--spectrum-picker-m-border-color-key-focus);
7777
}
7878

7979
.spectrum-InputGroup-input,
@@ -83,12 +83,12 @@ governing permissions and limitations under the License.
8383

8484
&.is-invalid {
8585
& {
86-
box-shadow: 0 0 0 1px var(--spectrum-picker-border-color-error-key-focus);
86+
box-shadow: 0 0 0 1px var(--spectrum-picker-m-border-color-error-key-focus);
8787
}
8888

8989
.spectrum-InputGroup-button,
9090
.spectrum-InputGroup-input {
91-
border-color: var(--spectrum-picker-border-color-error-key-focus);
91+
border-color: var(--spectrum-picker-m-border-color-error-key-focus);
9292
}
9393
}
9494

@@ -107,48 +107,48 @@ governing permissions and limitations under the License.
107107
&.is-invalid,
108108
&:disabled,
109109
&:disabled:hover {
110-
border-color: var(--spectrum-textfield-quiet-border-color);
110+
border-color: var(--spectrum-textfield-quiet-m-border-color);
111111
}
112112
}
113113

114114
&:hover:not(.is-focused):not(.is-keyboardFocused):not(.is-disabled) {
115115
.spectrum-InputGroup-input,
116116
.spectrum-InputGroup-button {
117-
border-color: var(--spectrum-textfield-quiet-border-color-hover);
117+
border-color: var(--spectrum-textfield-quiet-m-border-color-hover);
118118
}
119119
}
120120

121121
&.is-invalid {
122122
.spectrum-InputGroup-input,
123123
.spectrum-InputGroup-button {
124-
border-color: var(--spectrum-textfield-quiet-border-color-error);
124+
border-color: var(--spectrum-textfield-quiet-m-border-color-error);
125125
}
126126
}
127127

128128
&.is-focused {
129129
.spectrum-InputGroup-input,
130130
.spectrum-InputGroup-button {
131-
border-color: var(--spectrum-textfield-quiet-border-color-mouse-focus);
131+
border-color: var(--spectrum-textfield-quiet-m-border-color-mouse-focus);
132132
}
133133
&.is-invalid {
134134
.spectrum-InputGroup-input,
135135
.spectrum-InputGroup-button {
136-
border-color: var(--spectrum-textfield-quiet-border-color-error-mouse-focus);
136+
border-color: var(--spectrum-textfield-quiet-m-border-color-error-mouse-focus);
137137
}
138138
}
139139
}
140140

141141
&.is-keyboardFocused {
142142
.spectrum-InputGroup-input,
143143
.spectrum-InputGroup-button {
144-
box-shadow: 0 1px 0 var(--spectrum-textfield-quiet-border-color-key-focus);
145-
border-color: var(--spectrum-textfield-quiet-border-color-key-focus);
144+
box-shadow: 0 1px 0 var(--spectrum-textfield-quiet-m-border-color-key-focus);
145+
border-color: var(--spectrum-textfield-quiet-m-border-color-key-focus);
146146
}
147147
&.is-invalid {
148148
.spectrum-InputGroup-input,
149149
.spectrum-InputGroup-button {
150-
box-shadow: 0 1px 0 var(--spectrum-picker-border-color-error-key-focus);
151-
border-color: var(--spectrum-picker-border-color-error-key-focus);
150+
box-shadow: 0 1px 0 var(--spectrum-picker-m-border-color-error-key-focus);
151+
border-color: var(--spectrum-picker-m-border-color-error-key-focus);
152152
}
153153
}
154154
}

0 commit comments

Comments
 (0)