You are here

Home » API reference » Drupal 10

nav-primary-wide.css in Drupal 10

Same filename and directory in other branches
  1. 9 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. /*

  14.  * Media query breakpoints.

  15.  * Processed by postcss/postcss-custom-media.

  16.  */

  17. 

  18. /* Navigation related breakpoints */

  19. 

  20. /* Grid related breakpoints */

  21. 

  22. /* Grid shifts from 6 to 14 columns. */

  23. 

  24. /* Width of the entire grid maxes out. */

  25. 

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

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

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

  29.     }

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

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

  32.           flex-basis: auto;

  33.         }

  34. 

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

  36. 

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

  38.       }

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

  40.           content: none;

  41.         }

  42. 

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

  44.       letter-spacing: 0.02em;

  45.       font-size: 1rem;

  46.       line-height: var(--sp1-5)

  47.     }

  48. 

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

  50.         position: relative;

  51.         outline: 0

  52.       }

  53. 

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

  55.           position: absolute;

  56.           top: 50%;

  57.           left: 50%;

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

  59.           height: var(--sp3);

  60.           content: "";

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

  62.           border: solid 2px var(--color--primary-50);

  63.           border-radius: 0.25rem;

  64.         }

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

  66.         padding-right: 0.5625rem;

  67.     }

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

  69.         padding-left: 0.5625rem;

  70.     }

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

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

  73.       }

  74. 

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

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

  77.           content: "";

  78.         }

  79. 

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

  81.           content: none;

  82.         }

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

  84. 

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

  86.       }

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

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

  89.     }

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

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

  92.     }

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

  94.           position: absolute;

  95.           top: 50%;

  96.           width: 0.5rem;

  97.           height: 0.5rem;

  98.           margin-top: -2px;

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

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

  101.           border-top: 0;

  102.           border-right: solid 2px currentColor;

  103.           border-bottom: solid 2px currentColor;

  104.         }

  105. 

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

  107.           opacity: 1;

  108.         }

  109. 

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

  111.       padding-left: 0;

  112.     }

  113. 

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

  115.       padding-right: 0;

  116.     }

  117. 

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

  119.       padding-right: 0;

  120.     }

  121. 

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

  123.       padding-left: 0;

  124.     }

  125. 

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

  127.       padding-top: var(--sp2);

  128.       padding-bottom: var(--sp2)

  129.     }

  130. 

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

  132.         transform-origin: center;

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

  134.       }

  135. 

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

  137.       margin-right: var(--sp);

  138.     }

  139. 

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

  141.       margin-left: var(--sp);

  142.     }

  143. 

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

  145.       display: flex;

  146.       align-items: stretch;

  147.     }

  148. 

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

  150.       margin-left: 0;

  151.     }

  152. 

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

  154.       margin-right: 0;

  155.     }

  156. 

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

  158.       margin-right: 0;

  159.     }

  160. 

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

  162.       margin-left: 0;

  163.     }

  164. 

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

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

  167.       display: flex;

  168.       align-items: center;

  169.       width: max-content;

  170.       max-width: 12.5rem;

  171.       margin-top: 0;

  172.       margin-bottom: 0

  173.     }

  174. 

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

  176.         margin-right: var(--sp2);

  177.     }

  178. 

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

  180.         margin-left: var(--sp2);

  181.     }

  182. 

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

  184.       margin-left: 0;

  185.     }

  186. 

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

  188.       margin-right: 0;

  189.     }

  190. 

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

  192.       padding-left: var(--sp2);

  193.     }

  194. 

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

  196.       padding-right: var(--sp2);

  197.     }

  198. 

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

  200.       padding-right: var(--sp2);

  201.     }

  202. 

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

  204.       padding-left: var(--sp2);

  205.     }

  206. 

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

  208.       position: absolute;

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

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

  211.       left: 50%;

  212.       visibility: hidden;

  213.       overflow: auto;

  214.       width: 15.625rem;

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

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

  217.       max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp));

  218.       margin-top: 0;

  219.       padding-top: calc(3 * var(--sp));

  220.       padding-bottom: calc(3 * var(--sp));

  221.       transition: none;

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

  223.       opacity: 0;

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

  225.       border-top: solid var(--color--primary-50) var(--sp0-5);

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

  227.       border-bottom: solid 1px transparent;

  228.       border-left: solid 1px transparent;

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

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

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

  232.     }

  233. 

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

  235.         visibility: visible;

  236.         margin-top: 0;

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

  238.         opacity: 1;

  239.       }

  240. 

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

  242.       display: block

  243.     }

  244. 

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

  246.         top: 0;

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

  248.         height: 100%;

  249.         transform: none;

  250.       }

  251. 

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

  253.         padding-left: 0;

  254.     }

  255. 

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

  257.         padding-right: 0;

  258.     }

  259. 

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

  261.         padding-right: 0;

  262.     }

  263. 

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

  265.         padding-left: 0;

  266.     }

  267. 

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

  269.         padding-top: var(--sp0-5);

  270.         padding-bottom: var(--sp0-5)

  271.       }

  272. 

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

  274.           transform-origin: left; /* LTR */

  275.           border-top-width: 3px

  276.         }

  277. 

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

  279.             transform-origin: right;

  280.           }

  281. 

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

  283. 

  284.     /**

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

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

  287.      */

  288. }

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

  290.       position: absolute;

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

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

  293.       left: 50%;

  294.       visibility: hidden;

  295.       width: 0;

  296.       height: 0;

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

  298.       opacity: 0;

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

  300.       border-right: solid 10px transparent;

  301.       border-bottom: solid 10px var(--color--primary-50);

  302.       border-left: solid 10px transparent

  303.     }

  304. 

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

  306.         visibility: visible;

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

  308.         opacity: 1;

  309.       }

  310. 

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

  312. 

  313.     /**

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

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

  316.      */

  317. }

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

  319.       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));

  320.     }

  321.   }

  322. 

  323. /*

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

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

  326.  */

  327. 

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

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

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

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

  332.     }

  333.   }