From 8dd89fd6b766c46e5dcffa381c0dc9e38174cf46 Mon Sep 17 00:00:00 2001
From: Sandeep Chauhan <sandeepsajan0@gmail.com>
Date: Mon, 16 Oct 2023 14:27:37 +0530
Subject: [PATCH] Update status bar to show statuses without hover (#3586)
Status Bar with latest designs.
The above status bars are from different submissions so don't get
confused with their status steps. The only change is that the statuses
are visible in the latest one while in the old one user has to hover
over every dot to know its status.
---
.../sass/apply/components/_status-bar.scss | 32 +++++++++++--------
1 file changed, 18 insertions(+), 14 deletions(-)
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 c39210ab5..fbbdb8c6f 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;
+ }
}
}
}
--
GitLab