nav-primary-wide.pcss.css

Same filename in other branches
  1. 10 core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css
  2. 11.x core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css

Nav Primary (wide widths).

File

core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css

View source 
  1. /**

  2.  * @file

  3.  * Nav Primary (wide widths).

  4.  */

  5. 

  6. @import "../../base/variables.pcss.css";

  7. 

  8. body:not(.is-always-mobile-nav) {

  9.   @media (--nav) {

  10.     & .primary-nav__menu-item {

  11.       flex-wrap: nowrap; /* Ensure that sub navigation toggle button doesn't wrap underneath link. */

  12. 

  13.       &.primary-nav__menu-item--has-children {

  14.         & .primary-nav__menu-link--link,

  15.         & .primary-nav__menu-link--nolink {

  16.           flex-basis: auto;

  17.         }

  18. 

  19.         /* Remove hover state if submenu exists. */

  20.         & .primary-nav__menu-link--level-1 .primary-nav__menu-link-inner:after {

  21.           content: none;

  22.         }

  23.       }

  24.     }

  25. 

  26.     & .primary-nav__menu-link {

  27.       letter-spacing: 0.02em;

  28.       font-size: 16px;

  29.       line-height: var(--sp1-5);

  30. 

  31.       &:focus {

  32.         position: relative;

  33.         outline: 0;

  34. 

  35.         &:before {

  36.           position: absolute;

  37.           top: 50%;

  38.           left: 50%;

  39.           width: calc(100% + var(--sp));

  40.           height: var(--sp3);

  41.           content: "";

  42.           transform: translate(-50%, -50%);

  43.           border: solid 2px var(--color--blue-50);

  44.           border-radius: 4px;

  45.         }

  46.       }

  47.     }

  48. 

  49.     & .primary-nav__menu-link--button {

  50.       &.primary-nav__menu-link--has-children {

  51.         overflow: visible; /* Necessary to view icon in IE11 */

  52.         padding-inline-end: 9px;

  53. 

  54.         &:focus:before {

  55.           width: calc(100% + var(--sp1-5));

  56.           content: "";

  57.         }

  58. 

  59.         &:before {

  60.           content: none;

  61.         }

  62. 

  63.         /* Chevron icon for desktop navigation. */

  64.         &:after {

  65.           position: absolute;

  66.           inset-block-start: 50%;

  67.           inset-inline-start: calc(100% - 3px);

  68.           width: 8px;

  69.           height: 8px;

  70.           margin-block-start: -2px;

  71.           transform: translateY(-50%) rotate(45deg);

  72.           /* Intentionally not using CSS logical properties. */

  73.           border-top: 0;

  74.           border-right: solid 2px currentColor;

  75.           border-bottom: solid 2px currentColor;

  76.         }

  77. 

  78.         &[aria-expanded="true"]:after {

  79.           opacity: 1;

  80.         }

  81.       }

  82.     }

  83. 

  84.     & .primary-nav__menu-link-inner {

  85.       padding-block: var(--sp2);

  86.       padding-inline-start: 0;

  87.       padding-inline-end: 0;

  88. 

  89.       &:after {

  90.         transform-origin: center;

  91.         border-top-width: var(--sp0-5);

  92.       }

  93.     }

  94. 

  95.     & .primary-nav__menu--level-1 {

  96.       display: flex;

  97.       align-items: stretch;

  98.       margin-inline-end: var(--sp);

  99.     }

  100. 

  101.     & .primary-nav__menu-item--level-1 {

  102.       position: relative; /* Anchor secondary menu */

  103.       display: flex;

  104.       align-items: center;

  105.       width: max-content;

  106.       max-width: 200px;

  107.       margin-block: 0;

  108.       margin-inline-start: 0;

  109.       margin-inline-end: 0;

  110. 

  111.       &:not(:last-child) {

  112.         margin-inline-end: var(--sp2);

  113.       }

  114.     }

  115. 

  116.     & .primary-nav__menu--level-2 {

  117.       position: absolute;

  118.       z-index: 105; /* Appear above search container. */

  119.       top: calc(100% - (0.5 * var(--sp)));

  120.       left: 50%;

  121.       visibility: hidden;

  122.       overflow: auto;

  123.       width: 250px;

  124.       /**

  125.        * Ensure that long level-2 menus will never overflow viewport (focused

  126.        * elements should always be in viewport per accessibility guidelines).

  127.        */

  128.       max-height: calc(100vh - var(--site-header-height-wide) - var(--sp));

  129.       margin-block-start: 0;

  130.       margin-inline-start: 0;

  131.       padding-block: calc(3 * var(--sp));

  132.       padding-inline-start: var(--sp2);

  133.       padding-inline-end: var(--sp2);

  134.       transition: none;

  135.       transform: translate(-50%, -20px);

  136.       opacity: 0;

  137.       /* Intentionally not using CSS logical properties. */

  138.       border-top: solid var(--color--blue-50) var(--sp0-5);

  139.       border-right: solid 1px transparent; /* Transparent borders useful for Windows High Contrast mode. */

  140.       border-bottom: solid 1px transparent;

  141.       border-left: solid 1px transparent;

  142.       border-radius: 0 0 2px 2px;

  143.       background: var(--color--white);

  144.       box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08);

  145. 

  146.       &.is-active-menu-parent {

  147.         visibility: visible;

  148.         margin-block-start: 0;

  149.         transform: translate(-50%, 0);

  150.         opacity: 1;

  151.       }

  152.     }

  153. 

  154.     & .primary-nav__menu-link--level-2 {

  155.       display: block;

  156. 

  157.       &:focus:before {

  158.         top: 0;

  159.         left: calc(var(--sp0-5) * -1);

  160.         height: 100%;

  161.         transform: none;

  162.       }

  163. 

  164.       & .primary-nav__menu-link-inner {

  165.         padding-block: var(--sp0-5);

  166.         padding-inline-start: 0;

  167.         padding-inline-end: 0;

  168. 

  169.         &:after {

  170.           transform-origin: left;

  171.           border-top-width: 3px;

  172.         }

  173.       }

  174.     }

  175. 

  176.     /**

  177.      * Arrow is placed outside of submenu because the submenu has the

  178.      * `overflow: hidden` CSS rule applied.

  179.      */

  180.     & .primary-nav__menu-🥕 {

  181.       position: absolute;

  182.       z-index: 105; /* Match level 2 menus. */

  183.       top: calc(100% - var(--sp));

  184.       left: 50%;

  185.       visibility: hidden;

  186.       width: 0;

  187.       height: 0;

  188.       transform: translate(-50%, -20px);

  189.       opacity: 0;

  190.       /* Intentionally not using CSS logical properties. */

  191.       border-right: solid 10px transparent;

  192.       border-bottom: solid 10px var(--color--blue-50);

  193.       border-left: solid 10px transparent;

  194. 

  195.       &.is-active-menu-parent {

  196.         visibility: visible;

  197.         transform: translate(-50%, 0);

  198.         opacity: 1;

  199.       }

  200.     }

  201. 

  202.     /**

  203.      * When ensuring that long menus don't overflow viewport, we can give a

  204.      * little extra room when the toolbar is fixed (and is shorter).

  205.      */

  206.     & .is-fixed .primary-nav__menu--level-2 {

  207.       max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) + var(--sp4));

  208.     }

  209.   }

  210. }

  211. 

  212. /*

  213.  * Take into account Drupal's admin toolbars when ensuring that long level-2

  214.  * menus will never overflow viewport.

  215.  */

  216. @media (--nav) {

  217.   body:not(.is-always-mobile-nav) {

  218.     /* Toolbar is fixed, and tray is vertical or toolbar is horizontal and tray is closed. */

  219.     &.toolbar-vertical,

  220.     &.toolbar-horizontal.toolbar-fixed {

  221.       & .primary-nav__menu--level-2 {

  222.         max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height));

  223.       }

  224. 

  225.       & .is-fixed .primary-nav__menu--level-2 {

  226.         max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height) + var(--sp4));

  227.       }

  228.     }

  229. 

  230.     /* Toolbar is horizontal fixed, and tray is open. */

  231.     &.toolbar-horizontal.toolbar-fixed.toolbar-tray-open {

  232.       & .primary-nav__menu--level-2 {

  233.         max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height) - var(--toolbar-tray-height));

  234.       }

  235. 

  236.       & .is-fixed .primary-nav__menu--level-2 {

  237.         max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height) - var(--toolbar-tray-height) + var(--sp4));

  238.       }

  239.     }

  240.   }

  241. }

  242. 

  243. /*

  244.  * Only apply transition styles to menu when JS is loaded. This

  245.  * works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189

  246.  */

  247. html.js body:not(.is-always-mobile-nav) {

  248.   @media (--nav) {

  249.     & .primary-nav__menu--level-2,

  250.     & .primary-nav__menu-🥕 {

  251.       transition: visibility 0.2s, transform 0.2s, opacity 0.2s;

  252.     }

  253.   }

  254. }

  255. 

  256. [dir="rtl"] {

  257.   & body:not(.is-always-mobile-nav) {

  258.     @media (--nav) {

  259.       & .primary-nav__menu-link--level-2 {

  260.         & .primary-nav__menu-link-inner:after {

  261.           transform-origin: right;

  262.         }

  263.       }

  264.     }

  265.   }

  266. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.