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:hover .primary-nav__menu-link-inner:after { 200 transform: scaleX(1) 201 } 202 203/* 204 Top level specific styles. 205*/ 206 207[dir="ltr"] .primary-nav__menu--level-1 { 208 margin-left: 0; 209} 210 211[dir="rtl"] .primary-nav__menu--level-1 { 212 margin-right: 0; 213} 214 215[dir="ltr"] .primary-nav__menu--level-1 { 216 margin-right: 0; 217} 218 219[dir="rtl"] .primary-nav__menu--level-1 { 220 margin-left: 0; 221} 222 223[dir="ltr"] .primary-nav__menu--level-1 { 224 padding-left: 0; 225} 226 227[dir="rtl"] .primary-nav__menu--level-1 { 228 padding-right: 0; 229} 230 231[dir="ltr"] .primary-nav__menu--level-1 { 232 padding-right: 0; 233} 234 235[dir="rtl"] .primary-nav__menu--level-1 { 236 padding-left: 0; 237} 238 239.primary-nav__menu--level-1 { 240 margin-top: 0; 241 margin-bottom: 0; 242 padding-top: 0; 243 padding-bottom: 0; 244} 245 246.primary-nav__menu-link--level-1 { 247 position: relative; 248 display: flex; 249 letter-spacing: -1px; 250} 251 252/* 253 Secondary menu specific styles. 254*/ 255 256[dir="ltr"] .primary-nav__menu--level-2 { 257 margin-left: -1.125rem; 258} 259 260[dir="rtl"] .primary-nav__menu--level-2 { 261 margin-right: -1.125rem; 262} 263 264[dir="ltr"] .primary-nav__menu--level-2 { 265 padding-left: 2.8125rem; 266} 267 268[dir="rtl"] .primary-nav__menu--level-2 { 269 padding-right: 2.8125rem; 270} 271 272[dir="ltr"] .primary-nav__menu--level-2 { 273 border-left: solid 18px #2494db; 274} 275 276[dir="rtl"] .primary-nav__menu--level-2 { 277 border-right: solid 18px #2494db; 278} 279 280.primary-nav__menu--level-2 { 281 visibility: hidden; 282 overflow: hidden; 283 flex-basis: 100%; 284 max-height: 0; 285 margin-top: 0; 286 margin-bottom: 0; 287 transition: opacity 0.2s, visibility 0.2s, max-height 0.2s; 288 opacity: 0 289} 290 291.primary-nav__menu--level-2.is-active-menu-parent { 292 visibility: visible; 293 max-height: none; 294 margin-top: 1.6875rem; 295 opacity: 1; 296 } 297 298@media (min-width: 43.75rem) { 299 300[dir="ltr"] .primary-nav__menu--level-2 { 301 margin-left: -3.375rem; 302 } 303 304[dir="rtl"] .primary-nav__menu--level-2 { 305 margin-right: -3.375rem; 306 } 307 308[dir="ltr"] .primary-nav__menu--level-2 { 309 padding-left: 3.375rem; 310 } 311 312[dir="rtl"] .primary-nav__menu--level-2 { 313 padding-right: 3.375rem; 314 } 315 } 316 317.primary-nav__menu-link--level-2 { 318 font-size: 1rem; 319 font-weight: normal; 320 line-height: 1.125rem; 321} 322 323html:not(.js) .primary-nav__menu--level-2 { 324 visibility: visible; 325 max-height: none; 326 opacity: 1; 327 } 328 329[dir="rtl"] .primary-nav__menu-link-inner:after { 330 transform-origin: right; 331 } 332