Skip to content

Commit

Permalink
Improve consistency of dropdowns with USWDS, other fields (#263)
Browse files Browse the repository at this point in the history
**Why**: Backports styling from brochure site, and makes it so that form fields share common background and border styling, and inherits more from USWDS (specifically the arrow graphic).
  • Loading branch information
aduth authored Oct 25, 2021
1 parent 64a042f commit 5703a67
Show file tree
Hide file tree
Showing 3 changed files with 4 additions and 31 deletions.
3 changes: 2 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
- Add Login.gov-specific component configuration. ([#258])(https://github.com/18F/identity-style-guide/pull/258)
- [Identifier component](https://designsystem.digital.gov/components/identifier/)
- Link colors on dark backgrounds
- Overlay: Updated visual appearance. ([#260](https://github.com/18F/identity-style-guide/pull/260))
- Overlay is now shown with a lighter backdrop color. ([#260](https://github.com/18F/identity-style-guide/pull/260))
- Form Dropdown is now more visually consistent with other form fields. ([#263](https://github.com/18F/identity-style-guide/pull/260))
- Form hint text is now shown with an italicized style and increased vertical margins. ([#262](https://github.com/18F/identity-style-guide/pull/262))

## 6.2.0
Expand Down
11 changes: 0 additions & 11 deletions src/img/arrow-down-filled.svg

This file was deleted.

21 changes: 2 additions & 19 deletions src/scss/components/_inputs.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ $checkbox-radio-size: .875rem;
$input-select-margin-right: 1;

.usa-input,
.usa-textarea {
.usa-textarea,
.usa-select {
@include u-border-color('primary-light');
font-weight: font-weight('bold');
background-color: color('primary-lightest');
Expand All @@ -39,24 +40,6 @@ $input-select-margin-right: 1;
border-top-right-radius: 0;
}

.usa-select {
@include u-border-color('primary-light');
@include add-background-svg('arrow-down-filled');
font-weight: font-weight('bold');
background-position: right .75rem center;
background-size: units(1);
border-radius: radius('md');

&:focus {
@include disable-default-focus-styles;
box-shadow: roundable-focus-outline-box-shadows();
}

&.usa-input--error {
@include u-border-color('error');
}
}

.usa-label {
font-weight: font-weight('bold');
}
Expand Down

0 comments on commit 5703a67

Please sign in to comment.