<div class="acl-widget-container">
<div class="acl-widget-container__header">
<div class="acl-widget-container__header-title">
<i class="aforza-icons">acl_targets</i>
<label>Account balance</label>
</div>
<div class="acl-widget-container__header-action">
<div class="acl-widget-container__header-action-options">
<div class="acl-dropdown acl-dropdown__hyperlink acl-dropdown-demo-1" data-dropdown-label="Choose an item" style="width: 91px">
<div class="acl-dropdown__cta" data-active="false">
<div class="acl-dropdown__cta-label">Sort by:</div>
<div class="acl-dropdown__cta-link">
<span class="acl-select-dropdown__placeholder">A - Z</span>
</div>
<i class="aforza-icons">acl_drop_arrow</i>
</div>
</div>
</div>
<div class="acl-widget-container__header-divider"></div>
<div class="acl-widget-container__header-action-navigation">
<label>View</label>
</div>
</div>
</div>
<div class="acl-widget-container__content">
<div class="acl-widget-container__content-padded acl-widget-container__content-row">
<div class="acl-widget-container__content-column">
<label class="acl-widget-container__content-header">$1,234.00</label>
<label class="acl-widget-container__content-subheader">13/07/2022</label>
</div>
<div class="acl-widget-container__content-action">
<div class="acl-button__icon-button acl-button__icon-button--medium acl-button__icon-button--rounded-corners acl-button__icon-button--icon-colour-red acl-button__icon-button--flat acl-button__icon-button--background-colour-light-red acl-button__icon-size--small" data-enable-loading-spinner>
<i class="aforza-icons acl-button__icon-label"> acl_dashboard</i>
</div>
</div>
</div>
</div>
</div>
<div class="acl-widget-container">
<div class="acl-widget-container__header">
<div class="acl-widget-container__header-title">
<i class="aforza-icons">acl_targets</i>
<label>Account balance</label>
</div>
<div class="acl-widget-container__header-action">
<div class="acl-widget-container__header-action-options">
<div
class="acl-dropdown acl-dropdown__hyperlink acl-dropdown-demo-1"
data-dropdown-label="Choose an item"
style="width: 91px"
>
<div class="acl-dropdown__cta" data-active="false">
<div class="acl-dropdown__cta-label">Sort by:</div>
<div class="acl-dropdown__cta-link">
<span class="acl-select-dropdown__placeholder">A - Z</span>
</div>
<i class="aforza-icons">acl_drop_arrow</i>
</div>
</div>
</div>
<div class="acl-widget-container__header-divider"></div>
<div class="acl-widget-container__header-action-navigation">
<label>View</label>
</div>
</div>
</div>
<div class="acl-widget-container__content">
<div class="acl-widget-container__content-padded acl-widget-container__content-row">
<div class="acl-widget-container__content-column">
<label class="acl-widget-container__content-header">$1,234.00</label>
<label class="acl-widget-container__content-subheader">13/07/2022</label>
</div>
<div class="acl-widget-container__content-action">
<div
class="acl-button__icon-button acl-button__icon-button--medium acl-button__icon-button--rounded-corners acl-button__icon-button--icon-colour-red acl-button__icon-button--flat acl-button__icon-button--background-colour-light-red acl-button__icon-size--small"
data-enable-loading-spinner
>
<i class="aforza-icons acl-button__icon-label"> acl_dashboard</i>
</div>
</div>
</div>
</div>
</div>
/* No context defined. */
.acl-widget-container {
border-radius: 8px;
border: 1px solid rgba(213,213,213, 1);
background-color: rgba(255,255,255, 1);
&__header {
display: flex;
justify-content: space-between;
padding: 5px 10px 5px 5px;
border-radius: 8px 8px 0px 0px;
border-bottom: 1px solid #d5d5d5;
background-color: rgba(223,237,249, 1);
&-divider {
height: 20px;
width: 1px;
background: rgba(0,0,0, 0.5);
margin: 0px 15px;
}
&-title, &-action {
display: flex;
align-items: center;
}
&-title i {
margin-right: 5px;
color: #43749E;
}
&-title label {
color: rgba(0,0,0,0.75);
font-size: 12px;
font-weight: 600;
}
&-action-navigation {
cursor: pointer;
align-items: center;
display: flex;
label {
cursor: pointer;
color: rgba(37,84,126,1);
font-size: 12px;
font-weight: 400;
text-decoration: underline;
}
i {
color: #8892B4;
font-size: 14px;
}
}
}
&__content {
&-padded {
padding: 30px 15px;
}
&-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
&-column {
display: flex;
flex-direction: column;
gap: 5px;
}
&-header {
color: rgba(0,0,0,0.75);
font-size: 18px;
font-weight: 700;
}
&-subheader {
color: rgba(50,174,64,1);
font-size: 14px;
font-weight: 400;
}
}
}
No notes defined.