rfm style

rfm style

by oktaviardi pratama

HTML

<div class="rfm-grid-container">
        <div class="rfm-vaxis-name">Frequency Score</div>
        <div id="mainRFM" class="rfm-grid" style="display: grid;">
          <div data-rfm-grid="0" data-rfm-data="1" data-t="tooltip" data-original-title="Click on the segment to inspect" class="is-clickable">
            <div class="rfm-grid__info">
              <div class="rfm-label">Cannot Lose Them</div>
              <div class="rfm-count" data-rfm-count="1027">Users: 1,027 (1.78%)</div>
              <div class="rfm-money">Avg. Monetary value: 0</div>
            </div>
            <div data-rfm-vaxis="5">5</div>
          <div style="display: none;" class="rfm-type-details rfm-type-details-0b" data-label="Cannot Lose Them"><div style="padding:15px 15px 0px 15px; "><div class="flex-row flex-row--spaceBetween"><div><span class="ctChartLegend__swatch"></span><span class="rfm-detail-heading rfm-detail-heading--main">Cannot Lose Them</span></div><div class="rfm-close-btn js-close-overlay">×</div></div><div class="MT10 fs12 fw300 PB10 brdb">These users were active at one point in your app, but haven’t been back recently. Strong candidates to re-engage.</div><div class="PB10 PT10 brdb fs12 fw300 "><div style="display: flex; justify-content: space-between"><div>R (Last Activity)</div><div>Aug 20, 2020</div></div><div style="display: flex; justify-content: space-between"><div>F (Activity Count)</div><div>&gt; 5</div></div><div style="display: flex; justify-content: space-between">   <div>M (Monetary Value)</div>   <div>0   </div></div></div></div><div class=" PA15 fs12 fw300"><div class="rfm-detail-heading MB5 rfm-detail-heading--main">Reachability on channels</div><div style="display: flex; justify-content:space-between"><div>Mobile Push</div><div>82 %</div></div><div style="display: flex; justify-content:space-between"><div>Email</div><div>90 %</div></div><div style="display: flex; justify-content:space-between"><div>SMS</div><div>76 %</div></div><div style="display:...

CSS

.rfm-main {
    width: 100%;
    height: 450px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

i.fa.fa-star{
    margin:1px;
    color:rgba(253,213,98,1);
}

i.fa.fa-star-o{
    margin:1px;
    color:rgba(253,213,98,1);
}

.rfm-area {
    display: flex;
    background-color: #ffffff;
    padding: 30px 30px 0px 0px;
}

.rfm-horizontal-axis{
    display: flex;
    justify-content: space-around;
    font-size: 11px;
}

.rfm-vertical-axis {
    width: 50px;
    white-space: nowrap;
    font-size: 11px;
}
.rfm-vertical-axis--rotated{

    transform: rotate(270deg);

}
.rfm-type {
    width:100%;
    height: 100%;
}

.rfm-count,
.rfm-money {
    font-weight:400;
    font-size:12px;
    color:#ffffff;
    line-height: 1;
    letter-spacing: 0.25px;
}

.rfm-count {
    margin-bottom: 5px;
}

.rfm-label {
    font-weight:500;
    font-size:15px;
    padding-right: 15px;
    color:#ffffff;
    margin-bottom: 10px;
}

.rfm-type-details {
    background-color: #383D54;
    width:230px;
    z-index:99;
    display:none;
    position:absolute;
    color:#ffffff;
    font-size: 12px;
    border-radius: 4px;
    line-height: 1.5;
    cursor: initial;
    text-align: left;
}
.rfm-detail-heading {
    font-size: 11px;
}

.rfm-detail-heading--main {
    font-size: 13px;
    font-weight: 600;
}

.rfm-type-details-0b:before {
    content: ' ';
    border-bottom: 13px solid transparent;
    border-top: 13px solid transparent;
    border-right: 10px solid #383D54;
    position: absolute;
    right: 100%;
    top:6%;
}

.rfm-type-details-0a:after {
    content: ' ';
    border-bottom: 13px solid transparent;
    border-top: 13px solid transparent;
    border-left: 10px solid #383D54;
    position: absolute;
    left: 100%;
    top: 6%;
}

.rfm-type-details-2b:before {
    content: ' ';
    border-bottom: 13px solid transparent;
    border-top: 13px solid transparent;
    border-right:...

JavaScript

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", () => {
  banner.toggleClass("alt")
})