Team Milestones
<div class="team-milestones">
<div class="team-milestones__header">
<h3 class="team-milestones__title">TITLE</h3>
</div>
<div class="team-milestones-group team-milestones-group--milestones">
<ul class="team-list">
<li class="team-list__item">
<div class="team-list__avatar">
<img src="/images/placeholder/40x40.png" alt="" class="team-list__image" />
</div>
<div class="team-list__content">
<div class="team-list__name">FirstName LastName</div>
<div class="team-list__details">Milestone Title</div>
<div class="team-list__actions">
<a href="" class="team-list__action">Link Title</a>
</div>
</div>
</li>
<li class="team-list__item">
<div class="team-list__avatar">
<img src="/images/placeholder/40x40.png" alt="" class="team-list__image" />
</div>
<div class="team-list__content">
<div class="team-list__name">FirstName LastName</div>
<div class="team-list__details">Milestone Title</div>
<div class="team-list__actions">
<a href="" class="team-list__action">Link Title</a>
</div>
</div>
</li>
<li class="team-list__item">
<div class="team-list__avatar">
<img src="/images/placeholder/40x40.png" alt="" class="team-list__image" />
</div>
<div class="team-list__content">
<div class="team-list__name">FirstName LastName</div>
<div class="team-list__details">Milestone Title</div>
<div class="team-list__actions">
<a href="" class="team-list__action">Link Title</a>
</div>
</div>
</li>
<li class="team-list__item">
<div class="team-list__avatar">
<img src="/images/placeholder/40x40.png" alt="" class="team-list__image" />
</div>
<div class="team-list__content">
<div class="team-list__name">FirstName LastName</div>
<div class="team-list__details">Milestone Title</div>
<div class="team-list__actions">
<a href="" class="team-list__action">Link Title</a>
</div>
</div>
</li>
</ul>
</div>
<div class="team-milestones-group team-milestones-group--my-team">
<ul class="team-list">
<li class="team-list__item">
<div class="team-list__avatar">
<img src="/images/placeholder/40x40.png" alt="" class="team-list__image" />
</div>
<div class="team-list__content">
<div class="team-list__name">FirstName LastName</div>
</div>
</li>
<li class="team-list__item">
<div class="team-list__avatar">
<img src="/images/placeholder/40x40.png" alt="" class="team-list__image" />
</div>
<div class="team-list__content">
<div class="team-list__name">FirstName LastName</div>
</div>
</li>
<li class="team-list__item">
<div class="team-list__avatar">
<img src="/images/placeholder/40x40.png" alt="" class="team-list__image" />
</div>
<div class="team-list__content">
<div class="team-list__name">FirstName LastName</div>
</div>
</li>
<li class="team-list__item">
<div class="team-list__avatar">
<img src="/images/placeholder/40x40.png" alt="" class="team-list__image" />
</div>
<div class="team-list__content">
<div class="team-list__name">FirstName LastName</div>
</div>
</li>
<li class="team-list__item">
<div class="team-list__avatar">
<img src="/images/placeholder/40x40.png" alt="" class="team-list__image" />
</div>
<div class="team-list__content">
<div class="team-list__name">FirstName LastName</div>
</div>
</li>
</ul>
</div>
<div class="team-milestones__note">* Disclaimer text</div>
</div>
.team-milestones__header {
display: flex;
align-items: flex-end;
min-height: 11.2rem;
padding-right: 12.8rem;
background-image: linear-gradient(
to left,
rgba(#ffd400, 0.5),
rgba(#ffd400, 0.5) 3.2rem,
rgba(#ffd400, 1) 3.2rem,
rgba(#ffd400, 1) 6.4rem,
rgba(#ffd400, 0.5) 6.4rem,
rgba(#ffd400, 0.5) 9.6rem,
rgba(#ffd400, 1) 9.6rem,
rgba(#ffd400, 1) 12.8rem,
#e5a83b 12.8rem
);
background-repeat: no-repeat;
}
.team-milestones__title {
@include typeHeadline(true);
color: $color-base-white;
padding: 1.2rem;
margin-bottom: 0;
}
.team-milestones-group {
--item-height: 72px;
overflow: auto;
position: relative;
&.team-milestones-group--milestones {
height: calc(var(--item-height) * 3); // Height of 3 items
}
&.team-milestones-group--my-team {
border-top: 4px solid $color-yellow-light;
height: calc(var(--item-height) * 4); // Height of 4 items
}
}
.team-milestones__note {
padding-top: 1.6rem;
}
.team-list {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.team-list__item {
min-height: var(--item-height);
display: flex;
gap: 1.2rem;
padding: 0.8rem 1.2rem;
align-items: center;
.team-list &:nth-child(odd) {
background-color: $color-base-grey;
}
}
.team-list__avatar {
flex-basis: 40px;
}
.team-list__image {
border-radius: 50%;
}
.team-list__content {
flex: 1;
min-width: 0;
}
.team-list__name {
@include typeBody(true);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.team-list__details {
@include typeCaption;
}
.team-list__actions {
@include typeSmall(true);
}
.team-list__action {
&::after {
font-family: "FontAwesome";
content: " \f178";
display: inline;
}
}
// Shadows for scrolling elements
.scrolling-container {
overflow: auto;
height: 100%;
.shadow {
bottom: 0;
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
transition: all 0.2s ease-out;
}
&.is-scrolled-from-top {
.shadow--top {
box-shadow: 0 1rem 1rem -1rem rgba($color-base-black, 0.5) inset;
}
}
&.is-scrolled-from-bottom {
.shadow--bottom {
box-shadow: 0 -1rem 1rem -1rem rgba($color-base-black, 0.5) inset;
}
}
}