src/components/Section/Package/SubmissionStatus.scss
.submission-status {
margin-bottom: 4rem;
.progress-container {
display: table;
table-layout: fixed;
margin-bottom: 4.1rem;
width: 100%;
max-width: 64rem;
@media only screen and (max-width: 1000px) {
max-width: 100%;
}
.review-icon {
display: table-cell;
width: 7.5rem;
height: 109px;
img {
transition: opacity 0.1s;
&.opacity-1 {
opacity: 1;
}
&.opacity-0 {
opacity: 0;
}
}
}
.review-icon img {
width: 7rem;
opacity: 1;
position: absolute;
}
.review-icon .transition {
transition: opacity 0.3s;
}
.progress-outline {
display: table-cell;
position: relative;
width: 82%;
height: 2rem;
border-radius: 4px;
vertical-align: middle;
.progress-default {
background-color: #ffffff;
}
.progress {
height: 2rem;
width: 0;
background-color: $eapp-grey-darker;
border-radius: 4px;
}
.progress.transition {
transition: width 1s;
}
}
.icon-container {
display: table-cell;
vertical-align: middle;
.icon {
width: 4.7rem;
height: 4.7rem;
display: inline-block;
position: relative;
left: -0.6rem;
svg {
transition: transform 0.1s;
}
.scale-up {
svg {
transform: scale(1);
}
}
.scale-down {
svg {
transform: scale(0);
}
}
}
.icon svg {
fill: $eapp-grey-darker;
position: absolute;
}
}
}
}
.submission-status.valid {
.progress-container {
.progress-outline .progress-default .progress {
background-color: $eapp-green;
}
.icon-container .icon svg {
fill: $eapp-green;
}
}
}
.submission-status.invalid {
.progress-container {
.progress-outline .progress-default .progress {
background-color: $eapp-red;
}
.icon-container .icon svg {
fill: $eapp-red;
}
}
}
@media all and (max-width: 1000px) {
.submission-status .progress-container {
display: block;
}
.submission-status .progress-container .progress-outline {
width: 68%;
}
}