|
@@ -9,11 +9,10 @@
|
|
|
>
|
|
|
<div
|
|
|
:class="
|
|
|
- item.exists == true
|
|
|
- ? selectStepIndex == index
|
|
|
- ? 'stepBox stepBoxHover'
|
|
|
- : 'stepBox'
|
|
|
- : 'stepBox stepExistsHover'
|
|
|
+ item.exists == true ? selectStepIndex == index ? 'stepBox stepBoxHover' :
|
|
|
+ (item.opComplete == true ? 'stepBox stepCompleteHover' : item.bugExists == true ? 'stepBox stepBugHover' : 'stepBox') : (item.opComplete == true ?
|
|
|
+ 'stepBox stepExistsCompleteHover' :
|
|
|
+ item.bugExists == true ? 'stepBox stepExistsBugHover' : 'stepBox stepExistsHover')
|
|
|
"
|
|
|
>
|
|
|
<div style="display: flex; align-items: center">
|
|
@@ -215,6 +214,30 @@ onBeforeUnmount(() => {
|
|
|
animation-duration: $animation-duration;
|
|
|
}
|
|
|
|
|
|
+.stepCompleteHover {
|
|
|
+ box-shadow: 0px 0px 0px 0px;
|
|
|
+ background-color: #62bb49;
|
|
|
+ animation-name: bodyHover;
|
|
|
+ animation-duration: $animation-duration;
|
|
|
+}
|
|
|
+.stepExistsCompleteHover {
|
|
|
+ box-shadow: 0px 0px 0px 0px;
|
|
|
+ background-color: #587c4e;
|
|
|
+ animation-name: bodyHover;
|
|
|
+ animation-duration: $animation-duration;
|
|
|
+}
|
|
|
+.stepBugHover {
|
|
|
+ box-shadow: 0px 0px 0px 0px;
|
|
|
+ background-color: #f56e6e;
|
|
|
+ animation-name: bodyHover;
|
|
|
+ animation-duration: $animation-duration;
|
|
|
+}
|
|
|
+.stepExistsBugHover {
|
|
|
+ box-shadow: 0px 0px 0px 0px;
|
|
|
+ background-color: #7e2121;
|
|
|
+ animation-name: bodyHover;
|
|
|
+ animation-duration: $animation-duration;
|
|
|
+}
|
|
|
.stepExistsHover {
|
|
|
background-color: grey;
|
|
|
animation-name: stepHover;
|