app/assets/stylesheets/milestones.scss
$progress-bar-background: #fef0e2;
$progress-bar-color: #fea230;
.tab-milestones {
.progress-bars {
margin-bottom: $line-height * 2;
margin-top: $line-height;
h5 {
font-size: rem-calc(24);
}
.progress {
background: $progress-bar-background;
border-radius: rem-calc(6);
position: relative;
}
.progress-meter {
background: $progress-bar-color;
border-radius: rem-calc(6);
}
.progress-meter-text {
color: color-pick-contrast($progress-bar-background);
right: 12px;
text-align: right;
transform: translate(0%, -50%);
}
.milestone-progress .row {
margin-bottom: calc(#{$line-height} / 2);
}
}
}
.tab-milestones .timeline li {
margin: 0 auto;
position: relative;
width: 0;
@include breakpoint(small only) {
width: 100%;
}
&::before {
background: $budget;
border-radius: rem-calc(20);
content: "";
height: rem-calc(20);
position: absolute;
top: 5px;
transform: translateX(-50%);
width: rem-calc(20);
z-index: 2;
}
&::after {
background: $light-gray;
bottom: 100%;
content: "";
height: 100%;
position: absolute;
top: 25px;
width: 1px;
z-index: 1;
}
.milestone-content {
padding: calc(#{$line-height} / 6) calc(#{$line-height} / 2);
position: relative;
@include breakpoint(medium) {
width: rem-calc(300);
}
@include breakpoint(large) {
width: rem-calc(450);
}
h3 {
margin-bottom: 0;
}
.milestone-date {
color: $text-medium;
font-size: $small-font-size;
}
}
&:nth-child(odd) {
.milestone-content {
text-align: right;
@include breakpoint(medium) {
margin-left: rem-calc(-315);
}
@include breakpoint(large) {
margin-left: rem-calc(-465);
}
@include breakpoint(small only) {
left: 15px;
text-align: left;
}
}
}
&:nth-child(even) {
.milestone-content {
left: 15px;
}
}
}
.milestone-status {
@include background-with-text-contrast($budget);
border-radius: rem-calc(4);
display: inline-block;
margin-top: calc(#{$line-height} / 6);
padding: calc(#{$line-height} / 4) calc(#{$line-height} / 2);
}