nav-primary-wide.css

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

Nav Primary (wide widths).

File

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

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. /**

  9.  * @file

  10.  * Nav Primary (wide widths).

  11.  */

  12. 

  13. @media (min-width: 75rem) {

  14.   body:not(.is-always-mobile-nav) .primary-nav__menu-item {

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

  16.   }

  17.   body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--link,

  18.   body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--nolink {

  19.     flex-basis: auto;

  20.   }

  21. 

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

  23.   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 {

  24.     content: none;

  25.   }

  26. 

  27.   body:not(.is-always-mobile-nav) .primary-nav__menu-link {

  28.     letter-spacing: 0.02em;

  29.     font-size: 1rem;

  30.     line-height: 1.6875rem;

  31.   }

  32. 

  33.   body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus {

  34.     position: relative;

  35.     outline: 0;

  36.   }

  37. 

  38.   body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus:before {

  39.     position: absolute;

  40.     top: 50%;

  41.     left: 50%;

  42.     width: calc(100% + 1.125rem);

  43.     height: 3.375rem;

  44.     content: "";

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

  46.     border: solid 2px #2494db;

  47.     border-radius: 0.25rem;

  48.   }

  49.   [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children {

  50.     padding-right: 0.5625rem;

  51.   }

  52.   [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children {

  53.     padding-left: 0.5625rem;

  54.   }

  55.   body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children {

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

  57.   }

  58. 

  59.   body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:focus:before {

  60.     width: calc(100% + 1.6875rem);

  61.     content: "";

  62.   }

  63. 

  64.   body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:before {

  65.     content: none;

  66.   }

  67. 

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

  69.   [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {

  70.     left: calc(100% - 0.1875rem);

  71.   }

  72.   [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {

  73.     right: calc(100% - 0.1875rem);

  74.   }

  75.   body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {

  76.     position: absolute;

  77.     top: 50%;

  78.     width: 0.5rem;

  79.     height: 0.5rem;

  80.     margin-top: -2px;

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

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

  83.     border-top: 0;

  84.     border-right: solid 2px currentColor;

  85.     border-bottom: solid 2px currentColor;

  86.   }

  87. 

  88.   body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children[aria-expanded="true"]:after {

  89.     opacity: 1;

  90.   }

  91. 

  92.   [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {

  93.     padding-left: 0;

  94.   }

  95. 

  96.   [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {

  97.     padding-right: 0;

  98.   }

  99. 

  100.   [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {

  101.     padding-right: 0;

  102.   }

  103. 

  104.   [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {

  105.     padding-left: 0;

  106.   }

  107. 

  108.   body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {

  109.     padding-top: 2.25rem;

  110.     padding-bottom: 2.25rem;

  111.   }

  112. 

  113.   body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner:after {

  114.     transform-origin: center;

  115.     border-top-width: 9px;

  116.   }

  117. 

  118.   [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {

  119.     margin-right: 1.125rem;

  120.   }

  121. 

  122.   [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {

  123.     margin-left: 1.125rem;

  124.   }

  125. 

  126.   body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {

  127.     display: flex;

  128.     align-items: stretch;

  129.   }

  130. 

  131.   [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {

  132.     margin-left: 0;

  133.   }

  134. 

  135.   [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {

  136.     margin-right: 0;

  137.   }

  138. 

  139.   [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {

  140.     margin-right: 0;

  141.   }

  142. 

  143.   [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {

  144.     margin-left: 0;

  145.   }

  146. 

  147.   body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {

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

  149.     display: flex;

  150.     align-items: center;

  151.     width: max-content;

  152.     max-width: 12.5rem;

  153.     margin-top: 0;

  154.     margin-bottom: 0;

  155.   }

  156. 

  157.   [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:not(:last-child) {

  158.     margin-right: 2.25rem;

  159.   }

  160. 

  161.   [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:not(:last-child) {

  162.     margin-left: 2.25rem;

  163.   }

  164. 

  165.   [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {

  166.     margin-left: 0;

  167.   }

  168. 

  169.   [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {

  170.     margin-right: 0;

  171.   }

  172. 

  173.   [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {

  174.     padding-left: 2.25rem;

  175.   }

  176. 

  177.   [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {

  178.     padding-right: 2.25rem;

  179.   }

  180. 

  181.   [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {

  182.     padding-right: 2.25rem;

  183.   }

  184. 

  185.   [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {

  186.     padding-left: 2.25rem;

  187.   }

  188. 

  189.   body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {

  190.     position: absolute;

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

  192.     top: calc(100% - 0.5625rem);

  193.     left: 50%;

  194.     visibility: hidden;

  195.     overflow: auto;

  196.     width: 15.625rem;

  197.     /**

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

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

  200.        */

  201.     max-height: calc(100vh - 12.375rem);

  202.     margin-top: 0;

  203.     padding-top: 3.375rem;

  204.     padding-bottom: 3.375rem;

  205.     transition: none;

  206.     transform: translate(-50%, -1.25rem);

  207.     opacity: 0;

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

  209.     border-top: solid #2494db 9px;

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

  211.     border-bottom: solid 1px transparent;

  212.     border-left: solid 1px transparent;

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

  214.     background: #fff;

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

  216.   }

  217. 

  218.   body:not(.is-always-mobile-nav) .primary-nav__menu--level-2.is-active-menu-parent {

  219.     visibility: visible;

  220.     margin-top: 0;

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

  222.     opacity: 1;

  223.   }

  224. 

  225.   body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 {

  226.     display: block;

  227.   }

  228. 

  229.   body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2:focus:before {

  230.     top: 0;

  231.     left: -0.5625rem;

  232.     height: 100%;

  233.     transform: none;

  234.   }

  235. 

  236.   [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {

  237.     padding-left: 0;

  238.   }

  239. 

  240.   [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {

  241.     padding-right: 0;

  242.   }

  243. 

  244.   [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {

  245.     padding-right: 0;

  246.   }

  247. 

  248.   [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {

  249.     padding-left: 0;

  250.   }

  251. 

  252.   body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {

  253.     padding-top: 0.5625rem;

  254.     padding-bottom: 0.5625rem;

  255.   }

  256. 

  257.   body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner:after {

  258.     transform-origin: left;

  259.     border-top-width: 3px;

  260.   }

  261. 

  262.   /**

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

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

  265.      */

  266.   body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 {

  267.     position: absolute;

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

  269.     top: calc(100% - 1.125rem);

  270.     left: 50%;

  271.     visibility: hidden;

  272.     width: 0;

  273.     height: 0;

  274.     transform: translate(-50%, -1.25rem);

  275.     opacity: 0;

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

  277.     border-right: solid 10px transparent;

  278.     border-bottom: solid 10px #2494db;

  279.     border-left: solid 10px transparent;

  280.   }

  281. 

  282.   body:not(.is-always-mobile-nav) .primary-nav__menu-🥕.is-active-menu-parent {

  283.     visibility: visible;

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

  285.     opacity: 1;

  286.   }

  287. 

  288.   /**

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

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

  291.      */

  292.   body:not(.is-always-mobile-nav) .is-fixed .primary-nav__menu--level-2 {

  293.     max-height: calc(100vh - 7.875rem);

  294.   }

  295. }

  296. 

  297. /*

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

  299.  * menus will never overflow viewport.

  300.  */

  301. 

  302. @media (min-width: 75rem) {

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

  304.   body.toolbar-vertical:not(.is-always-mobile-nav) .primary-nav__menu--level-2,

  305.   body.toolbar-horizontal.toolbar-fixed:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {

  306.     max-height: calc(100vh - 14.8125rem);

  307.   }

  308. 

  309.   body.toolbar-vertical:not(.is-always-mobile-nav) .is-fixed .primary-nav__menu--level-2,

  310.   body.toolbar-horizontal.toolbar-fixed:not(.is-always-mobile-nav) .is-fixed .primary-nav__menu--level-2 {

  311.     max-height: calc(100vh - 10.3125rem);

  312.   }

  313. 

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

  315.   body.toolbar-horizontal.toolbar-fixed.toolbar-tray-open:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {

  316.     max-height: calc(100vh - 17.3125rem);

  317.   }

  318. 

  319.   body.toolbar-horizontal.toolbar-fixed.toolbar-tray-open:not(.is-always-mobile-nav) .is-fixed .primary-nav__menu--level-2 {

  320.     max-height: calc(100vh - 12.8125rem);

  321.   }

  322. }

  323. 

  324. /*

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

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

  327.  */

  328. 

  329. @media (min-width: 75rem) {

  330.   html.js body:not(.is-always-mobile-nav) .primary-nav__menu--level-2,

  331.   html.js body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 {

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

  333.   }

  334. }

  335. 

  336. @media (min-width: 75rem) {

  337.   [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner:after {

  338.     transform-origin: right;

  339.   }

  340. }

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