<div class="acl-calendar-resources">
<div class="acl-calendar-resources__group-title">
Sales Representatives
</div>
<div class="acl-calendar-resource__items">
<div class="acl-accordion">
<div class="acl-accordion__panel">
<input type="checkbox" id="chck1" />
<label class="acl-accordion__label acl-calendar-resource__item" for="chck1">
<div class="acl-calendar-resource__details">
<img class="acl-calendar-resource__avatar" src="https://i.pravatar.cc/150?img=12" />
<div class="acl-calendar-resource__column">
<div class="acl-calendar-resource__title">
Chris Toby
</div>
<a class="acl-calendar-resource__link" href="">See agenda</a>
</div>
</div>
<div class="acl-accordion__cta acl-calendar-resource__cta"><i class="aforza-icons animated fadeIn">acl_arrow_right</i>
</div>
</label>
<div class="acl-accordion__panel-content acl-calendar-resource__schedule-panel">
<ul class="acl-calendar-resource__schedule-items">
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
</ul>
</div>
</div>
<div class="acl-accordion__panel">
<input type="checkbox" id="chck2" />
<label class="acl-accordion__label acl-calendar-resource__item" for="chck2">
<div class="acl-calendar-resource__details">
<img class="acl-calendar-resource__avatar" src="https://i.pravatar.cc/150?img=11" />
<div class="acl-calendar-resource__column">
<div class="acl-calendar-resource__title">
Francis Nash
</div>
<a class="acl-calendar-resource__link" href="">See agenda</a>
</div>
</div>
<div class="acl-accordion__cta acl-calendar-resource__cta"><i class="aforza-icons animated fadeIn">acl_arrow_right</i>
</div>
</label>
<div class="acl-accordion__panel-content acl-calendar-resource__schedule-panel">
<ul class="acl-calendar-resource__schedule-items">
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
</ul>
</div>
</div>
<div class="acl-accordion__panel">
<input type="checkbox" id="chck3" />
<label class="acl-accordion__label acl-calendar-resource__item" for="chck3">
<div class="acl-calendar-resource__details">
<img class="acl-calendar-resource__avatar" src="https://i.pravatar.cc/150?img=58" />
<div class="acl-calendar-resource__column">
<div class="acl-calendar-resource__title">
Dennis Jones
</div>
<a class="acl-calendar-resource__link" href="">See agenda</a>
</div>
</div>
<div class="acl-accordion__cta acl-calendar-resource__cta"><i class="aforza-icons animated fadeIn">acl_arrow_right</i>
</div>
</label>
<div class="acl-accordion__panel-content acl-calendar-resource__schedule-panel">
<ul class="acl-calendar-resource__schedule-items">
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
</ul>
</div>
</div>
<div class="acl-accordion__panel">
<input type="checkbox" id="chck4" />
<label class="acl-accordion__label acl-calendar-resource__item" for="chck4">
<div class="acl-calendar-resource__details">
<img class="acl-calendar-resource__avatar" src="https://i.pravatar.cc/150?img=41" />
<div class="acl-calendar-resource__column">
<div class="acl-calendar-resource__title">
Lucy Evans
</div>
<a class="acl-calendar-resource__link" href="">See agenda</a>
</div>
</div>
<div class="acl-accordion__cta acl-calendar-resource__cta"><i class="aforza-icons animated fadeIn">acl_arrow_right</i>
</div>
</label>
<div class="acl-accordion__panel-content acl-calendar-resource__schedule-panel">
<ul class="acl-calendar-resource__schedule-items">
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
</ul>
</div>
</div>
<div class="acl-accordion__panel">
<input type="checkbox" id="chck5" />
<label class="acl-accordion__label acl-calendar-resource__item" for="chck5">
<div class="acl-calendar-resource__details">
<img class="acl-calendar-resource__avatar" src="https://i.pravatar.cc/150?img=49" />
<div class="acl-calendar-resource__column">
<div class="acl-calendar-resource__title">
Janet James
</div>
<a class="acl-calendar-resource__link" href="">See agenda</a>
</div>
</div>
<div class="acl-accordion__cta acl-calendar-resource__cta"><i class="aforza-icons animated fadeIn">acl_arrow_right</i>
</div>
</label>
<div class="acl-accordion__panel-content acl-calendar-resource__schedule-panel">
<ul class="acl-calendar-resource__schedule-items">
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="acl-calendar-resources">
<div class="acl-calendar-resources__group-title">
Sales Representatives
</div>
<div class="acl-calendar-resource__items">
<div class="acl-accordion">
<div class="acl-accordion__panel">
<input type="checkbox" id="chck1" />
<label class="acl-accordion__label acl-calendar-resource__item" for="chck1">
<div class="acl-calendar-resource__details">
<img class="acl-calendar-resource__avatar" src="https://i.pravatar.cc/150?img=12" />
<div class="acl-calendar-resource__column">
<div class="acl-calendar-resource__title">
Chris Toby
</div>
<a class="acl-calendar-resource__link" href="">See agenda</a>
</div>
</div>
<div class="acl-accordion__cta acl-calendar-resource__cta"><i
class="aforza-icons animated fadeIn">acl_arrow_right</i>
</div>
</label>
<div class="acl-accordion__panel-content acl-calendar-resource__schedule-panel">
<ul class="acl-calendar-resource__schedule-items">
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
</ul>
</div>
</div>
<div class="acl-accordion__panel">
<input type="checkbox" id="chck2" />
<label class="acl-accordion__label acl-calendar-resource__item" for="chck2">
<div class="acl-calendar-resource__details">
<img class="acl-calendar-resource__avatar" src="https://i.pravatar.cc/150?img=11" />
<div class="acl-calendar-resource__column">
<div class="acl-calendar-resource__title">
Francis Nash
</div>
<a class="acl-calendar-resource__link" href="">See agenda</a>
</div>
</div>
<div class="acl-accordion__cta acl-calendar-resource__cta"><i
class="aforza-icons animated fadeIn">acl_arrow_right</i>
</div>
</label>
<div class="acl-accordion__panel-content acl-calendar-resource__schedule-panel">
<ul class="acl-calendar-resource__schedule-items">
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
</ul>
</div>
</div>
<div class="acl-accordion__panel">
<input type="checkbox" id="chck3" />
<label class="acl-accordion__label acl-calendar-resource__item" for="chck3">
<div class="acl-calendar-resource__details">
<img class="acl-calendar-resource__avatar" src="https://i.pravatar.cc/150?img=58" />
<div class="acl-calendar-resource__column">
<div class="acl-calendar-resource__title">
Dennis Jones
</div>
<a class="acl-calendar-resource__link" href="">See agenda</a>
</div>
</div>
<div class="acl-accordion__cta acl-calendar-resource__cta"><i
class="aforza-icons animated fadeIn">acl_arrow_right</i>
</div>
</label>
<div class="acl-accordion__panel-content acl-calendar-resource__schedule-panel">
<ul class="acl-calendar-resource__schedule-items">
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
</ul>
</div>
</div>
<div class="acl-accordion__panel">
<input type="checkbox" id="chck4" />
<label class="acl-accordion__label acl-calendar-resource__item" for="chck4">
<div class="acl-calendar-resource__details">
<img class="acl-calendar-resource__avatar" src="https://i.pravatar.cc/150?img=41" />
<div class="acl-calendar-resource__column">
<div class="acl-calendar-resource__title">
Lucy Evans
</div>
<a class="acl-calendar-resource__link" href="">See agenda</a>
</div>
</div>
<div class="acl-accordion__cta acl-calendar-resource__cta"><i
class="aforza-icons animated fadeIn">acl_arrow_right</i>
</div>
</label>
<div class="acl-accordion__panel-content acl-calendar-resource__schedule-panel">
<ul class="acl-calendar-resource__schedule-items">
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
</ul>
</div>
</div>
<div class="acl-accordion__panel">
<input type="checkbox" id="chck5" />
<label class="acl-accordion__label acl-calendar-resource__item" for="chck5">
<div class="acl-calendar-resource__details">
<img class="acl-calendar-resource__avatar" src="https://i.pravatar.cc/150?img=49" />
<div class="acl-calendar-resource__column">
<div class="acl-calendar-resource__title">
Janet James
</div>
<a class="acl-calendar-resource__link" href="">See agenda</a>
</div>
</div>
<div class="acl-accordion__cta acl-calendar-resource__cta"><i
class="aforza-icons animated fadeIn">acl_arrow_right</i>
</div>
</label>
<div class="acl-accordion__panel-content acl-calendar-resource__schedule-panel">
<ul class="acl-calendar-resource__schedule-items">
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
<li class="acl-calendar-resource__schedule-item">
<div class="acl-calendar-resource__title">
Summer Corner Stores
</div>
<div class="acl-calendar-resource__info">12 Stops</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
/* No context defined. */
.acl-calendar-resources {
&__group-title {
color: rgba(0, 0, 0, 0.75);
font-size: 11px;
font-weight: 600;
letter-spacing: 0;
line-height: 15px;
margin-bottom: 10px;
}
}
.acl-calendar-resource {
&__items {
max-width: 230px;
}
&__item {
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
cursor: pointer;
&:hover {
background-color: #f8f8fb;
}
&:hover .acl-calendar-resource__link {
opacity: 1;
height: auto;
}
&--active {
background-color: rgba(70, 204, 194, 0.15);
border-right: 3px solid #4fc8ff;
}
}
&__link {
color: #2888d6;
font-size: 8px;
letter-spacing: 0;
line-height: 11px;
transition: opacity 1s ease-out;
opacity: 0;
height: 0;
overflow: hidden;
}
&__column {
display: flex;
flex-direction: column;
justify-content: center;
}
&__details {
display: flex;
}
&__avatar {
margin: 0 10px;
vertical-align: middle;
height: 24px;
width: 24px;
border: 1px solid #ffffff;
border-radius: 50%;
}
&__title {
color: rgba(0, 0, 0, 0.75);
font-size: 12px;
letter-spacing: 0;
line-height: 15px;
display: flex;
align-items: center;
}
&__info {
color: rgba(0, 0, 0, 0.25);
font-size: 10px;
letter-spacing: 0;
line-height: 14px;
}
&__schedule-panel {
ul {
padding: 13px;
color: #4fc8ff;
list-style: none;
//border: 1px solid #4FC8FF;
}
}
&__schedule-items {
border-left: 1px solid #cacfe2;
margin: 0;
}
&__schedule-item {
display: flex;
flex-direction: column;
margin-bottom: 20px;
&:before {
display: inline-block;
//position: absolute;
content: '';
border-radius: 1rem;
margin-left: -22px;
height: 7px;
width: 7px;
margin-right: 0.5rem;
margin-bottom: -17px;
background-color: #4fc8ff;
border: 5px solid white;
}
}
&__cta {
margin-right: 14px;
i {
font-size: 7px;
color: #cacfe2;
}
}
}
No notes defined.