saas-platform/frontend/saas-web/app/view/home/Home.scss

$storage-warn-container-color: dynamic(#458fd2);
$unsend-sale-container-color: dynamic(#4caf50);
$unaudit-sale-container-color: dynamic(#9c27b0);
$unaudit-purc-container-color: dynamic(#e91e63);

.info-card-item {
    text-align: center;
    background: $lightest-color ;
    padding: 15px 10px !important;
    font-size: 24px;

     &.info-card-large-wrap {
        h2 {
            font-size: 36px;
            line-height: 36px;
        }

        span.x-fa {
            height: 60px;
            width: 60px;
            border-radius: 36px;
            color: $lightest-color;
            font-size: 30px;
            line-height: 60px;
            margin: 15px 0;

            &.fa-exclamation-triangle {
                background-color: $storage-warn-container-color;
            }

            &.fa-shopping-cart {
                background-color: $unsend-sale-container-color;
            }

            &.fa-check {
                background-color: $unaudit-sale-container-color;
            }

            &.fa-calendar-check-o {
                background-color: $unaudit-purc-container-color;
            }
        }

        .infodiv {
            font-size: 14px;
            line-height: 16px;
            margin-top: 15px;
        }
    }

    &.cornflower-blue:before {
        background: $storage-warn-container-color;
    }

    &.green:before {
        background: $unsend-sale-container-color;
    }

    &.magenta:before {
        background: $unaudit-sale-container-color;
    }

    &.orange:before {
        background: $unaudit-purc-container-color;
    }

    h2 {
        font-size: 30px;
        font-weight: normal;
        margin: 0;
        margin: 0;
        line-height: 32px;
    }

    div {
        line-height: 24px;
    }

    span {
        font-size: 24px;
        line-height: 24px;
    }
}

.info-card-item:before {
    width: 100%;
    position: absolute;
    height: 3px;
    content: "";
    top: 0;
    left: 0
}

.x-home-panel {

    &> .x-autocontainer-outerCt {
        display: block;

        &> .x-autocontainer-innerCt {
            display: block;
        }
    }
}

.x-home-box {
    border-radius: 2px;

    &>.x-panel-header {
        background-color: #fff;

        &>.x-box-inner {
            &>.x-box-target {
                &>.x-title {
                    &>.x-title-text {
                        font-size: 16px;
                        color: #505363;
                        padding-left: 10px;
            
                        &:before {
                            content: ' ';
                            position: absolute;
                            width: 4px;
                            height: 100%;
                            background: #34BAF6;
                            left: 0;
                            border-radius: 2px;
                        }
                    }
                }
            }
        }
    }
}

.x-home-chart {
    box-shadow: none;

    .x-panel-header-default {
        background-color: #fff;

        .x-panel-header-title-default > .x-title-icon-wrap-default > .x-title-icon-default,
        .x-panel-header-title-default > .x-title-text-default {
            color: #485465;
        }
    }
}

.x-responsivecolumn {
    padding: 0;
}

.big-100 {
    // width: 100%;
    @include responsivecolumn-item(100%);
}

.big-60 {
    // width: 60%;
    @include responsivecolumn-item(60%);
}

.big-50 {
    float: left;
    // width: 50%;
    @include responsivecolumn-item(50%);
}

.big-40 {
    float: left;
    // width: 40%;
    @include responsivecolumn-item(40%);
}

.big-33 {
    float: left;
    // width: 33.33%;
    @include responsivecolumn-item(33.33%);
}

.big-20 {
    float: left;
    // width: 20%;
    @include responsivecolumn-item(20%);
}

//--------------------------------------------------------
// And classes for small-size responsive items

 .x-responsivecolumn-small {
     > .small-100 {
        float: left;
        // width: 100%;
        @include responsivecolumn-item(100%);
     }

     > .small-50 {
        float: left;
        // width: 50%;
        @include responsivecolumn-item(50%);
     }
}