nav-primary.css

Nav Primary.

File

View on git.drupalcode.org

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

  14.   flex-wrap: wrap;

  15.   list-style: none;

  16. }

  17. 

  18. .primary-nav__menu-item {

  19.   margin-bottom: 0.5625rem;

  20. }

  21. 

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

  23.   margin-bottom: 0;

  24. }

  25. 

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

  27.   display: flex;

  28.   flex-wrap: wrap;

  29.   justify-content: space-between;

  30. }

  31. 

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

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

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

  35.   flex-basis: calc(100% - 3.375rem);

  36. }

  37. 

  38. .primary-nav__menu-link {

  39.   flex-grow: 1;

  40.   text-decoration: none;

  41.   color: #0d1214;

  42.   font-size: 1.75rem;

  43.   font-weight: bold;

  44.   line-height: 2.25rem;

  45. }

  46. 

  47. .primary-nav__menu-link:hover {

  48.   color: inherit;

  49. }

  50. 

  51. .primary-nav__menu-link:focus {

  52.   outline: auto 2px #2494db;

  53.   outline-offset: 2px;

  54. }

  55. 

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

  57.   padding-left: 0;

  58. }

  59. 

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

  61.   padding-right: 0;

  62. }

  63. 

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

  65.   padding-right: 0;

  66. }

  67. 

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

  69.   padding-left: 0;

  70. }

  71. 

  72. .primary-nav__menu-link--nolink {

  73.   padding-top: 0.5625rem;

  74.   padding-bottom: 0.5625rem;

  75.   color: #6e7172;

  76.   font-weight: normal;

  77. }

  78. 

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

  80.   padding-left: 0;

  81. }

  82. 

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

  84.   padding-right: 0;

  85. }

  86. 

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

  88.   padding-right: 0;

  89. }

  90. 

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

  92.   padding-left: 0;

  93. }

  94. 

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

  96.   text-align: left;

  97. }

  98. 

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

  100.   text-align: right;

  101. }

  102. 

  103. .primary-nav__menu-link--button {

  104.   position: relative;

  105.   padding-top: 0;

  106.   padding-bottom: 0;

  107.   cursor: pointer;

  108.   border: 0;

  109.   background: transparent;

  110. 

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

  112. }

  113. 

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

  115.   padding-right: 3.375rem;

  116. }

  117. 

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

  119.   padding-left: 3.375rem;

  120. }

  121. 

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

  123. }

  124. 

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

  126. [dir="ltr"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {

  127.   right: 0.5625rem;

  128. }

  129. 

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

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

  132.   left: 0.5625rem;

  133. }

  134. 

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

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

  137.   position: absolute;

  138.   top: 1.625rem; /* Visually align button with menu link text. */

  139.   width: 1.125rem;

  140.   height: 0;

  141.   content: "";

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

  143.   border-top: solid 3px #2494db;

  144. }

  145. 

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

  147.   transition: opacity 0.2s;

  148.   transform: rotate(90deg);

  149. }

  150. 

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

  152.   opacity: 0;

  153. }

  154. 

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

  156.   padding-left: 0;

  157. }

  158. 

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

  160.   padding-right: 0;

  161. }

  162. 

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

  164.   padding-right: 0;

  165. }

  166. 

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

  168.   padding-left: 0;

  169. }

  170. 

  171. .primary-nav__menu-link-inner {

  172.   position: relative;

  173.   display: inline-flex;

  174.   align-items: center;

  175.   padding-top: 0.5625rem;

  176.   padding-bottom: 0.5625rem;

  177. }

  178. 

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

  180.   left: 0;

  181. }

  182. 

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

  184.   right: 0;

  185. }

  186. 

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

  188.   position: absolute;

  189.   bottom: 0;

  190.   width: 100%;

  191.   height: 0;

  192.   content: "";

  193.   transition: transform 0.2s;

  194.   transform: scaleX(0);

  195.   transform-origin: left;

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

  197.   border-top: solid 5px #2494db;

  198. }

  199. 

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

  201.   transform: scaleX(1);

  202. }

  203. 

  204. /*

  205.   Top level specific styles.

  206. */

  207. 

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

  209.   margin-left: 0;

  210. }

  211. 

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

  213.   margin-right: 0;

  214. }

  215. 

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

  217.   margin-right: 0;

  218. }

  219. 

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

  221.   margin-left: 0;

  222. }

  223. 

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

  225.   padding-left: 0;

  226. }

  227. 

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

  229.   padding-right: 0;

  230. }

  231. 

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

  233.   padding-right: 0;

  234. }

  235. 

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

  237.   padding-left: 0;

  238. }

  239. 

  240. .primary-nav__menu--level-1 {

  241.   margin-top: 0;

  242.   margin-bottom: 0;

  243.   padding-top: 0;

  244.   padding-bottom: 0;

  245. }

  246. 

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

  248.   position: relative;

  249.   display: flex;

  250.   letter-spacing: -1px;

  251. }

  252. 

  253. /*

  254.   Secondary menu specific styles.

  255. */

  256. 

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

  258.   margin-left: -1.125rem;

  259. }

  260. 

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

  262.   margin-right: -1.125rem;

  263. }

  264. 

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

  266.   padding-left: 2.8125rem;

  267. }

  268. 

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

  270.   padding-right: 2.8125rem;

  271. }

  272. 

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

  274.   border-left: solid 1.125rem #2494db;

  275. }

  276. 

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

  278.   border-right: solid 1.125rem #2494db;

  279. }

  280. 

  281. .primary-nav__menu--level-2 {

  282.   visibility: hidden;

  283.   overflow: hidden;

  284.   flex-basis: 100%;

  285.   max-height: 0;

  286.   margin-top: 0;

  287.   margin-bottom: 0;

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

  289.   opacity: 0;

  290. }

  291. 

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

  293.   visibility: visible;

  294.   max-height: none;

  295.   margin-top: 1.6875rem;

  296.   opacity: 1;

  297. }

  298. 

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

  300. 

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

  302.     margin-left: -3.375rem;

  303.   }

  304. 

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

  306.     margin-right: -3.375rem;

  307.   }

  308. 

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

  310.     padding-left: 3.375rem;

  311.   }

  312. 

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

  314.     padding-right: 3.375rem;

  315.   }

  316. }

  317. 

  318. /*

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

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

  321.  *

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

  323.  */

  324. 

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

  326.   display: block;

  327. }

  328. 

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

  330.   font-size: 1rem;

  331.   font-weight: normal;

  332.   line-height: 1.125rem;

  333. }

  334. 

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

  336.   visibility: visible;

  337.   max-height: none;

  338.   opacity: 1;

  339. }

  340. 

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

  342.   transform-origin: right;

  343. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.