Skip to content

Commit df1e426

Browse files
pat270pat270
committed
feat(@clayui/css): Cadmin Form Validation adds $cadmin-input-danger, $cadmin-input-warning, $cadmin-input-success, $cadmin-input-danger-select, $cadmin-input-warning-select, $cadmin-input-success-select Sass maps with clay-form-control-variant and clay-select-variant for more customization options
fix(@clayui/css): Cadmin Form Validation use `clay-form-control-variant` to style Danger, Warning, Success readonly inputs instead of `clay-button-variant` and readonly input variables should use newer Sass map keys
1 parent 23ed8cb commit df1e426

File tree

2 files changed

+174
-89
lines changed

2 files changed

+174
-89
lines changed

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

Lines changed: 9 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -11,29 +11,19 @@
1111
}
1212

1313
.form-control {
14-
background-color: $cadmin-input-danger-bg;
15-
border-color: $cadmin-input-danger-border-color;
16-
box-shadow: $cadmin-input-danger-box-shadow;
17-
color: $cadmin-input-danger-color;
18-
19-
&:focus {
20-
background-color: $cadmin-input-danger-focus-bg;
21-
border-color: $cadmin-input-danger-focus-border-color;
22-
box-shadow: $cadmin-input-danger-focus-box-shadow;
23-
color: $cadmin-input-danger-focus-color;
24-
}
14+
@include clay-form-control-variant($cadmin-input-danger);
2515
}
2616

2717
.form-control[readonly] {
28-
@include clay-button-variant($cadmin-input-danger-readonly);
18+
@include clay-form-control-variant($cadmin-input-danger-readonly);
2919
}
3020

3121
.form-feedback-item {
3222
color: $cadmin-form-feedback-invalid-color;
3323
}
3424

