<div class="acl-hierarchy-card__container">
<div class="acl-hierarchy-card acl-demo-card">
<div class="acl-hierarchy-card__detail">
<img class="acl-hierarchy-card__image" src="/assets/img/product-ex-1.png" />
<div class="acl-hierarchy-card__item-details">
<div class="acl-hierarchy-card__item-name">
Product Name and details
500ml (20 Pack)
</div>
<div class="acl-hierarchy-card__item-info">
B&J-34671
</div>
</div>
</div>
<div class="acl-hierarchy-card__item-cta">
<div class="acl-hierarchy-card__item-expand-cta">
<div class="acl-hierarchy-card__item-expand-cta-label">View</div>
</div>
<div class="acl-hierarchy-card__item-close-cta">
<i class="aforza-icons animated fadeIn">acl_close_big</i>
</div>
</div>
<div class="acl-hierarchy-card__item-expanded-content">
<div style="padding: 10px 0">
<section class="acl-tabs">
<input class="acl-tab__input" id="tab-one" type="radio" name="grp" checked="checked" />
<label class="acl-tab__label acl-tab__label--grey acl-tab__label--no-padding acl-tab__label--margin-right-small" for="tab-one">Details</label>
<div class="acl-tab__content acl-tab__content--small acl-tab__content--small-margin">
<h2>Description</h2>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<input class="acl-tab__input" id="tab-two" type="radio" name="grp" />
<label class="acl-tab__label acl-tab__label--grey acl-tab__label--no-padding acl-tab__label--margin-right-small" for="tab-two">Attributes</label>
<div class="acl-tab__content acl-tab__content--no-margin">
<img src="https://placeimg.com/640/480/arch" alt="Dummy Image" />
</div>
<input class="acl-tab__input" id="tab-three" type="radio" name="grp" />
<label class="acl-tab__label acl-tab__label--grey acl-tab__label--no-padding acl-tab__label--margin-right-small" for="tab-three">Resources</label>
<div class="acl-tab__content acl-tab__content--small acl-tab__content--small-margin">
Coming soon.
</div>
</section>
</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>
<script>
const demoCardEl = document.querySelector('.acl-demo-card');
new acl.ACLHierarchy(demoCardEl);
demoCardEl.addEventListener('openHierarchyCard', function(e) {
console.log('Opened');
console.log(e.detail);
});
demoCardEl.addEventListener('closeHierarchyCard', function(e) {
console.log('Closed');
console.log(e.detail);
});
</script>
<div class="acl-hierarchy-card__container">
<div class="acl-hierarchy-card acl-demo-card">
<div class="acl-hierarchy-card__detail">
<img class="acl-hierarchy-card__image" src="/assets/img/product-ex-1.png" />
<div class="acl-hierarchy-card__item-details">
<div class="acl-hierarchy-card__item-name">
Product Name and details
500ml (20 Pack)
</div>
<div class="acl-hierarchy-card__item-info">
B&J-34671
</div>
</div>
</div>
<div class="acl-hierarchy-card__item-cta">
<div class="acl-hierarchy-card__item-expand-cta">
<div class="acl-hierarchy-card__item-expand-cta-label">View</div>
</div>
<div class="acl-hierarchy-card__item-close-cta">
<i class="aforza-icons animated fadeIn">acl_close_big</i>
</div>
</div>
<div class="acl-hierarchy-card__item-expanded-content">
<div style="padding: 10px 0">
<section class="acl-tabs">
<input class="acl-tab__input" id="tab-one" type="radio" name="grp" checked="checked" />
<label
class="acl-tab__label acl-tab__label--grey acl-tab__label--no-padding acl-tab__label--margin-right-small"
for="tab-one">Details</label>
<div class="acl-tab__content acl-tab__content--small acl-tab__content--small-margin">
<h2>Description</h2>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<input class="acl-tab__input" id="tab-two" type="radio" name="grp" />
<label
class="acl-tab__label acl-tab__label--grey acl-tab__label--no-padding acl-tab__label--margin-right-small"
for="tab-two">Attributes</label>
<div class="acl-tab__content acl-tab__content--no-margin">
<img src="https://placeimg.com/640/480/arch" alt="Dummy Image" />
</div>
<input class="acl-tab__input" id="tab-three" type="radio" name="grp" />
<label
class="acl-tab__label acl-tab__label--grey acl-tab__label--no-padding acl-tab__label--margin-right-small"
for="tab-three">Resources</label>
<div class="acl-tab__content acl-tab__content--small acl-tab__content--small-margin">
Coming soon.
</div>
</section>
</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>
<script>
const demoCardEl = document.querySelector('.acl-demo-card');
new acl.ACLHierarchy(demoCardEl);
demoCardEl.addEventListener('openHierarchyCard', function (e) {
console.log('Opened');
console.log(e.detail);
});
demoCardEl.addEventListener('closeHierarchyCard', function (e) {
console.log('Closed');
console.log(e.detail);
});
</script>
/* 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.