You are here

Home » API reference » Drupal 10

nav-primary.css in Drupal 10

Same filename and directory in other branches
  1. 9 core/themes/olivero/css/components/navigation/nav-primary.css

Nav Primary.

File

core/themes/olivero/css/components/navigation/nav-primary.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.

  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. .primary-nav__menu {

  27.   flex-wrap: wrap;

  28.   list-style: none;

  29. }

  30. 

  31. .primary-nav__menu-item {

  32.   margin-bottom: var(--sp0-5)

  33. }

  34. 

  35. .primary-nav__menu-item:last-child {

  36.     margin-bottom: 0;

  37.   }

  38. 

  39. .primary-nav__menu-item.primary-nav__menu-item--has-children {

  40.     display: flex;

  41.     flex-wrap: wrap;

  42.     justify-content: space-between

  43.   }

  44. 

  45. .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--link,

  46.     .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--nolink {

  47.       /* Ensure that long text doesn't make the mobile expand button wrap. */

  48.       flex-basis: calc(100% - var(--sp3));

  49.     }

  50. 

  51. .primary-nav__menu-link {

  52.   flex-grow: 1;

  53.   text-decoration: none;

  54.   color: var(--color-text-neutral-loud);

  55.   font-size: 1.75rem;

  56.   font-weight: bold;

  57.   line-height: var(--sp2)

  58. }

  59. 

  60. .primary-nav__menu-link:hover {

  61.     color: inherit;

  62.   }

  63. 

  64. .primary-nav__menu-link:focus {

  65.     outline: auto 2px var(--color--primary-50);

  66.     outline-offset: 2px;

  67.   }

  68. 

  69. [dir="ltr"] .primary-nav__menu-link--nolink {

  70.   padding-left: 0;

  71. }

  72. 

  73. [dir="rtl"] .primary-nav__menu-link--nolink {

  74.   padding-right: 0;

  75. }

  76. 

  77. [dir="ltr"] .primary-nav__menu-link--nolink {

  78.   padding-right: 0;

  79. }

  80. 

  81. [dir="rtl"] .primary-nav__menu-link--nolink {

  82.   padding-left: 0;

  83. }

  84. 

  85. .primary-nav__menu-link--nolink {

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

  87.   padding-bottom: var(--sp0-5);

  88.   color: var(--color-text-neutral-soft);

  89.   font-weight: normal;

  90. }

  91. 

  92. [dir="ltr"] .primary-nav__menu-link--button {

  93.   padding-left: 0;

  94. }

  95. 

  96. [dir="rtl"] .primary-nav__menu-link--button {

  97.   padding-right: 0;

  98. }

  99. 

  100. [dir="ltr"] .primary-nav__menu-link--button {

  101.   padding-right: 0;

  102. }

  103. 

  104. [dir="rtl"] .primary-nav__menu-link--button {

  105.   padding-left: 0;

  106. }

  107. 

  108. [dir="ltr"] .primary-nav__menu-link--button {

  109.   text-align: left;

  110. }

  111. 

  112. [dir="rtl"] .primary-nav__menu-link--button {

  113.   text-align: right;

  114. }

  115. 

  116. .primary-nav__menu-link--button {

  117.   position: relative;

  118.   padding-top: 0;

  119.   padding-bottom: 0;

  120.   cursor: pointer;

  121.   border: 0;

  122.   background: transparent

  123. 

  124.   /* Plus icon for mobile navigation. */

  125. }

  126. 

  127. [dir="ltr"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children {

  128.     padding-right: var(--sp3);

  129. }

  130. 

  131. [dir="rtl"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children {

  132.     padding-left: var(--sp3);

  133. }

  134. 

  135. .primary-nav__menu-link--button.primary-nav__menu-link--has-children { /* Ensure text does not overlap icon. */

  136.   }

  137. 

  138. [dir="ltr"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children:before,[dir="ltr"] 

  139.     .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {

  140.       right: 0.5625rem;

  141. }

  142. 

  143. [dir="rtl"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children:before,[dir="rtl"] 

  144.     .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {

  145.       left: 0.5625rem;

  146. }

  147. 

  148. .primary-nav__menu-link--button.primary-nav__menu-link--has-children:before,

  149.     .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {

  150.       position: absolute;

  151.       top: calc(var(--sp0-5) + 1.0625rem); /* Visually align button with menu link text. */

  152.       width: 1.125rem;

  153.       height: 0;

  154.       content: "";

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

  156.       border-top: solid 3px var(--color--primary-50);

  157.     }

  158. 

  159. .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {

  160.       transition: opacity 0.2s;

  161.       transform: rotate(90deg);

  162.     }

  163. 

  164. .primary-nav__menu-link--button.primary-nav__menu-link--has-children[aria-expanded="true"]:after {

  165.       opacity: 0;

  166.     }

  167. 

  168. [dir="ltr"] .primary-nav__menu-link-inner {

  169.   padding-left: 0;

  170. }

  171. 

  172. [dir="rtl"] .primary-nav__menu-link-inner {

  173.   padding-right: 0;

  174. }

  175. 

  176. [dir="ltr"] .primary-nav__menu-link-inner {

  177.   padding-right: 0;

  178. }

  179. 

  180. [dir="rtl"] .primary-nav__menu-link-inner {

  181.   padding-left: 0;

  182. }

  183. 

  184. .primary-nav__menu-link-inner {

  185.   position: relative;

  186.   display: inline-flex;

  187.   align-items: center;

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

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

  190. }

  191. 

  192. [dir="ltr"] .primary-nav__menu-link-inner:after {

  193.     left: 0;

  194. }

  195. 

  196. [dir="rtl"] .primary-nav__menu-link-inner:after {

  197.     right: 0;

  198. }

  199. 

  200. .primary-nav__menu-link-inner:after {

  201.     position: absolute;

  202.     bottom: 0;

  203.     width: 100%;

  204.     height: 0;

  205.     content: "";

  206.     transition: transform 0.2s;

  207.     transform: scaleX(0);

  208.     transform-origin: left;

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

  210.     border-top: solid 5px var(--color--primary-50);

  211.   }

  212. 

  213. .primary-nav__menu-link:hover .primary-nav__menu-link-inner:after {

  214.       transform: scaleX(1)

  215.   }

  216. 

  217. /*

  218.   Top level specific styles.

  219. */

  220. 

  221. [dir="ltr"] .primary-nav__menu--level-1 {

  222.   margin-left: 0;

  223. }

  224. 

  225. [dir="rtl"] .primary-nav__menu--level-1 {

  226.   margin-right: 0;

  227. }

  228. 

  229. [dir="ltr"] .primary-nav__menu--level-1 {

  230.   margin-right: 0;

  231. }

  232. 

  233. [dir="rtl"] .primary-nav__menu--level-1 {

  234.   margin-left: 0;

  235. }

  236. 

  237. [dir="ltr"] .primary-nav__menu--level-1 {

  238.   padding-left: 0;

  239. }

  240. 

  241. [dir="rtl"] .primary-nav__menu--level-1 {

  242.   padding-right: 0;

  243. }

  244. 

  245. [dir="ltr"] .primary-nav__menu--level-1 {

  246.   padding-right: 0;

  247. }

  248. 

  249. [dir="rtl"] .primary-nav__menu--level-1 {

  250.   padding-left: 0;

  251. }

  252. 

  253. .primary-nav__menu--level-1 {

  254.   margin-top: 0;

  255.   margin-bottom: 0;

  256.   padding-top: 0;

  257.   padding-bottom: 0;

  258. }

  259. 

  260. .primary-nav__menu-link--level-1 {

  261.   position: relative;

  262.   display: flex;

  263.   letter-spacing: -1px;

  264. }

  265. 

  266. /*

  267.   Secondary menu specific styles.

  268. */

  269. 

  270. [dir="ltr"] .primary-nav__menu--level-2 {

  271.   margin-left: calc(-1 * var(--sp));

  272. }

  273. 

  274. [dir="rtl"] .primary-nav__menu--level-2 {

  275.   margin-right: calc(-1 * var(--sp));

  276. }

  277. 

  278. [dir="ltr"] .primary-nav__menu--level-2 {

  279.   padding-left: var(--sp2-5);

  280. }

  281. 

  282. [dir="rtl"] .primary-nav__menu--level-2 {

  283.   padding-right: var(--sp2-5);

  284. }

  285. 

  286. [dir="ltr"] .primary-nav__menu--level-2 {

  287.   border-left: solid var(--sp) var(--color--primary-50);

  288. }

  289. 

  290. [dir="rtl"] .primary-nav__menu--level-2 {

  291.   border-right: solid var(--sp) var(--color--primary-50);

  292. }

  293. 

  294. .primary-nav__menu--level-2 {

  295.   visibility: hidden;

  296.   overflow: hidden;

  297.   flex-basis: 100%;

  298.   max-height: 0;

  299.   margin-top: 0;

  300.   margin-bottom: 0;

  301.   transition: opacity 0.2s, visibility 0.2s, max-height 0.2s;

  302.   opacity: 0

  303. }

  304. 

  305. .primary-nav__menu--level-2.is-active-menu-parent {

  306.     visibility: visible;

  307.     max-height: none;

  308.     margin-top: var(--sp1-5);

  309.     opacity: 1;

  310.   }

  311. 

  312. @media (min-width: 43.75rem) {

  313. 

  314. [dir="ltr"] .primary-nav__menu--level-2 {

  315.     margin-left: calc(-1 * var(--sp3));

  316.   }

  317. 

  318. [dir="rtl"] .primary-nav__menu--level-2 {

  319.     margin-right: calc(-1 * var(--sp3));

  320.   }

  321. 

  322. [dir="ltr"] .primary-nav__menu--level-2 {

  323.     padding-left: var(--sp3);

  324.   }

  325. 

  326. [dir="rtl"] .primary-nav__menu--level-2 {

  327.     padding-right: var(--sp3);

  328.   }

  329.   }

  330. 

  331. /*

  332.  * Olivero doesn't officially support nested tertiary submenus, but this

  333.  * ensures that it doesn't break all the way.

  334.  *

  335.  * @see https://www.drupal.org/project/drupal/issues/3221399

  336.  */

  337. 

  338. .primary-nav__menu--level-2 .primary-nav__menu-item--has-children {

  339.   display: block;

  340. }

  341. 

  342. .primary-nav__menu-link--level-2 {

  343.   font-size: 1rem;

  344.   font-weight: normal;

  345.   line-height: var(--sp);

  346. }

  347. 

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

  349.     visibility: visible;

  350.     max-height: none;

  351.     opacity: 1;

  352.   }

  353. 

  354. [dir="rtl"] .primary-nav__menu-link-inner:after {

  355.       transform-origin: right;

  356.     }