3525
select.form-control {
36-
background-image: $cadmin-input-danger-select-icon;
26+
@include clay-select-variant($cadmin-input-danger-select);
3727

3828
&[size] {
3929
@include clay-select-variant($cadmin-input-danger-select-size);
@@ -98,29 +88,19 @@
9888
}
9989

10090
.form-control {
101-
background-color: $cadmin-input-warning-bg;
102-
border-color: $cadmin-input-warning-border-color;
103-
box-shadow: $cadmin-input-warning-box-shadow;
104-
color: $cadmin-input-warning-color;
105-
106-
&:focus {
107-
background-color: $cadmin-input-warning-focus-bg;
108-
border-color: $cadmin-input-warning-focus-border-color;
109-
box-shadow: $cadmin-input-warning-focus-box-shadow;
110-
color: $cadmin-input-warning-focus-color;
111-
}
91+
@include clay-form-control-variant($cadmin-input-warning);
11292
}
11393

11494
.form-control[readonly] {
115-
@include clay-button-variant($cadmin-input-warning-readonly);
95+
@include clay-form-control-variant($cadmin-input-warning-readonly);
11696
}
11797

11898
.form-feedback-item {
11999
color: $cadmin-form-feedback-warning-color;
120100
}
121101

122102
select.form-control {
123-
background-image: $cadmin-input-warning-select-icon;
103+
@include clay-select-variant($cadmin-input-warning-select);
124104

125105
&[size] {
126106
@include clay-select-variant($cadmin-input-warning-select-size);
@@ -185,29 +165,19 @@
185165
}
186166

187167
.form-control {
188-
background-color: $cadmin-input-success-bg;
189-
border-color: $cadmin-input-success-border-color;
190-
box-shadow: $cadmin-input-success-box-shadow;
191-
color: $cadmin-input-success-color;
192-
193-
&:focus {
194-
background-color: $cadmin-input-success-focus-bg;
195-
border-color: $cadmin-input-success-focus-border-color;
196-
box-shadow: $cadmin-input-success-focus-box-shadow;
197-
color: $cadmin-input-success-focus-color;
198-
}
168+
@include clay-form-control-variant($cadmin-input-success);
199169
}
200170

201171
.form-control[readonly] {
202-
@include clay-button-variant($cadmin-input-success-readonly);
172+
@include clay-form-control-variant($cadmin-input-success-readonly);
203173
}
204174

205175
.form-feedback-item {
206176
color: $cadmin-form-feedback-valid-color;
207177
}
208178

209179
select.form-control {
210-
background-image: $cadmin-input-success-select-icon;
180+
@include clay-select-variant($cadmin-input-success-select);
211181

212182
&[size] {
213183
@include clay-select-variant($cadmin-input-success-select-size);

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

Lines changed: 165 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -518,35 +518,70 @@ $cadmin-form-feedback-warning-color: $cadmin-warning !default;
518518

519519
$cadmin-form-feedback-invalid-color: $cadmin-danger !default;
520520

521-
// Input Variants
521+
// .has-error .form-control
522522

523523
$cadmin-input-danger-bg: $cadmin-danger-l2 !default;
524-
$cadmin-input-danger-focus-bg: null !default;
525524
$cadmin-input-danger-border-color: $cadmin-danger-l1 !default;
526-
$cadmin-input-danger-focus-border-color: null !default;
527525
$cadmin-input-danger-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
528-
$cadmin-input-danger-focus-box-shadow: $cadmin-input-focus-box-shadow !default;
529526
$cadmin-input-danger-color: $cadmin-input-color !default;
527+
528+
$cadmin-input-danger-focus-bg: null !default;
529+
$cadmin-input-danger-focus-border-color: null !default;
530+
$cadmin-input-danger-focus-box-shadow: $cadmin-input-focus-box-shadow !default;
530531
$cadmin-input-danger-focus-color: null !default;
531532

533+
$cadmin-input-danger: () !default;
534+
$cadmin-input-danger: map-deep-merge(
535+
(
536+
background-color: $cadmin-input-danger-bg,
537+
border-color: $cadmin-input-danger-border-color,
538+
box-shadow: $cadmin-input-danger-box-shadow,
539+
color: $cadmin-input-danger-color,
540+
focus: (
541+
background-color: $cadmin-input-danger-focus-bg,
542+
border-color: $cadmin-input-danger-focus-border-color,
543+
box-shadow: $cadmin-input-danger-focus-box-shadow,
544+
color: $cadmin-input-danger-focus-color,
545+
),
546+
),
547+
$cadmin-input-danger
548+
);
549+
550+
// .has-error .form-control[readonly]
551+
532552
$cadmin-input-danger-readonly: () !default;
533553
$cadmin-input-danger-readonly: map-deep-merge(
534554
(
535-
bg: map-get($cadmin-input-readonly, bg),
555+
background-color: map-get($cadmin-input-readonly, background-color),
536556
border-color: map-get($cadmin-input-readonly, border-color),
537-
focus-border-color: $cadmin-input-focus-border-color,
557+
focus: (
558+
border-color: $cadmin-input-focus-border-color,
559+
),
538560
),
539561
$cadmin-input-danger-readonly
540562
);
541563

542564
$cadmin-input-danger-checkbox-label-color: $cadmin-danger !default;
543565
$cadmin-input-danger-label-color: null !default;
566+
567+
// .has-error select.form-control
568+
544569
$cadmin-input-danger-select-icon-color: $cadmin-input-danger-border-color !default;
545570
$cadmin-input-danger-select-icon: clay-icon(
546571
caret-double-l,
547572
$cadmin-input-danger-select-icon-color
548573
) !default;
549574

575+
$cadmin-input-danger-select: () !default;
576+
$cadmin-input-danger-select: map-deep-merge(
577+
(
578+
background-image: $cadmin-input-danger-select-icon,
579+
),
580+
$cadmin-input-danger-select
581+
);
582+
583+
// .has-error select.form-control[size]
584+
550585
$cadmin-input-danger-select-size: () !default;
551586
$cadmin-input-danger-select-size: map-deep-merge(
552587
(
@@ -555,80 +590,78 @@ $cadmin-input-danger-select-size: map-deep-merge(
555590
$cadmin-input-danger-select-size
556591
);
557592

593+
// .has-error select.form-control[multiple]
594+
558595
$cadmin-input-danger-select-multiple: () !default;
559596
$cadmin-input-danger-select-multiple: map-deep-merge(
560597
$cadmin-input-danger-select-size,
561598
$cadmin-input-danger-select-multiple
562599
);
563600

564-
$cadmin-input-success-bg: $cadmin-success-l2 !default;
565-
$cadmin-input-success-focus-bg: null !default;
566-
$cadmin-input-success-border-color: $cadmin-success-l1 !default;
567-
$cadmin-input-success-focus-border-color: null !default;
568-
$cadmin-input-success-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
569-
$cadmin-input-success-focus-box-shadow: $cadmin-input-focus-box-shadow !default;
570-
$cadmin-input-success-color: $cadmin-input-color !default;
571-
$cadmin-input-success-focus-color: null !default;
601+
// .has-warning .form-control
572602

573-
$cadmin-input-success-readonly: () !default;
574-
$cadmin-input-success-readonly: map-deep-merge(
575-
(
576-
bg: map-get($cadmin-input-readonly, bg),
577-
border-color: map-get($cadmin-input-readonly, border-color),
578-
focus-border-color: $cadmin-input-focus-border-color,
579-
),
580-
$cadmin-input-success-readonly
581-
);
603+
$cadmin-input-warning-bg: $cadmin-warning-l2 !default;
604+
$cadmin-input-warning-border-color: $cadmin-warning-l1 !default;
605+
$cadmin-input-warning-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
606+
$cadmin-input-warning-color: $cadmin-input-color !default;
582607

583-
$cadmin-input-success-checkbox-label-color: $cadmin-success !default;
584-
$cadmin-input-success-label-color: null !default;
585-
$cadmin-input-success-select-icon-color: $cadmin-input-success-border-color !default;
586-
$cadmin-input-success-select-icon: clay-icon(
587-
caret-double-l,
588-
$cadmin-input-success-select-icon-color
589-
) !default;
608+
$cadmin-input-warning-focus-bg: null !default;
609+
$cadmin-input-warning-focus-border-color: null !default;
610+
$cadmin-input-warning-focus-box-shadow: $cadmin-input-focus-box-shadow !default;
611+
$cadmin-input-warning-focus-color: null !default;
590612

591-
$cadmin-input-success-select-size: () !default;
592-
$cadmin-input-success-select-size: map-deep-merge(
613+
$cadmin-input-warning: () !default;
614+
$cadmin-input-warning: map-deep-merge(
593615
(
594-
background-image: none,
616+
background-color: $cadmin-input-warning-bg,
617+
border-color: $cadmin-input-warning-border-color,
618+
box-shadow: $cadmin-input-warning-box-shadow,
619+
color: $cadmin-input-warning-color,
620+
focus: (
621+
background-color: $cadmin-input-warning-focus-bg,
622+
border-color: $cadmin-input-warning-focus-border-color,
623+
box-shadow: $cadmin-input-warning-focus-box-shadow,
624+
color: $cadmin-input-warning-focus-color,
625+
),
595626
),
596-
$cadmin-input-success-select-size
627+
$cadmin-input-warning
597628
);
598629

599-
$cadmin-input-success-select-multiple: () !default;
600-
$cadmin-input-success-select-multiple: map-deep-merge(
601-
$cadmin-input-success-select-size,
602-
$cadmin-input-success-select-multiple
603-
);
604-
605-
$cadmin-input-warning-bg: $cadmin-warning-l2 !default;
606-
$cadmin-input-warning-focus-bg: null !default;
607-
$cadmin-input-warning-border-color: $cadmin-warning-l1 !default;
608-
$cadmin-input-warning-focus-border-color: null !default;
609-
$cadmin-input-warning-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
610-
$cadmin-input-warning-focus-box-shadow: $cadmin-input-focus-box-shadow !default;
611-
$cadmin-input-warning-color: $cadmin-input-color !default;
612-
$cadmin-input-warning-focus-color: null !default;
630+
// .has-warning .form-control[readonly]
613631

614632
$cadmin-input-warning-readonly: () !default;
615633
$cadmin-input-warning-readonly: map-deep-merge(
616634
(
617-
bg: map-get($cadmin-input-readonly, bg),
635+
background-color: map-get($cadmin-input-readonly, background-color),
618636
border-color: map-get($cadmin-input-readonly, border-color),
619-
focus-border-color: $cadmin-input-focus-border-color,
637+
focus: (
638+
border-color: $cadmin-input-focus-border-color,
639+
),
620640
),
621641
$cadmin-input-warning-readonly
622642
);
623643

624644
$cadmin-input-warning-checkbox-label-color: $cadmin-warning !default;
625645
$cadmin-input-warning-label-color: null !default;
646+
647+
// .has-warning select.form-control
648+
626649
$cadmin-input-warning-select-icon-color: $cadmin-input-warning-border-color !default;
627650
$cadmin-input-warning-select-icon: clay-icon(
628651
caret-double-l,
629652
$cadmin-input-warning-select-icon-color
630653
) !default;
631654

655+
$cadmin-input-warning-select: () !default;
656+
$cadmin-input-warning-select: map-deep-merge(
657+
(
658+
background-image: $cadmin-input-warning-select-icon,
659+
),
660+
$cadmin-input-warning-select
661+
);
662+
663+
// .has-warning select.form-control[size]
664+
632665
$cadmin-input-warning-select-size: () !default;
633666
$cadmin-input-warning-select-size: map-deep-merge(
634667
(
@@ -637,12 +670,94 @@ $cadmin-input-warning-select-size: map-deep-merge(
637670
$cadmin-input-warning-select-size
638671
);
639672

673+
// .has-warning select.form-control[multiple]
674+
640675
$cadmin-input-warning-select-multiple: () !default;
641676
$cadmin-input-warning-select-multiple: map-deep-merge(
642677
$cadmin-input-warning-select-size,
643678
$cadmin-input-warning-select-multiple
644679
);
645680

681+
// .has-success .form-control
682+
683+
$cadmin-input-success-bg: $cadmin-success-l2 !default;
684+
$cadmin-input-success-border-color: $cadmin-success-l1 !default;
685+
$cadmin-input-success-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
686+
$cadmin-input-success-color: $cadmin-input-color !default;
687+
688+
$cadmin-input-success-focus-bg: null !default;
689+
$cadmin-input-success-focus-border-color: null !default;
690+
$cadmin-input-success-focus-box-shadow: $cadmin-input-focus-box-shadow !default;
691+
$cadmin-input-success-focus-color: null !default;
692+
693+
$cadmin-input-success: () !default;
694+
$cadmin-input-success: map-deep-merge(
695+
(
696+
background-color: $cadmin-input-success-bg,
697+
border-color: $cadmin-input-success-border-color,
698+
box-shadow: $cadmin-input-success-box-shadow,
699+
color: $cadmin-input-success-color,
700+
focus: (
701+
background-color: $cadmin-input-success-focus-bg,
702+
border-color: $cadmin-input-success-focus-border-color,
703+
box-shadow: $cadmin-input-success-focus-box-shadow,
704+
color: $cadmin-input-success-focus-color,
705+
),
706+
),
707+
$cadmin-input-success
708+
);
709+
710+
// .has-success .form-control[readonly]
711+
712+
$cadmin-input-success-readonly: () !default;
713+
$cadmin-input-success-readonly: map-deep-merge(
714+
(
715+
background-color: map-get($cadmin-input-readonly, background-color),
716+
border-color: map-get($cadmin-input-readonly, border-color),
717+
focus: (
718+
border-color: $cadmin-input-focus-border-color,
719+
),
720+
),
721+
$cadmin-input-success-readonly
722+
);
723+
724+
$cadmin-input-success-checkbox-label-color: $cadmin-success !default;
725+
$cadmin-input-success-label-color: null !default;
726+
727+
// .has-success select.form-control
728+
729+
$cadmin-input-success-select-icon-color: $cadmin-input-success-border-color !default;
730+
$cadmin-input-success-select-icon: clay-icon(
731+
caret-double-l,
732+
$cadmin-input-success-select-icon-color
733+
) !default;
734+
735+
$cadmin-input-success-select: () !default;
736+
$cadmin-input-success-select: map-deep-merge(
737+
(
738+
background-image: $cadmin-input-success-select-icon,
739+
),
740+
$cadmin-input-success-select
741+
);
742+
743+
// .has-success select.form-control[size]
744+
745+
$cadmin-input-success-select-size: () !default;
746+
$cadmin-input-success-select-size: map-deep-merge(
747+
(
748+
background-image: none,
749+
),
750+
$cadmin-input-success-select-size
751+
);
752+
753+
// .has-success select.form-control[multiple]
754+
755+
$cadmin-input-success-select-multiple: () !default;
756+
$cadmin-input-success-select-multiple: map-deep-merge(
757+
$cadmin-input-success-select-size,
758+
$cadmin-input-success-select-multiple
759+
);
760+
646761
// Select Element
647762

648763
$cadmin-input-select-bg: null !default;

0 commit comments

Comments
 (0)