nav-primary-no-js.css
Same filename and directory in other branches
Styles for primary navigation when JavaScript is disabled.
File
-
core/
themes/ olivero/ css/ components/ navigation/ nav-primary-no-js.css
View source
- /*
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/3084859
- * @preserve
- */
-
- /**
- * @file
- * Styles for primary navigation when JavaScript is disabled.
- */
-
- /**
- * Mobile styles for primary navigation when JS is disabled.
- */
-
- @media (max-width: 75rem) {
- html:not(.js) .primary-nav__menu--level-1 {
- column-width: 18.75rem;
- column-gap: 2.25rem;
- }
-
- html:not(.js) .primary-nav__menu-item {
- page-break-inside: avoid;
- break-inside: avoid;
- }
-
- html:not(.js) .site-header__inner__container {
- flex-wrap: wrap;
- }
-
- html:not(.js) .mobile-buttons {
- display: none;
- }
-
- html[dir="ltr"]:not(.js) .header-nav {
- margin-left: 2.25rem;
- }
-
- html[dir="rtl"]:not(.js) .header-nav {
- margin-right: 2.25rem;
- }
-
- html[dir="ltr"]:not(.js) .header-nav {
- margin-right: 2.25rem;
- }
-
- html[dir="rtl"]:not(.js) .header-nav {
- margin-left: 2.25rem;
- }
-
- html[dir="ltr"]:not(.js) .header-nav {
- padding-left: 2.25rem;
- }
-
- html[dir="rtl"]:not(.js) .header-nav {
- padding-right: 2.25rem;
- }
-
- html[dir="ltr"]:not(.js) .header-nav {
- padding-right: 2.25rem;
- }
-
- html[dir="rtl"]:not(.js) .header-nav {
- padding-left: 2.25rem;
- }
-
- html:not(.js) .header-nav {
- border: solid 1px #e7edf1 !important;
- }
-
- html:not(.js) .header-nav {
- position: static;
- visibility: visible;
- flex-basis: 100%;
- width: 100%;
- max-width: none;
- margin-top: 2.25rem;
- margin-bottom: 0;
- padding-top: 2.25rem;
- padding-bottom: 0;
- transform: none;
- box-shadow: 0 0 36px #d7e1e8;
- }
-
- html[dir="ltr"]:not(.js) .primary-nav__menu--level-2 {
- border-left: 0;
- }
-
- html[dir="rtl"]:not(.js) .primary-nav__menu--level-2 {
- border-right: 0;
- }
-
- html:not(.js) .primary-nav__button-toggle {
- display: none;
- }
- html:not(.js) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:before,
- html:not(.js) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {
- content: none;
- }
- }
-
- @media (min-width: 75rem) {
- /**
- * Styles for 'always on mobile navigation' when JS is disabled.
- */
- html:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-1 {
- column-width: 18.75rem;
- column-gap: 2.25rem;
- }
-
- html:not(.js) body.is-always-mobile-nav .primary-nav__menu-item {
- page-break-inside: avoid;
- break-inside: avoid;
- }
-
- html:not(.js) body.is-always-mobile-nav .site-header__inner__container {
- flex-wrap: wrap;
- }
-
- html:not(.js) body.is-always-mobile-nav .mobile-buttons {
- display: none;
- }
-
- html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
- margin-left: 2.25rem;
- }
-
- html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
- margin-right: 2.25rem;
- }
-
- html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
- margin-right: 2.25rem;
- }
-
- html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
- margin-left: 2.25rem;
- }
-
- html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
- padding-left: 2.25rem;
- }
-
- html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
- padding-right: 2.25rem;
- }
-
- html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
- padding-right: 2.25rem;
- }
-
- html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
- padding-left: 2.25rem;
- }
-
- html:not(.js) body.is-always-mobile-nav .header-nav {
- border: solid 1px #e7edf1 !important;
- }
-
- html:not(.js) body.is-always-mobile-nav .header-nav {
- position: static;
- visibility: visible;
- flex-basis: 100%;
- width: 100%;
- max-width: none;
- margin-top: 2.25rem;
- margin-bottom: 0;
- padding-top: 2.25rem;
- padding-bottom: 0;
- transform: none;
- box-shadow: 0 0 36px #d7e1e8;
- }
-
- html[dir="ltr"]:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-2 {
- border-left: 0;
- }
-
- html[dir="rtl"]:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-2 {
- border-right: 0;
- }
-
- html:not(.js) body.is-always-mobile-nav .primary-nav__button-toggle {
- display: none;
- }
- html:not(.js) body.is-always-mobile-nav .primary-nav__menu-link--button.primary-nav__menu-link--has-children:before,
- html:not(.js) body.is-always-mobile-nav .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {
- content: none;
- }
-
- /**
- * Styles for traditional dropdown primary navigation when JS is disabled.
- */
- html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu--level-2,
- html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu-🥕 {
- visibility: visible;
- transform: translate(-50%, 0);
- opacity: 1;
- }
-
- /*
- * Cannot combine the focus-within pseudo selector with other selectors,
- * because it will break IE11 and earlier versions of MS Edge.
- */
- html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu--level-2,
- html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu-🥕 {
- visibility: visible;
- transform: translate(-50%, 0);
- opacity: 1;
- }
- }
Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.