Skip to content

Commit 1971972

Browse files
kflournoy-sfkflournoy-sf
authored
fix(scss notation): fix & notation for inputs (#5003)
1 parent 42b64b5 commit 1971972

File tree

2 files changed

+145
-141
lines changed

2 files changed

+145
-141
lines changed

‎ui/components/input/base/_index.scss

Lines changed: 125 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -68,48 +68,48 @@
6868
direction: ltr;
6969
text-align: left;
7070
}
71+
}
7172

72-
/**
73-
* Removes aesthetic nature from an input
74-
*
75-
* @selector .slds-input_bare
76-
* @restrict .slds-input, input, textarea
77-
* @modifier
78-
*/
79-
80-
&_bare,
81-
&--bare {
82-
/*! @css-var-fallback background-color */
83-
--slds-c-input-color-background: transparent;
73+
/**
74+
* Removes aesthetic nature from an input
75+
*
76+
* @selector .slds-input_bare
77+
* @restrict .slds-input, input, textarea
78+
* @modifier
79+
*/
80+
81+
.slds-input_bare,
82+
.slds-input--bare {
83+
/*! @css-var-fallback background-color */
84+
--slds-c-input-color-background: transparent;
8485

85-
/*! @css-var-fallback padding-right */
86-
--slds-c-input-spacing-horizontal-end: 0;
86+
/*! @css-var-fallback padding-right */
87+
--slds-c-input-spacing-horizontal-end: 0;
8788

88-
/*! @css-var-fallback padding-left */
89-
--slds-c-input-spacing-horizontal-start: #{$spacing-small};
89+
/*! @css-var-fallback padding-left */
90+
--slds-c-input-spacing-horizontal-start: #{$spacing-small};
9091

91-
/*! @css-var-fallback color */
92-
--slds-c-input-text-color: #{$color-text-default};
93-
border: 0;
92+
/*! @css-var-fallback color */
93+
--slds-c-input-text-color: #{$color-text-default};
94+
border: 0;
9495

95-
&:focus,
96-
&:active {
97-
/*! @css-var-fallback box-shadow */
98-
--slds-c-input-shadow-focus: none;
99-
}
96+
&:focus,
97+
&:active {
98+
/*! @css-var-fallback box-shadow */
99+
--slds-c-input-shadow-focus: none;
100100
}
101+
}
101102

102-
/**
103-
* Used to apply an input size to another element thats a non input
104-
* Because sometimes I need elements the same height as inputs
105-
*
106-
* @selector .slds-input_height
107-
* @restrict .slds-input
108-
*/
109-
&_height,
110-
&--height {
111-
min-height: calc(#{$height-input} + (#{$border-width-thin} * 2)); // For IE
112-
}
103+
/**
104+
* Used to apply an input size to another element thats a non input
105+
* Because sometimes I need elements the same height as inputs
106+
*
107+
* @selector .slds-input_height
108+
* @restrict .slds-input
109+
*/
110+
.slds-input_height,
111+
.slds-input--height {
112+
min-height: calc(#{$height-input} + (#{$border-width-thin} * 2)); // For IE
113113
}
114114

115115
/**
@@ -176,102 +176,106 @@
176176
.slds-input__icon:not(button) {
177177
pointer-events: none;
178178
}
179+
}
179180

180-
/**
181-
* @summary Positions .slds-input__icon to the left of the text input
182-
*
183-
* @selector .slds-input-has-icon_left
184-
* @restrict .slds-input-has-icon
185-
*/
186-
&_left,
187-
&--left {
188-
189-
.slds-input__icon {
190-
left: $spacing-small;
191-
}
192-
193-
.slds-input,
194-
.slds-input_faux,
195-
.slds-input_bare,
196-
.slds-input--bare {
197-
/*! @css-var-fallback padding-left */
198-
--slds-c-input-spacing-horizontal-start: #{$spacing-x-large};
199-
}
181+
/**
182+
* @summary Positions .slds-input__icon to the left of the text input
183+
*
184+
* @selector .slds-input-has-icon_left
185+
* @restrict .slds-input-has-icon
186+
*/
187+
.slds-input-has-icon_left,
188+
.slds-input-has-icon--left {
189+
190+
.slds-input__icon {
191+
left: $spacing-small;
192+
}
193+
194+
.slds-input,
195+
.slds-input_faux,
196+
.slds-input_bare,
197+
.slds-input--bare {
198+
/*! @css-var-fallback padding-left */
199+
--slds-c-input-spacing-horizontal-start: #{$spacing-x-large};
200200
}
201+
}
202+
203+
/**
204+
* @summary Positions .slds-input__icon to the right of the text input
205+
*
206+
* @selector .slds-input-has-icon_right
207+
* @restrict .slds-input-has-icon
208+
*/
209+
.slds-input-has-icon_right,
210+
.slds-input-has-icon--right {
211+
212+
.slds-input__icon {
213+
right: $spacing-small;
214+
}
215+
216+
.slds-input,
217+
.slds-input_faux,
218+
.slds-input_bare,
219+
.slds-input--bare {
220+
/*! @css-var-fallback padding-right */
221+
--slds-c-input-spacing-horizontal-end: #{$spacing-x-large};
222+
}
223+
}
201224

225+
/**
226+
* @summary Positions .slds-input__icon_left to the left of the text input and .slds-input__icon_right to the right of the text input
227+
*
228+
* @selector .slds-input-has-icon_left-right
229+
* @restrict .slds-input-has-icon
230+
*/
231+
.slds-input-has-icon_left-right,
232+
.slds-input-has-icon--left-right {
202233
/**
203-
* @summary Positions .slds-input__icon to the right of the text input
204-
*
205-
* @selector .slds-input-has-icon_right
206-
* @restrict .slds-input-has-icon
207-
*/
208-
&_right,
209-
&--right {
210-
211-
.slds-input__icon {
212-
right: $spacing-small;
213-
}
214-
215-
.slds-input,
216-
.slds-input_faux,
217-
.slds-input_bare,
218-
.slds-input--bare {
219-
/*! @css-var-fallback padding-right */
220-
--slds-c-input-spacing-horizontal-end: #{$spacing-x-large};
221-
}
234+
* @summary Hook for .slds-input-has-icon--left-right
235+
*
236+
* @selector .slds-input__icon_left
237+
* @restrict .slds-input__icon
238+
*/
239+
.slds-input__icon_left,
240+
.slds-input__icon--left {
241+
left: $spacing-small;
222242
}
223243

224244
/**
225-
* @summary Positions .slds-input__icon_left to the left of the text input and .slds-input__icon_right to the right of the text input
226-
*
227-
* @selector .slds-input-has-icon_left-right
228-
* @restrict .slds-input-has-icon
229-
*/
230-
&_left-right,
231-
&--left-right {
232-
/**
233-
* @summary Hook for .slds-input-has-icon--left-right
234-
*
235-
* @selector .slds-input__icon_left
236-
* @restrict .slds-input__icon
237-
*/
238-
.slds-input__icon_left,
239-
.slds-input__icon--left {
240-
left: $spacing-small;
241-
}
242-
243-
/**
244-
* @summary Hook for .slds-input-has-icon_left-right
245-
*
246-
* @selector .slds-input__icon_right
247-
* @restrict .slds-input__icon
248-
*/
249-
.slds-input__icon_right,
250-
.slds-input__icon--right {
251-
right: $spacing-small;
252-
}
253-
254-
.slds-input,
255-
.slds-input_faux,
256-
.slds-input_bare,
257-
.slds-input--bare {
258-
/*! @css-var-fallback padding-left */
259-
--slds-c-input-spacing-horizontal-start: #{$spacing-x-large};
260-
261-
/*! @css-var-fallback padding-right */
262-
--slds-c-input-spacing-horizontal-end: #{$spacing-x-large};
263-
}
245+
* @summary Hook for .slds-input-has-icon_left-right
246+
*
247+
* @selector .slds-input__icon_right
248+
* @restrict .slds-input__icon
249+
*/
250+
.slds-input__icon_right,
251+
.slds-input__icon--right {
252+
right: $spacing-small;
264253
}
265254

266-
&_group-right {
255+
.slds-input,
256+
.slds-input_faux,
257+
.slds-input_bare,
258+
.slds-input--bare {
259+
/*! @css-var-fallback padding-left */
260+
--slds-c-input-spacing-horizontal-start: #{$spacing-x-large};
267261

268-
.slds-input,
269-
.slds-input_faux,
270-
.slds-input_bare,
271-
.slds-input--bare {
272-
/*! @css-var-fallback padding-right */
273-
--slds-c-input-spacing-horizontal-end: calc(#{$spacing-xx-large} + #{$spacing-x-small});
274-
}
262+
/*! @css-var-fallback padding-right */
263+
--slds-c-input-spacing-horizontal-end: #{$spacing-x-large};
264+
}
265+
}
266+
267+
/**
268+
* @selector .slds-input-has-icon_group-right
269+
* @restrict .slds-input-has-icon
270+
*/
271+
.slds-input-has-icon_group-right {
272+
273+
.slds-input,
274+
.slds-input_faux,
275+
.slds-input_bare,
276+
.slds-input--bare {
277+
/*! @css-var-fallback padding-right */
278+
--slds-c-input-spacing-horizontal-end: calc(#{$spacing-xx-large} + #{$spacing-x-small});
275279
}
276280
}
277281

‎ui/components/input/base/_touch.scss

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -56,35 +56,35 @@
5656
@include square($square-icon-medium-content);
5757
margin-top: (($square-icon-medium-content * 0.5) * -1);
5858
}
59+
}
5960

60-
&_left,
61-
&--left {
61+
.slds-input__icon_left,
62+
.slds-input__icon--left {
6263

63-
.slds-input__icon {
64-
left: $spacing-x-small;
65-
}
64+
.slds-input__icon {
65+
left: $spacing-x-small;
6666
}
67+
}
6768

68-
&_right,
69-
&--right {
69+
.slds-input__icon_right,
70+
.slds-input__icon--right {
7071

71-
.slds-input__icon {
72-
right: $spacing-x-small;
73-
}
72+
.slds-input__icon {
73+
right: $spacing-x-small;
7474
}
75+
}
7576

76-
&_left-right,
77-
&--left-right {
77+
.slds-input__icon_left-right,
78+
.slds-input__icon--left-right {
7879

79-
.slds-input__icon_left,
80-
.slds-input__icon--left {
81-
left: $spacing-x-small;
82-
}
80+
.slds-input__icon_left,
81+
.slds-input__icon--left {
82+
left: $spacing-x-small;
83+
}
8384

84-
.slds-input__icon_right,
85-
.slds-input__icon--right {
86-
right: $spacing-x-small;
87-
}
85+
.slds-input__icon_right,
86+
.slds-input__icon--right {
87+
right: $spacing-x-small;
8888
}
8989
}
9090

0 commit comments

Comments
 (0)