Skip to content

Commit

Permalink
Merge pull request #4199 from uswds/jm-tile-add-bg
Browse files Browse the repository at this point in the history 
USWDS - Checkbox + Radio: create background color variable.
  • Loading branch information
@thisisdano
thisisdano committed Jun 7, 2021
2 parents d89ece4 + 81ba70f commit 5147766
Show file tree
Hide file tree
Showing 5 changed files with 252 additions and 112 deletions.
41 changes: 41 additions & 0 deletions src/components/checkbox/checkbox--test.njk
View file
@@ -0,0 +1,41 @@
<fieldset class="usa-fieldset">
<legend class="usa-legend">Select any historical figure</legend>
<div class="usa-checkbox">
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-truth-2" type="checkbox" name="historical-figures-2" value="sojourner-truth" checked>
<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>
</div>
<div class="usa-checkbox">
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-douglass-2" type="checkbox" name="historical-figures-2" value="frederick-douglass">
<label class="usa-checkbox__label" for="check-historical-douglass-2">Frederick Douglass</label>
</div>
<div class="usa-checkbox">
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-washington-2" type="checkbox" name="historical-figures-2" value="booker-t-washington">
<label class="usa-checkbox__label" for="check-historical-washington-2">Booker T. Washington</label>
</div>
<div class="usa-checkbox">
<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>
<label class="usa-checkbox__label" for="check-historical-carver-2">George Washington Carver</label>
</div>
</fieldset>

<div class="checkbox-tests margin-top-4">
<fieldset class="usa-fieldset">
<legend class="usa-legend">Select any historical figure</legend>
<div class="usa-checkbox">
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-truth-3" type="checkbox" name="historical-figures-3" value="sojourner-truth" checked>
<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>
</div>
<div class="usa-checkbox">
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-douglass-3" type="checkbox" name="historical-figures-3" value="frederick-douglass">
<label class="usa-checkbox__label" for="check-historical-douglass-3">Frederick Douglass</label>
</div>
<div class="usa-checkbox">
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-washington-3" type="checkbox" name="historical-figures-3" value="booker-t-washington">
<label class="usa-checkbox__label" for="check-historical-washington-3">Booker T. Washington</label>
</div>
<div class="usa-checkbox">
<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>
<label class="usa-checkbox__label" for="check-historical-carver-3">George Washington Carver</label>
</div>
</fieldset>
</div>
2 changes: 1 addition & 1 deletion src/components/checkbox/checkbox.config.yml
View file
@@ -1 +1 @@
preview: "@uswds-form"
preview: "@uswds-framed"
313 changes: 208 additions & 105 deletions src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
View file
@@ -1,3 +1,137 @@
@mixin format-input {
& + [class$="__label"]::before {
@content;
}
}

@mixin format-label {
& + [class$="__label"] {
@content;
}
}

