diff --git a/components/Header/index.js b/components/Header/index.js index b166d40..72db668 100644 --- a/components/Header/index.js +++ b/components/Header/index.js @@ -59,6 +59,7 @@ export default function Header(props: Props) { 0 ? false : true} /> hexa(props.theme.brand.default, 0.25)}; } - &:after { + &::after { content: ''; position: absolute; height: 100%; @@ -73,7 +72,10 @@ export const ProgressBar = styled.div` width: 100%; background: ${theme.border.default}; max-width: var(--progress); - transition: max-width ${theme.animations.default}; + transition: max-width ${theme.animations.default}, background ${theme.animations.default}; + } + &[disabled]::after { + background: ${theme.bg.default}; } `; @@ -93,6 +95,7 @@ export const ProgressLabel = styled.p` border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; white-space: nowrap; + ${Shadows.default}; ${Progression}:hover &, ${Progression}:focus &, @@ -100,7 +103,7 @@ export const ProgressLabel = styled.p` { visibility: visible; opacity: 1; - bottom: -100%; + bottom: -87.5%; } @media (max-width: 968px) {