forked from Shopify/dawn
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Simplify header dropdown menu CSS selectors * Create popup utility class to apply popup global settings styles * Add mega menu settings to header section. Add en locale. Add mega menu liquid as snippet. Add mega menu css * Fix indent * Add info to menu type setting * Remove condition for showing dropdown menus for subcategories with no children * Force zero border-radius and top/bottom border for mega menu container since it's full width * Update 1 translation file * Prevent mega menu shadows from overlapping header by reducing menu content z-index. Clean up unused CSS * Add todo * Show mega menu top border only if header does not have separator line enabled * Remove empty line * Update 16 translation files * Update 3 translation files * Remove mega menu snippet since contents are not being re-used. Add mega menu liquid in header directly instead * Update assets/component-mega-menu.css Co-authored-by: MM <martina.marien@shopify.com> * Rename utility class * Add mega menu content layout and styles (Shopify#1338) * Add grid for mega menu content and styles for links * Remove role="list" from ul elements since list is ul elements' default role * Adjust link styles * Set mega menu content max height based on viewport height. Use header bottom position set in JS for calculation * Round position value down instead of up to be more consistent with other instances where --header-bottom-position value is set in JS * Fix spacing * Change level 2 link color to better distinguish from level 3 links * Revert mega menu heading opacity to improve color contrast * Merge branch 'add-mega-menu' of https://github.com/Shopify/dawn into add-mega-menu-content # Conflicts: # snippets/mega-menu.liquid * Add id to mega menu content container (JS will use id to add aria-control attribute to summary element). Add role="list" to ul in mega menu for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Fix typo * Combine css properties for same class * Set mega menu links to display block to ensure bigger touch target * Add some bottom offset to menu max-height to prevent iOS Safari from cutting off bottom of menu * Update link style (remove uppercase) for 2nd level links that have no children * Update L2 link font to bold. Use Liquid to calculate bold font-weight value: "bold" will be +300 relative to default body font-weight, but restricted to max of 1000 * Address feedback. Add explicit role="list" for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Use rem instead of px * Remove redundant css * Update line height to account for body scale * Move JS to set header bottom position CSS variable to its own custom HTML component. This is to ensure this snippet of JS does not run if not needed * Remove usage of --viewport-height since its value may not have been set * Update references (in JS and CSS) to details-disclosure to also account for header-menu which extends details-disclosure * Update logic to set --header-bottom-position-desktop value when menu is toggled, instead of in constructor. This ensures the header is visible when the value is calculated Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: MM <martina.marien@shopify.com>
- Loading branch information
1 parent
2f279e2
commit 23e3400
Showing
27 changed files
with
421 additions
and
55 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
.mega-menu { | ||
position: static; | ||
} | ||
|
||
.mega-menu__content { | ||
background-color: rgb(var(--color-background)); | ||
border-left: 0; | ||
border-radius: 0; | ||
border-right: 0; | ||
left: 0; | ||
max-height: calc(100vh - var(--header-bottom-position-desktop, 20rem) - 4rem); | ||
overflow-y: auto; | ||
padding-bottom: 2.4rem; | ||
padding-top: 2.4rem; | ||
position: absolute; | ||
right: 0; | ||
top: 100%; | ||
z-index: -1; | ||
} | ||
|
||
.header-wrapper--border-bottom .mega-menu__content { | ||
border-top: 0; | ||
} | ||
|
||
.js .mega-menu__content { | ||
opacity: 0; | ||
transform: translateY(-1.5rem); | ||
} | ||
|
||
.mega-menu[open] .mega-menu__content { | ||
animation: animateMenuOpen var(--duration-default) ease; | ||
animation-fill-mode: forwards; | ||
} | ||
|
||
@media (prefers-reduced-motion) { | ||
.mega-menu[open] .mega-menu__content { | ||
opacity: 1; | ||
transform: translateY(0); | ||
} | ||
} | ||
|
||
.mega-menu__list { | ||
display: grid; | ||
gap: 2.4rem 4rem; | ||
grid-template-columns: repeat(6, minmax(0, 1fr)); | ||
list-style: none; | ||
} | ||
|
||
.mega-menu__link { | ||
color: rgba(var(--color-foreground), 0.75); | ||
display: block; | ||
line-height: calc(1 + 0.3 / var(--font-body-scale)); | ||
padding-bottom: 0.8rem; | ||
padding-top: 0.8rem; | ||
text-decoration: none; | ||
transition: text-decoration var(--duration-short) ease; | ||
} | ||
|
||
.mega-menu__link:hover, | ||
.mega-menu__link--active { | ||
color: rgb(var(--color-foreground)); | ||
text-decoration: underline; | ||
} | ||
|
||
.mega-menu__link--active:hover { | ||
text-decoration-thickness: 0.2rem; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.