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

mobile menu

master
rdrew 3 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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 72
      css/components/navigation/nav-primary-wide.css

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

@ -10,17 +10,24 @@
* Nav Primary (wide widths).
*/
@media ((((min-width: 60rem)))) {
@media ((((min-width: 50rem)))) {
body:not(.is-always-mobile-nav) .primary-nav__menu-item {
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) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--nolink {
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)
.primary-nav__menu-item.primary-nav__menu-item--has-children
.primary-nav__menu-link--nolink {
flex-basis: auto;
}
/* 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;
}
@ -46,22 +53,26 @@
border: solid 2px var(--color--primary-50);
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 */
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));
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;
}
/* 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;
inset-block-start: 50%;
inset-inline-start: calc(100% - 0.1875rem);
@ -75,7 +86,8 @@
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;
}
@ -84,7 +96,7 @@
padding-inline-start: 0;
padding-inline-end: 0;
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner--level-3 {
body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner--level-3 {
padding-block: 0;
/*display:none;*/
}
@ -111,8 +123,11 @@
margin-inline-end: 0;
}
body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:not(:last-child) {
margin-inline-end: var(--sp2);
body:not(.is-always-mobile-nav)
.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 {
@ -125,7 +140,11 @@
width: 19.625rem;
/* Ensure that long level-2 menus will never overflow viewport (focused
* 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-inline-start: 0;
padding-block: calc(3 * var(--sp));
@ -145,10 +164,11 @@
border-radius: 0 0 2px 2px;
background: var(--color--white);
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;
margin-block-start: 0;
transform: translate(-50%, 0);
@ -159,25 +179,33 @@ padding-block: 1rem;
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;
left: calc(var(--sp0-5) * -1);
height: 100%;
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-inline-start: 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 */
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;
}
@ -212,7 +240,11 @@ padding-block: 1rem;
* little extra room when the toolbar is fixed (and is shorter).
*/
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