Skip to content

Commit 5147766

Browse files
thisisdanothisisdano
authored
Merge pull request #4199 from uswds/jm-tile-add-bg
USWDS - Checkbox + Radio: create background color variable.
2 parents d89ece4 + 81ba70f commit 5147766

File tree

5 files changed

+252
-112
lines changed

5 files changed

+252
-112
lines changed

‎src/components/checkbox/checkbox--test.njk‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<fieldset class="usa-fieldset">
2+
<legend class="usa-legend">Select any historical figure</legend>
3+
<div class="usa-checkbox">
4+
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-truth-2" type="checkbox" name="historical-figures-2" value="sojourner-truth" checked>
5+
<label class="usa-checkbox__label" for="check-historical-truth-2">Sojourner Truth <span class="usa-checkbox__label-description">This is optional text that can be used to describe the label in more detail.</span></label>
6+
</div>
7+
<div class="usa-checkbox">
8+
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-douglass-2" type="checkbox" name="historical-figures-2" value="frederick-douglass">
9+
<label class="usa-checkbox__label" for="check-historical-douglass-2">Frederick Douglass</label>
10+
</div>
11+
<div class="usa-checkbox">
12+
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-washington-2" type="checkbox" name="historical-figures-2" value="booker-t-washington">
13+
<label class="usa-checkbox__label" for="check-historical-washington-2">Booker T. Washington</label>
14+
</div>
15+
<div class="usa-checkbox">
16+
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-carver-2" type="checkbox" name="historical-figures-2" value="george-washington-carver" disabled>
17+
<label class="usa-checkbox__label" for="check-historical-carver-2">George Washington Carver</label>
18+
</div>
19+
</fieldset>
20+
21+
<div class="checkbox-tests margin-top-4">
22+
<fieldset class="usa-fieldset">
23+
<legend class="usa-legend">Select any historical figure</legend>
24+
<div class="usa-checkbox">
25+
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-truth-3" type="checkbox" name="historical-figures-3" value="sojourner-truth" checked>
26+
<label class="usa-checkbox__label" for="check-historical-truth-3">Sojourner Truth <span class="usa-checkbox__label-description">This is optional text that can be used to describe the label in more detail.</span></label>
27+
</div>
28+
<div class="usa-checkbox">
29+
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-douglass-3" type="checkbox" name="historical-figures-3" value="frederick-douglass">
30+
<label class="usa-checkbox__label" for="check-historical-douglass-3">Frederick Douglass</label>
31+
</div>
32+
<div class="usa-checkbox">
33+
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-washington-3" type="checkbox" name="historical-figures-3" value="booker-t-washington">
34+
<label class="usa-checkbox__label" for="check-historical-washington-3">Booker T. Washington</label>
35+
</div>
36+
<div class="usa-checkbox">
37+
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-carver-3" type="checkbox" name="historical-figures-3" value="george-washington-carver" disabled>
38+
<label class="usa-checkbox__label" for="check-historical-carver-3">George Washington Carver</label>
39+
</div>
40+
</fieldset>
41+
</div>

‎src/components/checkbox/checkbox.config.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
preview: "@uswds-form"
1+
preview: "@uswds-framed"

‎src/stylesheets/elements/form-controls/_checkbox-and-radio.scss‎

