Skip to content

fix(menus): Support top & left animations #158

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
merged 5 commits into from
Dec 21, 2018
Merged

fix(menus): Support top & left animations #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bd341f8
fix(menus): Support top & left animations
ryanseddon Dec 14, 2018
f8f057d
Update all menu usage in demos to work correctly with new changes
ryanseddon Dec 18, 2018
b7c807d
Update chrome demo page to have menus work correctly
ryanseddon Dec 18, 2018
4e70f76
Update dropdown demos work correctly with new css menus changes
ryanseddon Dec 18, 2018
ca86dae
Update position logic to work correctly in all cases throughout the d…
ryanseddon Dec 18, 2018
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
4 changes: 4 additions & 0 deletions .prettierrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"printWidth": 100,
"singleQuote": true
}
35 changes: 21 additions & 14 deletions demo/arrows/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@
.c-arrow.u-visibility-visible:before,
.c-arrow.u-visibility-visible:after { display: inline-block !important; }
.u-z-index-0 { z-index: 0 !important; }

.menu-container {
transform: translateZ(0);
position: absolute;
}
</style>
</head>
<body>
Expand All @@ -45,20 +50,22 @@
<use xlink:href="../index.svg#zd-svg-icon-14-chevron">
</svg>
</a>
<ul aria-hidden="true" class="c-menu c-menu--down" role="menu">
<li class="c-menu__item" role="menuitem">
<fieldset class="c-chk">
<input checked class="c-chk__input js-border" id="nav.ctl.border" type="checkbox">
<label class="c-chk__label c-chk__label--toggle" for="nav.ctl.border">Show Border</label>
</fieldset>
</li>
<li class="c-menu__item" role="menuitem">
<fieldset class="c-chk">
<input checked class="c-chk__input js-box-shadow" id="nav.ctl.box-shadow" type="checkbox">
<label class="c-chk__label c-chk__label--toggle" for="nav.ctl.box-shadow">Show Box Shadow</label>
</fieldset>
</li>
</ul>
<div class="menu-container u-1/1">
<ul aria-hidden="true" class="c-menu c-menu--down" role="menu">
<li class="c-menu__item" role="menuitem">
<fieldset class="c-chk">
<input checked class="c-chk__input js-border" id="nav.ctl.border" type="checkbox">
<label class="c-chk__label c-chk__label--toggle" for="nav.ctl.border">Show Border</label>
</fieldset>
</li>
<li class="c-menu__item" role="menuitem">
<fieldset class="c-chk">
<input checked class="c-chk__input js-box-shadow" id="nav.ctl.box-shadow" type="checkbox">
<label class="c-chk__label c-chk__label--toggle" for="nav.ctl.box-shadow">Show Box Shadow</label>
</fieldset>
</li>
</ul>
</div>
</li>
</ul>
</header>
Expand Down
46 changes: 29 additions & 17 deletions demo/buttons/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,16 @@
<link href="index.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
<link href="../utilities/index.css" rel="stylesheet">
<style>
.menu-container .c-menu {
position: relative;
}

.menu-container {
transform: translateZ(0);
position: absolute;
}
</style>
</head>
<body>
<header class="c-header">
Expand All @@ -41,20 +51,22 @@
<use xlink:href="../index.svg#zd-svg-icon-14-chevron" />
</svg>
</a>
<ul aria-hidden="true" class="c-menu c-menu--down" role="menu">
<li class="c-menu__item" role="menuitem">
<fieldset class="c-chk">
<input class="c-chk__input js-rtl" id="nav.ctl.rtl" type="checkbox">
<label class="c-chk__label c-chk__label--toggle" for="nav.ctl.rtl">RTL</label>
</fieldset>
</li>
<li class="c-menu__item" role="menuitem">
<fieldset class="c-chk">
<input class="c-chk__input js-custom" id="nav.ctl.custom" type="checkbox">
<label class="c-chk__label c-chk__label--toggle" for="nav.ctl.custom">Custom</label>
</fieldset>
</li>
</ul>
<div class="menu-container u-1/1">
<ul aria-hidden="true" class="c-menu c-menu--down" role="menu">
<li class="c-menu__item" role="menuitem">
<fieldset class="c-chk">
<input class="c-chk__input js-rtl" id="nav.ctl.rtl" type="checkbox">
<label class="c-chk__label c-chk__label--toggle" for="nav.ctl.rtl">RTL</label>
</fieldset>
</li>
<li class="c-menu__item" role="menuitem">
<fieldset class="c-chk">
<input class="c-chk__input js-custom" id="nav.ctl.custom" type="checkbox">
<label class="c-chk__label c-chk__label--toggle" for="nav.ctl.custom">Custom</label>
</fieldset>
</li>
</ul>
</div>
</li>
</ul>
</header>
Expand Down Expand Up @@ -220,13 +232,13 @@ <h2 class="u-fs-lg u-mb-sm">Groups</h2>
</p>
<div class="l-btn-group u-mb-lg">
<button class="c-btn">Split Button</button
><button class="c-btn c-btn--icon js-menu">
><button class="c-btn c-btn--icon js-menu js-menu--split">
<svg class="c-btn__icon">
<use xlink:href="../index.svg#zd-svg-icon-14-chevron">
</svg>
</button>
<div class="u-position-relative">
<ul aria-hidden="true" class="c-menu c-menu--up" role="menu" style="bottom:44px">
<div class="menu-container u-1/1">
<ul aria-hidden="true" class="c-menu c-menu--up" role="menu">
<li class="c-menu__item" role="menuitem">One</li>
<li class="c-menu__item is-selected" role="menuitem">Two</li>
<li class="c-menu__item" role="menuitem">Three</li>
Expand Down
Loading