diff --git a/hypha/static_src/src/sass/apply/components/_status-bar.scss b/hypha/static_src/src/sass/apply/components/_status-bar.scss index c39210ab5b08630a42a545135996482f6aa880fe..fbbdb8c6fdaab92f58192065a439209b13eca169 100644 --- a/hypha/static_src/src/sass/apply/components/_status-bar.scss +++ b/hypha/static_src/src/sass/apply/components/_status-bar.scss @@ -19,7 +19,6 @@ width: 100%; max-width: 800px; margin-right: 40px; - color: $color--white; } &__subheading { @@ -139,7 +138,7 @@ width: 20px; height: 20px; border-radius: 50%; - opacity: 0; + opacity: 1; transition: opacity $transition; .status-bar__item:first-of-type & { @@ -150,15 +149,12 @@ opacity: 1; } - // triangle &::before { - @include triangle(top, $color--error, 5px); - position: absolute; - bottom: -10px; - left: 5px; - - .status-bar__item--is-complete & { - @include triangle(top, $color--primary, 5px); + .status-bar__item--is-current & { + @include triangle(top, $color--error, 5px); + position: absolute; + bottom: -10px; + left: 5px; } } @@ -167,6 +163,7 @@ position: absolute; top: 30px; left: -25px; + text-align: center; display: block; padding: 5px 10px; font-size: 12px; @@ -196,13 +193,20 @@ } } + .status-bar__item & { + background-color: inherit; + color: $color--mid-grey; + } + .status-bar__item--is-complete & { - background-color: $color--primary; + background-color: inherit; + color: $color--primary; } - } - &:hover { - opacity: 1; + .status-bar__item--is-current & { + background-color: $color--tomato; + color: $color--white; + } } } }