Lines changed: 208 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,137 @@
1+
@mixin format-input {
2+
& + [class$="__label"]::before {
3+
@content;
4+
}
5+
}
6+
7+
@mixin format-label {
8+
& + [class$="__label"] {
9+
@content;
10+
}
11+
}
12+
13+
@mixin checkbox-and-radio-colors(
14+
$bg-color: $theme-input-background-color,
15+
$selected-color: "default"
16+
) {
17+
$input-text-color: get-color-token-from-bg($bg-color);
18+
$input-bg-color: if(
19+
$bg-color == "default",
20+
$theme-body-background-color,
21+
$bg-color
22+
);
23+
$input-active-color: nth(
24+
get-link-tokens-from-bg($bg-color, $preferred-link-token: $selected-color),
25+
1
26+
);
27+
$input-disabled-alpha: -0.7;
28+
$input-disabled-alpha--strong: -0.5;
29+
$input-disabled-alpha--weak: -0.8;
30+
$input-border-alpha: -0;
31+
$color-input-disabled: adjust-color(
32+
color($input-text-color),
33+
$alpha: $input-disabled-alpha
34+
);
35+
$color-input-disabled--strong: adjust-color(
36+
color($input-text-color),
37+
$alpha: $input-disabled-alpha--strong
38+
);
39+
$color-input-disabled--weak: adjust-color(
40+
color($input-text-color),
41+
$alpha: $input-disabled-alpha--weak
42+
);
43+
$input-darkmode: if(lightness(color($input-bg-color)) < 50%, true, false);
44+
$input-checkmark: if($input-darkmode, "correct8-alt", "correct8");
45+
46+
.usa-checkbox,
47+
.usa-radio {
48+
background: color($input-bg-color);
49+
}
50+
51+
.usa-checkbox__label,
52+
.usa-radio__label {
53+
color: color($input-text-color);
54+
&::before {
55+
background: color($input-bg-color);
56+
box-shadow: 0 0 0 units($theme-input-select-border-width)
57+
adjust-color(color($input-text-color), $alpha: $input-border-alpha);
58+
}
59+
}
60+
.usa-checkbox__input,
61+
.usa-radio__input {
62+
&:checked {
63+
@include format-input {
64+
background-color: color($input-active-color);
65+
box-shadow: 0 0 0 units($theme-input-select-border-width)
66+
color($input-active-color);
67+
}
68+
}
69+
&:disabled {
70+
@include format-label {
71+
color: $color-input-disabled;
72+
}
73+
@include format-input {
74+
background-color: color($input-bg-color);
75+
box-shadow: 0 0 0 units($theme-input-select-border-width)
76+
$color-input-disabled;
77+
}
78+
}
79+
&--tile {
80+
@include format-label {
81+
background-color: color($input-bg-color);
82+
border: units($theme-input-tile-border-width) solid
83+
$color-input-disabled;
84+
color: color($input-text-color);
85+
}
86+
&:checked {
87+
@include format-label {
88+
background-color: adjust-color(
89+
color($input-active-color),
90+
$alpha: -0.9
91+
);
92+
border-color: color($input-active-color);
93+
}
94+
}
95+
&:disabled:checked {
96+
@include format-label {
97+
background-color: color($input-bg-color);
98+
border-color: $color-input-disabled;
99+
}
100+
}
101+
}
102+
}
103+
.usa-checkbox__input {
104+
&:checked,
105+
&:checked:disabled {
106+
@include format-input {
107+
@include add-background-svg($input-checkmark);
108+
}
109+
}
110+
&:checked:disabled {
111+
@include format-input {
112+
background-color: $color-input-disabled;
113+
}
114+
}
115+
}
116+
.usa-radio__input {
117+
&:checked {
118+
@include format-input {
119+
box-shadow: 0 0 0 units($theme-input-select-border-width)
120+
color($input-active-color),
121+
inset 0 0 0 units($theme-input-select-border-width)
122+
color($input-bg-color);
123+
}
124+
}
125+
&:checked:disabled {
126+
@include format-input {
127+
background-color: $color-input-disabled--weak;
128+
box-shadow: 0 0 0 2px $color-input-disabled,
129+
inset 0 0 0 2px color($input-bg-color);
130+
}
131+
}
132+
}
133+
}
134+
1135
@include override-prose {
2136
.usa-input-list {
3137
@include add-list-reset;
@@ -11,18 +145,65 @@
11145
}
12146
}
13147

148+
@include checkbox-and-radio-colors;
149+
14150
.usa-checkbox__input,
15151
.usa-radio__input {
16152
// The actual input element is only visible to screen readers, because
17153
// all visual styling is done via the label.
18154
@include sr-only();
19155

20-
.lt-ie9 & {
21-
border: 0;
22-
float: left;
23-
margin: units(0.5) units(0.5) 0 0;
24-
position: static;
25-
width: auto;
156+
&:focus {
157+
@include format-input {
158+
@include focus-outline(null, null, null, 0.5);
159+
}
160+
}
161+
162+
&:disabled {
163+
@include format-input {
164+
cursor: not-allowed;
165+
}
166+
@include format-label {
167+
cursor: not-allowed;
168+
}
169+
}
170+
171+
// Checkboxes and radios with tap-friendly targets
172+
&--tile {
173+
@include format-label {
174+
border-radius: radius($theme-input-tile-border-radius);
175+
margin-top: units(1);
176+
padding: units(1.5) units(2) units(1.5) units(5);
177+
}
178+
}
179+
}
180+
181+
.usa-radio__input {
182+
&:checked {
183+
@include format-input {
184+
@media print {
185+
box-shadow: inset 0 0 0 units($theme-input-select-border-width)
186+
color("white"),
187+
inset 0 0 0 units(2) color("primary"),
188+
0 0 0 units($theme-input-select-border-width) color("primary");
189+
}
190+
}
191+
}
192+
}
193+
194+
.usa-checkbox__input {
195+
&:checked,
196+
&:checked:disabled {
197+
@include format-input {
198+
background-position: center center;
199+
background-size: units(1.5) auto;
200+
@media print {
201+
background-image: none;
202+
background-color: color("white");
203+
content: url("#{$theme-image-path}/checkbox-check-print.svg");
204+
text-indent: 0;
205+
}
206+
}
26207
}
27208
}
28209

@@ -35,17 +216,18 @@
35216
padding-left: units($input-select-margin-right + $theme-input-select-size);
36217
position: relative;
37218
text-indent: units(-$input-select-margin-right - $theme-input-select-size);
38-
}
39219

