Skip to content

Commit 11df78e

Browse files
mdomdo
committed
Revamp custom form styles
- Less nesting with more specific classes - New class names for most elements to avoid unnecessary and potentially confusing shorthand - Require new class and markup for the description (though it's only necessary for disable states, it's now part of the entire component's markup for all states just in case) - Change up colors and variables for regular and disabled states
1 parent 871a003 commit 11df78e

File tree

2 files changed

+49
-60
lines changed

2 files changed

+49
-60
lines changed

‎scss/_custom-forms.scss

Lines changed: 46 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -7,48 +7,59 @@
77
//
88
// Base class takes care of all the key behavioral aspects.
99

10-
.c-input {
10+
.custom-control {
1111
position: relative;
1212
display: inline;
1313
padding-left: 1.5rem;
1414
color: #555;
15-
cursor: pointer;
1615

17-
> input {
18-
position: absolute;
19-
z-index: -1; // Put the input behind the label so it doesn't overlay text
20-
opacity: 0;
16+
+ .custom-control {
17+
margin-left: 1rem;
18+
}
19+
}
2120

22-
&:checked ~ .c-indicator {
23-
color: #fff;
24-
background-color: #0074d9;
25-
@include box-shadow(none);
26-
}
21+
.custom-control-input {
22+
position: absolute;
23+
z-index: -1; // Put the input behind the label so it doesn't overlay text
24+
opacity: 0;
2725

28-
&:focus ~ .c-indicator {
29-
// the mixin is not used here to make sure there is feedback
30-
box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
31-
}
26+
&:checked ~ .custom-control-indicator {
27+
color: #fff;
28+
background-color: #0074d9;
29+
@include box-shadow(none);
30+
}
3231

33-
&:active ~ .c-indicator {
34-
color: #fff;
35-
background-color: #84c6ff;
36-
@include box-shadow(none);
37-
}
32+
&:focus ~ .custom-control-indicator {
33+
// the mixin is not used here to make sure there is feedback
34+
box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
3835
}
3936

40-
+ .c-input {
41-
margin-left: 1rem;
37+
&:active ~ .custom-control-indicator {
38+
color: #fff;
39+
background-color: #84c6ff;
40+
@include box-shadow(none);
41+
}
42+
43+
&:disabled {
44+
~ .custom-control-indicator {
45+
cursor: not-allowed;
46+
background-color: $custom-form-bg-color-disabled;
47+
}
48+
49+
~ .custom-control-description {
50+
color: $custom-form-description-color-disabled;
51+
cursor: not-allowed;
52+
}
4253
}
4354
}
4455

4556
// Custom indicator
4657
//
4758
// Generates a shadow element to create our makeshift checkbox/radio background.
4859

49-
.c-indicator {
60+
.custom-control-indicator {
5061
position: absolute;
51-
top: 0;
62+
top: .0625rem;
5263
left: 0;
5364
display: block;
5465
width: 1rem;
@@ -62,63 +73,41 @@
6273
background-repeat: no-repeat;
6374
background-position: center center;
6475
background-size: 50% 50%;
65-
@include box-shadow(inset 0 .125rem .125rem rgba(0,0,0,.1));
76+
@include box-shadow(inset 0 .25rem .25rem rgba(0,0,0,.1));
6677
}
6778

6879
// Checkboxes
6980
//
7081
// Tweak just a few things for checkboxes.
7182

72-
.c-checkbox {
73-
.c-indicator {
83+
.custom-checkbox {
84+
.custom-control-indicator {
7485
border-radius: .25rem;
7586
}
7687

77-
input:checked ~ .c-indicator {
88+
.custom-control-input:checked ~ .custom-control-indicator {
7889
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
7990
}
8091

81-
input:indeterminate ~ .c-indicator {
92+
.custom-control-input:indeterminate ~ .custom-control-indicator {
8293
background-color: #0074d9;
8394
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K);
8495
@include box-shadow(none);
8596
}
86-
87-
input:disabled {
88-
~ .c-indicator {
89-
cursor: not-allowed;
90-
background-color: $custom-form-bg-color-disabled;
91-
}
92-
~ .c-indicator-label {
93-
color: $custom-form-label-color-disabled;
94-
cursor: not-allowed;
95-
}
96-
}
9797
}
9898

9999
// Radios
100100
//
101101
// Tweak just a few things for radios.
102102

103-
.c-radio {
104-
.c-indicator {
103+
.custom-radio {
104+
.custom-control-indicator {
105105
border-radius: 50%;
106106
}
107107

108-
input:checked ~ .c-indicator {
108+
.custom-control-input:checked ~ .custom-control-indicator {
109109
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==);
110110
}
111-
112-
input:disabled {
113-
~ .c-indicator {
114-
cursor: not-allowed;
115-
background-color: $custom-form-bg-color-disabled;
116-
}
117-
~ .c-indicator-label {
118-
color: $custom-form-label-color-disabled;
119-
cursor: not-allowed;
120-
}
121-
}
122111
}
123112

124113

@@ -127,8 +116,8 @@
127116
// By default radios and checkboxes are `inline-block` with no additional spacing
128117
// set. Use these optional classes to tweak the layout.
129118

130-
.c-inputs-stacked {
131-
.c-input {
119+
.custom-controls-stacked {
120+
.custom-control {
132121
display: inline;
133122

134123
&::after {
@@ -137,7 +126,7 @@
137126
content: "";
138127
}
139128

140-
+ .c-input {
129+
+ .custom-control {
141130
margin-left: 0;
142131
}
143132
}

‎scss/_variables.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -322,9 +322,9 @@ $input-group-addon-border-color: $input-border-color !default;
322322

323323
$cursor-disabled: not-allowed !default;
324324

325-
$custom-form-bg-color: #d1d1d1 !default;
326-
$custom-form-bg-color-disabled: #e2e2e2 !default;
327-
$custom-form-label-color-disabled: #c3c3c3 !default;
325+
$custom-form-bg-color: #ddd !default;
326+
$custom-form-bg-color-disabled: #eee !default;
327+
$custom-form-description-color-disabled: #767676 !default;
328328

329329

330330
// Form validation icons

0 commit comments

Comments
 (0)