<div class="acl-hierarchy-card__container acl-hierarchy-card__product-container acl-hierarchy-card__family-container">
<div class="acl-hierarchy-card__title">Family</div>
<div class="acl-hierarchy-card">
<div class="acl-hierarchy-card__detail acl-hierarchy-card__detail--column">
<div class="acl-hierarchy-card__item-details acl-hierarchy-card__item-details--row">
<img class="acl-hierarchy-card__image acl-hierarchy-card__family-image" src="/assets/img/brand-ex-1.png" />
<div class="acl-hierarchy-card__family-name">
CIF Cleaning
</div>
</div>
</div>
<div class="acl-hierarchy-card__item-actions">
<div class="acl-hierarchy-card__add-item">
<i class="aforza-icons acl-hierarchy-card__add-item-icon">acl_add</i>
</div>
<div class="acl-hierarchy-card__toolbar">
<div class="acl-hierarchy-card__toolbar-items">
<div class="acl-hierarchy-card__toolbar-item">
<i class="aforza-icons">acl_collapse</i>
<!-- when implementing, you can switch the icon to the alternate -->
<!-- <i class="aforza-icons">acl_expand</i> -->
</div>
<div class="acl-hierarchy-card__toolbar-item acl-hierarchy-card__toolbar-item--delete">
<i class="aforza-icons">acl_delete</i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="acl-hierarchy-card__container acl-hierarchy-card__product-container acl-hierarchy-card__family-container">
<div class="acl-hierarchy-card__title">Family</div>
<div class="acl-hierarchy-card">
<div class="acl-hierarchy-card__detail acl-hierarchy-card__detail--column">
<div class="acl-hierarchy-card__item-details acl-hierarchy-card__item-details--row">
<img class="acl-hierarchy-card__image acl-hierarchy-card__family-image"
src="/assets/img/brand-ex-1.png" />
<div class="acl-hierarchy-card__family-name">
CIF Cleaning
</div>
</div>
</div>
<div class="acl-hierarchy-card__item-actions">
<div class="acl-hierarchy-card__add-item">
<i class="aforza-icons acl-hierarchy-card__add-item-icon">acl_add</i>
</div>
<div class="acl-hierarchy-card__toolbar">
<div class="acl-hierarchy-card__toolbar-items">
<div class="acl-hierarchy-card__toolbar-item">
<i class="aforza-icons">acl_collapse</i>
<!-- when implementing, you can switch the icon to the alternate -->
<!-- <i class="aforza-icons">acl_expand</i> -->
</div>
<div class="acl-hierarchy-card__toolbar-item acl-hierarchy-card__toolbar-item--delete">
<i class="aforza-icons">acl_delete</i>
</div>
</div>
</div>
</div>
</div>
</div>
/* No context defined. */
.acl-hierarchy-card {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 10px 5px;
box-sizing: border-box;
border-radius: 12px;
background: $white;
border-left: 5px solid $teal;
border-right: 2px solid transparent;
margin: 2px 0;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.19);
position: relative;
cursor: pointer;
&--active {
padding: 15px 15px 25px 15px;
border-radius: 8px;
background-color: rgba(79, 200, 255, 0.15);
position: relative;
width: 215px;
&:after {
content: '';
background-color: $light-blue;
width: 100%;
height: 6px;
position: absolute;
bottom: -4px;
border-radius: 4px;
left: 0;
}
}
&:hover {
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.19);
border: 2px solid $teal;
margin: 0;
border-left: 5px solid $teal;
}
&:hover .acl-hierarchy-card__item-actions {
display: flex;
opacity: 1;
}
&:hover .acl-hierarchy-card__item-expand-cta {
display: flex;
opacity: 1;
}
&:hover .acl-hierarchy-card__item-expand-cta--hidden {
opacity: 0;
}
&__container {
width: 295px;
background-color: $teal;
border-radius: 16px 30px 30px;
&--active {
padding: 15px 15px 25px 15px;
border-radius: 8px;
background-color: rgba(79, 200, 255, 0.15);
position: relative;
&:after {
content: '';
background-color: $light-blue;
width: 100%;
height: 6px;
position: absolute;
bottom: -4px;
border-radius: 4px;
left: 0;
}
}
}
&__detail {
display: flex;
flex: 1;
align-items: center;
&--column {
flex-direction: column;
align-items: start;
}
}
&__quantity {
display: flex;
color: $black;
letter-spacing: 0;
&-title {
font-size: 10px;
font-weight: 600;
line-height: 16px;
flex: 1;
}
&-value {
font-size: 12px;
line-height: 17px;
}
}
&__image {
width: 35px;
height: 35px;
object-fit: cover;
}
&__item-name {
color: $black;
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
line-height: 16px;
height: 32px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin: 0 2.5px;
}
&__item-details {
flex: 1;
margin: 0px 5px;
max-width: 160px;
&--row {
display: flex;
width: 100%;
align-items: center;
margin: 0 2.5px 2.5px;
}
}
&__item-expanded-content {
transition: height 0.4s ease-in-out;
height: 0px;
overflow: hidden;
&--active {
display: flex;
height: 250px;
cursor: auto;
z-index: 1;
}
}
&__item-info {
color: rgba(0, 0, 0, 0.25);
font-size: 10px;
letter-spacing: 0;
line-height: 14px;
margin: 0 2.5px;
display: flex;
flex-direction: column;
}
&__item-actions {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
opacity: 0;
user-select: none;
}
&__item-expand-cta {
opacity: 0;
border-left: 1px solid #e8ebf8; // Candiate for ACL colour variables
height: 50px;
padding: 0 25px;
justify-content: center;
align-items: center;
color: $blue;
font-size: 10px;
letter-spacing: 0;
line-height: 14px;
&--hidden {
opacity: 0;
}
}
&__item-cta {
z-index: 1;
}
&__item-expand-cta-label {
&:hover {
text-decoration: underline;
}
}
&__item-close-cta {
display: none;
position: absolute;
top: 10px;
right: 10px;
i {
color: #cacfe2; // Candiate for ACL colour variables
font-size: 12px;
user-select: none;
}
&--show {
display: flex;
}
}
&__toolbar {
display: flex;
position: absolute;
bottom: -15px;
left: -7px;
width: 100%;
justify-content: center;
}
&__toolbar-item {
display: flex;
align-items: center;
min-width: 30px;
i {
color: #8892b4;
font-size: 11px;
}
&--delete {
i {
color: #8892b4;
font-size: 20px;
}
}
&:hover {
background-color: rgba(0, 0, 0, 0.05);
}
}
&__toolbar-items {
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);
background: $white;
border: 1px solid #e8ebf8; // Candiate for ACL colour variables
border-radius: 6px;
display: flex;
div {
border-right: 1px solid #f7f6fb; // Candiate for ACL colour variables
padding: 2px 0;
display: flex;
justify-content: center;
&:last-child {
border-right: none;
}
}
}
&__add-item {
right: -7px;
height: 100%;
display: flex;
position: absolute;
align-items: center;
}
&__add-item-icon {
color: $teal;
background: $white;
font-size: 11px;
border: 1px solid $teal;
border-radius: 50%;
padding: 5px;
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);
&:hover {
background: $teal;
color: $white;
}
}
&__product-container {
width: 215px;
background-color: $teal;
border-radius: 12px 12px 30px;
&--active {
padding: 15px 15px 20px 15px;
}
}
&__title {
color: rgba(0, 0, 0, 0.5);
font-size: 10px;
font-weight: 600;
letter-spacing: 0;
line-height: 14px;
text-transform: uppercase;
margin-left: 10px;
padding: 2px 0;
}
&__account-name {
font-size: 12px;
font-weight: bold;
letter-spacing: 0;
line-height: 17px;
margin: 0 2.5px 5px;
}
&__account {
min-height: 73px;
margin: 0;
}
&__family-container {
.acl-hierarchy-card {
padding: 4px 5px;
max-height: 50px;
}
}
&__family-name {
font-size: 16px;
font-weight: 600;
letter-spacing: 0;
line-height: 19px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
&__family-image {
height: 35px;
margin-right: 10px;
width: unset;
object-fit: contain;
}
}
No notes defined.