You are here

Home » API reference » Drupal 9

nav-primary.css in Drupal 9

Same filename and directory in other branches
  1. 10 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. .primary-nav__menu {

  14.   list-style: none;

  15. }

  16. 

  17. .primary-nav__menu-item {

  18.   margin-bottom: 0.5625rem

  19. }

  20. 

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

  22.     margin-bottom: 0;

  23.   }

  24. 

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

  26.     display: flex;

  27.     flex-wrap: wrap;

  28.     justify-content: space-between

  29.   }

  30. 

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

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

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

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

  35.     }

  36. 

  37. .primary-nav__menu-link {

  38.   flex-grow: 1;

  39.   text-decoration: none;

  40.   color: #0d1214;

  41.   font-size: 1.75rem;

  42.   font-weight: bold;

  43.   line-height: 2.25rem

  44. }

  45. 

  46. .primary-nav__menu-link:hover {

  47.     color: inherit;

  48.   }

  49. 

  50. .primary-nav__menu-link:focus {

  51.     outline: auto 2px #2494db;

  52.     outline-offset: 2px;

  53.   }

  54. 

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

  56.   padding-left: 0;

  57. }

  58. 

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

  60.   padding-right: 0;

  61. }

  62. 

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

  64.   padding-right: 0;

  65. }

  66. 

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

  68.   padding-left: 0;

  69. }

  70. 

  71. .primary-nav__menu-link--nolink {

  72.   padding-top: 0.5625rem;

  73.   padding-bottom: 0.5625rem;

  74.   color: #6e7172;

  75.   font-weight: normal;

  76. }

  77. 

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

  79.   padding-left: 0;

  80. }

  81. 

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

  83.   padding-right: 0;

  84. }

  85. 

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

  87.   padding-right: 0;

  88. }

  89. 

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

  91.   padding-left: 0;

  92. }

  93. 

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

  95.   text-align: left;

  96. }

  97. 

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

  99.   text-align: right;

  100. }

  101. 

  102. .primary-nav__menu-link--button {

  103.   position: relative;

  104.   padding-top: 0;

  105.   padding-bottom: 0;

  106.   cursor: pointer;

  107.   border: 0;

  108.   background: transparent

  109. 

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

  111. }

  112. 

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

  114.     padding-right: 3.375rem;

  115. }

  116. 

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

  118.     padding-left: 3.375rem;

  119. }

  120. 

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

  122.   }

  123. 

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

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

  126.       right: 0.5625rem;

  127. }

  128. 

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

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

  131.       left: 0.5625rem;

  132. }

  133. 

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

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

  136.       position: absolute;

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

  138.       width: 1.125rem;

  139.       height: 0;

  140.       content: "";

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

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

  143.     }

  144. 

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

  146.       transition: opacity 0.2s;

  147.       transform: rotate(90deg);

  148.     }

  149. 

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

  151.       opacity: 0;

  152.     }

  153. 

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

  155.   padding-left: 0;

  156. }

  157. 

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

  159.   padding-right: 0;

  160. }

  161. 

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

  163.   padding-right: 0;

  164. }

  165. 

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

  167.   padding-left: 0;

  168. }

  169. 

  170. .primary-nav__menu-link-inner {

  171.   position: relative;

  172.   display: inline-flex;

  173.   align-items: center;

  174.   padding-top: 0.5625rem;

  175.   padding-bottom: 0.5625rem

  176. }

  177. 

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

  179.     left: 0;

  180. }

  181. 

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

  183.     right: 0;

  184. }

  185. 

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

  187.     position: absolute;

  188.     bottom: 0;

  189.     width: 100%;

  190.     height: 0;

  191.     content: "";

  192.     transition: transform 0.2s;

  193.     transform: scaleX(0);

  194.     transform-origin: left;

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

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

  197.   }

  198. 

  199. .primary-nav__menu-link-inner:hover,

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

  201.     outline: 0

  202.   }

  203. 

  204. .primary-nav__menu-link-inner:hover:after, .primary-nav__menu-link-inner:focus:after {

  205.       transform: scaleX(1);

  206.     }

  207. 

  208. /*

  209.   Top level specific styles.

  210. */

  211. 

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

  213.   margin-left: 0;

  214. }

  215. 

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

  217.   margin-right: 0;

  218. }

  219. 

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

  221.   margin-right: 0;

  222. }

  223. 

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

  225.   margin-left: 0;

  226. }

  227. 

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

  229.   padding-left: 0;

  230. }

  231. 

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

  233.   padding-right: 0;

  234. }

  235. 

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

  237.   padding-right: 0;

  238. }

  239. 

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

  241.   padding-left: 0;

  242. }

  243. 

  244. .primary-nav__menu--level-1 {

  245.   margin-top: 0;

  246.   margin-bottom: 0;

  247.   padding-top: 0;

  248.   padding-bottom: 0;

  249. }

  250. 

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

  252.   position: relative;

  253.   display: flex;

  254.   letter-spacing: -1px;

  255. }

  256. 

  257. /*

  258.   Secondary menu specific styles.

  259. */

  260. 

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

  262.   margin-left: -1.125rem;

  263. }

  264. 

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

  266.   margin-right: -1.125rem;

  267. }

  268. 

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

  270.   padding-left: 2.8125rem;

  271. }

  272. 

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

  274.   padding-right: 2.8125rem;

  275. }

  276. 

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

  278.   border-left: solid 18px #2494db;

  279. }

  280. 

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

  282.   border-right: solid 18px #2494db;

  283. }

  284. 

  285. .primary-nav__menu--level-2 {

  286.   visibility: hidden;

  287.   overflow: hidden;

  288.   flex-basis: 100%;

  289.   max-height: 0;

  290.   margin-top: 0;

  291.   margin-bottom: 0;

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

  293.   opacity: 0

  294. }

  295. 

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

  297.     visibility: visible;

  298.     max-height: none;

  299.     margin-top: 1.6875rem;

  300.     opacity: 1;

  301.   }

  302. 

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

  304. 

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

  306.     margin-left: -3.375rem;

  307.   }

  308. 

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

  310.     margin-right: -3.375rem;

  311.   }

  312. 

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

  314.     padding-left: 3.375rem;

  315.   }

  316. 

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

  318.     padding-right: 3.375rem;

  319.   }

  320.   }

  321. 

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

  323.   font-size: 1rem;

  324.   font-weight: normal;

  325.   line-height: 1.125rem;

  326. }

  327. 

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

  329.     visibility: visible;

  330.     max-height: none;

  331.     opacity: 1;

  332.   }

  333. 

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

  335.       transform-origin: right;

  336.     }