|
27 | 27 | --color-hover-sub-menu: var(--color-white); |
28 | 28 | --color-background-sub-menu: var(--color-black); |
29 | 29 | --gap-dropdown: 1.6rem; |
30 | | - |
31 | 30 | list-style: none; |
32 | 31 | width: unset; |
33 | 32 | } |
|
56 | 55 | margin: 0; |
57 | 56 | padding: 0; |
58 | 57 | position: relative; |
59 | | - row-gap: .625rem; |
| 58 | + row-gap: 0.625rem; |
60 | 59 | } |
61 | 60 |
|
62 | 61 | // Navigation list item |
|
109 | 108 |
|
110 | 109 | // Let's make space for the nav-toggle/arrow |
111 | 110 | .menu-item.menu-item-has-children a { |
112 | | - transition: background-color .2s cubic-bezier(.19, 1, .22, 1); |
| 111 | + transition: background-color 0.2s cubic-bezier(0.19, 1, 0.22, 1); |
113 | 112 | } |
114 | 113 |
|
115 | 114 | .menu-item > a:hover, |
|
140 | 139 | .nav-primary > ul:first-of-type > .menu-item-has-children:focus::before, |
141 | 140 | .nav-primary > ul:first-of-type > .menu-item-has-children:hover::before { |
142 | 141 | transform: scale(1); |
143 | | - transition: all .2s cubic-bezier(.19, 1, .22, 1); |
| 142 | + transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1); |
144 | 143 | } |
145 | 144 |
|
146 | | - |
147 | 145 | // stop flash of submenus on page load, reduce CLS |
148 | 146 | // add progressive enhancement for no JS |
149 | 147 | .no-js { |
150 | | - |
151 | 148 | // pretend its out of viewport since we cant measure it |
152 | 149 | .sub-menu { |
153 | 150 | display: none; |
|
196 | 193 | padding-top: 0; |
197 | 194 | position: absolute; |
198 | 195 | top: 100%; |
199 | | - transition: all .2s cubic-bezier(.19, 1, .22, 1); |
| 196 | + transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1); |
200 | 197 | width: var(--width-sub-menu); |
201 | 198 | z-index: 9; |
202 | 199 |
|
|
279 | 276 | // Toggle icon dimensions on desktop |
280 | 277 | .dropdown-toggle svg { |
281 | 278 | height: var(--dropdown-toggle-size); |
282 | | - transition: all .35s cubic-bezier(.19, 1, .22, 1); |
| 279 | + transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1); |
283 | 280 | width: var(--dropdown-toggle-size); |
284 | 281 | } |
285 | 282 |
|
|
325 | 322 |
|
326 | 323 | // Smooth animation |
327 | 324 | // stylelint-disable-next-line selector-max-specificity, selector-max-class |
328 | | - .menu-item.menu-item-has-children .menu-item.menu-item-has-children.hover-intent > .dropdown-toggle svg, |
329 | | - .menu-item.menu-item-has-children .menu-item.menu-item-has-children:focus > .dropdown-toggle svg { |
| 325 | + .menu-item.menu-item-has-children |
| 326 | + .menu-item.menu-item-has-children.hover-intent |
| 327 | + > .dropdown-toggle |
| 328 | + svg, |
| 329 | + .menu-item.menu-item-has-children |
| 330 | + .menu-item.menu-item-has-children:focus |
| 331 | + > .dropdown-toggle |
| 332 | + svg { |
330 | 333 | transform: translateY(0%) rotate(90deg); |
331 | 334 | } |
332 | 335 |
|
|
0 commit comments