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

Add scroll shadow to #multipage-nav wrapper for overflowing screens #12559

Merged
merged 13 commits into from
Jul 15, 2024
Merged

Add scroll shadow to #multipage-nav wrapper for overflowing screens #12559

Changes from 4 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
1f65543
Add scroll shadow to `#multipage-nav` wrapper for overflowing desktop…
ramram-mf Jun 30, 2024
a615b0d
Merge branch 'main' into TP1-175-secondary-menu-cuts-off-if-there-s-t…
ramram-mf Jun 30, 2024
bd64d57
Fix linting for scroll shadow scss
ramram-mf Jun 30, 2024
001ee62
Merge branch 'TP1-175-secondary-menu-cuts-off-if-there-s-too-many-nav…
ramram-mf Jun 30, 2024
23cb5e1
Implement white scroll shadow with tailwind utility classes for secon…
ramram-mf Jul 10, 2024
71e2f59
Resize white gradient shadow for overflowing elements in secondary na…
ramram-mf Jul 10, 2024
6342a18
Remove unused style block from scss targeting secondary nav for overf…
ramram-mf Jul 10, 2024
064fe45
Merge branch 'main' into TP1-175-secondary-menu-cuts-off-if-there-s-t…
ramram-mf Jul 10, 2024
b50593a
Lint fix for multipage-nav.scss
ramram-mf Jul 11, 2024
bc8ec11
Merge branch 'TP1-175-secondary-menu-cuts-off-if-there-s-too-many-nav…
ramram-mf Jul 11, 2024
5708d0d
Update secondary navigation overflow behavior to wrap
ramram-mf Jul 15, 2024
7cd098a
Merge branch 'main' into TP1-175-secondary-menu-cuts-off-if-there-s-t…
ramram-mf Jul 15, 2024
4e1fa76
Merge branch 'main' into TP1-175-secondary-menu-cuts-off-if-there-s-t…
ramram-mf Jul 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
35 changes: 35 additions & 0 deletions source/sass/components/multipage-nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,41 @@
@media (min-width: $bp-md) {
border-bottom: 1px solid $gray-20;
}

> .container > .row > .col-12 {
overflow: auto;

background:
/* Shadow Cover LEFT */
linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)),
/* Shadow Cover RIGHT */
linear-gradient(to right, rgba(255, 255, 255, 0) 70%, white 100%),
/* Shadow LEFT */
radial-gradient(
farthest-side at 0 50%,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0)
),
/* Shadow RIGHT */
radial-gradient(
farthest-side at 100% 50%,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0)
);

background-repeat: no-repeat;
background-size:
40px 100%,
calc(100% - 40px) 100%,
14px 100%,
14px 100%;
background-position:
left center,
right center,
left center,
right center;
background-attachment: local, local, scroll, scroll;
}
}
}

Expand Down