nav-primary-wide.pcss.css

Same filename in other branches
  1. 9 core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css
  2. 11.x core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css

Nav Primary (wide widths).

File

core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css

View source
  1. /**
  2. * @file
  3. * Nav Primary (wide widths).
  4. */
  5. @import "../../base/media-queries.pcss.css";
  6. body:not(.is-always-mobile-nav) {
  7. @media (--nav) {
  8. & .primary-nav__menu-item {
  9. flex-wrap: nowrap; /* Ensure that sub navigation toggle button doesn't wrap underneath link. */
  10. &.primary-nav__menu-item--has-children {
  11. & .primary-nav__menu-link--link,
  12. & .primary-nav__menu-link--nolink {
  13. flex-basis: auto;
  14. }
  15. /* Remove hover state if submenu exists. */
  16. & .primary-nav__menu-link--level-1 .primary-nav__menu-link-inner::after {
  17. content: none;
  18. }
  19. }
  20. }
  21. & .primary-nav__menu-link {
  22. letter-spacing: 0.02em;
  23. font-size: 16px;
  24. line-height: var(--sp1-5);
  25. &:focus {
  26. position: relative;
  27. outline: 0;
  28. &::before {
  29. position: absolute;
  30. top: 50%;
  31. left: 50%;
  32. width: calc(100% + var(--sp));
  33. height: var(--sp3);
  34. content: "";
  35. transform: translate(-50%, -50%);
  36. border: solid 2px var(--color--primary-50);
  37. border-radius: 4px;
  38. }
  39. }
  40. }
  41. & .primary-nav__menu-link--button {
  42. &.primary-nav__menu-link--has-children {
  43. overflow: visible; /* Necessary to view icon in IE11 */
  44. padding-inline-end: 9px;
  45. &:focus::before {
  46. width: calc(100% + var(--sp1-5));
  47. content: "";
  48. }
  49. &::before {
  50. content: none;
  51. }
  52. /* Chevron icon for desktop navigation. */
  53. &::after {
  54. position: absolute;
  55. inset-block-start: 50%;
  56. inset-inline-start: calc(100% - 3px);
  57. width: 8px;
  58. height: 8px;
  59. margin-block-start: -2px;
  60. transform: translateY(-50%) rotate(45deg);
  61. /* Intentionally not using CSS logical properties. */
  62. border-top: 0;
  63. border-right: solid 2px currentColor;
  64. border-bottom: solid 2px currentColor;
  65. }
  66. &[aria-expanded="true"]::after {
  67. opacity: 1;
  68. }
  69. }
  70. }
  71. & .primary-nav__menu-link-inner {
  72. padding-block: var(--sp2);
  73. padding-inline-start: 0;
  74. padding-inline-end: 0;
  75. &::after {
  76. transform-origin: center;
  77. border-top-width: var(--sp0-5);
  78. }
  79. }
  80. & .primary-nav__menu--level-1 {
  81. display: flex;
  82. align-items: stretch;
  83. margin-inline-end: var(--sp);
  84. }
  85. & .primary-nav__menu-item--level-1 {
  86. position: relative; /* Anchor secondary menu */
  87. display: flex;
  88. align-items: center;
  89. width: max-content;
  90. max-width: 200px;
  91. margin-block: 0;
  92. margin-inline-start: 0;
  93. margin-inline-end: 0;
  94. &:not(:last-child) {
  95. margin-inline-end: var(--sp2);
  96. }
  97. }
  98. & .primary-nav__menu--level-2 {
  99. position: absolute;
  100. z-index: 105; /* Appear above search container. */
  101. top: calc(100% - var(--sp0-5));
  102. left: 50%;
  103. visibility: hidden;
  104. overflow: auto;
  105. width: 250px;
  106. /* Ensure that long level-2 menus will never overflow viewport (focused
  107. * elements should always be in viewport per accessibility guidelines). */
  108. max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp));
  109. margin-block-start: 0;
  110. margin-inline-start: 0;
  111. padding-block: var(--sp3);
  112. padding-inline-start: var(--sp2);
  113. padding-inline-end: var(--sp2);
  114. transition: none;
  115. transform: translate(-50%, -20px);
  116. opacity: 0;
  117. /* Intentionally not using CSS logical properties. */
  118. border-top: solid var(--color--primary-50) var(--sp0-5);
  119. border-right: solid 1px transparent; /* Transparent borders useful for Windows High Contrast mode. */
  120. border-bottom: solid 1px transparent;
  121. border-left: solid 1px transparent;
  122. border-radius: 0 0 2px 2px;
  123. background: var(--color--white);
  124. box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08);
  125. &.is-active-menu-parent {
  126. visibility: visible;
  127. margin-block-start: 0;
  128. transform: translate(-50%, 0);
  129. opacity: 1;
  130. }
  131. }
  132. & .primary-nav__menu-link--level-2 {
  133. display: block;
  134. &:focus::before {
  135. top: 0;
  136. left: calc(var(--sp0-5) * -1);
  137. height: 100%;
  138. transform: none;
  139. }
  140. & .primary-nav__menu-link-inner {
  141. padding-block: var(--sp0-5);
  142. padding-inline-start: 0;
  143. padding-inline-end: 0;
  144. &::after {
  145. transform-origin: left; /* LTR */
  146. border-top-width: 3px;
  147. &:dir(rtl) {
  148. transform-origin: right;
  149. }
  150. }
  151. }
  152. }
  153. /**
  154. * Arrow is placed outside of submenu because the submenu has the
  155. * `overflow: hidden` CSS rule applied.
  156. */
  157. & .primary-nav__menu-🥕 {
  158. position: absolute;
  159. z-index: 105; /* Match level 2 menus. */
  160. top: calc(100% - var(--sp));
  161. left: 50%;
  162. visibility: hidden;
  163. width: 0;
  164. height: 0;
  165. transform: translate(-50%, -20px);
  166. opacity: 0;
  167. /* Intentionally not using CSS logical properties. */
  168. border-right: solid 10px transparent;
  169. border-bottom: solid 10px var(--color--primary-50);
  170. border-left: solid 10px transparent;
  171. &.is-active-menu-parent {
  172. visibility: visible;
  173. transform: translate(-50%, 0);
  174. opacity: 1;
  175. }
  176. }
  177. /**
  178. * When ensuring that long menus don't overflow viewport, we can give a
  179. * little extra room when the toolbar is fixed (and is shorter).
  180. */
  181. & .is-fixed .primary-nav__menu--level-2 {
  182. max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp) + var(--sp4));
  183. }
  184. }
  185. }
  186. /*
  187. * Only apply transition styles to menu when JS is loaded. This
  188. * works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189
  189. */
  190. html.js body:not(.is-always-mobile-nav) {
  191. @media (--nav) {
  192. & .primary-nav__menu--level-2,
  193. & .primary-nav__menu-🥕 {
  194. transition:
  195. visibility 0.2s,
  196. transform 0.2s,
  197. opacity 0.2s;
  198. }
  199. }
  200. }

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