nav-primary-no-js.pcss.css

Styles for primary navigation when JavaScript is disabled.

File

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

View source 
  1. /**

  2.  * @file

  3.  * Styles for primary navigation when JavaScript is disabled.

  4.  */

  5. 

  6. @import "../../base/media-queries.pcss.css";

  7. 

  8. :root {

  9.   --no-js-nav-column-width: 300px;

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

  11. }

  12. 

  13. html:not(.js) {

  14.   /**

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

  16.    */

  17.   @media (--max-nav) {

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

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

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

  21.     }

  22. 

  23.     & .primary-nav__menu-item {

  24.       break-inside: avoid;

  25.     }

  26. 

  27.     & .site-header__inner__container {

  28.       flex-wrap: wrap;

  29.     }

  30. 

  31.     & .mobile-buttons {

  32.       display: none;

  33.     }

  34. 

  35.     & .header-nav {

  36.       position: static;

  37.       visibility: visible;

  38.       flex-basis: 100%;

  39.       width: 100%;

  40.       max-width: none;

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

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

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

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

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

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

  47.       transform: none;

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

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

  50.     }

  51. 

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

  53.       border-inline-start: 0;

  54.     }

  55. 

  56.     & .primary-nav__button-toggle {

  57.       display: none;

  58.     }

  59. 

  60.     & .primary-nav__menu-link--button.primary-nav__menu-link--has-children {

  61.       &::before,

  62.       &::after {

  63.         content: none;

  64.       }

  65.     }

  66.   }

  67. 

  68.   @media (--nav) {

  69.     /**

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

  71.      */

  72.     & body.is-always-mobile-nav {

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

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

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

  76.       }

  77. 

  78.       & .primary-nav__menu-item {

  79.         break-inside: avoid;

  80.       }

  81. 

  82.       & .site-header__inner__container {

  83.         flex-wrap: wrap;

  84.       }

  85. 

  86.       & .mobile-buttons {

  87.         display: none;

  88.       }

  89. 

  90.       & .header-nav {

  91.         position: static;

  92.         visibility: visible;

  93.         flex-basis: 100%;

  94.         width: 100%;

  95.         max-width: none;

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

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

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

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

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

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

  102.         transform: none;

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

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

  105.       }

  106. 

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

  108.         border-inline-start: 0;

  109.       }

  110. 

  111.       & .primary-nav__button-toggle {

  112.         display: none;

  113.       }

  114. 

  115.       & .primary-nav__menu-link--button.primary-nav__menu-link--has-children {

  116.         &::before,

  117.         &::after {

  118.           content: none;

  119.         }

  120.       }

  121.     }

  122. 

  123.     /**

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

  125.      */

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

  127.       & .primary-nav__menu-item--level-1:hover {

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

  129.         & .primary-nav__menu-🥕 {

  130.           visibility: visible;

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

  132.           opacity: 1;

  133.         }

  134.       }

  135. 

  136.       /*

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

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

  139.        */

  140.       & .primary-nav__menu-item--level-1:focus-within {

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

  142.         & .primary-nav__menu-🥕 {

  143.           visibility: visible;

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

  145.           opacity: 1;

  146.         }

  147.       }

  148.     }

  149.   }

  150. }