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

Subtheming and usability tweaks for Polaris/Map Menu #711

Merged
merged 6 commits into from
Dec 19, 2024
Merged

Subtheming and usability tweaks for Polaris/Map Menu #711

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
aa47c69
Refactored CSS for compatibility with site regions, added render meth…
winstonwumbo Dec 18, 2024
7efb0fb
Added css variables to adjust a11y-collapse transition
winstonwumbo Dec 18, 2024
034cf42
Revert "Added css variables to adjust a11y-collapse transition"
winstonwumbo Dec 18, 2024
30f87db
CSS variables to override a11y-collapse duration
winstonwumbo Dec 18, 2024
95eef28
Merge branch 'haxtheweb:master' into master
winstonwumbo Dec 18, 2024
1072192
Copied updates to a11y-collapse/map-menu over to /src/
winstonwumbo Dec 18, 2024
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
6 changes: 3 additions & 3 deletions elements/a11y-collapse/a11y-collapse.js
View file
Open in desktop
winstonwumbo marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -148,9 +148,9 @@ class A11yCollapse extends DDD {
border-color: var(--a11y-collapse-border-color);
max-height: 0;
transition:
visibility 0.75s ease,
opacity 0.75s ease,
max-height 0.75s ease;
visibility var(--a11y-collapse-transition-duration, 0.75s) ease,
opacity var(--a11y-collapse-transition-duration, 0.75s) ease,
max-height var(--a11y-collapse-transition-duration, 0.75s) ease;
overflow-y: hidden;
opacity: 1;
visibility: visible;
Expand Down
7 changes: 7 additions & 0 deletions elements/map-menu/lib/map-menu-submenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,13 @@ class MapMenuSubmenu extends LitElement {
color: var(--map-menu-item-a-color, inherit);
--simple-tooltip-margin: 0 -36px 0 0;
}
:host([is-flex]) a11y-collapse {
--a11y-collapse-transition-duration: var(--a11y-collapse-transition-duration, 0.15s);
}
:host([is-flex][is-nested]) a11y-collapse {
--a11y-collapse-transition-duration: 0s;
}

#container ::slotted(map-menu-builder)::after {
transition: 0.3s ease-in-out all;
}
Expand Down
4 changes: 3 additions & 1 deletion elements/map-menu/map-menu.js
View file
Open in desktop
winstonwumbo marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ class MapMenu extends LitElement {
:host([is-flex]){
--map-menu-after-width: 0px;
--map-menu-active-item-text-decoration: none;
--a11y-collapse-transition-duration: var(--map-menu-flex-transition-duration, 0.15s);

z-index: 100;
}

Expand Down Expand Up @@ -122,7 +124,7 @@ class MapMenu extends LitElement {
left: 0;
width: 100%;

margin: var(--map-menu-layer-2-vertical-margin, 4px 0px);
margin: var(--map-menu-layer-2-vertical-margin, 2px 0px);
padding: var(--map-menu-layer-2-vertical-padding, 28px 0px 40px);
background-color: var(--map-menu-layer-2-background-color, white);
}
Expand Down
Loading
Loading