nav-primary-no-js.css

Styles for primary navigation when JavaScript is disabled.

File

core/themes/olivero/css/components/navigation/nav-primary-no-js.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.  * Styles for primary navigation when JavaScript is disabled.

  11.  */

  12. 

  13. :root {

  14.   --no-js-nav-column-width: 18.75rem;

  15.   --no-js-nav-column-gap: var(--sp2);

  16. }

  17. 

  18. /**

  19.    * Mobile styles for primary navigation when JS is disabled.

  20.    */

  21. 

  22. @media (max-width: 75rem) {

  23.   html:not(.js) .primary-nav__menu--level-1 {

  24.     column-width: var(--no-js-nav-column-width);

  25.     column-gap: var(--no-js-nav-column-gap);

  26.   }

  27. 

  28.   html:not(.js) .primary-nav__menu-item {

  29.     page-break-inside: avoid;

  30.     break-inside: avoid;

  31.   }

  32. 

  33.   html:not(.js) .site-header__inner__container {

  34.     flex-wrap: wrap;

  35.   }

  36. 

  37.   html:not(.js) .mobile-buttons {

  38.     display: none;

  39.   }

  40. 

  41.   html:not(.js) .header-nav {

  42.     position: static;

  43.     visibility: visible;

  44.     flex-basis: 100%;

  45.     width: 100%;

  46.     max-width: none;

  47.     margin-block: var(--sp2) 0;

  48.     margin-inline-start: var(--sp2);

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

  50.     padding-block: var(--sp2) 0;

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

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

  53.     transform: none;

  54.     border: solid 1px var(--color--gray-95) !important;

  55.     box-shadow: 0 0 36px var(--color--gray-90);

  56.   }

  57. 

  58.   html:not(.js) .primary-nav__menu--level-2 {

  59.     border-inline-start: 0;

  60.   }

  61. 

  62.   html:not(.js) .primary-nav__button-toggle {

  63.     display: none;

  64.   }

  65.   html:not(.js) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before,

  66.   html:not(.js) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {

  67.     content: none;

  68.   }

  69. }

  70. 

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

  72.   /**

  73.      * Styles for 'always on mobile navigation' when JS is disabled.

  74.      */

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

  76.     column-width: var(--no-js-nav-column-width);

  77.     column-gap: var(--no-js-nav-column-gap);

  78.   }

  79. 

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

  81.     page-break-inside: avoid;

  82.     break-inside: avoid;

  83.   }

  84. 

  85.   html:not(.js) body.is-always-mobile-nav .site-header__inner__container {

  86.     flex-wrap: wrap;

  87.   }

  88. 

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

  90.     display: none;

  91.   }

  92. 

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

  94.     position: static;

  95.     visibility: visible;

  96.     flex-basis: 100%;

  97.     width: 100%;

  98.     max-width: none;

  99.     margin-block: var(--sp2) 0;

  100.     margin-inline-start: var(--sp2);

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

  102.     padding-block: var(--sp2) 0;

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

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

  105.     transform: none;

  106.     border: solid 1px var(--color--gray-95) !important;

  107.     box-shadow: 0 0 36px var(--color--gray-90);

  108.   }

  109. 

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

  111.     border-inline-start: 0;

  112.   }

  113. 

  114.   html:not(.js) body.is-always-mobile-nav .primary-nav__button-toggle {

  115.     display: none;

  116.   }

  117.   html:not(.js) body.is-always-mobile-nav .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before,

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

  119.     content: none;

  120.   }

  121. 

  122.   /**

  123.      * Styles for traditional dropdown primary navigation when JS is disabled.

  124.      */

  125.   html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu--level-2,

  126.   html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu-🥕 {

  127.     visibility: visible;

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

  129.     opacity: 1;

  130.   }

  131. 

  132.   /*

  133.        * Cannot combine the focus-within pseudo selector with other selectors,

  134.        * because it will break IE11 and earlier versions of MS Edge.

  135.        */

  136.   html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu--level-2,

  137.   html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu-🥕 {

  138.     visibility: visible;

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

  140.     opacity: 1;

  141.   }

  142. }