@mixin checkbox-and-radio-colors(
$bg-color: $theme-input-background-color,
$selected-color: "default"
) {
$input-text-color: get-color-token-from-bg($bg-color);
$input-bg-color: if(
$bg-color == "default",
$theme-body-background-color,
$bg-color
);
$input-active-color: nth(
get-link-tokens-from-bg($bg-color, $preferred-link-token: $selected-color),
1
);
$input-disabled-alpha: -0.7;
$input-disabled-alpha--strong: -0.5;
$input-disabled-alpha--weak: -0.8;
$input-border-alpha: -0;
$color-input-disabled: adjust-color(
color($input-text-color),
$alpha: $input-disabled-alpha
);
$color-input-disabled--strong: adjust-color(
color($input-text-color),
$alpha: $input-disabled-alpha--strong
);
$color-input-disabled--weak: adjust-color(
color($input-text-color),
$alpha: $input-disabled-alpha--weak
);
$input-darkmode: if(lightness(color($input-bg-color)) < 50%, true, false);
$input-checkmark: if($input-darkmode, "correct8-alt", "correct8");

.usa-checkbox,
.usa-radio {
background: color($input-bg-color);
}

.usa-checkbox__label,
.usa-radio__label {
color: color($input-text-color);
&::before {
background: color($input-bg-color);
box-shadow: 0 0 0 units($theme-input-select-border-width)
adjust-color(color($input-text-color), $alpha: $input-border-alpha);
}
}
.usa-checkbox__input,
.usa-radio__input {
&:checked {
@include format-input {
background-color: color($input-active-color);
box-shadow: 0 0 0 units($theme-input-select-border-width)
color($input-active-color);
}
}
&:disabled {
@include format-label {
color: $color-input-disabled;
}
@include format-input {
background-color: color($input-bg-color);
box-shadow: 0 0 0 units($theme-input-select-border-width)
$color-input-disabled;
}
}
&--tile {
@include format-label {
background-color: color($input-bg-color);
border: units($theme-input-tile-border-width) solid
$color-input-disabled;
color: color($input-text-color);
}
&:checked {
@include format-label {
background-color: adjust-color(
color($input-active-color),
$alpha: -0.9
);
border-color: color($input-active-color);
}
}
&:disabled:checked {
@include format-label {
background-color: color($input-bg-color);
border-color: $color-input-disabled;
}
}
}
}
.usa-checkbox__input {
&:checked,
&:checked:disabled {
@include format-input {
@include add-background-svg($input-checkmark);
}
}
&:checked:disabled {
@include format-input {
background-color: $color-input-disabled;
}
}
}
.usa-radio__input {
&:checked {
@include format-input {
box-shadow: 0 0 0 units($theme-input-select-border-width)
color($input-active-color),
inset 0 0 0 units($theme-input-select-border-width)
color($input-bg-color);
}
}
&:checked:disabled {
@include format-input {
background-color: $color-input-disabled--weak;
box-shadow: 0 0 0 2px $color-input-disabled,
inset 0 0 0 2px color($input-bg-color);
}
}
}
}

@include override-prose {
.usa-input-list {
@include add-list-reset;
Expand All @@ -11,18 +145,65 @@
}
}

@include checkbox-and-radio-colors;

.usa-checkbox__input,
.usa-radio__input {
// The actual input element is only visible to screen readers, because
// all visual styling is done via the label.
@include sr-only();

.lt-ie9 & {
border: 0;
float: left;
margin: units(0.5) units(0.5) 0 0;
position: static;
width: auto;
&:focus {
@include format-input {
@include focus-outline(null, null, null, 0.5);
}
}

&:disabled {
@include format-input {
cursor: not-allowed;
}
@include format-label {
cursor: not-allowed;
}
}

// Checkboxes and radios with tap-friendly targets
&--tile {
@include format-label {
border-radius: radius($theme-input-tile-border-radius);
margin-top: units(1);
padding: units(1.5) units(2) units(1.5) units(5);
}
}
}

.usa-radio__input {
&:checked {
@include format-input {
@media print {
box-shadow: inset 0 0 0 units($theme-input-select-border-width)
color("white"),
inset 0 0 0 units(2) color("primary"),
0 0 0 units($theme-input-select-border-width) color("primary");
}
}
}
}

.usa-checkbox__input {
&:checked,
&:checked:disabled {
@include format-input {
background-position: center center;
background-size: units(1.5) auto;
@media print {
background-image: none;
background-color: color("white");
content: url("#{$theme-image-path}/checkbox-check-print.svg");
text-indent: 0;
}
}
}
}

Expand All @@ -35,17 +216,18 @@
padding-left: units($input-select-margin-right + $theme-input-select-size);
position: relative;
text-indent: units(-$input-select-margin-right - $theme-input-select-size);
}

