Visitar URL original
USWDS - Megamenu: Fix error with $theme-header-max-width: "none" by amyleadem · Pull Request #5072 · uswds/uswds · GitHub
Skip to content

USWDS - Megamenu: Fix error with $theme-header-max-width: "none" #5072

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

Merged
thisisdano merged 14 commits into from
Feb 28, 2023
Merged

USWDS - Megamenu: Fix error with $theme-header-max-width: "none" #5072

Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
8c531d2
Add 'none' spacing token
Dec 16, 2022
36c3de4
Revert spacing none
Dec 16, 2022
3850be4
Add conditional for -max-width == 'none'
Dec 16, 2022
c40929b
Add conditional for max-width=none and standard/extended
Dec 16, 2022
e86325c
Undo commented line
Dec 16, 2022
1fd220e
Add 'none' spacing token
Dec 20, 2022
49170c3
Add comments
Dec 20, 2022
98f8a1e
Merge branch 'develop' of https://github.com/uswds/uswds into al-fix-…
Dec 20, 2022
8778d33
Simplify outer-megamenu conditional
Jan 26, 2023
2492e62
Revert "Simplify outer-megamenu conditional"
Jan 26, 2023
c3d08f8
Add outer megamenu width calc conditionals for when max-width:none
Jan 26, 2023
786895a
Set when header-max width is none
Jan 31, 2023
4e97c31
Clean up outer-megamenu comments
Feb 1, 2023
afda7db
Fix typos
Feb 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Clean up outer-megamenu comments
  • Loading branch information
Amy Leadem
Amy Leadem committed Feb 1, 2023
commit 4e97c31f67a2bd89bc4b2a57f5c0bdfb81a20891
9 changes: 6 additions & 3 deletions packages/usa-header/src/styles/_usa-megamenu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,18 @@
@use "sass:meta";
@use "uswds-core" as *;

// Calculate the width of the outer megamenu pseudo elements
@mixin outer-megamenu($header-max-width: $theme-header-max-width, $type) {
@include u-pin("y");
background-color: color("primary-darker");
content: "";
display: block;
position: absolute;

// Retrieve the unit value of $theme-header-max-width, depending on type of value added
// Set variabled for submenu max-width
$mw: smart-quote($header-max-width);
@if meta.type-of($header-max-width) == "string" {
// Retrieve the unit equivalent for header max width
$mw: units($header-max-width);
}

Expand All @@ -20,9 +22,10 @@
$mw: 100vw;
}

// subtract half the value of the viewport width from half the value of the submenu width
// standard needs the additional $theme-site-margins-width to accommodate different paddings/structure on #basic-mega-nav-section-two
// Calculate pseudo element width
// Subtract half the submenu width from half the viewport width
@if $type == "standard" {
// Add theme margin width to match padding in .usa-nav-container
width: calc(50vw - $mw / 2 + units($theme-site-margins-width));
} @else if $type == "extended" {
width: calc(50vw - $mw / 2);
Expand Down