You are here

Home » API reference » Drupal 10

nav-primary-no-js.css in Drupal 10

Same filename and directory in other branches
  1. 9 core/themes/olivero/css/components/navigation/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. /*

  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. :root {

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

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

  29. }

  30. 

  31. html:not(.js) {

  32.   /**

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

  34.    */

  35. }

  36. 

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

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

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

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

  41.     }

  42. 

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

  44.       page-break-inside: avoid;

  45.       break-inside: avoid;

  46.     }

  47. 

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

  49.       flex-wrap: wrap;

  50.     }

  51. 

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

  53.       display: none;

  54.     }

  55. 

  56.     html[dir="ltr"]:not(.js) .header-nav {

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

  58.   }

  59. 

  60.     html[dir="rtl"]:not(.js) .header-nav {

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

  62.   }

  63. 

  64.     html[dir="ltr"]:not(.js) .header-nav {

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

  66.   }

  67. 

  68.     html[dir="rtl"]:not(.js) .header-nav {

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

  70.   }

  71. 

  72.     html[dir="ltr"]:not(.js) .header-nav {

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

  74.   }

  75. 

  76.     html[dir="rtl"]:not(.js) .header-nav {

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

  78.   }

  79. 

  80.     html[dir="ltr"]:not(.js) .header-nav {

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

  82.   }

  83. 

  84.     html[dir="rtl"]:not(.js) .header-nav {

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

  86.   }

  87. 

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

  89.       position: static;

  90.       visibility: visible;

  91.       flex-basis: 100%;

  92.       width: 100%;

  93.       max-width: none;

  94.       margin-top: var(--sp2);

  95.       margin-bottom: 0;

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

  97.       padding-bottom: 0;

  98.       transform: none;

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

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

  101.     }

  102. 

  103.     html[dir="ltr"]:not(.js) .primary-nav__menu--level-2 {

  104.       border-left: 0;

  105.   }

  106. 

  107.     html[dir="rtl"]:not(.js) .primary-nav__menu--level-2 {

  108.       border-right: 0;

  109.   }

  110. 

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

  112.       display: none;

  113.     }

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

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

  116.         content: none;

  117.       }

  118.   }

  119. 

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

  121. 

  122. html:not(.js) {

  123.     /**

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

  125.      */

  126. }

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

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

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

  130.       }

  131. 

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

  133.         page-break-inside: avoid;

  134.         break-inside: avoid;

  135.       }

  136. 

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

  138.         flex-wrap: wrap;

  139.       }

  140. 

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

  142.         display: none;

  143.       }

  144. 

  145.       html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {

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

  147.   }

  148. 

  149.       html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {

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

  151.   }

  152. 

  153.       html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {

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

  155.   }

  156. 

  157.       html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {

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

  159.   }

  160. 

  161.       html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {

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

  163.   }

  164. 

  165.       html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {

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

  167.   }

  168. 

  169.       html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {

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

  171.   }

  172. 

  173.       html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {

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

  175.   }

  176. 

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

  178.         position: static;

  179.         visibility: visible;

  180.         flex-basis: 100%;

  181.         width: 100%;

  182.         max-width: none;

  183.         margin-top: var(--sp2);

  184.         margin-bottom: 0;

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

  186.         padding-bottom: 0;

  187.         transform: none;

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

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

  190.       }

  191. 

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

  193.         border-left: 0;

  194.   }

  195. 

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

  197.         border-right: 0;

  198.   }

  199. 

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

  201.         display: none;

  202.       }

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

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

  205.           content: none;

  206.         }

  207. 

  208. html:not(.js) {

  209. 

  210.     /**

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

  212.      */

  213. }

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

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

  216.           visibility: visible;

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

  218.           opacity: 1;

  219.         }

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

  221. 

  222.       /*

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

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

  225.        */

  226.     }

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

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

  229.           visibility: visible;

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

  231.           opacity: 1;

  232.         }

  233.   }