.usa-checkbox__label::before,
.usa-radio__label::before {
background: color("white");
content: " ";
display: inline-block;
left: units($theme-input-select-border-width);
position: relative;
vertical-align: middle\0; // Target IE 11 and below to vertically center inputs
white-space: pre;
&:before {
content: " ";
display: inline-block;
left: units($theme-input-select-border-width);
line-height: units($theme-input-select-size);
margin-right: units($input-select-margin-right);
position: relative;
text-indent: 0;
vertical-align: middle\0; // Target IE 11 and below to vertically center inputs
white-space: pre;
}
}

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

.usa-checkbox__label::before,
.usa-radio__label::before {
box-shadow: 0 0 0 units($theme-input-select-border-width) color("base");
line-height: units($theme-input-select-size);
margin-right: units($input-select-margin-right);
text-indent: 0;
}

.usa-checkbox__input:checked + .usa-checkbox__label::before,
.usa-radio__input:checked + .usa-radio__label::before {
background-color: color("primary");
box-shadow: 0 0 0 units($theme-input-select-border-width) color("primary");
}

.usa-radio__input:checked + .usa-radio__label::before {
box-shadow: 0 0 0 units($theme-input-select-border-width) color("primary"),
inset 0 0 0 units($theme-input-select-border-width) color("white");

@media print {
box-shadow: inset 0 0 0 units($theme-input-select-border-width)
color("white"),
inset 0 0 0 units(2) color("primary"),
0 0 0 units($theme-input-select-border-width) color("primary");
}
}

.usa-checkbox__input:checked + .usa-checkbox__label::before,
.usa-checkbox__input:checked:disabled + .usa-checkbox__label::before {
@include add-background-svg("correct8");
background-position: center center;
background-size: units(1.5) auto;

@media print {
background-image: none;
background-color: color("white");
content: url("#{$theme-image-path}/checkbox-check-print.svg");
text-indent: 0;
}
}

.usa-radio__input:focus + .usa-radio__label::before {
@include focus-outline(null, null, null, 0.5);
}

.usa-checkbox__input:disabled + .usa-checkbox__label,
.usa-radio__input:disabled + .usa-radio__label {
color: color("disabled");
cursor: not-allowed;
}

.usa-checkbox__input:focus + .usa-checkbox__label::before {
@include focus-outline;
}

.usa-checkbox__input:disabled + .usa-checkbox__label::before,
.usa-radio__input:disabled + .usa-radio__label::before {
background: color("disabled-light");
box-shadow: 0 0 0 units($theme-input-select-border-width) color("disabled");
cursor: not-allowed;
}

.usa-radio__input:checked:disabled + .usa-radio__label::before {
background: color("disabled-dark");
box-shadow: 0 0 0 2px color("disabled-dark"),
inset 0 0 0 2px color("disabled-light");
}

// Checkboxes and radios with tap-friendly targets
.usa-checkbox__input--tile + .usa-checkbox__label,
.usa-radio__input--tile + .usa-radio__label {
border: units($theme-input-tile-border-width) solid
color($theme-input-tile-border-color);
border-radius: radius($theme-input-tile-border-radius);
margin-top: units(1);
padding: units(1.5) units(2) units(1.5) units(5);
}

.usa-checkbox__input--tile:checked + .usa-checkbox__label,
.usa-radio__input--tile:checked + .usa-radio__label {
background-color: color($theme-input-tile-background-color-selected);
border-color: color($theme-input-tile-border-color-selected);
}

.usa-checkbox__input--tile:disabled:checked + .usa-checkbox__label,
.usa-radio__input--tile:disabled:checked + .usa-radio__label {
background-color: color("disabled-light");
border-color: color($theme-input-tile-border-color);
}

.usa-checkbox__label-description,
.usa-radio__label-description {
display: block;
font-size: size("ui", "2xs");
margin-top: units(1);
text-indent: 0;
}

// Test code for scoped custom colors
/*
.checkbox-tests {
@include set-text-and-bg("green-80");
@include checkbox-and-radio-colors("green-80", "green-warm-10v");
padding: units(2);
border-radius: radius("md");
}
*/

0 comments on commit 5147766

Please sign in to comment.