40-
.usa-checkbox__label::before,
41-
.usa-radio__label::before {
42-
background: color("white");
43-
content: " ";
44-
display: inline-block;
45-
left: units($theme-input-select-border-width);
46-
position: relative;
47-
vertical-align: middle\0; // Target IE 11 and below to vertically center inputs
48-
white-space: pre;
220+
&:before {
221+
content: " ";
222+
display: inline-block;
223+
left: units($theme-input-select-border-width);
224+
line-height: units($theme-input-select-size);
225+
margin-right: units($input-select-margin-right);
226+
position: relative;
227+
text-indent: 0;
228+
vertical-align: middle\0; // Target IE 11 and below to vertically center inputs
229+
white-space: pre;
230+
}
49231
}
50232

51233
.usa-checkbox__label::before {
@@ -57,99 +239,20 @@
57239
@include u-circle($theme-input-select-size);
58240
}
59241

60-
.usa-checkbox__label::before,
61-
.usa-radio__label::before {
62-
box-shadow: 0 0 0 units($theme-input-select-border-width) color("base");
63-
line-height: units($theme-input-select-size);
64-
margin-right: units($input-select-margin-right);
65-
text-indent: 0;
66-
}
67-
68-
.usa-checkbox__input:checked + .usa-checkbox__label::before,
69-
.usa-radio__input:checked + .usa-radio__label::before {
70-
background-color: color("primary");
71-
box-shadow: 0 0 0 units($theme-input-select-border-width) color("primary");
72-
}
73-
74-
.usa-radio__input:checked + .usa-radio__label::before {
75-
box-shadow: 0 0 0 units($theme-input-select-border-width) color("primary"),
76-
inset 0 0 0 units($theme-input-select-border-width) color("white");
77-
78-
@media print {
79-
box-shadow: inset 0 0 0 units($theme-input-select-border-width)
80-
color("white"),
81-
inset 0 0 0 units(2) color("primary"),
82-
0 0 0 units($theme-input-select-border-width) color("primary");
83-
}
84-
}
85-
86-
.usa-checkbox__input:checked + .usa-checkbox__label::before,
87-
.usa-checkbox__input:checked:disabled + .usa-checkbox__label::before {
88-
@include add-background-svg("correct8");
89-
background-position: center center;
90-
background-size: units(1.5) auto;
91-
92-
@media print {
93-
background-image: none;
94-
background-color: color("white");
95-
content: url("#{$theme-image-path}/checkbox-check-print.svg");
96-
text-indent: 0;
97-
}
98-
}
99-
100-
.usa-radio__input:focus + .usa-radio__label::before {
101-
@include focus-outline(null, null, null, 0.5);
102-
}
103-
104-
.usa-checkbox__input:disabled + .usa-checkbox__label,
105-
.usa-radio__input:disabled + .usa-radio__label {
106-
color: color("disabled");
107-
cursor: not-allowed;
108-
}
109-
110-
.usa-checkbox__input:focus + .usa-checkbox__label::before {
111-
@include focus-outline;
112-
}
113-
114-
.usa-checkbox__input:disabled + .usa-checkbox__label::before,
115-
.usa-radio__input:disabled + .usa-radio__label::before {
116-
background: color("disabled-light");
117-
box-shadow: 0 0 0 units($theme-input-select-border-width) color("disabled");
118-
cursor: not-allowed;
119-
}
120-
121-
.usa-radio__input:checked:disabled + .usa-radio__label::before {
122-
background: color("disabled-dark");
123-
box-shadow: 0 0 0 2px color("disabled-dark"),
124-
inset 0 0 0 2px color("disabled-light");
125-
}
126-
127-
// Checkboxes and radios with tap-friendly targets
128-
.usa-checkbox__input--tile + .usa-checkbox__label,
129-
.usa-radio__input--tile + .usa-radio__label {
130-
border: units($theme-input-tile-border-width) solid
131-
color($theme-input-tile-border-color);
132-
border-radius: radius($theme-input-tile-border-radius);
133-
margin-top: units(1);
134-
padding: units(1.5) units(2) units(1.5) units(5);
135-
}
136-
137-
.usa-checkbox__input--tile:checked + .usa-checkbox__label,
138-
.usa-radio__input--tile:checked + .usa-radio__label {
139-
background-color: color($theme-input-tile-background-color-selected);
140-
border-color: color($theme-input-tile-border-color-selected);
141-
}
142-
143-
.usa-checkbox__input--tile:disabled:checked + .usa-checkbox__label,
144-
.usa-radio__input--tile:disabled:checked + .usa-radio__label {
145-
background-color: color("disabled-light");
146-
border-color: color($theme-input-tile-border-color);
147-
}
148-
149242
.usa-checkbox__label-description,
150243
.usa-radio__label-description {
151244
display: block;
152245
font-size: size("ui", "2xs");
153246
margin-top: units(1);
154247
text-indent: 0;
155248
}
249+
250+
// Test code for scoped custom colors
251+
/*
252+
.checkbox-tests {
253+
@include set-text-and-bg("green-80");
254+
@include checkbox-and-radio-colors("green-80", "green-warm-10v");
255+
padding: units(2);
256+
border-radius: radius("md");
257+
}
258+
*/

0 commit comments

Comments
 (0)