diff --git a/.changeset/ten-parrots-battle.md b/.changeset/ten-parrots-battle.md new file mode 100644 index 000000000..c68df524c --- /dev/null +++ b/.changeset/ten-parrots-battle.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Adjust sizing of logo in sky nav diff --git a/src/components/sky-nav/sky-nav.scss b/src/components/sky-nav/sky-nav.scss index 6a8126dfb..b9523f87d 100644 --- a/src/components/sky-nav/sky-nav.scss +++ b/src/components/sky-nav/sky-nav.scss @@ -174,6 +174,7 @@ $_masthead-height-sm: ms.step(7); * around for visual balance. We could subtract this value from the container * padding, but it felt easier to understand the scope of the change to me * from this element. (Though now I'm second-guessing myself...) + * 3. ms.step(9) is used instead of ms.step(8) because ms.step(8) leads to a big jump at the large breakpoint */ .c-sky-nav__logo-object { display: block; /* 1 */ @@ -182,7 +183,18 @@ $_masthead-height-sm: ms.step(7); margin: (ms.step(-6) * -1); /* 2 */ transition: opacity transition.$slow ease.$out, transform transition.$quick ease.$out; - width: ms.step(8); + width: fluid.fluid-calc( + breakpoint.$s, + breakpoint.$l, + ms.step(7), + ms.step(9) /* 3 */ + ); + @media (min-width: breakpoint.$l) { + width: ms.step(8); + } + @media (max-width: breakpoint.$s) { + width: ms.step(7); + } /** * When the containing logo is hovered, scale up this element. Scaling this