Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

USWDS-Site: Remove duplicate banner styles #1962

Open
mejiaj opened this issue Dec 21, 2022 · 2 comments · May be fixed by #2743
Open

USWDS-Site: Remove duplicate banner styles #1962

mejiaj opened this issue Dec 21, 2022 · 2 comments · May be fixed by #2743
Assignees
@cathybaptista
Labels
Affects: Display Relates to how code renders on-screen Context: Sass Issue is in Sass Good First Issue A good issue for those new to USWDS Role: Dev Development/engineering skills needed

Comments

@mejiaj
Copy link
Contributor

mejiaj commented Dec 21, 2022 •
edited
Loading

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.
@mejiaj mejiaj added the Affects: Display Relates to how code renders on-screen label Dec 21, 2022
@mejiaj mejiaj self-assigned this Dec 21, 2022
@mejiaj mejiaj moved this to Ready to Schedule in USWDS Core Project Data Jun 18, 2024
@mejiaj mejiaj added Context: Sass Issue is in Sass Good First Issue A good issue for those new to USWDS Role: Dev Development/engineering skills needed labels Jun 18, 2024
@amyleadem amyleadem changed the title Remove duplicate banner styles USWDS-Site: Remove duplicate banner styles Jun 20, 2024
@RachelCorsino RachelCorsino assigned mejiaj and unassigned mejiaj Jun 26, 2024
@cathybaptista cathybaptista moved this from Ready to Schedule to In progress in USWDS Core Project Data Jul 1, 2024
@cathybaptista cathybaptista linked a pull request Jul 5, 2024 that will close this issue
Open
3 tasks
@amyleadem amyleadem moved this from In progress to Review in USWDS Core Project Data Jul 8, 2024
@mahoneycm
Copy link
Contributor

I left a comment in #2743 to try to confirm the scope of this issue. Including here for visibility:

Does this issue aim to address all duplicate styles in _uswds-theme-custom-styles.scss? Or is it scoped specifically to banner styles? If it's scoped to banner styles, should we address the additional duplications or are we primarily focusing on banner button?

@mejiaj
Copy link
Contributor Author

mejiaj commented Jul 10, 2024 •
edited
Loading

@mahoneycm this is strictly scoped to duplicate banner styles.

@cathybaptista cathybaptista moved this from Review to In progress in USWDS Core Project Data Jul 23, 2024
@brunerae brunerae moved this from In progress to Ready to Schedule in USWDS Core Project Data Sep 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@cathybaptista cathybaptista

Labels
Affects: Display Relates to how code renders on-screen Context: Sass Issue is in Sass Good First Issue A good issue for those new to USWDS Role: Dev Development/engineering skills needed
Projects
USWDS Core Project Data
Status: Ready to Schedule
Milestone
No milestone
3 participants
@mejiaj @mahoneycm @cathybaptista