// scss-lint:disable QualifyingElement, PropertyCount
$input-line-height: 1.3; $input-border-width: 0.1rem; // Using rem instead of px so function uses same units $input-padding-vertical: 1rem;
// input heights will vary by browser and type // if height not explicitly set $input-height-exact: (
($base-font-size * $input-line-height) + ($input-padding-vertical * 2) + ($input-border-width * 2)
);
// truncated to 1 decimal place // (i.e., 1.21rem -> 1.2rem) $input-height: floor($input-height-exact * 10) / 10;
// Block form elements /* stylelint-disable selector-no-qualifying-type */ input, textarea, select {
appearance: none; border: $input-border-width solid $color-gray; border-radius: 0; box-sizing: border-box; color: $color-base; // standardize on firefox display: block; font-size: $base-font-size; height: $input-height; line-height: $input-line-height; margin: 0.2em 0; max-width: $input-max-width; padding: $input-padding-vertical 0.7em; width: 100%; &.usa-input-success { border: 3px solid $color-green-light; }
} /* stylelint-enable */
.usa-input-error {
border-left: 4px solid $color-secondary-dark; margin-top: 3rem; padding-bottom: 0.8rem; padding-left: 1.5rem; padding-top: 0.8rem; position: relative; right: 1.9rem; input, textarea, select { border: 3px solid $color-secondary-dark; width: calc(100% + 1.9rem); // 1.5rem left padding + 4px border from input error spacing } label { margin-top: 0; } .usa-input-inline { border: $input-border-width solid $color-gray; width: inherit; } .usa-input-inline-error { border: 3px solid $color-secondary-dark; }
}
.usa-input-error-label {
display: block; font-size: $base-font-size; font-weight: $font-bold;
}
.usa-input-error-message {
color: $color-secondary-dark; display: block; font-size: $base-font-size; font-weight: $font-bold; padding-bottom: 3px; padding-top: 3px;
}
// Deprecated: Some screen readers can't read CSS content. // Will be removed in 2.0. .usa-input-required:after {
color: $color-secondary-darkest; content: ' (*required)';
}
// Deprecated: Some screen readers can't read CSS content. // Will be removed in 2.0. .usa-input-optional:after {
color: $color-gray-medium; content: ' (optional)';
}
.usa-input-label-helper {
color: $color-gray-medium;
}
.usa-input-label-required {
color: $color-secondary-darkest;
}
label {
display: block; margin-top: 3rem; max-width: $input-max-width;
}
textarea {
height: 16rem;
}
select {
appearance: none; background-color: $color-white; background-image: url('#{$image-path}/arrow-both.png'); // Ensure browsers that don't support SVG in background-image (IE 11 and below) fall back to PNG. // See https://www.broken-links.com/2010/06/14/using-svg-in-backgrounds-with-png-fallback/ background-image: none, url('#{$image-path}/arrow-both.svg'), url('#{$image-path}/arrow-both.png'); background-position: right 1.3rem center; background-repeat: no-repeat; background-size: 1rem; padding-right: 3rem; &::-ms-expand { display: none; } // Show default webkit style on select element when autofilled to show icon &:-webkit-autofill { appearance: menulist; } // Remove dotted outline from select element on focus in Firefox &:-moz-focusring { color: transparent; text-shadow: 0 0 0 $color-black; }
}
option:first-child {
font-weight: $font-bold;
}
legend {
font-size: $h2-font-size; font-weight: $font-bold;
}
.usa-fieldset-inputs {
label { margin-top: 0; }
}
// Hint text
.usa-form-hint {
color: $color-gray-medium; font-family: $font-sans; margin-bottom: 0;
}
// Custom checkboxes
[type=checkbox],
- type=radio
-
{
// 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: 0.4em 0.4em 0 0; position: static; width: auto; }
}
- type=checkbox
-
+ label,
- type=radio
-
+ label {
cursor: pointer; font-weight: 400; margin-bottom: 0.65em;
}
- type=checkbox
-
+ label::before,
- type=radio
-
+ label::before {
background: $color-white; content: '\a0'; display: inline-block; text-indent: 0.15em; vertical-align: middle\0; // Target IE 11 and below to vertically center inputs
}
- type=checkbox
-
+ label::before {
border-radius: $checkbox-border-radius; box-shadow: 0 0 0 1px $color-gray-medium; height: $spacing-medium; line-height: $spacing-medium; margin-left: 1px; margin-right: 0.6em; width: $spacing-medium;
}
- type=radio
-
+ label::before {
border-radius: 100%; box-shadow: 0 0 0 2px $color-white, 0 0 0 3px $color-gray-medium; height: 1.4rem; // Size overrides to account for shape + checked styling line-height: 1.4rem; margin-left: 3px; margin-right: 0.75em; width: 1.4rem;
}
[type=checkbox]:checked + label::before, [type=radio]:checked + label::before {
background-color: $color-primary; box-shadow: 0 0 0 1px $color-primary;
}
[type=radio]:checked + label::before {
box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-primary;
}
[type=checkbox]:checked + label::before, [type=checkbox]:checked:disabled + label::before {
background-image: url('#{$image-path}/correct8.png'); background-image: url('#{$image-path}/correct8.svg'); background-position: 50%; background-repeat: no-repeat;
}
[type=radio]:focus + label::before {
outline: $focus-outline; outline-offset: $focus-spacing * 2; // Double the offset to account for circular shape
}
[type=checkbox]:disabled + label {
color: $color-gray-lighter;
}
[type=checkbox]:focus + label::before {
outline: $focus-outline; outline-offset: $focus-spacing;
}
[type=checkbox]:disabled + label::before, [type=radio]:disabled + label::before {
background: $color-gray-lightest; box-shadow: 0 0 0 1px $color-gray-light; cursor: not-allowed;
}
@media print {
[type=checkbox]:checked + label::before, [type=checkbox]:checked:disabled + label::before { background-image: none; background-color: $color-white; content: url('#{$image-path}/correct8-alt.png'); content: url('#{$image-path}/correct8-alt.svg'); text-indent: 0; }
}
// Range inputs
// Change to $color-focus in 2.0 @mixin range-focus {
box-shadow: 0 0 0 2px $color-primary;
}
@mixin range-track {
background: $color-gray-lighter; border: 1px solid $color-gray-medium; cursor: pointer; height: 1.6rem; width: 100%;
}
@mixin range-thumb {
background: $color-gray-lightest; box-shadow: 0 0 0 1px $color-gray-medium; border-radius: 1.5rem; cursor: pointer; height: 2.5rem; width: 2.5rem;
}
@mixin range-ms-fill {
background: $color-gray-light; border: 1px solid $color-gray-medium; border-radius: 2rem;
}
- type=range
-
{
appearance: none; border: none; padding-left: 0; overflow: hidden; width: 100%; &:focus { outline: none; &::-webkit-slider-thumb { @include range-focus; } &::-moz-range-thumb { @include range-focus; } &::-ms-thumb { @include range-focus; } } &::-webkit-slider-runnable-track { @include range-track; } &::-moz-range-track { @include range-track; } &::-ms-track { @include range-track; } &::-webkit-slider-thumb { @include range-thumb; appearance: none; margin-top: -0.6rem; } &::-moz-range-thumb { @include range-thumb; } &::-ms-thumb { @include range-thumb; } &::-ms-fill-lower { @include range-ms-fill; } &::-ms-fill-upper { @include range-ms-fill; }
}
// File input type
- type='file'
-
{
border: none; padding-left: 0;
}
// Memorable dates
.usa-date-of-birth { /* stylelint-disable-line */
label { margin-top: 0; } [type=number] { -moz-appearance: textfield; &::-webkit-inner-spin-button { appearance: none; } &::-webkit-contacts-auto-fill-button { visibility: hidden; display: none !important; /* stylelint-disable-line declaration-no-important */ pointer-events: none; height: 0; width: 0; margin: 0; } }
}
.usa-form-group-day, .usa-form-group-month, .usa-form-group-year {
clear: none; float: left; margin-right: 1.5rem; width: 5rem;
}
.usa-form-group-year {
width: 7rem;
}