Skip to content

Commit c23c8f5

Browse files
pat270pat270
committed
feat(@clayui/css): Form Validation adds $input-danger, $input-warning, $input-success, $input-danger-select, $input-warning-select, $input-success-select Sass maps with clay-form-control-variant and clay-select-variant for more customization options
1 parent e91895f commit c23c8f5

File tree

3 files changed

+268
-103
lines changed

3 files changed

+268
-103
lines changed

‎packages/clay-css/src/scss/atlas/variables/_forms.scss

Lines changed: 114 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -167,15 +167,32 @@ $form-feedback-font-weight: $font-weight-semi-bold !default;
167167

168168
$form-feedback-indicator-margin-x: 0 !default;
169169

170-
// Input Variants
170+
// .has-error .form-control
171171

172172
$input-danger-bg: $danger-l2 !default;
173173
$input-danger-border-color: $danger-l1 !default;
174174
// Will need to be revisited if https://github.com/twbs/bootstrap/pull/24821 merge error is fixed
175175
$input-danger-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
176-
$input-danger-focus-box-shadow: $input-focus-box-shadow !default;
177176
$input-danger-color: $input-color !default;
178177

178+
$input-danger-focus-box-shadow: $input-focus-box-shadow !default;
179+
180+
$input-danger: () !default;
181+
$input-danger: map-deep-merge(
182+
(
183+
background-color: $input-danger-bg,
184+
border-color: $input-danger-border-color,
185+
box-shadow: $input-danger-box-shadow,
186+
color: $input-danger-color,
187+
focus: (
188+
box-shadow: $input-danger-focus-box-shadow,
189+
),
190+
),
191+
$input-danger
192+
);
193+
194+
// .has-error .form-control[readonly]
195+
179196
$input-danger-readonly: () !default;
180197
$input-danger-readonly: map-deep-merge(
181198
(
@@ -191,46 +208,49 @@ $input-danger-readonly: map-deep-merge(
191208
);
192209

193210
$input-danger-checkbox-label-color: $danger !default;
211+
212+
// .has-error select.form-control
213+
194214
$input-danger-select-icon-color: $input-danger-border-color !default;
195215
$input-danger-select-icon: clay-icon(
196216
caret-double-l,
197217
$input-danger-select-icon-color
198218
) !default;
199219

200-
$input-success-bg: $success-l2 !default;
201-
$input-success-border-color: $success-l1 !default;
202-
// Will need to be revisited if https://github.com/twbs/bootstrap/pull/24821 merge error is fixed
203-
$input-success-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
204-
$input-success-focus-box-shadow: $input-focus-box-shadow !default;
205-
$input-success-color: $input-color !default;
206-
207-
$input-success-readonly: () !default;
208-
$input-success-readonly: map-deep-merge(
220+
$input-danger-select: () !default;
221+
$input-danger-select: map-deep-merge(
209222
(
210-
bg:
211-
setter(
212-
map-get($input-readonly, bg),
213-
map-get($input-readonly, background-color)
214-
),
215-
border-color: map-get($input-readonly, border-color),
216-
focus-border-color: $input-focus-border-color,
223+
background-image: $input-danger-select-icon,
217224
),
218-
$input-success-readonly
225+
$input-danger-select
219226
);
220227

221-
$input-success-checkbox-label-color: $success !default;
222-
$input-success-select-icon-color: $input-success-border-color !default;
223-
$input-success-select-icon: clay-icon(
224-
caret-double-l,
225-
$input-success-select-icon-color
226-
) !default;
228+
// .has-warning .form-control
227229

228230
$input-warning-bg: $warning-l2 !default;
229231
$input-warning-border-color: $warning-l1 !default;
230232
// Will need to be revisited if https://github.com/twbs/bootstrap/pull/24821 merge error is fixed
231233
$input-warning-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
234+
$input-warning-color: $input-color !default;
235+
232236
$input-warning-focus-box-shadow: $input-focus-box-shadow !default;
233237

238+
$input-warning: () !default;
239+
$input-warning: map-deep-merge(
240+
(
241+
background-color: $input-warning-bg,
242+
border-color: $input-warning-border-color,
243+
box-shadow: $input-warning-box-shadow,
244+
color: $input-warning-color,
245+
focus: (
246+
box-shadow: $input-warning-focus-box-shadow,
247+
),
248+
),
249+
$input-warning
250+
);
251+
252+
// .has-warning .form-control[readonly]
253+
234254
$input-warning-readonly: () !default;
235255
$input-warning-readonly: map-deep-merge(
236256
(
@@ -245,14 +265,82 @@ $input-warning-readonly: map-deep-merge(
245265
$input-warning-readonly
246266
);
247267

248-
$input-warning-color: $input-color !default;
249268
$input-warning-checkbox-label-color: $warning !default;
269+
270+
// .has-warning select.form-control
271+
250272
$input-warning-select-icon-color: $input-warning-border-color !default;
251273
$input-warning-select-icon: clay-icon(
252274
caret-double-l,
253275
$input-warning-select-icon-color
254276
) !default;
255277

278+
$input-warning-select: () !default;
279+
$input-warning-select: map-deep-merge(
280+
(
281+
background-image: $input-warning-select-icon,
282+
),
283+
$input-warning-select
284+
);
285+
286+
// .has-success .form-control
287+
288+
$input-success-bg: $success-l2 !default;
289+
$input-success-border-color: $success-l1 !default;
290+
// Will need to be revisited if https://github.com/twbs/bootstrap/pull/24821 merge error is fixed
291+
$input-success-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
292+
$input-success-color: $input-color !default;
293+
294+
$input-success-focus-box-shadow: $input-focus-box-shadow !default;
295+
296+
$input-success: () !default;
297+
$input-success: map-deep-merge(
298+
(
299+
background-color: $input-success-bg,
300+
border-color: $input-success-border-color,
301+
box-shadow: $input-success-box-shadow,
302+
color: $input-success-color,
303+
focus: (
304+
box-shadow: $input-success-focus-box-shadow,
305+
),
306+
),
307+
$input-success
308+
);
309+
310+
// .has-success .form-control[readonly]
311+
312+
$input-success-readonly: () !default;
313+
$input-success-readonly: map-deep-merge(
314+
(
315+
bg:
316+
setter(
317+
map-get($input-readonly, bg),
318+
map-get($input-readonly, background-color)
319+
),
320+
border-color: map-get($input-readonly, border-color),
321+
focus-border-color: $input-focus-border-color,
322+
),
323+
$input-success-readonly
324+
);
325+
326+
$input-success-checkbox-label-color: $success !default;
327+
328+
// .has-success select.form-control
329+
330+
$input-success-select-icon-color: $input-success-border-color !default;
331+
$input-success-select-icon: clay-icon(
332+
caret-double-l,
333+
$input-success-select-icon-color
334+
) !default;
335+
336+
$input-success-select: () !default;
337+
$input-success-select: map-deep-merge(
338+
(
339+
background-image: $input-success-select-icon,
340+
),
341+
$input-success-select
342+
);
343+
256344
// Select Element
257345

258346
$input-select-bg-position: right 0.5em center !default;

‎packages/clay-css/src/scss/components/_form-validation.scss

Lines changed: 6 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -99,17 +99,7 @@
9999
}
100100

101101
.form-control {
102-
background-color: $input-danger-bg;
103-
border-color: $input-danger-border-color;
104-
box-shadow: $input-danger-box-shadow;
105-
color: $input-danger-color;
106-
107-
&:focus {
108-
background-color: $input-danger-focus-bg;
109-
border-color: $input-danger-focus-border-color;
110-
box-shadow: $input-danger-focus-box-shadow;
111-
color: $input-danger-focus-color;
112-
}
102+
@include clay-form-control-variant($input-danger);
113103
}
114104

115105
.form-control[readonly] {
@@ -121,7 +111,7 @@
121111
}
122112

123113
select.form-control {
124-
background-image: $input-danger-select-icon;
114+
@include clay-select-variant($input-danger-select);
125115

126116
&[size] {
127117
@include clay-select-variant($input-danger-select-size);
@@ -186,17 +176,7 @@
186176
}
187177

188178
.form-control {
189-
background-color: $input-warning-bg;
190-
border-color: $input-warning-border-color;
191-
box-shadow: $input-warning-box-shadow;
192-
color: $input-warning-color;
193-
194-
&:focus {
195-
background-color: $input-warning-focus-bg;
196-
border-color: $input-warning-focus-border-color;
197-
box-shadow: $input-warning-focus-box-shadow;
198-
color: $input-warning-focus-color;
199-
}
179+
@include clay-form-control-variant($input-warning);
200180
}
201181

202182
.form-control[readonly] {
@@ -208,7 +188,7 @@
208188
}
209189

210190
select.form-control {
211-
background-image: $input-warning-select-icon;
191+
@include clay-select-variant($input-warning-select);
212192

213193
&[size] {
214194
@include clay-select-variant($input-warning-select-size);
@@ -273,17 +253,7 @@
273253
}
274254

275255
.form-control {
276-
background-color: $input-success-bg;
277-
border-color: $input-success-border-color;
278-
box-shadow: $input-success-box-shadow;
279-
color: $input-success-color;
280-
281-
&:focus {
282-
background-color: $input-success-focus-bg;
283-
border-color: $input-success-focus-border-color;
284-
box-shadow: $input-success-focus-box-shadow;
285-
color: $input-success-focus-color;
286-
}
256+
@include clay-form-control-variant($input-success);
287257
}
288258

289259
.form-control[readonly] {
@@ -295,7 +265,7 @@
295265
}
296266

297267
select.form-control {
298-
background-image: $input-success-select-icon;
268+
@include clay-select-variant($input-success-select);
299269

300270
&[size] {
301271
@include clay-select-variant($input-success-select-size);

0 commit comments

Comments
 (0)