rdrew
/
olivesnews
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

mobile menu

master
rdrew 8 hours ago
parent
1f2a343815
commit
94d782cbd8
1 changed files with 52 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 70
      css/components/navigation/nav-primary-wide.css

70
css/components/navigation/nav-primary-wide.css
Unescape View File

@ -10,17 +10,24 @@
* Nav Primary (wide widths). * Nav Primary (wide widths).
*/ */
@media ((((min-width: 60rem)))) { @media ((((min-width: 50rem)))) {
body:not(.is-always-mobile-nav) .primary-nav__menu-item { body:not(.is-always-mobile-nav) .primary-nav__menu-item {
flex-wrap: nowrap; /* Ensure that sub navigation toggle button doesn't wrap underneath link. */ flex-wrap: nowrap; /* Ensure that sub navigation toggle button doesn't wrap underneath link. */
} }
body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--link, body:not(.is-always-mobile-nav)
body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--nolink { .primary-nav__menu-item.primary-nav__menu-item--has-children
.primary-nav__menu-link--link,
body:not(.is-always-mobile-nav)
.primary-nav__menu-item.primary-nav__menu-item--has-children
.primary-nav__menu-link--nolink {
flex-basis: auto; flex-basis: auto;
} }
/* Remove hover state if submenu exists. */ /* Remove hover state if submenu exists. */
body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--level-1 .primary-nav__menu-link-inner::after { body:not(.is-always-mobile-nav)
.primary-nav__menu-item.primary-nav__menu-item--has-children
.primary-nav__menu-link--level-1
.primary-nav__menu-link-inner::after {
content: none; content: none;
} }
@ -46,22 +53,26 @@
border: solid 2px var(--color--primary-50); border: solid 2px var(--color--primary-50);
border-radius: 0.25rem; border-radius: 0.25rem;
} }
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children { body:not(.is-always-mobile-nav)
.primary-nav__menu-link--button.primary-nav__menu-link--has-children {
overflow: visible; /* Necessary to view icon in IE11 */ overflow: visible; /* Necessary to view icon in IE11 */
padding-inline-end: 0.5625rem; padding-inline-end: 0.5625rem;
} }
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:focus::before { body:not(.is-always-mobile-nav)
.primary-nav__menu-link--button.primary-nav__menu-link--has-children:focus::before {
width: calc(100% + var(--sp1-5)); width: calc(100% + var(--sp1-5));
content: ""; content: "";
} }
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before { body:not(.is-always-mobile-nav)
.primary-nav__menu-link--button.primary-nav__menu-link--has-children::before {
content: none; content: none;
} }
/* Chevron icon for desktop navigation. */ /* Chevron icon for desktop navigation. */
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after { body:not(.is-always-mobile-nav)
.primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
position: absolute; position: absolute;
inset-block-start: 50%; inset-block-start: 50%;
inset-inline-start: calc(100% - 0.1875rem); inset-inline-start: calc(100% - 0.1875rem);
@ -75,7 +86,8 @@
border-bottom: solid 2px currentColor; border-bottom: solid 2px currentColor;
} }
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children[aria-expanded="true"]::after { body:not(.is-always-mobile-nav)
.primary-nav__menu-link--button.primary-nav__menu-link--has-children[aria-expanded="true"]::after {
opacity: 1; opacity: 1;
} }
@ -111,8 +123,11 @@
margin-inline-end: 0; margin-inline-end: 0;
} }
body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:not(:last-child) { body:not(.is-always-mobile-nav)
margin-inline-end: var(--sp2); .primary-nav__menu-item--level-1:not(:last-child) {
/* margin-inline-end: var(--sp2); */
/* menu_test */
margin-inline-end: var(--sp1-5);
} }
body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 { body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
@ -125,7 +140,11 @@
width: 19.625rem; width: 19.625rem;
/* Ensure that long level-2 menus will never overflow viewport (focused /* Ensure that long level-2 menus will never overflow viewport (focused
* elements should always be in viewport per accessibility guidelines). */ * elements should always be in viewport per accessibility guidelines). */
max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp)); max-height: calc(
100vh - var(--site-header-height-wide) -
var(--drupal-displace-offset-top, 0px) -
var(--drupal-displace-offset-bottom, 0px) - var(--sp)
);
margin-block-start: 0; margin-block-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
padding-block: calc(3 * var(--sp)); padding-block: calc(3 * var(--sp));
@ -145,10 +164,11 @@
border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px;
background: var(--color--white); background: var(--color--white);
box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08);
padding-block: 1rem; padding-block: 1rem;
} }
body:not(.is-always-mobile-nav) .primary-nav__menu--level-2.is-active-menu-parent { body:not(.is-always-mobile-nav)
.primary-nav__menu--level-2.is-active-menu-parent {
visibility: visible; visibility: visible;
margin-block-start: 0; margin-block-start: 0;
transform: translate(-50%, 0); transform: translate(-50%, 0);
@ -159,25 +179,33 @@ padding-block: 1rem;
display: block; display: block;
} }
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2:focus::before { body:not(.is-always-mobile-nav)
.primary-nav__menu-link--level-2:focus::before {
top: 0; top: 0;
left: calc(var(--sp0-5) * -1); left: calc(var(--sp0-5) * -1);
height: 100%; height: 100%;
transform: none; transform: none;
} }
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner { body:not(.is-always-mobile-nav)
.primary-nav__menu-link--level-2
.primary-nav__menu-link-inner {
padding-block: var(--sp0-5); padding-block: var(--sp0-5);
padding-inline-start: 0; padding-inline-start: 0;
padding-inline-end: 0; padding-inline-end: 0;
} }
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner::after { body:not(.is-always-mobile-nav)
.primary-nav__menu-link--level-2
.primary-nav__menu-link-inner::after {
transform-origin: left; /* LTR */ transform-origin: left; /* LTR */
border-top-width: 3px; border-top-width: 3px;
} }
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner::after { [dir="rtl"]
body:not(.is-always-mobile-nav)
.primary-nav__menu-link--level-2
.primary-nav__menu-link-inner::after {
transform-origin: right; transform-origin: right;
} }
@ -212,7 +240,11 @@ padding-block: 1rem;
* little extra room when the toolbar is fixed (and is shorter). * little extra room when the toolbar is fixed (and is shorter).
*/ */
body:not(.is-always-mobile-nav) .is-fixed .primary-nav__menu--level-2 { body:not(.is-always-mobile-nav) .is-fixed .primary-nav__menu--level-2 {
max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp) + var(--sp4)); max-height: calc(
100vh - var(--site-header-height-wide) -
var(--drupal-displace-offset-top, 0px) -
var(--drupal-displace-offset-bottom, 0px) - var(--sp) + var(--sp4)
);
} }
} }

Write Preview
Loading…
Cancel
Save