You are here

Home » API reference » Drupal 9

nav-primary-wide.css in Drupal 9

Same filename and directory in other branches
  1. 10 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.       body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children {

  23. 

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

  25.       }

  26.         body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link-inner:after {

  27.           content: none;

  28.         }

  29. 

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

  31.       letter-spacing: 0.02em;

  32.       font-size: 1rem;

  33.       line-height: 1.6875rem

  34.     }

  35. 

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

  37.         position: relative;

  38.         outline: 0

  39.       }

  40. 

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

  42.           position: absolute;

  43.           top: 50%;

  44.           left: 50%;

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

  46.           height: 3.375rem;

  47.           content: "";

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

  49.           border: solid 2px #2494db;

  50.           border-radius: 0.25rem;

  51.         }

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

  53.         padding-right: 0.5625rem;

  54.     }

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

  56.         padding-left: 0.5625rem;

  57.     }

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

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

  60.       }

  61. 

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

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

  64.           content: "";

  65.         }

  66. 

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

  68.           content: none;

  69.         }

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

  71. 

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

  73.       }

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

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

  76.     }

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

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

  79.     }

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

  81.           position: absolute;

  82.           top: 50%;

  83.           width: 0.5rem;

  84.           height: 0.5rem;

  85.           margin-top: -2px;

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

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

  88.           border-top: 0;

  89.           border-right: solid 2px currentColor;

  90.           border-bottom: solid 2px currentColor;

  91.         }

  92. 

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

  94.           opacity: 1;

  95.         }

  96. 

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

  98.       padding-left: 0;

  99.     }

  100. 

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

  102.       padding-right: 0;

  103.     }

  104. 

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

  106.       padding-right: 0;

  107.     }

  108. 

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

  110.       padding-left: 0;

  111.     }

  112. 

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

  114.       padding-top: 2.25rem;

  115.       padding-bottom: 2.25rem

  116.     }

  117. 

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

  119.         transform-origin: center;

  120.         border-top-width: 9px;

  121.       }

  122. 

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

  124.       margin-right: 1.125rem;

  125.     }

  126. 

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

  128.       margin-left: 1.125rem;

  129.     }

  130. 

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

  132.       display: flex;

  133.       align-items: stretch;

  134.     }

  135. 

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

  137.       margin-left: 0;

  138.     }

  139. 

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

  141.       margin-right: 0;

  142.     }

  143. 

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

  145.       margin-right: 0;

  146.     }

  147. 

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

  149.       margin-left: 0;

  150.     }

  151. 

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

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

  154.       display: flex;

  155.       align-items: center;

  156.       width: -webkit-max-content;

  157.       width: max-content;

  158.       max-width: 12.5rem;

  159.       margin-top: 0;

  160.       margin-bottom: 0

  161.     }

  162. 

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

  164.         margin-right: 2.25rem;

  165.     }

  166. 

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

  168.         margin-left: 2.25rem;

  169.     }

  170. 

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

  172.       margin-left: 0;

  173.     }

  174. 

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

  176.       margin-right: 0;

  177.     }

  178. 

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

  180.       padding-left: 2.25rem;

  181.     }

  182. 

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

  184.       padding-right: 2.25rem;

  185.     }

  186. 

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

  188.       padding-right: 2.25rem;

  189.     }

  190. 

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

  192.       padding-left: 2.25rem;

  193.     }

  194. 

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

  196.       position: absolute;

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

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

  199.       left: 50%;

  200.       visibility: hidden;

  201.       overflow: auto;

  202.       width: 15.625rem;

  203.       /**

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

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

  206.        */

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

  208.       margin-top: 0;

  209.       padding-top: 3.375rem;

  210.       padding-bottom: 3.375rem;

  211.       transition: none;

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

  213.       opacity: 0;

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

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

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

  217.       border-bottom: solid 1px transparent;

  218.       border-left: solid 1px transparent;

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

  220.       background: #fff;

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

  222.     }

  223. 

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

  225.         visibility: visible;

  226.         margin-top: 0;

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

  228.         opacity: 1;

  229.       }

  230. 

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

  232.       display: block

  233.     }

  234. 

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

  236.         top: 0;

  237.         left: -0.5625rem;

  238.         height: 100%;

  239.         transform: none;

  240.       }

  241. 

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

  243.         padding-left: 0;

  244.     }

  245. 

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

  247.         padding-right: 0;

  248.     }

  249. 

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

  251.         padding-right: 0;

  252.     }

  253. 

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

  255.         padding-left: 0;

  256.     }

  257. 

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

  259.         padding-top: 0.5625rem;

  260.         padding-bottom: 0.5625rem

  261.       }

  262. 

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

  264.           transform-origin: left;

  265.           border-top-width: 3px;

  266.         }

  267. 

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

  269. 

  270.     /**

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

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

  273.      */

  274. }

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

  276.       position: absolute;

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

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

  279.       left: 50%;

  280.       visibility: hidden;

  281.       width: 0;

  282.       height: 0;

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

  284.       opacity: 0;

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

  286.       border-right: solid 10px transparent;

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

  288.       border-left: solid 10px transparent

  289.     }

  290. 

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

  292.         visibility: visible;

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

  294.         opacity: 1;

  295.       }

  296. 

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

  298. 

  299.     /**

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

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

  302.      */

  303. }

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

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

  306.     }

  307.   }

  308. 

  309. /*

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

  311.  * menus will never overflow viewport.

  312.  */

  313. 

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

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

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

  317.   }

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

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

  320.       }

  321. 

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

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

  324.       }

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

  326. 

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

  328.   }

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

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

  331.       }

  332. 

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

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

  335.       }

  336. }

  337. 

  338. /*

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

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

  341.  */

  342. 

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

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

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

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

  347.     }

  348.   }

  349. 

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

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

  352.           transform-origin: right;

  353.         }

  354.     }