-
Notifications
You must be signed in to change notification settings - Fork 196
Open
Assignees
Labels
Affects: DisplayRelates to how code renders on-screenRelates to how code renders on-screenContext: SassIssue is in SassIssue is in SassGood First IssueA good issue for those new to USWDSA good issue for those new to USWDS
Description
Summary
There are nearly identical styles in _uswds-theme-custom-styles.scss as there are in USWDS.
I tried testing uswds/uswds#5013 in site and couldn't because of the overriding identical styles.
For example:
uswds-site/css/_uswds-theme-custom-styles.scss
Lines 2900 to 2999 in 5423779
| .usa-banner__button { | |
| @include button-unstyled; | |
| @include u-pin("left"); | |
| @include u-pin("y"); | |
| @include u-text("primary", underline, baseline); | |
| @include set-link-from-bg( | |
| $site-banner-background-color, | |
| $site-banner-link-color, | |
| $context: $banner-context | |
| ); | |
| display: block; | |
| font-size: font-size($site-banner-font-family, 1); | |
| height: auto; | |
| line-height: line-height($site-banner-font-family, 2); | |
| padding-top: units(0); | |
| padding-left: units(0); | |
| text-decoration: none; | |
| width: auto; | |
| @include at-media-max("tablet") { | |
| width: 100%; | |
| } | |
| @include at-media("tablet") { | |
| @include place-icon( | |
| $banner-icon-chevron, | |
| "after", | |
| "2px", | |
| middle, | |
| $site-banner-background-color | |
| ); | |
| @include set-link-from-bg( | |
| $site-banner-background-color, | |
| $site-banner-link-color, | |
| $context: $banner-context | |
| ); | |
| @include u-pin("none"); | |
| display: inline; | |
| margin-left: units(1); | |
| position: relative; | |
| &:after { | |
| position: absolute; | |
| } | |
| &:hover { | |
| // Underline added to inner text instead. | |
| text-decoration: none; | |
| } | |
| } | |
| &[aria-expanded="false"] { | |
| background-image: none; | |
| } | |
| &[aria-expanded="true"] { | |
| background-image: none; | |
| @include at-media-max("tablet") { | |
| @include place-icon( | |
| $banner-icon-close, | |
| "after", | |
| 0, | |
| middle, | |
| "base-lighter" | |
| ); | |
| &:before { | |
| @include u-pin("y"); | |
| @include u-pin("right"); | |
| background-color: color("base-lighter"); | |
| content: ""; | |
| display: block; | |
| height: units($size-touch-target); | |
| width: units($size-touch-target); | |
| } | |
| &:after { | |
| @include u-pin("y"); | |
| @include u-pin("right"); | |
| } | |
| } | |
| @include at-media("tablet") { | |
| @include place-icon( | |
| $banner-icon-chevron-up, | |
| "after", | |
| "2px", | |
| middle, | |
| $site-banner-background-color | |
| ); | |
| height: auto; | |
| padding: units(0); | |
| position: relative; | |
| &:after { | |
| position: absolute; | |
| } | |
| } | |
| } | |
| } |
Tasks
We should remove all USA Banner styles from uswds-site that are duplicates of styles in uswds.
Metadata
Metadata
Assignees
Labels
Affects: DisplayRelates to how code renders on-screenRelates to how code renders on-screenContext: SassIssue is in SassIssue is in SassGood First IssueA good issue for those new to USWDSA good issue for those new to USWDS
Type
Projects
Status
Ready to Schedule