1b1b5b5755
We were defining (for instance) white text against the `$brand` background. That meant that, if somebody customized the `$brand` color so it used a light color, they had to customize the text color as well in order to guarantee proper contrast between text and background colors. So we're using `color-pick-contrast` instead, which means we don't have to manually calculate whether white or black will be the color which makes the text more readable.
128 lines
2.2 KiB
SCSS
128 lines
2.2 KiB
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: $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: $line-height / 6 $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 {
|
|
background: $budget;
|
|
border-radius: rem-calc(4);
|
|
color: color-pick-contrast($budget);
|
|
display: inline-block;
|
|
margin-top: $line-height / 6;
|
|
padding: $line-height / 4 $line-height / 2;
|
|
}
|